@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0

package/scss/radio/_layout.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *;
 
 
@@ -5,6 +7,39 @@
 
     @include kendo-radio--layout-base();
 
+    // RadioButton
+    // Hover and Focus indicator
+    .k-radio {
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus,
+        &.k-invalid {
+            position: relative;
+
+            &::after {
+                content: "";
+                display: block;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                border-radius: 100%;
+                z-index: -1;
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+
+    @each $size, $size-props in $kendo-radio-sizes {
+        $_size: map.get( $size-props, size );
+        $_indicator-size: map.get( $size-props, indicator-size );
+
+        .k-radio-#{$size}::after {
+            width: $_indicator-size;
+            height: $_indicator-size;
+        }
+    }
+
     .k-radio::before {
         transition: transform linear 280ms;
         transform-origin: 0 0;

package/scss/radio/_theme.scss

@@ -1,3 +1,4 @@
+@use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *;
 
@@ -6,12 +7,116 @@
 
     @include kendo-radio--theme-base();
 
+    .k-radio {
+        &:hover,
+        &.k-hover {
+            &::after {
+                opacity: .08;
+                background-color: k-color(on-app-surface);
+            }
+
+            &:checked,
+            &.k-checked {
+                &::after {
+                    background-color: k-color(primary);
+                }
+            }
+
+            &.k-invalid::after {
+                background-color: k-color(error);
+            }
+        }
+
+        &:focus,
+        &.k-focus {
+            &::after {
+                opacity: .12;
+                background-color: k-color(on-app-surface);
+            }
+
+            &:checked,
+            &.k-checked {
+                &::after {
+                    background-color: k-color(primary);
+                }
+            }
+
+            &.k-invalid::after {
+                background-color: k-color(error);
+            }
+        }
+
+    }
+
+    .k-ripple-focus.k-radio {
+
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus {
+            &::after,
+            &:checked::after,
+            &.k-checked::after,
+            &.k-invalid::after {
+                background: $kendo-radio-ripple-bg;
+                opacity: $kendo-radio-ripple-opacity;
+            }
+        }
+
+        /* Radio Ripple animation */
+
+        &::after {
+            animation: ripple-radio 225ms cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        &:checked,
+        &.k-checked {
+            &::after {
+                animation: ripple-radio-checked 225ms cubic-bezier(0, 0, 0.2, 1);
+            }
+        }
+
+
+        @keyframes ripple-radio {
+            0% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(primary) 50%);
+                opacity: 0.08;
+            }
+            50% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(primary) 100%);
+                opacity: $kendo-radio-ripple-opacity;
+            }
+            100% {
+                background: radial-gradient(circle, k-color(primary) 0%, k-color(primary) 100%);
+                opacity: .12;
+            }
+        }
+
+        @keyframes ripple-radio-checked {
+            0% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(on-app-surface) 50%);
+                opacity: 0.08;
+            }
+            50% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(on-app-surface) 100%);
+                opacity: $kendo-radio-ripple-opacity;
+            }
+            100% {
+                background: radial-gradient(circle, k-color(on-app-surface) 0%, k-color(on-app-surface) 100%);
+                opacity: .12;
+            }
+        }
+    }
+
     // Radio
     // Disabled state
-    .k-radio:disabled + .k-radio-label {
-        color: k-color(subtle);
-        opacity: 1;
-        filter: none;
+    .k-radio {
+        &:disabled,
+        &.k-disabled {
+            &.k-invalid {
+                border-color: $kendo-radio-disabled-border;
+            }
+        }
     }
 
 }

package/scss/radio/_variables.scss

@@ -15,7 +15,7 @@ $kendo-radio-border-width: 2px !default;
 
 /// The size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-size: k-spacing(3) !default;
+$kendo-radio-sm-size: k-spacing(4) !default;
 /// The size of a medium RadioButton.
 /// @group radio
 $kendo-radio-md-size: k-spacing(4) !default;
@@ -35,13 +35,14 @@ $kendo-radio-lg-glyph-size: k-spacing(4.5) !default;
 
 /// The ripple size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-ripple-size: 300% !default;
+$kendo-radio-sm-ripple-size: k-spacing(8) !default;
 /// The ripple size of a medium RadioButton.
 /// @group radio
-$kendo-radio-md-ripple-size: 300% !default;
+$kendo-radio-md-ripple-size: k-spacing(10) !default;
 /// The ripple size of a large RadioButton.
 /// @group radio
-$kendo-radio-lg-ripple-size: 300% !default;
+$kendo-radio-lg-ripple-size: k-spacing(12) !default;
+
 
 /// The map with the different RadioButton sizes.
 /// @group radio
@@ -49,17 +50,20 @@ $kendo-radio-sizes: (
     sm: (
         size: $kendo-radio-sm-size,
         glyph-size: $kendo-radio-sm-glyph-size,
-        ripple-size: $kendo-radio-sm-ripple-size
+        ripple-size: $kendo-radio-sm-ripple-size,
+        indicator-size: k-spacing(8)
     ),
     md: (
         size: $kendo-radio-md-size,
         glyph-size: $kendo-radio-md-glyph-size,
-        ripple-size: $kendo-radio-md-ripple-size
+        ripple-size: $kendo-radio-md-ripple-size,
+        indicator-size: k-spacing(10)
     ),
     lg: (
         size: $kendo-radio-lg-size,
         glyph-size: $kendo-radio-lg-glyph-size,
-        ripple-size: $kendo-radio-lg-ripple-size
+        ripple-size: $kendo-radio-lg-ripple-size,
+        indicator-size: k-spacing(12)
     )
 ) !default;
 
@@ -99,7 +103,6 @@ $kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
 /// The box shadow of the focused RadioButton.
 /// @group radio
 $kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
-
 /// The border color of the focused and checked RadioButton.
 /// @group radio
 $kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
@@ -109,20 +112,20 @@ $kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default
 
 /// The background color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-bg: unset !default;
+$kendo-radio-disabled-bg: null !default;
 /// The color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-text: unset !default;
+$kendo-radio-disabled-text: k-color(on-app-surface) !default;
 /// The border color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
+$kendo-radio-disabled-border: k-color(on-app-surface) !default;
 
 /// The background color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-bg: unset !default;
+$kendo-radio-disabled-checked-bg: $kendo-radio-disabled-bg !default;
 /// The color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-text: $kendo-radio-disabled-border !default;
+$kendo-radio-disabled-checked-text: $kendo-radio-disabled-text !default;
 /// The border color of disabled and checked RadioButton.
 /// @group radio
 $kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
@@ -163,7 +166,7 @@ $kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: k-spacing(1) !default;
+$kendo-radio-label-margin-x: k-spacing(4) !default;
 
 
 // Radio list

package/scss/rating/_variables.scss

@@ -14,11 +14,11 @@ $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal margin of the Rating container.
 /// @group rating
-$kendo-rating-container-margin-x: calc( #{k-spacing(2)} / 2 ) !default;
+$kendo-rating-container-margin-x: k-spacing(1) !default;
 
 /// The horizontal padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-x: calc( #{k-spacing(2)} / 2 ) !default;
+$kendo-rating-item-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Rating item.
 /// @group rating
 $kendo-rating-item-padding-y: k-spacing(1) !default;
@@ -31,7 +31,7 @@ $kendo-rating-label-margin-x: k-spacing(2) !default;
 $kendo-rating-label-margin-y: k-spacing(1) !default;
 /// The line height of the Rating label.
 /// @group rating
-$kendo-rating-label-line-height: $kendo-line-height-lg !default;
+$kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The text color of the Rating icon.
 /// @group rating

package/scss/scheduler/_layout.scss

@@ -7,51 +7,13 @@
 
     @include kendo-scheduler--layout-base();
 
-
-    .k-scheduler-footer {
-        border-top-width: 1px;
-    }
-
-
-    // Scheduler navigation
-    .k-scheduler-navigation {}
-
-
-    // View switcher
-    .k-scheduler-views {}
-
-
-    // View header
-    .k-scheduler-header {
-        text-align: start;
-
-        th,
-        td {
-            font-size: var( --kendo-font-size-sm, inherit );
-        }
-    }
-
-
-    // Times header
-    .k-scheduler-times {
-        font-size: var( --kendo-font-size-sm, inherit );
-    }
-
-
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
 
-        &.k-selected {
-            &::before {
-                display: block;
-            }
-        }
-
         // Angular fix for stronger selector and smaller padding
         .k-event-template {
             & { // stylelint-disable-line
-                padding-block: k-spacing(0.5);
                 padding-inline: k-spacing(2);
             }
         }
@@ -66,16 +28,9 @@
 
     .k-event {
         .k-event-delete {
+            margin-block-start: k-spacing(1);
             border-radius: 50%;
-            display: inline-block;
-            font-size: var( --kendo-font-size-sm, inherit );
-            line-height: normal;
-
-            .k-icon {
-                padding: calc( var( --kendo-font-size, .875rem) - var( --kendo-font-size-sm, .75rem) );
-                box-sizing: content-box;
-                vertical-align: unset;
-            }
+            display: flex;
         }
 
         .k-resize-handle {
@@ -108,52 +63,10 @@
 
     .k-more-events {
         border-width: 0;
-        box-shadow: none;
     }
 
     .k-scheduler-layout-flex .k-scheduler-cell {
         min-height: $kendo-line-height-em;
     }
 
-    // Month view
-    .k-scheduler-monthview {
-        .k-scheduler-table td {
-            height: 85px;
-        }
-    }
-
-
-    .k-scheduler-edit-form {
-
-        .k-edit-label {
-            width: auto;
-            margin-bottom: .5em;
-
-            label { margin-bottom: 0; }
-        }
-
-        .k-edit-field {
-            width: auto;
-            align-items: center;
-        }
-
-    }
-
-    .k-edit-field .k-reset {
-        width: 100%;
-    }
-    .k-edit-field .k-widget {
-        font-size: inherit;
-    }
-    .k-edit-field .k-reset .k-widget {
-        margin-right: 0;
-    }
-
-    .k-scheduler-timezones .k-edit-field > div {
-        width: 100%;
-    }
-    .k-scheduler-timezones .k-edit-field .k-widget {
-        width: 45%;
-    }
-
 }

package/scss/scheduler/_variables.scss

@@ -64,7 +64,7 @@ $kendo-scheduler-event-min-height: 25px !default;
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 /// The line height of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{k-spacing(0.5)}) ) !default;
+$kendo-scheduler-event-line-height: calc( $kendo-scheduler-event-min-height - k-spacing(1) )!default;
 
 /// The background color of the Scheduler event.
 /// @group scheduler
@@ -120,10 +120,10 @@ $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
 /// The horizontal padding of the Scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
+$kendo-scheduler-cell-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Scheduler cell.
 /// @group scheduler
-$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
+$kendo-scheduler-cell-padding-y: k-spacing(3) !default;
 /// The height of the Scheduler cell.
 /// @group scheduler
 $kendo-scheduler-cell-height: calc( var( --kendo-line-height, normal) * 1rem) !default;
@@ -200,7 +200,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
 $kendo-scheduler-tooltip-bg: k-color(on-primary) !default;
 /// The text color of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-text: k-color(on-app-surface) !default;
+$kendo-scheduler-tooltip-text: k-color(on-base) !default;
 /// The border color of the Scheduler Tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;

package/scss/scrollview/_variables.scss

@@ -21,7 +21,7 @@ $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-scrollview-text: k-color(on-app-surface) !default;
 /// The background color of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-bg: k-color(surface-alt) !default;
+$kendo-scrollview-bg: k-color(surface) !default;
 /// The border color of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-border: k-color(border) !default;

package/scss/slider/_layout.scss

@@ -22,6 +22,7 @@
                 top: 50%;
                 left: 50%;
                 margin: $tick-offset 0 0 $tick-offset;
+                border-radius: 50%;
             }
         }
 
@@ -31,6 +32,11 @@
     }
 
     .k-slider-horizontal {
+
+        .k-slider-track-wrap {
+            padding-inline: $kendo-slider-tick-size;
+        }
+
         .k-tick {
             &.k-first::after {
                 left: 0;
@@ -43,6 +49,11 @@
     }
 
     .k-slider-vertical {
+
+        .k-slider-track-wrap {
+            padding-block: $kendo-slider-tick-size;
+        }
+
         .k-tick {
             &.k-last::after {
                 top: 0;

package/scss/slider/_theme.scss

@@ -10,21 +10,12 @@
     .k-slider {
         cursor: pointer;
 
-        .k-slider-track,
-        .k-slider-selection {
-            border-radius: 0;
-        }
-
         .k-tick::after {
-            @include fill( $bg: k-color(on-app-surface) );
+            @include fill( $bg: $kendo-slider-tick-marker-bg );
         }
 
         .k-draghandle {
             box-sizing: border-box;
-
-            &:focus {
-                @include box-shadow( $kendo-slider-draghandle-focus-shadow );
-            }
         }
 
         &.k-disabled {

package/scss/slider/_variables.scss

@@ -24,10 +24,10 @@ $kendo-slider-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The offset of the Slider Buttons.
 /// @group slider
-$kendo-slider-button-offset: 22px !default;
+$kendo-slider-button-offset: k-spacing(5.5) !default;
 /// The size of the Slider Buttons.
 /// @group slider
-$kendo-slider-button-size: 36px !default;
+$kendo-slider-button-size: k-spacing(9) !default;
 /// The spacing of the Slider Buttons.
 /// @group slider
 $kendo-slider-button-spacing: ($kendo-slider-button-size + $kendo-slider-button-offset) !default;
@@ -37,10 +37,10 @@ $kendo-slider-button-focus-shadow: null !default;
 
 /// The thickness of the Slider track.
 /// @group slider
-$kendo-slider-track-thickness: 2px !default;
+$kendo-slider-track-thickness: k-spacing(1) !default;
 /// The size of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-size: 14px !default;
+$kendo-slider-draghandle-size: k-spacing(5) !default;
 /// The border width of the Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-border-width: 0px !default;
@@ -49,7 +49,7 @@ $kendo-slider-draghandle-border-width: 0px !default;
 $kendo-slider-draghandle-active-scale: 1 !default;
 /// The size of the active Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-active-size: 20px !default;
+$kendo-slider-draghandle-active-size: k-spacing(5) !default;
 
 /// The background color of the Slider drag handle.
 /// @group slider
@@ -76,6 +76,9 @@ $kendo-slider-draghandle-hover-border: k-color(primary) !default;
 /// The gradient of the hovered Slider drag handle.
 /// @group slider
 $kendo-slider-draghandle-hover-gradient: null !default;
+/// The shadow of the hovered Slider drag handle.
+/// @group slider
+$kendo-slider-draghandle-hover-shadow: 0 0 0 k-spacing(2.5) color-mix(in srgb, k-color(primary) 8%, transparent) !default;
 
 /// The background color of the active Slider drag handle.
 /// @group slider
@@ -92,7 +95,7 @@ $kendo-slider-draghandle-pressed-gradient: null !default;
 
 /// The shadow of the focused Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-focus-shadow: 0 0 0 11px color-mix(in srgb, k-color(primary) 25%, transparent) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 k-spacing(2.5) color-mix(in srgb, k-color(primary) 20%, transparent) !default;
 
 /// The transition speed of the Slider.
 /// @group slider
@@ -124,6 +127,10 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5
 /// @group slider
 $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" !default;
 
+/// The background color of the Slider tick marker.
+/// @group slider
+$kendo-slider-tick-marker-bg: k-color(primary-emphasis) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with (
     $kendo-slider-size: $kendo-slider-size,
     $kendo-slider-tick-size: $kendo-slider-tick-size,
@@ -148,6 +155,7 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BA
     $kendo-slider-draghandle-hover-text: $kendo-slider-draghandle-hover-text,
     $kendo-slider-draghandle-hover-border: $kendo-slider-draghandle-hover-border,
     $kendo-slider-draghandle-hover-gradient: $kendo-slider-draghandle-hover-gradient,
+    $kendo-slider-draghandle-hover-shadow: $kendo-slider-draghandle-hover-shadow,
     $kendo-slider-draghandle-pressed-bg: $kendo-slider-draghandle-pressed-bg,
     $kendo-slider-draghandle-pressed-text: $kendo-slider-draghandle-pressed-text,
     $kendo-slider-draghandle-pressed-border: $kendo-slider-draghandle-pressed-border,
@@ -161,5 +169,6 @@ $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BA
     $kendo-slider-selection-bg: $kendo-slider-selection-bg,
     $kendo-slider-disabled-opacity: $kendo-slider-disabled-opacity,
     $kendo-slider-tick-horizontal-image: $kendo-slider-tick-horizontal-image,
-    $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image
+    $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image,
+    $kendo-slider-tick-marker-bg: $kendo-slider-tick-marker-bg
 );

package/scss/split-button/_layout.scss

@@ -1,6 +1,18 @@
+@use "sass:map";
+@use "../button/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *;
 
 
 @mixin kendo-split-button--layout() {
     @include kendo-split-button--layout-base();
+
+    @each $size, $size-props in $kendo-button-sizes {
+        $_padding-x: map.get( $size-props, padding-x );
+
+        .k-split-button {
+            .k-button-#{$size}:not(.k-split-button-arrow) {
+                padding-inline: calc( $_padding-x / 2) ;
+            }
+        }
+    }
 }

package/scss/split-button/_variables.scss

@@ -9,16 +9,16 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// The horizontal padding of the arrow Button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-arrow-padding-x: calc( k-spacing(5.5) / 2 ) !default;
 /// The horizontal padding of the small arrow Button.
 /// @group split-button
-$kendo-split-button-sm-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-sm-arrow-padding-x: calc( k-spacing(4.5) / 2 ) !default;
 /// The horizontal padding of the medium arrow Button.
 /// @group split-button
-$kendo-split-button-md-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-md-arrow-padding-x: calc( k-spacing(5.5) / 2 ) !default;
 /// The horizontal padding of the large arrow Button.
 /// @group split-button
-$kendo-split-button-lg-arrow-padding-x: k-spacing(1) !default;
+$kendo-split-button-lg-arrow-padding-x: calc( k-spacing(6.5) / 2 ) !default;
 
 /// The vertical padding of the arrow Button.
 /// @group split-button

package/scss/splitter/_variables.scss

@@ -18,7 +18,7 @@ $kendo-splitter-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Splitter.
 /// @group splitter
-$kendo-splitter-bg: k-color(surface-alt) !default;
+$kendo-splitter-bg: k-color(surface) !default;
 /// The text color of the Splitter.
 /// @group splitter
 $kendo-splitter-text: k-color(on-app-surface) !default;
@@ -37,7 +37,7 @@ $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 /// The margin of the Splitter drag handle icon.
 /// @group splitter
-$kendo-splitter-drag-icon-margin: k-spacing(2) !default;
+$kendo-splitter-drag-icon-margin: calc( #{k-spacing(3.5)} / 2 ) !default;
 /// The horizontal padding of the collapse icon in the Splitter.
 /// @group splitter
 $kendo-splitter-collapse-icon-padding-x: null !default;
@@ -54,7 +54,7 @@ $kendo-splitbar-text: k-color(subtle) !default;
 
 /// The hover background color of the Splitter split bar.
 /// @group splitter
-$kendo-splitbar-hover-bg: k-color(base-hover) !default;
+$kendo-splitbar-hover-bg: k-color(base-subtle-hover) !default;
 /// The hover text color of the Splitter split bar.
 /// @group splitter
 $kendo-splitbar-hover-text: $kendo-splitbar-text !default;