@progress/kendo-theme-material 4.43.1-dev.5 → 4.44.0

package/scss/button/_variables.scss

@@ -1,29 +1,71 @@
 // Button
 
-/// Width of border around buttons
+/// Width of the border around the button.
 /// @group button
-$button-border-width: 0px !default;
-/// Border radius of buttons
+$button-border-width: 1px !default;
+
+/// Border radius of the button.
+/// @group button
+$button-border-radius: map-get( $spacing, 1 ) !default;
+
+/// Horizontal padding of the button.
 /// @group button
-$button-border-radius: $border-radius !default;
+$button-padding-x: map-get( $spacing, 4 ) !default;
+$button-padding-x-sm: null !default;
+$button-padding-x-md: null !default;
+$button-padding-x-lg: null !default;
 
-/// Horizontal padding of buttons
+/// Vertical padding of the button.
 /// @group button
-$button-padding-x: $padding-x !default;
-/// Vertical padding of buttons
+$button-padding-y: map-get( $spacing, 2 ) !default;
+$button-padding-y-sm: null !default;
+$button-padding-y-md: null !default;
+$button-padding-y-lg: null !default;
+
+/// Font family of the button.
 /// @group button
-$button-padding-y: 8px !default;
 $button-font-family: $font-family !default;
+
+/// Font size of the button.
+/// @group button
 $button-font-size: $font-size !default;
-$button-line-height: (20 / 14) !default;
+$button-font-size-sm: null !default;
+$button-font-size-md: null !default;
+$button-font-size-lg: null !default;
 
-$button-padding-x-sm: $button-padding-x / 2 !default;
-$button-padding-y-sm: $button-padding-y / 2 !default;
-$button-line-height-sm: (20 / 14) !default;
+/// Line height used along with $font-size.
+/// @group button
+$button-line-height: (20 / 14) !default;
+$button-line-height-sm: null !default;
+$button-line-height-md: null !default;
+$button-line-height-lg: null !default;
 
+/// Calculated height of the button.
+/// @group button
 $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
+$button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$button-arrow-padding-y: $button-padding-y !default;
+
+/// Theme colors map for the button.
+/// @group button
+$button-theme-colors: (
+    "primary": map-get( $theme-colors, primary ),
+    "secondary": map-get( $theme-colors, secondary ),
+    "tertiary": map-get( $theme-colors, tertiary ),
+    "info": map-get( $theme-colors, info ),
+    "success": map-get( $theme-colors, success ),
+    "warning": map-get( $theme-colors, warning ),
+    "error": map-get( $theme-colors, error ),
+    "dark": map-get( $theme-colors, dark ),
+    "light": map-get( $theme-colors, light ),
+    "inverse": map-get( $theme-colors, inverse )
+) !default;
+
 /// The background of the buttons.
 /// @group button
 $button-bg: $base-bg !default;
@@ -88,7 +130,7 @@ $button-focused-shadow: null !default;
 // Disabled button
 $button-disabled-bg: try-shade( $body-bg, 12% ) !default;
 $button-disabled-text: $disabled-text !default;
-$button-disabled-border: null !default;
+$button-disabled-border: $button-disabled-bg !default;
 $button-disabled-gradient: null !default;
 $button-disabled-shadow: none !default;
 
@@ -120,7 +162,31 @@ $primary-button-selected-shadow: null !default;
 
 $primary-button-focused-shadow: null !default;
 
-$button-group-focus-shadow: null !default;
+$solid-button-gradient: null !default;
+$solid-button-shade-function: "try-shade";
+$solid-button-shade-text-amount: null !default;
+$solid-button-shade-bg-amount: 0 !default;
+$solid-button-shade-border-amount: 0 !default;
+$solid-button-hover-shade-text-amount: null !default;
+$solid-button-hover-shade-bg-amount: null !default;
+$solid-button-hover-shade-border-amount: null !default;
+$solid-button-active-shade-text-amount: null !default;
+$solid-button-active-shade-bg-amount: null !default;
+$solid-button-active-shade-border-amount: null !default;
+$solid-button-shadow: null !default;
+$solid-button-shadow-blur: null !default;
+$solid-button-shadow-spread: null !default;
+$solid-button-shadow-opacity: null !default;
+
+$outline-button-shadow: null !default;
+$outline-button-shadow-blur: null !default;
+$outline-button-shadow-spread: null !default;
+$outline-button-shadow-opacity: null !default;
+
+$link-button-shadow: null !default;
+$link-button-shadow-blur: null !default;
+$link-button-shadow-spread: null !default;
+$link-button-shadow-opacity: null !default;
 
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: .12 !default;

package/scss/grid/_theme.scss

@@ -18,8 +18,8 @@
 
         // Hover, Focused state
         table {
-            tr:hover,
-            tr.k-state-hover,
+            tr:not(.k-detail-row):hover,
+            tr:not(.k-detail-row).k-state-hover,
             td.k-state-focused,
             th.k-state-focused,
             th:focus,

package/scss/maskedtextbox/_layout.scss

@@ -1 +1,12 @@
 @import "../../modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss";
+
+@include exports( "maskedtextbox/layout/material" ) {
+
+    // Masked textbox
+    .k-maskedtextbox {
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
+        border-width: $input-border-width 0;
+        border-top-color: transparent !important; // sass-lint:disable-line no-important
+    }
+
+}

package/scss/pivotgrid/_layout.scss

@@ -2,62 +2,8 @@
 
 @include exports ("pivotgrid/layout/material/legacy") {
 
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
-        @include border-radius( 16px );
-
-        .k-field-actions {
-            top: initial;
-
-            .k-setting-delete {
-                border-radius: 50%;
-                padding: 2px;
-            }
-        }
-
-        &::before {
-            display: none;
-        }
-
-        &.k-empty {
-            border: 0;
-        }
-    }
-
     .k-pivot-rowheaders .k-grid tr .k-grid-footer {
         border-bottom-width: 0;
     }
 
-    .k-fieldselector .k-list .k-item {
-        border-width: 0;
-    }
-
-    .k-fieldselector p,
-    .k-pivot-layout .k-button {
-        text-transform: none;
-    }
-
-    .k-fieldselector,
-    .k-pivot {
-        .k-i-arrow-60-right,
-        .k-i-arrow-e,
-        .k-i-sarrow-e,
-        .k-i-expand,
-        .k-i-expand-e {
-            &::before {
-                content: "\E014";
-            }
-        }
-
-        .k-i-arrow-60-down,
-        .k-i-arrow-s,
-        .k-i-sarrow-s,
-        .k-i-collapse,
-        .k-i-expand-s {
-            &::before {
-                content: "\E015";
-            }
-        }
-    }
-
 }

package/scss/pivotgrid/_theme.scss

@@ -13,143 +13,3 @@
     }
 
 }
-
-
-@include exports("pivotgrid/theme/material/legacy") {
-
-    .k-pivot {
-        border-color: $pivotgrid-border;
-    }
-
-    .k-fieldselector,
-    .k-pivot-layout .k-grid-footer,
-    .k-pivot-layout > tbody > tr:first-child > td:first-child {
-        background-color: $pivotgrid-alt-bg;
-        border-color: $pivotgrid-chrome-border;
-    }
-    .k-pivot-rowheaders .k-grid {
-        background: none;
-    }
-
-    .k-fieldselector {
-        color: $pivotgrid-configurator-text;
-    }
-
-    .k-fieldselector .k-list-container {
-        background-color: $grid-bg;
-    }
-
-    .k-pivot-toolbar,
-    .k-pivot-table,
-    .k-fieldselector .k-list-container,
-    .k-fieldselector .k-columns > div,
-    .k-pivot-rowheaders > .k-grid td:first-child,
-    .k-pivot-table .k-grid-header .k-header.k-first {
-        border-color: $pivotgrid-chrome-border;
-    }
-
-    .k-pivot-rowheaders > .k-grid td,
-    .k-pivot-rowheaders > .k-grid td:first-child:not(.k-first) {
-        border-bottom-color: transparent;
-        border-left-color: $pivotgrid-chrome-border;
-    }
-
-    .k-pivot-rowheaders > .k-grid tr {
-        &:last-child td:not(.k-grid-footer),
-        &:nth-last-child(2) td:not(.k-grid-footer) {
-            border-bottom-color: $pivotgrid-chrome-border;
-        }
-    }
-
-    .k-pivot-layout .k-grid .k-alt {
-        border-left-color: $pivotgrid-chrome-border;
-
-        + .k-alt {
-            border-left-color: transparent;
-        }
-    }
-
-    .k-pivot-layout .k-grid-footer,
-    .k-pivot-layout .k-grid .k-alt {
-        color: $pivotgrid-alt-text;
-    }
-
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
-        @include fill(
-            $pivotgrid-button-text,
-            $pivotgrid-button-bg
-        );
-        box-shadow: unset;
-
-        .k-field-actions .k-setting-delete {
-            @include fill(
-                $pivotgrid-remove-text,
-                $pivotgrid-remove-bg
-            );
-            opacity: .75;
-        }
-
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $pivotgrid-button-hover-text,
-                $pivotgrid-button-hover-bg
-            );
-
-            .k-field-actions .k-setting-delete {
-                opacity: 1;
-            }
-        }
-
-        // Pressed state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                $pivotgrid-button-active-text,
-                $pivotgrid-button-active-bg
-            );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focused {
-            box-shadow: $button-focused-shadow;
-        }
-
-        &.k-empty {
-            background-color: $pivotgrid-container-bg;
-        }
-    }
-
-    // Loading indicator
-    .k-fieldselector {
-        .k-i-loading {
-            border-color: $header-bg;
-        }
-
-        .k-i-loading::before,
-        .k-i-loading::after {
-            background-color: $header-bg;
-        }
-    }
-
-    // KPI icons
-    .k-i-kpi-trend-increase,
-    .k-i-kpi-trend-decrease,
-    .k-i-kpi-trend-equal {
-        color: inherit;
-    }
-
-    .k-i-kpi-status-hold {
-        color: $warning;
-    }
-
-    .k-i-kpi-status-deny {
-        color: $error;
-    }
-
-    .k-i-kpi-status-open {
-        color: $success;
-    }
-}

package/scss/switch/_variables.scss

@@ -2,17 +2,22 @@
 $switch-size: 32px !default;
 $switch-border-radius: $switch-size !default;
 
+/// Font family of the switch.
+/// @group switch
 $switch-font-family: $font-family !default;
 $switch-font-size: $font-size-xs !default;
-$switch-line-height: $line-height !default;
 
 $switch-track-size: 14px !default;
+/// Border width of the switch track.
+/// @group switch
 $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;
+/// Border width of the switch thumb.
+/// @group switch
 $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
@@ -20,65 +25,154 @@ $switch-thumb-end-x: calc( 100% - #{$switch-handle-size} + ( ( #{$switch-handle-
 
 $switch-label-offset: null !default;
 $switch-label-width: null !default;
+/// Text transform of the switch label.
+/// @group switch
 $switch-label-text-transform: null !default;
+/// Display of the switch label.
+/// @group switch
 $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;
-
+/// The background of the track when the switch is not checked.
+/// @group switch
 $switch-off-bg: rgba( black, .38 ) !default;
+/// The text color of the track when the switch is not checked.
+/// @group switch
 $switch-off-text: null !default;
+/// The border color of the track when the switch is not checked.
+/// @group switch
 $switch-off-border: null !default;
+/// The background gradient of the track when the switch is not checked.
+/// @group switch
 $switch-off-gradient: null !default;
 $switch-off-shadow: null !default;
 
+/// The background of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-bg: null !default;
+/// The text color of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-text: null !default;
+/// The border color of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-border: null !default;
+/// The background gradient of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-gradient: null !default;
 
+/// The background of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-bg: null !default;
+/// The text color of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-text: null !default;
+/// The border color of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-border: null !default;
+/// The background gradient of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-gradient: null !default;
+/// The ring around the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-shadow: null !default;
 
+/// The background of the thumb when the switch is not checked.
+/// @group switch
 $switch-off-handle-bg: $white !default;
+/// The text color of the thumb when the switch is not checked.
+/// @group switch
 $switch-off-handle-text: $switch-off-text !default;
+/// The border color of the thumb when the switch is not checked.
+/// @group switch
 $switch-off-handle-border: null !default;
+/// The background gradient of the thumb when the switch is not checked.
+/// @group switch
 $switch-off-handle-gradient: null !default;
-$switch-off-handle-shadow: $switch-on-handle-shadow !default;
+$switch-off-handle-shadow: $box-shadow-depth-2 !default;
 
+/// The background of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-bg: null !default;
+/// The text color of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-text: null !default;
+/// The border color of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-border: null !default;
+/// The background gradient of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-gradient: null !default;
+
+
+/// The background of the track when the switch is checked.
+/// @group switch
+$switch-on-bg: rgba( $primary, .54 ) !default;
+/// The text color of the track when the switch is checked.
+/// @group switch
+$switch-on-text: null !default;
+/// The border color of the track when the switch is checked.
+/// @group switch
+$switch-on-border: null !default;
+/// The background gradient of the track when the switch is checked.
+/// @group switch
+$switch-on-gradient: null !default;
+$switch-on-shadow: null !default;
+
+/// The background of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-bg: null !default;
+/// The text color of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-text: null !default;
+/// The border color of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-border: null !default;
+/// The background gradient of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-gradient: null !default;
+
+/// The background of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-bg: null !default;
+/// The text color of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-text: null !default;
+/// The border color of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-border: null !default;
+/// The background gradient of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-gradient: null !default;
+/// The ring around the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-shadow: null !default;
+
+/// The background of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-bg: $primary !default;
+/// The text color of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-text: null !default;
+/// The border color of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-border: null !default;
+/// The background gradient of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-gradient: null !default;
+$switch-on-handle-shadow: $switch-off-handle-shadow !default;
+
+/// The background of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-bg: null !default;
+/// The text color of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-text: null !default;
+/// The border color of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-border: null !default;
+/// The background gradient of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-gradient: null !default;

package/scss/toolbar/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../menu/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/toolbar/_theme.scss

@@ -4,13 +4,11 @@
 
     .k-toolbar {
 
-        .k-button,
-        .k-button-secondary {
+        .k-button {
             background-color: try-shade( $button-bg );
         }
 
-        .k-button-primary,
-        .k-button.k-primary {
+        .k-button-primary {
             background-color: $primary-button-bg;
 
             &:disabled,

package/scss/treeview/_variables.scss

@@ -1,4 +1,4 @@
-// TreeviewTreeview
+// Treeview
 
 /// Font family of the treeview component.
 /// @group treeview