@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/progressbar/_layout.scss

@@ -1,13 +1,12 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
+@use "./_variables.scss" as *;
+@use "../core/" as *;
 
 @mixin kendo-progressbar--layout {
 
     // Base
     .k-progressbar {
         @include border-radius( var( --kendo-progressbar-border-radius, #{$kendo-progressbar-border-radius} ) );
-        --kendo-progressbar-progress: 0;
+        --kendo-progressbar-value: 0;
         border-width: var( --kendo-progressbar-border-width, #{$kendo-progressbar-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -19,7 +18,7 @@
         vertical-align: middle;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -29,7 +28,7 @@
 
 
         // Selection
-        > .k-selected {
+        > .k-progressbar-value {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -40,22 +39,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;
         }
     }
 
@@ -96,36 +95,33 @@
             margin-block-start: var( --kendo-progressbar-offset-y, #{$kendo-progressbar-offset-y} );
         }
 
-        > .k-selected {
+        > .k-progressbar-value {
             width: 0;
-            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+            width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: row;
 
             > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
+                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
             }
         }
 
 
         // 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 {
+            > .k-progressbar-value {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
+
+            > .k-progressbar-chunks {
+                flex-direction: row-reverse;
+            }
         }
     }
 
@@ -149,15 +145,14 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-selected {
-            height: 0;
-            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+        > .k-progressbar-value {
+            height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: column-reverse;
             align-self: flex-end;
             align-items: flex-end;
 
             > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
+                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
             }
 
             .k-progress-status {
@@ -167,16 +162,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 {
 
@@ -184,10 +173,14 @@
                 flex-direction: column-reverse;
             }
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: column;
                 align-self: flex-start;
             }
+
+            > .k-progressbar-chunks {
+                flex-direction: column;
+            }
         }
     }
 
@@ -218,8 +211,8 @@
 
         .k-reset,
         .k-progress-status-wrap,
-        .k-selected,
-        .k-item {
+        .k-progressbar-value,
+        .k-progress-chunk {
             display: none;
         }
 
@@ -231,8 +224,8 @@
     // Blazor specific
     .telerik-blazor.k-progressbar-horizontal {
 
-        > .k-selected,
-        > .k-selected > .k-progress-status-wrap {
+        > .k-progressbar-value,
+        > .k-progressbar-value > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
     }

package/scss/progressbar/_theme.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-progressbar--theme {
 
@@ -33,17 +33,13 @@
 
             .k-selected {
                 @include fill(
-                    var( --kendo-progressbar-fill-text, #{$kendo-progressbar-fill-text} ),
-                    var( --kendo-progressbar-fill-bg, #{$kendo-progressbar-fill-bg} ),
-                    var( --kendo-progressbar-fill-border, #{$kendo-progressbar-fill-border} ),
-                    var( --kendo-progressbar-fill-gradient, #{$kendo-progressbar-fill-gradient} )
+                    var( --kendo-progressbar-value-text, #{$kendo-progressbar-value-text} ),
+                    var( --kendo-progressbar-value-bg, #{$kendo-progressbar-value-bg} ),
+                    var( --kendo-progressbar-value-border, #{$kendo-progressbar-value-border} ),
+                    var( --kendo-progressbar-value-gradient, #{$kendo-progressbar-value-gradient} )
                 );
             }
 
-            .k-item {
-                border-color: var( --kendo-progressbar-chunk-border, #{$kendo-progressbar-chunk-border} );
-            }
-
             &[disabled],
             &:disabled,
             &.k-disabled {
@@ -54,12 +50,23 @@
                 );
 
                 .k-selected {
-                    background-color: var( --kendo-progressbar-fill-disabled-bg, #{$kendo-progressbar-fill-disabled-bg} );
+                    background-color: var( --kendo-progressbar-value-disabled-bg, #{$kendo-progressbar-value-disabled-bg} );
                 }
             }
         }
     }
 
+    .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-value-bg, #{$kendo-progressbar-value-bg} );
+        }
+    }
+
     .k-progressbar-indeterminate {
         @include fill(
             var( --kendo-progressbar-indeterminate-text, #{$kendo-progressbar-indeterminate-text} ),

package/scss/progressbar/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Height of the progressbar.
 /// @group progressbar
@@ -59,27 +59,27 @@ $kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;
 
 /// Progress background color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-progressbar-value-bg: get-theme-color-var( primary-100 ) !default;
 /// Progress text color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-text: var( --kendo-component-text, initial ) !default;
+$kendo-progressbar-value-text: var( --kendo-component-text, initial ) !default;
 /// Progress border color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-border: $kendo-progressbar-fill-bg !default;
+$kendo-progressbar-value-border: $kendo-progressbar-value-bg !default;
 /// Progress background gradient of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-gradient: null !default;
+$kendo-progressbar-value-gradient: null !default;
 
 /// Progress status offset of the progressbar.
 /// @group progressbar
-$kendo-progressbar-offset-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-progressbar-offset-y: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical status offset of the progressbar.
 /// @group progressbar
 $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) !default;
 
 /// Progress background color of the disabled progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-disabled-bg: get-theme-color-var( primary-30 ) !default;
+$kendo-progressbar-value-disabled-bg: get-theme-color-var( primary-30 ) !default;
 
 /// Chunk order color of the progressbar.
 /// @group progressbar
@@ -102,10 +102,10 @@ $kendo-progressbar-indeterminate-gradient-horizontal: linear-gradient(270deg, ge
 $kendo-progressbar-indeterminate-gradient-vertical: linear-gradient(180deg, get-theme-color-var( neutral-30 ) 15%, get-theme-color-var( primary-100 ) 50%, get-theme-color-var( neutral-30 ) 85%) !default;
 /// Gradient size of the horizontal indeterminate progressbar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-animation-horizontal: 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal;
+$kendo-progressbar-indeterminate-animation-horizontal: 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal !default;
 /// Gradient size of the vertical indeterminate progressbar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-animation-vertical: 3s ease 0s infinite running progressbar-indeterminate-animation-vertical;
+$kendo-progressbar-indeterminate-animation-vertical: 3s ease 0s infinite running progressbar-indeterminate-animation-vertical !default;
 
 // Circular Progressbar
 /// Arc stroke color of the circular progressbar.
@@ -115,4 +115,4 @@ $kendo-circular-progressbar-arc-stroke: get-theme-color-var( primary-100 ) !defa
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
 
-$kendo-progressbar-item-border-width: map-get( $kendo-spacing, thin ) !default;
+$kendo-progressbar-item-border-width: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero

package/scss/progressbar/index.scss

@@ -6,9 +6,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/radio/_layout.scss

@@ -1,19 +1,18 @@
+@use "sass:map";
 @use "sass:math";
-@use "_variables.scss" as *;
-@use "../core/_variables.scss" as *;
-@use "../core/mixins/border-radius" as *;
-@use "../core/mixins/disabled" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-radio--layout() {
 
     .k-radio {
         @include border-radius( $kendo-radio-border-radius );
-        width: var( --INTERNAL-kendo-radio-width, #{ $kendo-radio-width } );
-        height: var( --INTERNAL-kendo-radio-height, #{ $kendo-radio-height } );
+        width: var( --INTERNAL--kendo-radio-width, 1em );
+        height: var( --INTERNAL--kendo-radio-height, 1em );
         margin: 0;
         padding: 0;
         line-height: initial;
-        border-width: var( --kendo-radio-border-width, #{ $kendo-radio-border-width });
+        border-width: var( --kendo-radio-border-width, #{$kendo-radio-border-width} );
         border-style: solid;
         outline: 0;
         box-sizing: border-box;
@@ -27,19 +26,34 @@
         cursor: pointer;
         -webkit-appearance: none;
 
-        &::before {
-            font-size: var( --INTERNAL-kendo-radio-font-size, #{ $kendo-radio-font-size } )
+        @if $kendo-radio-indicator-type == "image" {
+            background-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
         }
     }
 
 
     // Radio indicator
     .k-radio::before {
+        @if $kendo-radio-indicator-type == "pseudo" {
+            content: "";
+            width: var( --INTERNAL--kendo-radio-indicator-size, 1em );
+            height: var( --INTERNAL--kendo-radio-indicator-size, 1em );
+            border-width: 0;
+            border-radius: var( --kendo-radio-indicator-border-radius, #{$kendo-radio-indicator-border-radius} );
+            background-color: currentColor;
+            overflow: hidden;
+            transform: scale(0) translate(-50%, -50%);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
         @if $kendo-radio-indicator-type == "glyph" {
-            content: var( --kendo-radio-checked-glyph, #{ $kendo-radio-checked-glyph } );
+            content: var( --kendo-radio-checked-glyph, #{$kendo-radio-checked-glyph} );
             width: 1em;
             height: 1em;
-            font-family: var( --kendo-radio-glyph-font-family, #{ $kendo-radio-glyph-font-family } );
+            font-family: var( --kendo-radio-glyph-font-family, #{$kendo-radio-glyph-font-family} );
+            font-size: var( --INTERNAL--kendo-radio-glyph-size, 1em );
             line-height: 1;
             transform: scale(0) translate(-50%, -50%);
             overflow: hidden;
@@ -49,56 +63,46 @@
         }
     }
 
-    // Focus state
-    .k-radio:focus,
-    .k-radio.k-focus {
-        &::before {
-            content: '';
-            display: block;
-            position: absolute;
-            margin: -4px;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            border: 1px solid;
-        }
-    }
-
 
+    // Hover state
     .k-radio:hover,
     .k-radio.k-hover {
-        &:not(
-            .k-radio.k-disabled, .k-radio:disabled,
-            .k-radio.k-invalid, .k-radio:invalid
-        )::after {
-            content: "";
-            width: var( --INTERNAL-kendo-radio-checked-width, #{ $kendo-radio-checked-width } );
-            height: var( --INTERNAL-kendo-radio-checked-height, #{ $kendo-radio-checked-height } );
-            border-width: var( --INTERNAL-kendo-radio-checked-border-width, #{ $kendo-radio-checked-border-width } );
-            border-style: solid;
-            border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
-            box-sizing: border-box;
-            position: absolute;
-            top: var( --INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
-            left: var( --INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
+        @if $kendo-radio-indicator-type == "image" {
+            background-image: var( --kendo-radio-hover-image, #{ $kendo-radio-hover-image } );
         }
+
+        @if $kendo-radio-indicator-type == "pseudo" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+
+        @if $kendo-radio-indicator-type == "glyph" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+    }
+
+
+    // Focus state
+    .k-radio:focus,
+    .k-radio.k-focus {
+        outline-offset: $kendo-radio-focus-outline-offset;
     }
 
-    // Checked and Hover state
+
+    // Checked state
     .k-radio:checked,
     .k-radio.k-checked {
-        &::after {
-            content: "";
-            width: var( --INTERNAL-kendo-radio-checked-width, #{ $kendo-radio-checked-width } );
-            height: var( --INTERNAL-kendo-radio-checked-height, #{ $kendo-radio-checked-height } );
-            border-width: var( --INTERNAL-kendo-radio-checked-border-width, #{ $kendo-radio-checked-border-width } );
-            border-style: solid;
-            border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
-            box-sizing: border-box;
-            position: absolute;
-            top: var( --INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
-            left: var( --INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
+        @if $kendo-radio-indicator-type == "image" {
+            background-image: var( --kendo-radio-checked-image, #{ $kendo-radio-checked-image } );
+        }
+
+        @if $kendo-radio-indicator-type == "pseudo" {
+            &::before {
+                transform: scale(1) translate(-50%, -50%);
+            }
         }
 
         @if $kendo-radio-indicator-type == "glyph" {
@@ -109,6 +113,7 @@
     }
 
 
+    // Disabled state
     .k-radio:disabled:checked,
     .k-radio.k-disabled.k-checked {
         @if $kendo-radio-indicator-type == "image" {
@@ -212,8 +217,8 @@
     .k-ripple-container {
         .k-radio::after {
             content: "";
-            width: var( --INTERNAL-kendo-radio-ripple-width, #{ $kendo-radio-ripple-width } );
-            height: var( --INTERNAL-kendo-radio-ripple-height, #{ $kendo-radio-ripple-height } );
+            width: var( --INTERNAL--kendo-radio-ripple-width, 300% );
+            height: var( --INTERNAL--kendo-radio-ripple-height, 300% );
             display: block;
             position: absolute;
             left: 50%;
@@ -225,9 +230,10 @@
             transform-origin: center center;
         }
 
-        .k-radio:disabled::after,
-        .k-radio.k-disabled::after {
-            display: none;
+        .k-radio:focus,
+        .k-radio.k-focus {
+            box-shadow: none !important; // sass-lint:disable-line no-important
+            outline: none !important; // sass-lint:disable-line no-important
         }
 
         .k-radio:disabled::after,
@@ -239,38 +245,22 @@
 
     // Radio size
     @each $size, $size-props in $kendo-radio-sizes {
-        $_size: map-get( $size-props, size );
-        $_glyph-size: map-get( $size-props, glyph-size );
-        $_ripple-size: map-get( $size-props, ripple-size );
-        $_checked-border-width: map-get( $size-props, checked-border-width);
-        $_checked-position: map-get( $size-props, checked-position);
+        $_size: map.get( $size-props, size );
+        $_glyph-size: map.get( $size-props, glyph-size );
+        $_indicator-size: map.get( $size-props, indicator-size );
+        $_ripple-size: map.get( $size-props, ripple-size );
 
         .k-radio-#{$size} {
-            --INTERNAL-kendo-radio-width: #{ $_size };
-            --INTERNAL-kendo-radio-height: #{ $_size };
-
-            &::before {
-                --INTERNAL-kendo-radio-font-size: #{ $_glyph-size };
-            }
-        }
-
-        .k-radio-#{$size}.k-checked,
-        .k-radio-#{$size}:checked,
-        .k-radio-#{$size}.k-hover,
-        .k-radio-#{$size}:hover {
-            &::after {
-                --INTERNAL-kendo-radio-checked-width: #{math.div( $_size, 2 )};
-                --INTERNAL-kendo-radio-checked-height: #{math.div( $_size, 2 )};
-                --INTERNAL-kendo-radio-checked-border-width: #{ $_checked-border-width };
-                --INTERNAL-kendo-radio-checked-top: #{ $_checked-position };
-                --INTERNAL-kendo-radio-checked-left: #{ $_checked-position };
-            }
+            --INTERNAL--kendo-radio-width: #{$_size};
+            --INTERNAL--kendo-radio-height: #{$_size};
+            --INTERNAL--kendo-radio-glyph-size: #{$_glyph-size};
+            --INTERNAL--kendo-radio-indicator-size: #{$_indicator-size};
         }
 
         .k-ripple-container {
             .k-radio-#{$size}::after {
-                --INTERNAL-kendo-radio-ripple-width: #{ $_ripple-size };
-                --INTERNAL-kendo-radio-ripple-height: #{ $_ripple-size };
+                --INTERNAL--kendo-radio-ripple-width: #{ $_ripple-size };
+                --INTERNAL--kendo-radio-ripple-height: #{ $_ripple-size };
             }
         }
     }