@progress/kendo-theme-material 4.43.1-dev.1 → 4.43.1-dev.2

package/scss/colorpicker/_theme.scss

@@ -1,38 +1 @@
 @import "../../modules/@progress/kendo-theme-default/scss/colorpicker/_theme.scss";
-
-@include exports( "colorpicker/theme/material" ) {
-
-    .k-colorpicker {
-        .k-picker-wrap {
-
-            .k-selected-color {
-                border-color: rgba( 0, 0, 0, .08 );
-            }
-
-            .k-select {
-                color: $colorpicker-select-text;
-            }
-
-            // Hover
-            &:hover,
-            &.k-state-hover {
-
-                .k-select {
-                    color: $colorpicker-select-hovered-text;
-                }
-            }
-
-            // Focused
-            &.k-state-focused,
-            .k-state-focused > & {
-
-                .k-select {
-                    color: $colorpicker-select-focused-text;
-                }
-            }
-
-        }
-
-    }
-
-}

package/scss/colorpicker/_variables.scss

@@ -3,21 +3,21 @@ $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
 
-$colorpicker-bg: null !default;
+$colorpicker-bg: $input-bg !default;
 $colorpicker-text: $input-text !default;
 $colorpicker-border: $input-border !default;
 $colorpicker-gradient: null !default;
 
-$colorpicker-hovered-bg: null !default;
-$colorpicker-hovered-text: null !default;
+$colorpicker-hovered-bg: $input-hovered-bg !default;
+$colorpicker-hovered-text: $input-hovered-text !default;
 $colorpicker-hovered-border: $input-hovered-border !default;
 $colorpicker-hovered-gradient: null !default;
 
-$colorpicker-focused-bg: null !default;
-$colorpicker-focused-text: null !default;
+$colorpicker-focused-bg: $input-focused-bg !default;
+$colorpicker-focused-text: $input-focused-text !default;
 $colorpicker-focused-border: $input-focused-border !default;
 $colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: null !default;
+$colorpicker-focused-shadow: $input-focused-shadow !default;
 
 $colorpicker-select-text: $subtle-text !default;
 $colorpicker-select-hovered-text: $input-text !default;

package/scss/dateinput/_index.scss

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

package/scss/dateinput/_layout.scss

@@ -0,0 +1,12 @@
+@import "../../modules/@progress/kendo-theme-default/scss/dateinput/_layout.scss";
+
+@include exports( "dateinput/layout/material" ) {
+
+    // Date input
+    .k-dateinput {
+        @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/dateinput/_theme.scss

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

package/scss/dateinput/_variables.scss

@@ -0,0 +1 @@
+// Date input

package/scss/datepicker/_index.scss

@@ -0,0 +1,13 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../popup/_index.scss";
+@import "../calendar/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datepicker/_layout.scss

@@ -0,0 +1,12 @@
+@import "../../modules/@progress/kendo-theme-default/scss/datepicker/_layout.scss";
+
+@include exports( "datepicker/layout/material" ) {
+
+    // Date picker
+    .k-datepicker {
+        @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/datepicker/_theme.scss

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

package/scss/datepicker/_variables.scss

@@ -0,0 +1 @@
+// Datepicker

package/scss/{datetime → datetimepicker}/_index.scss

@@ -2,12 +2,13 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
 
 
 // Component

package/scss/datetimepicker/_layout.scss

@@ -0,0 +1,12 @@
+@import "../../modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss";
+
+@include exports( "datetimepicker/layout/material" ) {
+
+    // Datetime picker
+    .k-datetimepicker {
+        @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/datetimepicker/_theme.scss

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

package/scss/datetimepicker/_variables.scss

@@ -0,0 +1,2 @@
+// DateTime
+$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;

package/scss/filter/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../checkbox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../toolbar/_index.scss";

package/scss/gantt/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../validator/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";

package/scss/grid/_index.scss

@@ -14,7 +14,7 @@
 @import "../radio/_index.scss";
 @import "../validator/_index.scss";
 @import "../autocomplete/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../menu/_index.scss";

package/scss/grid/_variables.scss

@@ -14,7 +14,7 @@ $grid-header-font-size: 12px !default;
 $grid-footer-padding-x: $grid-header-padding-x !default;
 $grid-footer-padding-y: $grid-header-padding-y !default;
 
-$grid-grouping-header-padding-x: 14px !default;
+$grid-grouping-header-padding-x: 8px !default;
 $grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
 
 $grid-filter-cell-padding-x: $grid-padding-x !default;

package/scss/index.scss

@@ -53,6 +53,7 @@
 
 // Form requirements
 @import "calendar/_index.scss";
+@import "timeselector/_index.scss";
 
 
 // Augmented forms
@@ -63,7 +64,10 @@
 @import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
-@import "datetime/_index.scss";
+@import "dateinput/_index.scss";
+@import "datepicker/_index.scss";
+@import "timepicker/_index.scss";
+@import "datetimepicker/_index.scss";
 @import "dropdowngrid/_index.scss";
 @import "dropdownlist/_index.scss";
 @import "dropdowntree/_index.scss";

package/scss/input/_variables.scss

@@ -77,6 +77,21 @@ $picker-select-calc-size: calc( #{$picker-select-padding-x * 2} + #{$icon-size}
 $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
 $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
 
+$picker-select-bg: null !default;
+$picker-select-text: $subtle-text !default;
+$picker-select-border: null !default;
+$picker-select-gradient: null !default;
+
+$picker-select-hovered-bg: null !default;
+$picker-select-hovered-text: $input-text !default;
+$picker-select-hovered-border: null !default;
+$picker-select-hovered-gradient: null !default;
+
+$picker-select-pressed-bg: null !default;
+$picker-select-pressed-text: null !default;
+$picker-select-pressed-border: null !default;
+$picker-select-pressed-gradient: null !default;
+
 
 // Spinner
 $spinner-width: $button-inner-calc-size !default;

package/scss/panelbar/_variables.scss

@@ -95,3 +95,8 @@ $panelbar-item-selected-hovered-focused-bg: try-tint($panelbar-item-selected-bg,
 $panelbar-item-selected-hovered-focused-text: null !default;
 $panelbar-item-selected-hovered-focused-border: null !default;
 $panelbar-item-selected-hovered-focused-gradient: null !default;
+
+$panelbar-header-expanded-bg: null !default;
+$panelbar-header-expanded-text: null !default;
+$panelbar-header-expanded-border: null !default;
+$panelbar-header-expanded-gradient: null !default;

package/scss/pivotgrid/_variables.scss

@@ -54,9 +54,6 @@ $pivotgrid-configurator-content-padding-y: 0px !default;
 $pivotgrid-configurator-fields-margin-x: 0px !default;
 $pivotgrid-configurator-fields-margin-y: ( $pivotgrid-spacer / 2 ) !default;
 
-$pivotgrid-configurator-actions-padding-x: ( $pivotgrid-spacer / 2 ) !default;
-$pivotgrid-configurator-actions-padding-y: ( $pivotgrid-spacer * .75 ) !default;
-
 $pivotgrid-configurator-vertical-width: 320px !default;
 $pivotgrid-configurator-horizontal-height: 420px !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/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";

package/scss/timepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../button/_index.scss";
+@import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../timeselector/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/timepicker/_layout.scss

@@ -0,0 +1,12 @@
+@import "../../modules/@progress/kendo-theme-default/scss/timepicker/_layout.scss";
+
+@include exports("timepicker/layout/material") {
+
+    // Time picker
+    .k-timepicker {
+        @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/timepicker/_theme.scss

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

package/scss/timepicker/_variables.scss

@@ -0,0 +1 @@
+// Time picker

package/scss/timeselector/_index.scss

@@ -0,0 +1,13 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../list/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../button/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/timeselector/_layout.scss

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

package/scss/timeselector/_theme.scss

@@ -0,0 +1,19 @@
+@import "../../modules/@progress/kendo-theme-default/scss/timeselector/_theme.scss";
+
+@include exports( "timeselector/theme/material" ) {
+
+    // Time selector
+    .k-timeselector {}
+
+
+    // Time list
+    .k-time-list {
+        .k-item:hover {
+            @include fill(
+                $list-item-hovered-text,
+                $list-item-hovered-bg
+            );
+        }
+    }
+
+}

package/scss/timeselector/_variables.scss

@@ -0,0 +1,32 @@
+// Time selector
+$time-selector-border-width: 1px !default;
+$time-selector-font-family: $font-family !default;
+$time-selector-font-size: $font-size !default;
+$time-selector-line-height: (20 / 14) !default;
+
+$time-selector-bg: $component-bg !default;
+$time-selector-text: $component-text !default;
+$time-selector-border: $component-border !default;
+
+$time-selector-header-padding-x: map-get( $spacing, 1 ) !default;
+$time-selector-header-padding-y: map-get( $spacing, 1 ) !default;
+$time-selector-header-border-width: 0px !default;
+
+$time-list-width: 4em !default;
+$time-list-height: 240px !default;
+
+$time-list-title-font-size: $font-size-sm !default;
+$time-list-title-line-height: 1.5 !default;
+$time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
+$time-list-title-text: $subtle-text !default;
+$time-list-title-focus-text: $component-text !default;
+
+$time-list-item-padding-x: $list-item-padding-x !default;
+$time-list-item-padding-y: $list-item-padding-y !default;
+
+$time-list-highlight-border-width: 1px 0px !default;
+$time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
+$time-list-highlight-bg: $component-bg !default;
+$time-list-highlight-border: $component-border !default;
+
+$time-list-focused-bg: null !default;

package/scss/utils/_border.scss

@@ -4,8 +4,7 @@ $utils-border-radius: (
     sm: .125rem,
     md: .25rem,
     lg: .375rem,
-    circle: 50%,
-    pill: 9999px
+    full: 9999px
 ) !default;
 
 @import "../../modules/@progress/kendo-theme-default/scss/utils/_border.scss";