@progress/kendo-theme-material 5.0.0-next.5 → 5.0.0

package/scss/popup/_layout.scss

@@ -1,41 +1 @@
 @import "~@progress/kendo-theme-default/scss/popup/_layout.scss";
-
-@include exports("popup/layout/material") {
-
-    .k-popup {
-
-        &.k-colorpicker-popup {
-            padding: 0;
-        }
-
-        // TODO: Change to $line-height when Material line-height is changed.
-        .k-group-header,
-        .k-outer-group-header {
-            line-height: (20 / 12);
-            text-transform: uppercase;
-        }
-    }
-
-    .k-list-container {
-
-        .k-button {
-            box-shadow: none;
-
-            &::before {
-                display: none;
-            }
-        }
-
-    }
-
-    .k-list-filter {
-        height: auto;
-    }
-
-    // Tooltip popup container padding
-    .k-animation-container-shown.k-tooltip-wrapper {
-        .k-popup-transparent {
-            padding: 0;
-        }
-    }
-}

package/scss/popup/_theme.scss

@@ -1,48 +1 @@
 @import "~@progress/kendo-theme-default/scss/popup/_theme.scss";
-
-@include exports("popup/theme/material") {
-
-    .k-list .k-item,
-    .k-list-optionlabel {
-
-        // Focused state
-        &:focus,
-        &.k-state-focused {
-            background: $list-item-hovered-bg;
-        }
-
-    }
-
-    .k-list-container {
-
-        .k-button {
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                background: $list-item-hovered-bg;
-            }
-
-            // Active state
-            &:active,
-            &.k-state-active {
-                box-shadow: none;
-            }
-
-            // Disabled state
-            &.k-state-disabled {
-                color: $kendo-button-disabled-text;
-            }
-
-            // Focus state
-            &:focus,
-            &.k-state-focused {
-                background: $list-item-hovered-bg;
-            }
-
-        }
-    }
-
-    .k-list-filter {}
-
-}

package/scss/popup/_variables.scss

@@ -1,17 +1,12 @@
 // Popup
-$popup-padding-x: 0px !default;
-$popup-padding-y: 0px !default;
+$popup-padding-x: null !default;
+$popup-padding-y: null !default;
 $popup-border-width: 0px !default;
 $popup-border-radius: null !default;
 
 $popup-font-size: $font-size !default;
 $popup-line-height: $line-height !default;
 
-$popup-header-padding: $padding-y-lg $padding-x-lg !default;
-$popup-header-font-size: $font-size-sm !default;
-$popup-header-text: $subtle-text !default;
-$popup-filter-padding-x: $padding-x !default;
-
 $popup-content-padding-x: map-get( $spacing, 2 ) !default;
 $popup-content-padding-y: map-get( $spacing, 2 ) !default;
 

package/scss/radio/_index.scss

@@ -2,6 +2,8 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
+@import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 
 

package/scss/radio/_theme.scss

@@ -1,6 +1,6 @@
 @import "~@progress/kendo-theme-default/scss/radio/_theme.scss";
 
-@include exports("radio/theme/material") {
+@include exports( "radio/theme/material" ) {
 
     // Radio
     .k-radio-label {
@@ -11,13 +11,6 @@
             opacity: 1;
             filter: none;
         }
-
-
-        // Ripple
-        .k-ripple-blob {
-            opacity: .2;
-            background-color: $kendo-radio-checked-bg;
-        }
-
     }
+
 }

package/scss/radio/_variables.scss

@@ -1,126 +1,124 @@
 // Radio button
 
-/// The Sizes of the radio button.
-/// @group radio
-$kendo-radio-sizes: (
-    sm: map-get( $spacing, 3),
-    md: map-get( $spacing, 4),
-    lg: map-get( $spacing, 6)
-) !default;
-
-/// The Border radius of the radio button.
+/// Border radius of radio button.
 /// @group radio
 $kendo-radio-radius: 50% !default;
-/// The Border width of the radio button.
+/// Border width of radio button.
 /// @group radio
 $kendo-radio-border-width: 2px !default;
-/// The Line height of the radio button.
-/// @group radio
-$kendo-radio-line-height: calc( #{map-get( $kendo-radio-sizes, "md" )} + #{$kendo-radio-border-width} ) !default;
 
-/// The Background of the radio button.
+// Radio button sizes
+$kendo-radio-sizes: (
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
+) !default;
+
+/// Background color of radio button.
 /// @group radio
-$kendo-radio-bg: null !default;
-/// The Text of the radio button.
+$kendo-radio-bg: $kendo-checkbox-bg !default;
+/// Color of radio button.
 /// @group radio
-$kendo-radio-text: transparent !default;
-/// The Border of the radio button.
+$kendo-radio-text: $kendo-checkbox-text !default;
+/// Border color of radio button.
 /// @group radio
 $kendo-radio-border: $kendo-checkbox-border !default;
 
-/// The background of hovered radio button.
+/// Background color of hovered radio button.
 /// @group radio
 $kendo-radio-hover-bg: null !default;
-/// The text of hovered radio button.
+/// Color of hovered radio button.
 /// @group radio
 $kendo-radio-hover-text: null !default;
-/// The border of hovered radio button.
+/// Border color of hovered radio button.
 /// @group radio
-$kendo-radio-hover-border: $kendo-checkbox-hover-border !default;
+$kendo-radio-hover-border: null !default;
 
-/// The background of checked radio button.
+/// Background color of checked radio button.
 /// @group radio
 $kendo-radio-checked-bg: null !default;
-/// The text of checked radio button.
+/// Color of checked radio button.
 /// @group radio
 $kendo-radio-checked-text: $primary !default;
-/// The border of checked radio button.
+/// Border color of checked radio button.
 /// @group radio
 $kendo-radio-checked-border: $kendo-radio-checked-text !default;
 
-/// The background of indeterminate radio button.
+/// Border color of focused radio button.
 /// @group radio
-$kendo-radio-indeterminate-bg: $kendo-radio-checked-bg !default;
-/// The text of indeterminate radio button
-/// @group radio
-$kendo-radio-indeterminate-text: $kendo-radio-checked-text !default;
-/// The border of indeterminate radio button.
-/// @group radio
-$kendo-radio-indeterminate-border: $kendo-radio-checked-border !default;
-
-/// The border of focused radio button.
-/// @group radio
-$kendo-radio-focus-border: $kendo-checkbox-border !default;
-/// The shadow of focused radio button.
+$kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
+/// Box shadow of focused radio button.
 /// @group radio
 $kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
-/// The border of focused and checked radio button.
+/// Border color of focused and checked radio button.
 /// @group radio
-$kendo-radio-focus-checked-border: $kendo-checkbox-checked-border !default;
-/// The shadow of focused and checked radio button.
+$kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
+/// Box shadow of focused and checked radio button.
 /// @group radio
 $kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
-/// The background of disabled radio button.
+/// Background color of disabled radio button.
 /// @group radio
 $kendo-radio-disabled-bg: null !default;
-/// The text of disabled radio button.
+/// Color of disabled radio button.
 /// @group radio
 $kendo-radio-disabled-text: null !default;
-/// The border of disabled radio button.
+/// Border color of disabled radio button.
 /// @group radio
-$kendo-radio-disabled-border: try-shade( $component-bg, 4 ) !default;
+$kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
-/// The background of diasbled and checked radio button.
+/// Background color of disabled and checked radio button.
 /// @group radio
 $kendo-radio-disabled-checked-bg: null !default;
-/// The text of disabled and checked radio button.
+/// Color of disabled and checked radio button.
 /// @group radio
 $kendo-radio-disabled-checked-text: $kendo-radio-disabled-border !default;
-/// The border of disabled and checked radio button.
+/// Border color of disabled and checked radio button.
 /// @group radio
 $kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
 
-/// The background of invalid radio button.
+/// Background color of invalid radio button.
 /// @group radio
-$kendo-radio-invalid-bg: null !default;
-/// The text of invalid radio button.
+$kendo-radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
+/// Color of invalid radio button.
 /// @group radio
-$kendo-radio-invalid-text: $invalid-text !default;
-/// The border of invalid radio button.
+$kendo-radio-invalid-text: $kendo-checkbox-invalid-text !default;
+/// Border color of invalid radio button.
 /// @group radio
-$kendo-radio-invalid-border: $invalid-border !default;
+$kendo-radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 
 // Radio indicator
 
-/// The icon type of radio button.
+/// Type of radio button indicator.
 /// @group radio
-$kendo-radio-icon-type: marker !default;
+$kendo-radio-indicator-type: image !default;
 
-/// The glyph font family of radio button.
+/// Glyph font family of radio button indicator.
 /// @group radio
 $kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// The glyph size of radio button.
-/// @group radio
-$kendo-radio-glyph-size: 12px !default;
-/// The checked glyph of radio button.
+/// Glyph of radio button indicator.
 /// @group radio
 $kendo-radio-checked-glyph: "\e308" !default;
 
-/// The checked image of radio button.
+/// Image of checked radio button indicator.
 /// @group radio
-$kendo-radio-checked-image: null !default;
+$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+/// Image of disabled and checked radio button indicator.
+/// @group radio
+$kendo-radio-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>") ) !default;
 
 
 // Radio label
@@ -132,39 +130,22 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Radio list
 
-/// The list margin of radio button.
-/// @group radio
-$kendo-radio-list-margin: 0px !default;
-/// The list padding of radio button.
+/// Spacing between items of horizontal radio button list.
 /// @group radio
-$kendo-radio-list-padding: 0px !default;
-/// The horizontal list item padding of radio button.
+$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
+/// Horizontal padding of radio button list items.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
-/// The vertical list item padding of radio button.
+/// Vertical padding of radio button list items.
 /// @group radio
-$kendo-radio-list-item-padding-y: $list-item-padding-y !default;
-/// The horizontal list item margin of radio button.
-/// @group radio
-$kendo-radio-list-horizontal-item-margin-x: 32px !default;
+$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 
 // Radio ripple
 
-/// The ripple size of radio.
-/// @group radio
-$kendo-radio-ripple-size: (
-    sm: (map-get( $kendo-radio-sizes, "sm" ) * 3),
-    md: (map-get( $kendo-radio-sizes, "md" ) * 3),
-    lg: (map-get( $kendo-radio-sizes, "lg" ) * 3)
-) !default;
-/// The ripple margin of radio button.
+/// Background color of radio button ripple.
 /// @group radio
-$kendo-radio-ripple-margin: (
-    sm: calc(-1 * (#{map-get( $kendo-radio-sizes, "sm" )} + 2 * #{$kendo-radio-border-width})),
-    md: calc(-1 * (#{map-get( $kendo-radio-sizes, "md" )} + 2 * #{$kendo-radio-border-width})),
-    lg: calc(-1 * (#{map-get( $kendo-radio-sizes, "lg" )} + 2 * #{$kendo-radio-border-width}))
-) !default;
-/// The ripple opacity of radio button.
+$kendo-radio-ripple-bg: $primary !default;
+/// Opacity of radio button ripple.
 /// @group radio
-$kendo-radio-ripple-opacity: .3 !default;
+$kendo-radio-ripple-opacity: .2 !default;

package/scss/scheduler/_index.scss

@@ -6,7 +6,7 @@
 @import "../icons/_index.scss";
 @import "../adaptive/_index.scss";
 @import "../button/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../dialog/_index.scss";
 @import "../tooltip/_index.scss";

package/scss/scheduler/_layout.scss

@@ -132,8 +132,6 @@
 
     .k-scheduler-edit-form {
 
-        .k-edit-form-container { width: 390px; }
-
         .k-edit-label {
             width: auto;
             margin-bottom: .5em;
@@ -146,15 +144,6 @@
             align-items: center;
         }
 
-        kendo-scheduler-datetime-picker {
-            display: inline-flex;
-            width: 100%;
-
-            .k-picker-wrap {
-                flex: 1;
-            }
-        }
-
     }
 
     .k-edit-field .k-reset {
@@ -174,18 +163,4 @@
         width: 45%;
     }
 
-
-    // Recurrence editor
-    .k-edit-field .k-recur-interval,
-    .k-edit-field .k-recur-count,
-    .k-edit-field .k-recur-month,
-    .k-edit-field .k-recur-monthday,
-    .k-edit-field .k-recur-weekday-offset,
-    .k-edit-field .k-recur-weekday {
-        width: 28%;
-    }
-    .k-edit-field .k-recur-until {
-        width: 66%;
-    }
-
 }

package/scss/spreadsheet/_index.scss

@@ -8,7 +8,7 @@
 @import "../radio/_index.scss";
 @import "../colorpicker/_index.scss";
 @import "../combobox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../upload/_index.scss";
@@ -17,6 +17,7 @@
 @import "../tabstrip/_index.scss";
 @import "../treeview/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/spreadsheet/_layout.scss

@@ -57,22 +57,9 @@
         width: auto;
         box-sizing: border-box;
 
-        .k-edit-buttons,
         .k-actions {
             margin: $spacer (-$window-inner-padding-x) (-$window-inner-padding-y);
         }
     }
 
 }
-
-
-
-
-@include exports( "spreadsheet/popup/layout/material" ) {
-
-    .k-spreadsheet-popup {
-        .k-separator {
-            margin: 0;
-        }
-    }
-}

package/scss/spreadsheet/_theme.scss

@@ -249,16 +249,16 @@
         .k-button:hover,
         .k-button.k-state-hover {
             @include fill(
-                $list-item-hovered-text,
-                $list-item-hovered-bg
+                $kendo-list-item-hover-text,
+                $kendo-list-item-hover-bg
             );
         }
         .k-button:active,
         .k-button.k-state-active,
         .k-button.k-state-selected {
             @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
             );
         }
 

package/scss/switch/_layout.scss

@@ -5,11 +5,6 @@
     // Switch
     .k-switch {
 
-        .k-switch-thumb {
-            position: absolute;
-            top: 50%;
-        }
-
         // Thumb ripple
         .k-switch-thumb::before {
             content: "";
@@ -37,7 +32,7 @@
 
         // Focus
         &:focus,
-        &.k-focused {
+        &.k-focus {
             .k-switch-thumb::before {
                 display: block;
                 opacity: .12;

package/scss/switch/_theme.scss

@@ -5,6 +5,10 @@
     // Switch
     .k-switch {
 
+        .k-switch-thumb {
+            box-shadow: $box-shadow-depth-2;
+        }
+
         // Thumb ripple
         &.k-switch-on .k-switch-thumb::before {
             background-color: inherit;