@progress/kendo-theme-classic 4.43.1-dev.4 → 4.43.1-dev.8

package/modules/@progress/kendo-theme-default/scss/checkbox/_variables.scss

@@ -1,58 +1,118 @@
 // Checkbox
+
 $checkbox-size: map-get( $spacing, 4 ) !default;
 $checkbox-radius: map-get( $spacing, thin ) !default;
+/// Border width of checkbox.
+/// @group checkbox
 $checkbox-border-width: 1px !default;
-$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
-
-$checkbox-bg: $white !default;
-$checkbox-text: transparent !default;
-$checkbox-border: $base-border !default;
 
+/// Background color of checkbox.
+/// @group checkbox
+$checkbox-bg: $component-bg !default;
+/// Color of checkbox.
+/// @group checkbox
+$checkbox-text: null !default;
+/// Border color of checkbox.
+/// @group checkbox
+$checkbox-border: $component-border !default;
+
+/// Background color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-bg: null !default;
+/// Color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-text: null !default;
+/// Border color of hovered checkbox.
+/// @group checkbox
 $checkbox-hovered-border: null !default;
 
+/// Background color of checked checkbox.
+/// @group checkbox
 $checkbox-checked-bg: $primary !default;
+/// Color of checked checkbox.
+/// @group checkbox
 $checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+/// Border color of checked checkbox.
+/// @group checkbox
 $checkbox-checked-border: $checkbox-checked-bg !default;
 
+/// Background color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-bg: $checkbox-bg !default;
+/// Color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-text: $checkbox-checked-bg !default;
+/// Border color of indeterminate checkbox.
+/// @group checkbox
 $checkbox-indeterminate-border: $checkbox-border !default;
 
+/// Border color of focused checkbox.
+/// @group checkbox
 $checkbox-focused-border: null !default;
+/// Box shadow of focused checkbox.
+/// @group checkbox
 $checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+/// Border color of focused and checked checkbox.
+/// @group checkbox
 $checkbox-focused-checked-border: null !default;
+/// Box shadow of focused and checked checkbox.
+/// @group checkbox
 $checkbox-focused-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
 
+/// Background color of disabled checkbox.
+/// @group checkbox
 $checkbox-disabled-bg: null !default;
+/// Color of disabled checkbox.
+/// @group checkbox
 $checkbox-disabled-text: null !default;
+/// Border color of disabled checkbox.
+/// @group checkbox
 $checkbox-disabled-border: null !default;
 
+/// Background color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-bg: null !default;
+/// Color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-text: null !default;
+/// Border color of disabled and checked checkbox.
+/// @group checkbox
 $checkbox-disabled-checked-border: null !default;
 
+/// Background color of invalid checkbox.
+/// @group checkbox
 $checkbox-invalid-bg: null !default;
+/// Color of invalid checkbox.
+/// @group checkbox
 $checkbox-invalid-text: $invalid-text !default;
+/// Border color of invalid checkbox.
+/// @group checkbox
 $checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
-$checkbox-icon-type: glyph !default;
 
+/// Type of checkbox indicator.
+/// @group checkbox
+$checkbox-indicator-type: image !default;
+
+/// Glyph font family of checkbox indicator.
+/// @group checkbox
 $checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 $checkbox-glyph-size: 12px !default;
+/// Glyph of checkbox indicator.
+/// @group checkbox
 $checkbox-checked-glyph: "\e118" !default;
+/// Glyph of indeterminate checkbox indicator.
+/// @group checkbox
 $checkbox-indeterminate-glyph: "\e121" !default;
 
-$checkbox-checked-image: null !default;
-$checkbox-indeterminate-image: null !default;
-
-$checkbox-marker-checked-width: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-checked-height: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-indeterminate-width: ( $checkbox-size / 2 ) !default;
-$checkbox-marker-indeterminate-height: ( $checkbox-size / 2 ) !default;
+/// Image of checked checkbox indicator.
+/// @group checkbox
+$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+/// Image image of checked checkbox indicator.
+/// @group checkbox
+$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
@@ -60,14 +120,23 @@ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
-$checkbox-list-margin: 0px !default;
-$checkbox-list-padding: 0px !default;
+
+/// Spacing between items of horizontal checkbox list.
+/// @group checkbox
+$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+/// Horizontal padding of checkbox list items.
+/// @group checkbox
 $checkbox-list-item-padding-x: 0px !default;
+/// Vertical padding of checkbox list items.
+/// @group checkbox
 $checkbox-list-item-padding-y: $list-item-padding-y !default;
-$checkbox-list-horizontal-item-margin-x: 32px !default;
 
 
 // Checkbox ripple
 $checkbox-ripple-size: $checkbox-size * 3 !default;
-$checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + 2 * #{$checkbox-border-width})) !default;
-$checkbox-ripple-opacity: .3 !default;
+/// Background color of checkbox ripple.
+/// @group checkbox
+$checkbox-ripple-bg: $checkbox-checked-bg !default;
+/// Opacity of checkbox ripple.
+/// @group checkbox
+$checkbox-ripple-opacity: .25 !default;

package/modules/@progress/kendo-theme-default/scss/chip/_layout.scss

@@ -19,6 +19,12 @@
         cursor: pointer;
         user-select: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-selected-icon-wrapper {
             display: none !important; // sass-lint:disable-line no-important
         }

package/modules/@progress/kendo-theme-default/scss/color-preview/_layout.scss

@@ -11,6 +11,12 @@
         flex-wrap: nowrap;
         position: relative;
         overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 

package/modules/@progress/kendo-theme-default/scss/coloreditor/_layout.scss

@@ -14,6 +14,12 @@
         display: inline-flex;
         flex-direction: column;
         align-items: stretch;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Header

package/modules/@progress/kendo-theme-default/scss/colorgradient/_layout.scss

@@ -18,6 +18,12 @@
         gap: $colorgradient-gap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Canvas
@@ -104,10 +110,6 @@
             z-index: 1;
         }
 
-        .k-slider-wrap > .k-slider-track {
-            height: $colorgradient-slider-vertical-size;
-        }
-
         .k-slider-selection {
             display: none;
         }

package/modules/@progress/kendo-theme-default/scss/colorpalette/_layout.scss

@@ -12,6 +12,12 @@
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Table

package/modules/@progress/kendo-theme-default/scss/colorpicker/_layout.scss

@@ -22,13 +22,18 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-selected-color {
             margin: $button-padding-y;
             width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
             height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
             border-width: 1px;
             border-style: solid;
-            box-sizing: border-box;
             background-clip: content-box;
             line-height: 0;
             position: relative;
@@ -48,7 +53,6 @@
             border-width: 0;
             border-style: solid;
             border-color: inherit;
-            box-sizing: border-box;
             font-size: inherit;
             text-align: center;
             flex-direction: column;
@@ -84,7 +88,6 @@
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             border-color: transparent;
-            box-sizing: border-box;
             display: flex;
             align-items: center;
             justify-content: center;

package/modules/@progress/kendo-theme-default/scss/combobox/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -41,7 +47,6 @@
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-flow: row nowrap;

package/modules/@progress/kendo-theme-default/scss/common/_loading.scss

@@ -1,17 +1,5 @@
 @include exports( "common/loading" ) {
 
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
     // Loading mask
     .k-loading-mask,
     .k-loading-image,
@@ -100,7 +88,7 @@
         content: "";
         // See https://github.com/telerik/kendo-themes/issues/1925
         border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
         font-size: 4em;
     }
 }

package/modules/@progress/kendo-theme-default/scss/dateinput/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -46,7 +52,7 @@
         }
         .k-link {
             padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
+            min-width: $spinner-min-width;
             flex: 1 1 auto;
             display: block;
             overflow: hidden;

package/modules/@progress/kendo-theme-default/scss/datepicker/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}

package/modules/@progress/kendo-theme-default/scss/daterangepicker/_index.scss

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

package/modules/@progress/kendo-theme-default/scss/daterangepicker/_layout.scss

@@ -0,0 +1,33 @@
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterangepicker {
+        border: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Angular specific
+    kendo-daterange {
+        // @extend .k-daterangepicker;
+    }
+
+
+    // React specific
+    .k-daterangepicker-wrap {
+        display: inherit;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+    }
+
+}

package/modules/@progress/kendo-theme-default/scss/daterangepicker/_theme.scss

@@ -0,0 +1,3 @@
+@include exports("daterangepicker/theme") {
+
+}

package/modules/@progress/kendo-theme-default/scss/daterangepicker/_variables.scss

@@ -0,0 +1 @@
+// Daterangepicker

package/modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -32,7 +38,6 @@
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             align-items: stretch;
@@ -51,7 +56,6 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            box-sizing: border-box;
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/drawer/_layout.scss

@@ -26,6 +26,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Borders
         .k-drawer-mini &.k-drawer-start,
         .k-drawer-expanded &.k-drawer-start,

package/modules/@progress/kendo-theme-default/scss/dropdownlist/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -42,7 +48,6 @@
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             border-color: transparent;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-flow: row nowrap;

package/modules/@progress/kendo-theme-default/scss/editor/_layout.scss

@@ -183,10 +183,6 @@
             visibility: hidden;
 
             .k-overflow-anchor {
-                border-width: 0;
-                padding: $toolbar-padding-y;
-                width: $toolbar-inner-calc-size;
-                height: $toolbar-inner-calc-size;
                 position: relative;
             }
         }
@@ -329,10 +325,6 @@
             display: flex;
             flex-direction: column;
             padding: 10px 0 40px;
-
-            > span {
-                padding-bottom: $padding-y;
-            }
         }
 
         .k-matches-container {
@@ -568,12 +560,12 @@
             width: 10em;
 
             & + .k-dropdown {
-                width: 4em;
+                width: 5em;
             }
 
             & + .k-colorpicker,
             & + .k-dropdown {
-                margin-left: $padding-x-sm;
+                margin-left: map-get( $spacing, 2 );
             }
         }
 

package/modules/@progress/kendo-theme-default/scss/expansion-panel/_layout.scss

@@ -15,6 +15,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-rtl &,
         &.k-rtl,
         &[dir = "rtl"] {
@@ -54,7 +60,6 @@
     // Expander content
     .k-expander-content {
         padding: $expander-content-padding-y $expander-content-padding-x;
-        box-sizing: border-box;
     }
 
     // Multiple expanders

package/modules/@progress/kendo-theme-default/scss/fab/_layout.scss

@@ -23,6 +23,12 @@
         cursor: pointer;
         outline: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         &:focus {
             outline: none;
         }

package/modules/@progress/kendo-theme-default/scss/filter/_layout.scss

@@ -1,9 +1,17 @@
 @include exports("filter/layout") {
+
     .k-filter {
+        box-sizing: border-box;
         border-width: 0;
         display: inline-block;
         background-color: transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         ul {
             padding: 0;
 

package/modules/@progress/kendo-theme-default/scss/floating-label/_layout.scss

@@ -6,12 +6,19 @@
     .k-floating-label-container {
         padding-top: $floating-label-height;
         width: $input-default-width;
+        box-sizing: border-box;
         display: inline-flex;
         vertical-align: middle;
         position: relative;
         flex-direction: column;
         justify-content: stretch;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > .k-label {
             max-width: 90%;
             font-size: $floating-label-font-size;

package/modules/@progress/kendo-theme-default/scss/forms/_layout.scss

@@ -68,10 +68,6 @@
             display: flex;
             flex-flow: row nowrap;
         }
-        .k-checkbox-label,
-        .k-radio-label {
-            display: inline-flex;
-        }
 
         .k-label + .k-radio {
             margin-left: 0;
@@ -106,13 +102,11 @@
             padding: 0;
         }
 
-        .k-form-field,
-        .k-daterangepicker .k-textbox-container {
+        .k-form-field {
             margin-top: $form-field-margin-top;
         }
 
-        > *,
-        .k-daterangepicker .k-textbox-container {
+        > * {
             &:not(.k-hidden):first-child,
             &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
@@ -154,7 +148,6 @@
         .k-dateinput,
         .k-datepicker,
         .k-datetimepicker,
-        .k-daterangepicker-wrap,
         .k-timepicker,
         .k-numerictextbox,
         .k-maskedtextbox,
@@ -163,6 +156,11 @@
             display: inline-flex;
             width: 100%;
         }
+        .k-daterangepicker {
+            width: 100%;
+            flex-flow: column nowrap;
+            gap: 0;
+        }
     }
 
     // Form Buttons Container

package/modules/@progress/kendo-theme-default/scss/gantt/_layout.scss

@@ -378,7 +378,7 @@
             position: relative;
             vertical-align: middle;
         }
-        td::after { content: "\a0"; }
+        td::after { content: "\200b"; }
     }
     .k-task-wrap {
         margin: 0 -21px;