@progress/kendo-theme-material 4.43.1-dev.3 → 4.43.1-dev.4

package/modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss

@@ -97,14 +97,10 @@
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-combobox,
+        .k-dropdown {
+            width: 5em;
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss

@@ -100,12 +100,26 @@
             flex: 1 0 0%;
         }
 
+
         // Template
         .k-toolbar-template {
             align-self: center;
             align-items: center;
         }
 
+
+        // Child components
+        .k-textbox,
+        .k-combobox,
+        .k-dropdown,
+        .k-searchbox,
+        .k-numerictextbox,
+        .k-datepicker,
+        .k-timepicker,
+        .k-datetimepicker {
+            width: 10em;
+        }
+
     }
 
 
@@ -120,6 +134,7 @@
 
     // Angular specific
     kendo-toolbar-renderer {
+        display: inline-block;
         border-color: inherit;
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "4.43.1-dev.3",
+  "version": "4.43.1-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,7 +51,7 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.43.1-dev.3"
+    "@progress/kendo-theme-default": "^4.43.1-dev.4"
   },
-  "gitHead": "17b6139d64d5dab2c8687e0f2e50fda466679766"
+  "gitHead": "f0dfb6acb8fcf7694986e41e4b08d242c4b47add"
 }

package/scss/checkbox/_index.scss

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

package/scss/coloreditor/_variables.scss

@@ -18,9 +18,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: map-get( $spacing, 2 ) !default;
 
-$coloreditor-preview-gap: 2px !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;

package/scss/combobox/_layout.scss

@@ -2,12 +2,11 @@
 
 @include exports( "combobox/layout/material" ) {
 
+    // Combobox
     .k-combobox {
-        .k-dropdown-wrap {
-            @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
-        }
+        @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/combobox/_variables.scss

@@ -1,32 +1 @@
-// Comboboxes
-$combobox-select-padding-x: ($button-padding-y / 2) !default;
-$combobox-select-padding-y: $button-padding-y !default;
-$combobox-select-width: null !default;
-
-$combobox-bg: $input-bg !default;
-$combobox-text: $input-text !default;
-$combobox-border: $input-border !default;
-
-$combobox-hovered-bg: $input-hovered-bg !default;
-$combobox-hovered-text: $input-hovered-text !default;
-$combobox-hovered-border: $input-hovered-border !default;
-
-$combobox-focused-bg: $input-focused-bg !default;
-$combobox-focused-text: $input-focused-text !default;
-$combobox-focused-border: $input-focused-border !default;
-$combobox-focused-shadow: $input-focused-shadow !default;
-
-$combobox-select-bg: null !default;
-$combobox-select-text: $subtle-text !default;
-$combobox-select-border: null !default;
-$combobox-select-gradient: null !default;
-
-$combobox-select-hovered-bg: null !default;
-$combobox-select-hovered-text: $input-text !default;
-$combobox-select-hovered-border: null !default;
-$combobox-select-hovered-gradient: null !default;
-
-$combobox-select-pressed-bg: null !default;
-$combobox-select-pressed-text: null !default;
-$combobox-select-pressed-border: null !default;
-$combobox-select-pressed-gradient: null !default;
+// Combobox

package/scss/dropdownlist/_layout.scss

@@ -1,18 +1,9 @@
 @import "../../modules/@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";
 
-@include exports("dropdownlist/layout/material") {
+@include exports( "dropdownlist/layout/material" ) {
 
+    // Dropdown list
     .k-dropdown {
-        .k-dropdown-wrap {
-            @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
-        }
-    }
-
-
-    // Native select
-    select.k-dropdown {
         @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/dropdownlist/_theme.scss

@@ -1,32 +1 @@
 @import "../../modules/@progress/kendo-theme-default/scss/dropdownlist/_theme.scss";
-
-@include exports( "dropdownlist/theme/material" ) {
-
-    .k-dropdown {
-        .k-dropdown-wrap {
-
-            .k-select {
-                color: $dropdownlist-select-text;
-            }
-
-            // Hover
-            &:hover,
-            &.k-state-hover {
-
-                .k-select {
-                    color: $dropdownlist-select-hovered-text;
-                }
-            }
-
-            // Focused
-            &.k-state-focused,
-            .k-state-focused > & {
-
-                .k-select {
-                    color: $dropdownlist-select-focused-text;
-                }
-            }
-        }
-    }
-
-}

package/scss/filter/_variables.scss

@@ -5,7 +5,7 @@ $filter-padding-y: $filter-padding-x !default;
 $filter-bottom-margin: 2.1em !default;
 $filter-line-size: 1px !default;
 
-$filter-operator-dropdown-width: 19em !default;
+$filter-operator-dropdown-width: 15em !default;
 
 $filter-preview-field-text: $primary !default;
 $filter-preview-operator-text: $subtle-text !default;

package/scss/grid/_variables.scss

@@ -142,14 +142,14 @@ $grid-filter-menu-check-all-border-bottom-width: 0 !default;
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 4 ) !default;
 $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y-lg !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x !default;
-$grid-column-menu-item-padding-y: $padding-y-lg !default;
+$grid-column-menu-item-padding-x: $menu-popup-item-padding-x !default;
+$grid-column-menu-item-padding-y: $menu-popup-item-padding-y !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $list-item-padding-x !default;
+$grid-column-menu-list-item-padding-y: $list-item-padding-y !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;

package/scss/imageeditor/_variables.scss

@@ -13,6 +13,7 @@ $imageeditor-content-border-width: 1px !default;
 
 $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
 $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;

package/scss/input/_variables.scss

@@ -78,12 +78,12 @@ $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-
 $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-text: null !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-text: null !default;
 $picker-select-hovered-border: null !default;
 $picker-select-hovered-gradient: null !default;
 

package/scss/list/_index.scss

@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

package/scss/list/_layout.scss

@@ -3,7 +3,6 @@
 @include exports( "list/layout/material" ) {
 
     .k-list-container {
-        line-height: 1.5;
 
         .k-button {
             box-shadow: none;
@@ -13,16 +12,11 @@
             }
         }
 
-    }
-
-    .k-list {
-        line-height: 1.5;
-    }
+        .k-list__group-header { // sass-lint:disable-line class-name-format
+            min-height: auto;
+            line-height: inherit;
+        }
 
-    .k-list__item, // sass-lint:disable-line class-name-format
-    .k-list__group-header { // sass-lint:disable-line class-name-format
-        min-height: auto;
-        line-height: inherit;
     }
 
 }

package/scss/list/_variables.scss

@@ -1,4 +1,8 @@
 // List
+$list-font-size: $font-size !default;
+$list-line-height: 1.5 !default;
+$list-line-height-em: 1.5em !default;
+
 $list-item-padding-x: map-get( $spacing, 4 ) !default;
 $list-item-padding-y: map-get( $spacing, 1 ) !default;
 

package/scss/radio/_index.scss

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