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

package/scss/floating-label/_variables.scss

@@ -1,10 +1,10 @@
 // Floating label
 $floating-label-scale: 1 !default;
-$floating-label-font-size: $input-font-size !default;
-$floating-label-line-height: $input-line-height !default;
+$floating-label-font-size: $kendo-input-font-size !default;
+$floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
 $floating-label-offset-x: null !default;
-$floating-label-offset-y: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} ) !default;
+$floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: .75 !default;
 $floating-label-focus-offset-x: null !default;

package/scss/forms/_index.scss

@@ -7,7 +7,7 @@
 @import "../button/_variables.scss";
 @import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
-@import "../action-buttons/_variables.scss";
+@import "../action-buttons/_index.scss";
 @import "../window/_variables.scss";
 
 

package/scss/forms/_layout.scss

@@ -2,33 +2,6 @@
 
 @include exports("edit-form/layout/material") {
 
-    // Tabstrip
-    .k-edit-form-container .k-tabstrip-wrapper {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-    .k-edit-form-container .k-tabstrip.k-root-tabs {
-        margin-bottom: $window-inner-padding-y;
-    }
-    .k-edit-form-container .k-tabstrip .k-tabstrip-items {
-        padding: 0;
-    }
-    .k-edit-form-container .k-tabstrip .k-content {
-        padding: $window-inner-padding-y $window-inner-padding-x;
-        border-width: 0;
-    }
-
-
-    // Edit buttons
-    .k-edit-buttons {
-        padding: 8px;
-    }
-    .k-edit-form-container .k-edit-buttons {
-        border-top-width: 0;
-        padding: 8px;
-    }
-
-
     // Fields
     .k-edit-label {
         padding: 0;
@@ -46,13 +19,6 @@
         display: flex;
         flex-direction: row;
 
-        .k-numerictextbox,
-        .k-textbox,
-        .k-dropdown {
-            width: auto;
-            flex: 1 1 auto;
-        }
-
         > div {
             width: auto;
             flex: 1 1 auto;
@@ -73,8 +39,5 @@
             }
         }
     }
-    .k-no-flexbox .k-edit-field {
-        display: block;
-    }
 
 }

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";
@@ -23,6 +23,7 @@
 @import "../skeleton/_index.scss";
 @import "../utils/_float.scss";
 @import "../utils/_spacer.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/grid/_layout.scss

@@ -1,5 +1,4 @@
 $grid-hierarchy-col-width: 32px !default;
-$grid-form-component-vertical-align: middle !default;
 // TODO: perhaps these should be the values for cell-padding-x/-y
 $grid-grouping-row-border-top: 0px !default;
 $grid-group-footer-border-y: 1px !default;
@@ -7,29 +6,17 @@ $grid-group-footer-second-cell-border: 0px !default;
 $grid-header-first-border: 1px !default;
 $grid-sorted-icon-spacing: 4px !default;
 $grid-header-menu-icon-spacing: 14px !default;
-$grid-group-indicator-border-radius: calc( #{$font-size} + #{$button-padding-y} ) !default;
+$grid-group-indicator-border-radius: calc( #{$font-size} + #{$kendo-button-padding-y} ) !default;
 $grid-group-indicator-gap: 8px !default;
 
 $grid-group-dropclue-height: calc( #{$font-size * 2} + #{$padding-y * 2} ) !default;
-$grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header-padding-y * 2} - #{$grid-group-dropclue-height} ) / 2) !default;
+$grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-header-padding-y * 2} - #{$grid-group-dropclue-height} ) / 2) !default;
 
 @import "~@progress/kendo-theme-default/scss/grid/_layout.scss";
 
 @include exports ("grid/layout/material") {
-    $text-field-border-width: 2px;
-    $text-field-radius: $text-field-border-width + 1px;
-    $text-field-padding: (2 * $grid-cell-padding-x / 3);
 
     .k-grid {
-        .k-checkbox-label,
-        .k-radio-label {
-            line-height: normal;
-        }
-
-        .k-button,
-        .k-button:active {
-            box-shadow: none;
-        }
 
         .k-group-footer td {
             border-top-width: 0;
@@ -46,6 +33,10 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
                 border-width: 0 $grid-cell-vertical-border-width $grid-cell-horizontal-border-width 0;
             }
         }
+
+        .k-command-cell .k-button {
+            @include box-shadow( none );
+        }
     }
 
     .k-grid-header {
@@ -62,16 +53,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
             border-radius: 50%;
         }
 
-        .k-filter-row {
-            .k-dropdown-operator .k-dropdown-wrap {
-                border-width: 0;
-            }
-
-            .k-button.k-button-icon {
-                box-shadow: none;
-            }
-        }
-
         .k-header-column-menu {
             border-radius: 50%;
         }
@@ -100,7 +81,7 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
 
         .k-group-indicator {
             border-width: 0;
-            line-height: $button-line-height;
+            line-height: $kendo-button-line-height;
         }
     }
 

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,
@@ -240,14 +240,14 @@
     .k-columnmenu-item {
         &.k-state-selected {
             @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
             );
         }
     }
     .k-columnmenu-item:focus,
     .k-columnmenu-item.k-state-focus {
-        background: $list-item-hovered-bg;
+        background: $kendo-list-item-hover-bg;
     }
 
     .k-column-menu .k-menu:not(.k-context-menu) {
@@ -255,7 +255,7 @@
         .k-item {
             // Selected state
             &.k-state-selected {
-                background: $list-item-hovered-bg;
+                background: $kendo-list-item-hover-bg;
             }
         }
     }

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;
@@ -107,15 +107,13 @@ $grid-sorting-index-spacing-y: $icon-spacing / 2 !default;
 $grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
 
 
-$grid-focused-shadow: $list-item-focused-shadow !default;
+$grid-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $grid-edit-cell-padding-x: $grid-cell-padding-x !default;
 $grid-edit-cell-padding-y: 6px !default;
 
 $grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
 
-$grid-search-width: $input-default-width !default;
-
 $grid-sticky-bg: $grid-bg !default;
 $grid-sticky-text: $grid-text !default;
 $grid-sticky-border: rgba( contrast-wcag( $grid-bg ), .5 ) !default;
@@ -135,21 +133,21 @@ $grid-sticky-selected-alt-bg: $grid-sticky-selected-bg !default;
 $grid-sticky-hovered-bg: try-shade($grid-bg, 7%) !default;
 $grid-sticky-selected-hovered-bg: try-shade($grid-sticky-selected-bg, .87) !default;
 
-$grid-filter-menu-width: 250px !default;
+$grid-column-menu-width: 250px !default;
 
 $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: $kendo-menu-popup-item-padding-x !default;
+$grid-column-menu-item-padding-y: $kendo-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: $kendo-list-item-padding-x-md !default;
+$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
@@ -157,8 +155,8 @@ $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
 $grid-column-menu-filter-container-padding-x: $padding-x !default;
 $grid-column-menu-filter-container-padding-y: $padding-y !default;
 
-$grid-column-menu-group-header-padding-x: $menu-popup-item-padding-x !default;
-$grid-column-menu-group-header-padding-y: $menu-popup-item-padding-y !default;
+$grid-column-menu-group-header-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$grid-column-menu-group-header-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
 $grid-column-menu-group-header-font-size: $font-size-sm !default;
 $grid-column-menu-group-header-line-height: $line-height !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/index.scss

@@ -0,0 +1,157 @@
+@import "core/_index.scss";
+@import "common/_index.scss";
+
+
+// Typography and utils
+@import "typography/_index.scss";
+@import "utils/_index.scss";
+@import "cursor/_index.scss";
+
+
+// Generic content
+@import "styling/_index.scss";
+@import "icons/_index.scss";
+@import "messagebox/_index.scss";
+
+
+// Primitive components
+@import "list/_index.scss";
+@import "listgroup/_index.scss";
+@import "overlay/_index.scss";
+@import "popup/_index.scss";
+@import "ripple/_index.scss";
+@import "table/_index.scss";
+@import "virtual-scroller/_index.scss";
+
+
+// Indicators
+@import "avatar/_index.scss";
+@import "badge/_index.scss";
+@import "chip/_index.scss";
+@import "color-preview/_index.scss";
+@import "loader/_index.scss";
+// @import "loading/_index.scss";
+@import "skeleton/_index.scss";
+
+
+// Form helpers
+@import "forms/_index.scss";
+@import "validator/_index.scss";
+@import "floating-label/_index.scss";
+
+
+// Native forms
+@import "button/_index.scss";
+@import "input/_index.scss";
+@import "textbox/_index.scss";
+@import "textarea/_index.scss";
+@import "checkbox/_index.scss";
+@import "listbox/_index.scss";
+@import "progressbar/_index.scss";
+@import "radio/_index.scss";
+@import "slider/_index.scss";
+
+
+// Form requirements
+@import "calendar/_index.scss";
+@import "timeselector/_index.scss";
+
+
+// Augmented forms
+@import "autocomplete/_index.scss";
+@import "captcha/_index.scss";
+@import "colorpalette/_index.scss";
+@import "colorgradient/_index.scss";
+@import "coloreditor/_index.scss";
+@import "colorpicker/_index.scss";
+@import "combobox/_index.scss";
+@import "dateinput/_index.scss";
+@import "datepicker/_index.scss";
+@import "timepicker/_index.scss";
+@import "datetimepicker/_index.scss";
+@import "daterangepicker/_index.scss";
+@import "dropdowngrid/_index.scss";
+@import "dropdownlist/_index.scss";
+@import "dropdowntree/_index.scss";
+@import "maskedtextbox/_index.scss";
+@import "multiselect/_index.scss";
+@import "numerictextbox/_index.scss";
+@import "rating/_index.scss";
+@import "searchbox/_index.scss";
+@import "switch/_index.scss";
+@import "upload/_index.scss";
+@import "dropzone/_index.scss";
+
+
+// Command interfaces
+@import "action-buttons/_index.scss";
+@import "appbar/_index.scss";
+@import "fab/_index.scss";
+@import "menu/_index.scss";
+@import "toolbar/_index.scss";
+
+
+// Popups and modals
+@import "action-sheet/_index.scss";
+@import "dialog/_index.scss";
+@import "drawer/_index.scss";
+@import "notification/_index.scss";
+@import "popover/_index.scss";
+@import "responsivepanel/_index.scss";
+@import "tooltip/_index.scss";
+@import "window/_index.scss";
+
+
+// Navigation
+@import "bottom-navigation/_index.scss";
+@import "breadcrumb/_index.scss";
+@import "pager/_index.scss";
+@import "stepper/_index.scss";
+@import "tabstrip/_index.scss";
+@import "treeview/_index.scss";
+@import "wizard/_index.scss";
+
+
+// Layout & containers
+@import "card/_index.scss";
+@import "expansion-panel/_index.scss";
+@import "panelbar/_index.scss";
+@import "splitter/_index.scss";
+@import "tilelayout/_index.scss";
+
+
+// Data management
+@import "grid/_index.scss";
+@import "listview/_index.scss";
+@import "spreadsheet/_index.scss";
+@import "pivotgrid/_index.scss";
+@import "treelist/_index.scss";
+@import "filter/_index.scss";
+@import "filemanager/_index.scss";
+@import "taskboard/_index.scss";
+
+
+// Editors
+@import "editor/_index.scss";
+@import "imageeditor/_index.scss";
+
+
+// Scheduling
+@import "gantt/_index.scss";
+@import "scheduler/_index.scss";
+
+
+// Misc
+@import "adaptive/_index.scss";
+@import "chat/_index.scss";
+@import "mediaplayer/_index.scss";
+@import "timeline/_index.scss";
+@import "pdf-viewer/_index.scss";
+@import "scroller/_index.scss";
+@import "scrollview/_index.scss";
+
+
+// Dataviz
+@import "dataviz/_index.scss";
+@import "map/_index.scss";
+@import "orgchart/_index.scss";

package/scss/input/_index.scss

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

package/scss/input/_layout.scss

@@ -2,8 +2,37 @@
 
 @include exports("input/layout/material") {
 
+    // Fill mode
+    .k-input-solid,
+    .k-picker-solid {
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
+        border-width: $kendo-input-border-width 0;
+        border-top-color: transparent !important; // sass-lint:disable-line no-important
+
+        .k-input-button,
+        .k-input-spinner .k-spinner-increase,
+        .k-input-spinner .k-spinner-decrease {
+            background: none;
+        }
+    }
+
+    .k-input-flat,
+    .k-picker-flat {
+
+        .k-input-button,
+        .k-input-spinner .k-spinner-increase,
+        .k-input-spinner .k-spinner-decrease {
+            background: none;
+        }
+
+        &:disabled,
+        &.k-disabled  {
+            border-bottom-style: dashed;
+        }
+    }
+
+
     // Input ripple
-    .k-textbox-container,
     .k-floating-label-container {
         @include input-ripple();
     }