Skip to content

Commit

Permalink
feat(progressbar): expose chunk-progressbar specific classes
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Changes to the following Progressbar classes:

* added `k-chunk-progressbar` class

* added `k-progressbar-chunks` class

* `k-item` class is replaced with `k-progressbar-chunk`
  • Loading branch information
@epetrow @joneff
epetrow authored and joneff committed Dec 12, 2022
1 parent 2b7a4bd commit 48bb6c0
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 57 deletions.
46 changes: 17 additions & 29 deletions packages/default/scss/progressbar/_layout.scss
View file
Expand Up @@ -37,21 +37,21 @@


// Chunks
> ul {
> .k-progressbar-chunks {
border-width: inherit;
border-style: inherit;
white-space: nowrap;
display: flex;
align-items: stretch;
flex: 1;
gap: 1px;
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.k-item {
.k-progressbar-chunk {
display: block;
border-width: 0;
border-style: solid;
border-color: transparent;
flex: 1;
}

}
Expand All @@ -72,11 +72,8 @@
&.k-progress-end { justify-content: flex-end; }
}
.k-progress-status {
padding: 0 ($spacer-x / 2);
padding-block-start: 0;
padding-block-end: 0;
padding-inline-start: ($spacer-x / 2);
padding-inline-end: ($spacer-x / 2);
padding-block: 0;
padding-inline: ($spacer-x / 2);
min-width: 10px;
text-align: center;
display: inline-block;
Expand All @@ -97,7 +94,6 @@
}

> .k-selected {
width: 0;
width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
flex-direction: row;

Expand All @@ -108,16 +104,9 @@


// Chunks
> ul {
> .k-progressbar-chunks {
flex-direction: row;
}
.k-item {}
.k-item + .k-item {
border-left-width: 1px;
border-inline-start-width: 1px;
border-inline-end-width: 0;
}


// Horizontal reverse
&.k-progressbar-reverse {
Expand All @@ -127,6 +116,9 @@
justify-self: flex-end;
}

> .k-progressbar-chunks {
flex-direction: row-reverse;
}
}
}

Expand All @@ -147,7 +139,6 @@
}

> .k-selected {
height: 0;
height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
flex-direction: column-reverse;
align-self: flex-end;
Expand All @@ -160,17 +151,10 @@


// Chunk
> ul {
flex-direction: column;
}
.k-item {}
.k-item + .k-item {
border-top-width: 1px;
border-block-start-width: 1px;
border-block-end-width: 0;
> .k-progressbar-chunks {
flex-direction: column-reverse;
}


// Vertical reverse
&.k-progressbar-reverse {
flex-direction: column;
Expand All @@ -179,6 +163,10 @@
flex-direction: column;
align-self: flex-start;
}

> .k-progressbar-chunks {
flex-direction: column;
}
}
}

Expand All @@ -187,7 +175,7 @@
.k-progressbar-indeterminate {
.k-progress-status-wrap,
.k-selected,
.k-item {
.k-progressbar-chunk {
display: none;
}
}
Expand Down
14 changes: 12 additions & 2 deletions packages/default/scss/progressbar/_theme.scss
View file
Expand Up @@ -11,9 +11,19 @@
.k-selected {
@include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
}
}

// Chunk progressbar
.k-chunk-progressbar {
// TODO uncomment for 2023 R1
// background-color: k-if-var( $progressbar-chunk-border, transparent );
background-color: transparent;
}
.k-progressbar-chunk {
background-color: $progressbar-bg;

.k-item {
border-color: $progressbar-chunk-border;
.k-selected {
background-color: $progressbar-fill-bg;
}
}

Expand Down
38 changes: 16 additions & 22 deletions packages/fluent/scss/progressbar/_layout.scss
View file
Expand Up @@ -40,22 +40,22 @@


// Chunks
> ul {
> .k-progressbar-chunks {
border-width: inherit;
border-style: inherit;
white-space: nowrap;
display: flex;
align-items: stretch;
flex: 1;
gap: 1px;
grid-column: 1 / -1;
grid-row: 1 / -1;
}

.k-item {
.k-progressbar-chunk {
display: block;
border-width: 0;
border-style: solid;
border-color: transparent;
flex: 1;
}
}

Expand Down Expand Up @@ -108,24 +108,21 @@


// Chunks
> ul {
> .k-progressbar-chunks {
flex-direction: row;
}

.k-item {}
.k-item + .k-item {
border-inline-start-width: var( --kendo-progressbar-item-border-width, #{$kendo-progressbar-item-border-width} );
border-inline-end-width: 0;
}


// Horizontal reverse
&.k-progressbar-reverse {

> .k-selected {
flex-direction: row-reverse;
justify-self: flex-end;
}

> .k-progressbar-chunks {
flex-direction: row-reverse;
}
}
}

Expand All @@ -150,7 +147,6 @@
}

> .k-selected {
height: 0;
height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
flex-direction: column-reverse;
align-self: flex-end;
Expand All @@ -167,16 +163,10 @@


// Chunk
> ul {
flex-direction: column;
}
.k-item {}
.k-item + .k-item {
border-block-start-width: var( --kendo-progressbar-item-border-width, #{$kendo-progressbar-item-border-width} );
border-block-end-width: 0;
> .k-progressbar-chunks {
flex-direction: column-reverse;
}


// Vertical reverse
&.k-progressbar-reverse {

Expand All @@ -188,6 +178,10 @@
flex-direction: column;
align-self: flex-start;
}

> .k-progressbar-chunks {
flex-direction: column;
}
}
}

Expand Down Expand Up @@ -219,7 +213,7 @@
.k-reset,
.k-progress-status-wrap,
.k-selected,
.k-item {
.k-progress-chunk {
display: none;
}

Expand Down
15 changes: 11 additions & 4 deletions packages/fluent/scss/progressbar/_theme.scss
View file
Expand Up @@ -40,10 +40,6 @@
);
}

.k-item {
border-color: var( --kendo-progressbar-chunk-border, #{$kendo-progressbar-chunk-border} );
}

&[disabled],
&:disabled,
&.k-disabled {
Expand All @@ -60,6 +56,17 @@
}
}

.k-progressbar.k-chunk-progressbar:not(.k-progressbar-indeterminate) {
background-color: k-if-var( $kendo-progressbar-chunk-border, transparent );
}
.k-progressbar-chunk {
background-color: var( --kendo-progressbar-bg, #{$kendo-progressbar-bg} );

.k-selected {
background-color: var( --kendo-progressbar-fill-bg, #{$kendo-progressbar-fill-bg} );
}
}

.k-progressbar-indeterminate {
@include fill(
var( --kendo-progressbar-indeterminate-text, #{$kendo-progressbar-indeterminate-text} ),
Expand Down

0 comments on commit 48bb6c0

Please sign in to comment.