@progress/kendo-theme-default 5.5.0 → 5.5.1-dev.2

package/scss/panelbar/_theme.scss

@@ -38,7 +38,7 @@
 
             // Hover
             > .k-link:hover,
-            > .k-link.k-state-hover ,
+            > .k-link.k-state-hover,
             > .k-link.k-hover {
                 @include fill(
                     $panelbar-header-hovered-text,
@@ -52,7 +52,7 @@
             > .k-link:focus,
             > .k-link.k-state-focus,
             > .k-link.k-focus,
-            > .k-link.k-state-focused ,
+            > .k-link.k-state-focused,
             > .k-link.k-focus {
                 @include fill(
                     $panelbar-header-focused-text,
@@ -65,7 +65,7 @@
 
             // Focus & Hover
             > .k-link:focus:hover,
-            > .k-link.k-state-focus.k-state-hover ,
+            > .k-link.k-state-focus.k-state-hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-header-hovered-focused-text,
@@ -76,7 +76,7 @@
             }
 
             // Selected
-            > .k-link.k-state-selected ,
+            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -94,7 +94,7 @@
             // Selected Hover
             > .k-link.k-state-selected:hover,
             > .k-link.k-selected:hover,
-            > .k-link.k-state-selected.k-state-hover ,
+            > .k-link.k-state-selected.k-state-hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-header-selected-hovered-text,
@@ -109,7 +109,7 @@
             > .k-link.k-selected:focus,
             > .k-link.k-state-selected.k-state-focus,
             > .k-link.k-selected.k-focus,
-            > .k-link.k-state-selected.k-state-focused ,
+            > .k-link.k-state-selected.k-state-focused,
             > .k-link.k-selected.k-focused {
                 @include fill(
                     $panelbar-header-selected-focused-text,
@@ -124,7 +124,7 @@
             > .k-link.k-selected:hover:focus,
             > .k-link.k-state-selected.k-state-hover.k-state-focus,
             > .k-link.k-selected.k-hover.k-state-focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focused ,
+            > .k-link.k-state-selected.k-state-hover.k-state-focused,
             > .k-link.k-selected.k-hover.k-state-focused {
                 @include fill(
                     $panelbar-header-selected-hovered-focused-text,
@@ -145,7 +145,7 @@
             > .k-item > .k-link.k-state-hover,
             > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
-            > .k-panelbar-item > .k-link.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-state-hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
                     $panelbar-item-hovered-text,
@@ -164,7 +164,7 @@
             > .k-panelbar-item > .k-link:focus,
             > .k-panelbar-item > .k-link.k-state-focus,
             > .k-panelbar-item > .k-link.k-focus,
-            > .k-panelbar-item > .k-link.k-state-focused ,
+            > .k-panelbar-item > .k-link.k-state-focused,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
                     $panelbar-item-focused-text,
@@ -180,7 +180,7 @@
             > .k-item > .k-link.k-state-focus.k-state-hover,
             > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-hovered-focused-text,
@@ -193,7 +193,7 @@
             // Selected
             > .k-item > .k-link.k-state-selected,
             > .k-item > .k-link.k-selected,
-            > .k-panelbar-item > .k-link.k-state-selected ,
+            > .k-panelbar-item > .k-link.k-state-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $panelbar-item-selected-text,
@@ -210,7 +210,7 @@
             > .k-item > .k-link.k-selected.k-hover,
             > .k-panelbar-item > .k-link.k-state-selected:hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-text,
@@ -231,7 +231,7 @@
             > .k-panelbar-item > .k-link.k-selected:focus,
             > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
             > .k-panelbar-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused ,
+            > .k-item > .k-link.k-state-selected.k-state-focused,
             > .k-item > .k-link.k-selected.k-focused {
                 @include fill(
                     $panelbar-item-selected-focused-text,
@@ -252,7 +252,7 @@
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover ,
+            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
             > .k-item > .k-link.k-selected.k-focused.k-state-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-focused-text,

package/scss/pivotgrid/_theme.scss

@@ -75,7 +75,7 @@
     // Selected state
     .k-pivotgrid-cell.k-state-selected,
     .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell ,
+    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
     .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
         @include fill (
             $pivotgrid-selected-text,

package/scss/progressbar/_layout.scss

@@ -26,7 +26,7 @@
 
 
         // Selection
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             border-width: 0;
             border-style: solid;
@@ -87,7 +87,7 @@
 
     // Horizontal
     .k-progressbar-horizontal {
-        width: 27em;
+        width: $progressbar-horizontal-width;
         height: $progressbar-height;
         grid-template-columns: 1fr;
         grid-template-rows: 100%;
@@ -97,7 +97,7 @@
             flex-direction: row;
         }
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             width: 0;
             width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -124,7 +124,7 @@
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-state-selected ,
+            > .k-state-selected,
             > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
@@ -149,7 +149,7 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             height: 0;
             height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -179,7 +179,7 @@
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-state-selected ,
+            > .k-state-selected,
             > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
@@ -204,7 +204,7 @@
 
         > .k-state-selected,
         > .k-selected,
-        > .k-state-selected > .k-progress-status-wrap ,
+        > .k-state-selected > .k-progress-status-wrap,
         > .k-selected > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
@@ -233,7 +233,7 @@
         display: -ms-inline-grid;
 
         > .k-progress-status-wrap,
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
@@ -243,7 +243,7 @@
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
 
-        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-column-align: end;
         }
@@ -252,15 +252,58 @@
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             -ms-grid-row-align: end;
         }
 
-        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-row-align: start;
         }
     }
 
 }
+
+@include exports("circular-progressbar/layout") {
+
+    .k-circular-progressbar {
+        display: inline-block;
+        text-align: left;
+        position: relative;
+    }
+
+    .k-circular-progressbar-surface {
+        height: 100%;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .k-circular-progressbar-scale {
+        fill: none;
+    }
+
+    .k-circular-progressbar-arc {
+        transform-box: fill-box;
+        transform-origin: center center;
+        transform: rotate(-90deg);
+        stroke-linecap: round;
+        fill: none;
+    }
+
+    .k-circular-progressbar-label {
+        position: absolute;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+
+}

package/scss/progressbar/_theme.scss

@@ -8,7 +8,7 @@
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
-        .k-state-selected ,
+        .k-state-selected,
         .k-selected {
             @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }
@@ -26,3 +26,16 @@
     }
 
 }
+
+@include exports("circular-progressbar/theme") {
+
+    .k-circular-progressbar-scale {
+        stroke: $kendo-circular-progressbar-scale-stroke;
+    }
+
+    .k-circular-progressbar-arc {
+        stroke: $kendo-circular-progressbar-arc-stroke;
+        transition: stroke .5s ease;
+    }
+
+}

package/scss/progressbar/_variables.scss

@@ -1,5 +1,6 @@
 // Progressbar
 $progressbar-height: 22px !default;
+$progressbar-horizontal-width: 100% !default;
 $progressbar-animation-timing: 1s linear infinite !default;
 $progressbar-border-width: 0px !default;
 $progressbar-font-family: $font-family !default;
@@ -22,3 +23,7 @@ $progressbar-indeterminate-border: $progressbar-border !default;
 $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $body-bg !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;

package/scss/radio/_layout.scss

@@ -169,7 +169,7 @@
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus ,
+        .k-radio.k-state-focus,
         .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 

package/scss/radio/_theme.scss

@@ -12,7 +12,7 @@
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover ,
+    .k-radio.k-state-hover,
     .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
@@ -24,7 +24,7 @@
 
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus ,
+    .k-radio.k-state-focus,
     .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
@@ -56,7 +56,7 @@
         );
     }
     .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-focus ,
+    .k-radio.k-checked.k-state-focus,
     .k-radio.k-checked.k-focus {
         @include fill( $border: $kendo-radio-focus-checked-border );
         @include box-shadow( $kendo-radio-focus-checked-shadow );

package/scss/rating/_theme.scss

@@ -4,7 +4,7 @@
         color: $component-text;
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
 
             .k-rating-item {
@@ -12,7 +12,7 @@
                     text-shadow: $rating-icon-focused-shadow;
                 }
 
-                &.k-state-selected > .k-icon ,
+                &.k-state-selected > .k-icon,
                 &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
@@ -23,19 +23,19 @@
     .k-rating-item {
         color: $rating-icon-text;
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             color: $rating-icon-selected-text;
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;

package/scss/scheduler/_layout.scss

@@ -441,7 +441,7 @@
             }
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -507,7 +507,7 @@
 
         // Hover
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
@@ -769,7 +769,7 @@
         .k-hover .k-task > .k-event-delete,
         .k-scheduler-content tr:hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
-        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
+        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
             visibility: visible;
         }
@@ -843,7 +843,7 @@
                 position: relative;
             }
 
-            td.k-state-selected ,
+            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }

package/scss/scheduler/_theme.scss

@@ -84,7 +84,7 @@
 
     .k-scheduler-layout td.k-state-selected,
     .k-scheduler-layout td.k-selected,
-    .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
+    .k-scheduler-layout .k-scheduler-cell.k-state-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
         background-color: rgba($selected-bg, .25);
     }
@@ -107,7 +107,7 @@
         );
         @include box-shadow( $scheduler-event-shadow );
 
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
@@ -118,7 +118,7 @@
             @include box-shadow( $scheduler-event-hover-shadow );
         }
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
@@ -188,7 +188,7 @@
         .k-scheduler-content tr.k-state-hover,
         .k-scheduler-content tr.k-hover,
         .k-scheduler-content .k-scheduler-row:hover,
-        .k-scheduler-content .k-scheduler-row.k-state-hover ,
+        .k-scheduler-content .k-scheduler-row.k-state-hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
                 $hovered-text,
@@ -202,7 +202,7 @@
         .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
+        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
             @include fill(
                 $scheduler-text,
@@ -212,13 +212,13 @@
         }
 
         // Selected
-        .k-scheduler-content tr.k-state-selected ,
+        .k-scheduler-content tr.k-state-selected,
         .k-scheduler-content tr.k-selected {
             background-color: rgba($selected-bg, .25);
         }
         .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
+        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
             background-color: $scheduler-bg;
         }
@@ -236,7 +236,7 @@
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
 
-        .k-state-selected .k-day-indicator ,
+        .k-state-selected .k-day-indicator,
         .k-selected .k-day-indicator {
             @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
         }

package/scss/scrollview/_theme.scss

@@ -49,7 +49,7 @@
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
 
         &:focus,
-        &.k-state-focus ,
+        &.k-state-focus,
         &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -60,7 +60,7 @@
         }
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -80,14 +80,14 @@
         }
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             box-shadow: $scrollview-pagebutton-shadow;
         }
     }
 
     .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-state-hover ,
+    .k-scrollview-nav > .k-link.k-state-hover,
     .k-scrollview-nav > .k-link.k-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }

package/scss/signature/_index.scss

@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../input/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/signature/_layout.scss

@@ -0,0 +1,63 @@
+@include exports("signature/layout") {
+
+    .k-signature {
+        width: $kendo-signature-width;
+        height: $kendo-signature-height;
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &.k-signature-maximized {
+            width: $kendo-signature-maximized-width;
+            height: $kendo-signature-maximized-height;
+
+            > .k-signature-line {
+                border-bottom-width: $kendo-signature-maximized-line-width;
+            }
+        }
+    }
+
+    .k-signature-actions {
+        display: flex;
+        width: min-content;
+        margin-inline-start: auto;
+        gap: $kendo-signature-actions-gap;
+        z-index: 2;
+    }
+
+    .k-signature-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+    }
+
+    .k-signature-line {
+        position: absolute;
+        z-index: 0;
+        border-bottom-width: $kendo-signature-line-width;
+        border-bottom-style: $kendo-signature-line-style;
+    }
+
+    // Sizes
+    @each $size, $size-props in $kendo-signature-sizes {
+        $_padding: map-get($size-props, padding);
+        $_line-size: map-get($size-props, line-size);
+        $_line-offset: map-get($size-props, line-offset);
+
+        .k-signature-#{$size} {
+            padding: $_padding;
+
+            .k-signature-line {
+                width: $_line-size;
+                bottom: $_line-offset;
+            }
+        }
+
+    }
+}

package/scss/signature/_theme.scss

@@ -0,0 +1,12 @@
+@include exports("signature/theme") {
+
+    // Solid signature
+    .k-signature {
+
+        .k-signature-line {
+            border-bottom-color: $kendo-signature-line-color;
+        }
+    }
+
+
+}

package/scss/signature/_variables.scss

@@ -0,0 +1,45 @@
+$kendo-signature-width: 250px !default;
+$kendo-signature-height: 84px !default;
+
+$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-height: 252px !default;
+
+$kendo-signature-padding: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
+$kendo-signature-padding-md: $kendo-signature-padding !default;
+$kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get($spacing, thin) !default;
+
+$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-color: rgba( $info, .24 ) !default;
+
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-sizes: (
+    sm: (
+        padding: $kendo-signature-padding-sm,
+        line-size: $kendo-signature-line-size-sm,
+        line-offset: $kendo-signature-line-bottom-offset-sm
+    ),
+    md: (
+        padding: $kendo-signature-padding-md,
+        line-size: $kendo-signature-line-size-md,
+        line-offset: $kendo-signature-line-bottom-offset-md
+    ),
+    lg: (
+        padding: $kendo-signature-padding-lg,
+        line-size: $kendo-signature-line-size-lg,
+        line-offset: $kendo-signature-line-bottom-offset-lg
+    )
+) !default;
+
+$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;

package/scss/slider/_layout.scss

@@ -44,7 +44,7 @@
         }
 
 
-        &.k-state-disabled ,
+        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,