@progress/kendo-theme-material 5.0.0-next.4 → 5.0.2-dev.0

package/scss/searchbox/_variables.scss

@@ -1,21 +1 @@
 // Searchbox
-$searchbox-padding-x: $input-padding-x !default;
-$searchbox-padding-y: $input-padding-y !default;
-$searchbox-border-width: $input-border-width !default;
-$searchbox-border-radius: $input-border-radius !default;
-
-$searchbox-font-family: $input-font-family !default;
-$searchbox-font-size: $input-font-size !default;
-$searchbox-line-height: $input-line-height !default;
-
-$searchbox-bg: $input-bg !default;
-$searchbox-text: $input-text !default;
-$searchbox-border: $input-border !default;
-
-$searchbox-hover-bg: $input-hovered-bg !default;
-$searchbox-hover-text: $input-hovered-text !default;
-$searchbox-hover-border: $input-hovered-border !default;
-
-$searchbox-focus-bg: $input-focused-bg !default;
-$searchbox-focus-text: $input-focused-text !default;
-$searchbox-focus-border: $input-focused-border !default;

package/scss/slider/_theme.scss

@@ -14,15 +14,6 @@
             @include fill( $bg: $body-text );
         }
 
-        .k-button {
-            &:hover,
-            &.k-state-hover {
-                &::before {
-                    opacity: 0;
-                }
-            }
-        }
-
         .k-draghandle {
             box-sizing: border-box;
 

package/scss/slider/_variables.scss

@@ -18,19 +18,19 @@ $slider-draghandle-border-width: 0px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: 20px !default;
 
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
+$slider-draghandle-bg: $primary !default;
+$slider-draghandle-text: $primary-contrast !default;
+$slider-draghandle-border: $primary !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
+$slider-draghandle-hovered-bg: null !default;
+$slider-draghandle-hovered-text: null !default;
+$slider-draghandle-hovered-border: null !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
+$slider-draghandle-pressed-bg: null !default;
+$slider-draghandle-pressed-text: null !default;
+$slider-draghandle-pressed-border: null !default;
 $slider-draghandle-pressed-gradient: null !default;
 
 $slider-draghandle-focused-shadow: 0 0 0 11px rgba($primary, .25) !default;

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

@@ -156,29 +156,29 @@
     }
     .k-spreadsheet-filter {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        box-shadow: inset 0 0 0 1px $button-border;
+        box-shadow: inset 0 0 0 1px $kendo-button-border;
 
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
-            @include box-shadow( $button-active-shadow );
+            @include box-shadow( $kendo-button-active-shadow );
         }
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
     }
@@ -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/_index.scss

@@ -3,8 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 
 
 // Component

package/scss/switch/_layout.scss

@@ -6,7 +6,7 @@
     .k-switch {
 
         // Thumb ripple
-        .k-switch-handle::before {
+        .k-switch-thumb::before {
             content: "";
             width: 200%;
             height: 200%;
@@ -21,19 +21,19 @@
             pointer-events: none;
         }
 
-        // Hover state
+        // Hover
         &:hover,
-        &.k-state-hover {
-            .k-switch-handle::before {
+        &.k-hover {
+            .k-switch-thumb::before {
                 display: block;
                 opacity: .04;
             }
         }
 
-        // Focus state
+        // Focus
         &:focus,
-        &.k-state-focused {
-            .k-switch-handle::before {
+        &.k-focus {
+            .k-switch-thumb::before {
                 display: block;
                 opacity: .12;
             }

package/scss/switch/_theme.scss

@@ -5,11 +5,15 @@
     // Switch
     .k-switch {
 
+        .k-switch-thumb {
+            box-shadow: $box-shadow-depth-2;
+        }
+
         // Thumb ripple
-        &.k-switch-on .k-switch-handle::before {
+        &.k-switch-on .k-switch-thumb::before {
             background-color: inherit;
         }
-        &.k-switch-off .k-switch-handle::before {
+        &.k-switch-off .k-switch-thumb::before {
             background-color: if( $dark-theme == true, $white, $black );
         }
     }

package/scss/switch/_variables.scss

@@ -1,84 +1,192 @@
 // Switch
-$switch-size: 32px !default;
-$switch-border-radius: $switch-size !default;
-
-$switch-font-family: $font-family !default;
-$switch-font-size: $font-size-xs !default;
-$switch-line-height: $line-height !default;
-
-$switch-track-size: 14px !default;
-$switch-container-border-width: null !default;
-$switch-container-padding-x: null !default;
-$switch-container-padding-y: null !default;
-
-$switch-handle-size: 20px !default;
-$switch-handle-border-radius: 9999px !default;
-$switch-handle-border-width: 0px !default;
-$switch-thumb-start-x: calc( ( #{$switch-handle-size} - #{$switch-track-size} ) / -2 ) !default;
-// TODO: Remove width property from jQuery and Blazor, and do not use 100% for thumb X calc
-$switch-thumb-end-x: calc( 100% - #{$switch-handle-size} + ( ( #{$switch-handle-size} - #{$switch-track-size} ) / 2 ) ) !default;
-
-$switch-label-offset: null !default;
-$switch-label-width: null !default;
-$switch-label-text-transform: null !default;
-$switch-label-display: none !default;
-
-$switch-container-shadow: null !default;
-$switch-container-hovered-shadow: null !default;
-$switch-container-focused-shadow: null !default;
-
-$switch-on-bg: rgba( $primary, .54 ) !default;
-$switch-on-text: null !default;
-$switch-on-border: null !default;
-$switch-on-gradient: null !default;
-$switch-on-shadow: null !default;
-
-$switch-on-hovered-bg: null !default;
-$switch-on-hovered-text: null !default;
-$switch-on-hovered-border: null !default;
-$switch-on-hovered-gradient: null !default;
-
-$switch-on-focused-bg: null !default;
-$switch-on-focused-text: null !default;
-$switch-on-focused-border: null !default;
-$switch-on-focused-gradient: null !default;
-$switch-on-focused-shadow: null !default;
-
-$switch-on-handle-bg: $primary !default;
-$switch-on-handle-text: null !default;
-$switch-on-handle-border: null !default;
-$switch-on-handle-gradient: null !default;
-$switch-on-handle-shadow: $box-shadow-depth-2 !default;
-
-$switch-on-handle-hovered-bg: $switch-on-handle-bg !default;
-$switch-on-handle-hovered-text: null !default;
-$switch-on-handle-hovered-border: null !default;
-$switch-on-handle-hovered-gradient: null !default;
-
-$switch-off-bg: rgba( black, .38 ) !default;
-$switch-off-text: null !default;
-$switch-off-border: null !default;
-$switch-off-gradient: null !default;
-$switch-off-shadow: null !default;
-
-$switch-off-hovered-bg: null !default;
-$switch-off-hovered-text: null !default;
-$switch-off-hovered-border: null !default;
-$switch-off-hovered-gradient: null !default;
-
-$switch-off-focused-bg: null !default;
-$switch-off-focused-text: null !default;
-$switch-off-focused-border: null !default;
-$switch-off-focused-gradient: null !default;
-$switch-off-focused-shadow: null !default;
-
-$switch-off-handle-bg: $white !default;
-$switch-off-handle-text: $switch-off-text !default;
-$switch-off-handle-border: null !default;
-$switch-off-handle-gradient: null !default;
-$switch-off-handle-shadow: $switch-on-handle-shadow !default;
-
-$switch-off-handle-hovered-bg: null !default;
-$switch-off-handle-hovered-text: null !default;
-$switch-off-handle-hovered-border: null !default;
-$switch-off-handle-hovered-gradient: null !default;
+
+/// Font family of the switch.
+/// @group switch
+$kendo-switch-font-family: null !default;
+
+/// Border width of the switch track.
+/// @group switch
+$kendo-switch-track-border-width: null !default;
+
+/// Border width of the switch thumb.
+/// @group switch
+$kendo-switch-thumb-border-width: null !default;
+
+/// Text transform of the switch label.
+/// @group switch
+$kendo-switch-label-text-transform: null !default;
+
+/// Display of the switch label.
+/// @group switch
+$kendo-switch-label-display: none !default;
+
+/// Map with the different switch sizes.
+/// @group switch
+$kendo-switch-sizes: (
+    sm: ( font-size: null, track-width: 26px, track-height:  12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ),
+    md: ( font-size: null, track-width: 32px, track-height:  14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ),
+    lg: ( font-size: null, track-width: 38px, track-height:  16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px )
+) !default;
+
+/// The background of the track when the switch is not checked.
+/// @group switch
+$kendo-switch-off-track-bg: rgba( if( $dark-theme, $white, $black ), .38 ) !default;
+/// The text color of the track when the switch is not checked.
+/// @group switch
+$kendo-switch-off-track-text: null !default;
+/// The border color of the track when the switch is not checked.
+/// @group switch
+$kendo-switch-off-track-border: null !default;
+/// The background gradient of the track when the switch is not checked.
+/// @group switch
+$kendo-switch-off-track-gradient: null !default;
+
+/// The background of the track when hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-track-hover-bg: null !default;
+/// The text color of the track when hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-track-hover-text: null !default;
+/// The border color of the track when hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-track-hover-border: null !default;
+/// The background gradient of the track when hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-track-hover-gradient: null !default;
+
+/// The background of the track when focused switch is not checked.
+/// @group switch
+$kendo-switch-off-track-focus-bg: null !default;
+/// The text color of the track when focused switch is not checked.
+/// @group switch
+$kendo-switch-off-track-focus-text: null !default;
+/// The border color of the track when focused switch is not checked.
+/// @group switch
+$kendo-switch-off-track-focus-border: null !default;
+/// The background gradient of the track when focused switch is not checked.
+/// @group switch
+$kendo-switch-off-track-focus-gradient: null !default;
+/// The ring around the track when focused switch is not checked.
+/// @group switch
+$kendo-switch-off-track-focus-ring: null !default;
+
+/// The background of the track when disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-bg: null !default;
+/// The text color of the track when disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-text: null !default;
+/// The border color of the track when disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-border: null !default;
+/// The background gradient of the track when disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-gradient: null !default;
+
+/// The background of the thumb when the switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-bg: if( $dark-theme, $black, $white ) !default;
+/// The text color of the thumb when the switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-text: null !default;
+/// The border color of the thumb when the switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-border: null !default;
+/// The background gradient of the thumb when the switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-gradient: null !default;
+
+/// The background of the thumb when the hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-hover-bg: null !default;
+/// The text color of the thumb when the hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-hover-text: null !default;
+/// The border color of the thumb when the hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-hover-border: null !default;
+/// The background gradient of the thumb when the hovered switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-hover-gradient: null !default;
+
+
+/// The background of the track when the switch is checked.
+/// @group switch
+$kendo-switch-on-track-bg: rgba( $primary, .54 ) !default;
+/// The text color of the track when the switch is checked.
+/// @group switch
+$kendo-switch-on-track-text: null !default;
+/// The border color of the track when the switch is checked.
+/// @group switch
+$kendo-switch-on-track-border: null !default;
+/// The background gradient of the track when the switch is checked.
+/// @group switch
+$kendo-switch-on-track-gradient: null !default;
+
+/// The background of the track when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-track-hover-bg: null !default;
+/// The text color of the track when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-track-hover-text: null !default;
+/// The border color of the track when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-track-hover-border: null !default;
+/// The background gradient of the track when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-track-hover-gradient: null !default;
+
+/// The background of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-bg: null !default;
+/// The text color of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-text: null !default;
+/// The border color of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-border: null !default;
+/// The background gradient of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-gradient: null !default;
+/// The ring around the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-ring: null !default;
+
+/// The background of the track when the disabled switch is checked.
+/// @group switch
+$kendo-switch-on-track-disabled-bg: null !default;
+/// The text color of the track when the disabled switch is checked.
+/// @group switch
+$kendo-switch-on-track-disabled-text: null !default;
+/// The border color of the track when the disabled switch is checked.
+/// @group switch
+$kendo-switch-on-track-disabled-border: null !default;
+/// The background gradient of the track when the disabled switch is checked.
+/// @group switch
+$kendo-switch-on-track-disabled-gradient: null !default;
+
+/// The background of the thumb when the switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-bg: $primary !default;
+/// The text color of the thumb when the switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-text: null !default;
+/// The border color of the thumb when the switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-border: null !default;
+/// The background gradient of the thumb when the switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-gradient: null !default;
+
+/// The background of the thumb when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-hover-bg: null !default;
+/// The text color of the thumb when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-hover-text: null !default;
+/// The border color of the thumb when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-hover-border: null !default;
+/// The background gradient of the thumb when the hovered switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-hover-gradient: null !default;

package/scss/table/_index.scss

@@ -0,0 +1,19 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_index.scss";
+@import "../combobox/_index.scss";
+@import "../popup/_index.scss";
+@import "../toolbar/_variables.scss";
+@import "../menu/_variables.scss";
+@import "../grid/_variables.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";
+

package/scss/table/_layout.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/table/_layout.scss";

package/scss/table/_theme.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/table/_theme.scss";