@progress/kendo-theme-material 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/dialog/_theme.scss

@@ -6,19 +6,16 @@
     // Titlebar
     .k-dialog-titlebar {
         @include fill(
-            $dialog-titlebar-text,
-            $dialog-titlebar-bg,
-            $dialog-titlebar-border
+            $kendo-dialog-titlebar-text,
+            $kendo-dialog-titlebar-bg,
+            $kendo-dialog-titlebar-border
         );
     }
 
     // Content scroll border
     .k-dialog-content.k-scroll {
-        border-color: $component-border;
+        border-color: $kendo-component-border;
     }
 
 
-    // Button group
-    .k-dialog-buttongroup {}
-
 }

package/scss/dialog/_variables.scss

@@ -1,10 +1,18 @@
 // Dialog
-$dialog-titlebar-bg: null !default;
-$dialog-titlebar-text: null !default;
-$dialog-titlebar-border: null !default;
+$kendo-dialog-titlebar-bg: null !default;
+$kendo-dialog-titlebar-text: null !default;
+$kendo-dialog-titlebar-border: null !default;
 
-$dialog-buttongroup-padding-x: $actions-padding-x !default;
-$dialog-buttongroup-padding-y: $actions-padding-y !default;
-$dialog-buttongroup-border-width: 1px !default;
+$kendo-dialog-buttongroup-padding-x: $actions-padding-x !default;
+$kendo-dialog-buttongroup-padding-y: $actions-padding-y !default;
+$kendo-dialog-buttongroup-border-width: 1px !default;
 
-$dialog-button-spacing: $actions-button-spacing !default;
+$kendo-dialog-button-spacing: $actions-button-spacing !default;
+
+/// Theme colors map for the dialog.
+/// @group dialog
+$kendo-dialog-theme-colors: (
+    "primary": k-map-get($kendo-theme-colors, "primary"),
+    "light": k-map-get($kendo-theme-colors, "light"),
+    "dark": k-map-get($kendo-theme-colors, "dark")
+) !default;

package/scss/draggable/_index.scss

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

package/scss/draggable/_layout.scss

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

package/scss/draggable/_theme.scss

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

package/scss/draggable/_variables.scss

@@ -0,0 +1,27 @@
+// Drag hint
+$drag-clue-padding-x: $kendo-padding-md-x !default;
+$drag-clue-padding-y: k-math-div( $kendo-padding-md-x, 2 ) !default;
+$drag-clue-border-width: null !default;
+$drag-clue-border-radius: 9999px !default;
+$drag-clue-font-size: $font-size !default;
+$drag-clue-font-family: $font-family !default;
+$drag-clue-line-height: k-math-div( 20, 14 ) !default;
+
+$drag-clue-bg: k-try-shade( $kendo-body-bg ) !default;
+$drag-clue-text: $kendo-body-text !default;
+$drag-clue-border: null !default;
+$drag-clue-gradient: null !default;
+$drag-clue-shadow: $box-shadow-depth-3 !default;
+
+$drag-clue-opacity: null !default;
+
+
+// Drop hint
+$drop-hint-arrow-size: 8px !default;
+$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
+$drop-hint-line-h-width: 20px !default;
+$drop-hint-line-h-height: 1px !default;
+$drop-hint-line-v-width: $drop-hint-line-h-height !default;
+$drop-hint-line-v-height: $drop-hint-line-h-width !default;
+
+$drop-hint-bg: $kendo-color-primary !default;

package/scss/drawer/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/drawer/_layout.scss

@@ -1,28 +1 @@
-@import "~@progress/kendo-theme-default/scss/drawer/_layout.scss";
-
-@include exports( "drawer/layout/material" ) {
-    .k-drawer-container {
-        .k-drawer-items {
-            .k-item-text {
-                padding: 0;
-            }
-
-            .k-icon {
-                margin: 0;
-
-                & + .k-item-text {
-                    padding-left: $drawer-item-padding-x;
-                }
-            }
-        }
-
-        .k-rtl & .k-drawer-items,
-        [dir="rtl"] & .k-drawer-items,
-        &[dir="rtl"] {
-            .k-icon + .k-item-text {
-                padding-left: 0;
-                padding-right: $drawer-item-padding-x;
-            }
-        }
-    }
-}
+@import "@progress/kendo-theme-default/scss/drawer/_layout.scss";

package/scss/drawer/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/drawer/_theme.scss";
+@import "@progress/kendo-theme-default/scss/drawer/_theme.scss";
 
 @include exports( "drawer/theme/material" ) {
 
@@ -7,8 +7,8 @@
 
             &:focus,
             &.k-focus {
-                background-color: $drawer-focused-bg;
-                box-shadow: $drawer-focused-shadow;
+                background-color: $kendo-drawer-focus-bg;
+                box-shadow: $kendo-drawer-focus-shadow;
             }
         }
     }

package/scss/drawer/_variables.scss

@@ -1,38 +1,39 @@
 // Drawer
-$drawer-bg: $component-bg !default;
-$drawer-text: $component-text !default;
-$drawer-border: $component-border !default;
-$drawer-border-width: 1px !default;
-$drawer-font-family: $font-family !default;
-$drawer-font-size: $font-size !default;
-$drawer-line-height: $line-height !default;
-$drawer-content-padding-x: $padding-x !default;
-$drawer-content-padding-y: $padding-y !default;
-$drawer-item-level-padding-x: k-map-get( $spacing, 4 ) !default;
-
-$drawer-item-level-count: 5 !default;
-
-$drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
-$drawer-scrollbar-bg: #dedede !default;
-$drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba( 156, 156, 156, 1 ) !default;
-
-$drawer-item-padding-x: $padding-x !default;
-$drawer-item-padding-y: 12px !default;
-$drawer-item-font-size: 16px !default;
-$drawer-item-line-height: $line-height-lg !default;
-$drawer-icon-size: $icon-size !default;
-
-$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
-
-$drawer-hovered-bg: $hovered-bg !default;
-$drawer-hovered-text: $hovered-text !default;
-
-$drawer-focused-bg: $hovered-bg !default;
-$drawer-focused-shadow: none !default;
-
-$drawer-selected-bg: null !default;
-$drawer-selected-text: $secondary !default;
-$drawer-selected-hover-bg: $hovered-bg !default;
-$drawer-selected-hover-text: $secondary !default;
+$kendo-drawer-bg: $kendo-component-bg !default;
+$kendo-drawer-text: $kendo-component-text !default;
+$kendo-drawer-border: $kendo-component-border !default;
+$kendo-drawer-border-width: 1px !default;
+$kendo-drawer-font-family: $font-family !default;
+$kendo-drawer-font-size: $font-size !default;
+$kendo-drawer-line-height: $line-height !default;
+$kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+$kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
+
+$kendo-drawer-scrollbar-width: 7px !default;
+$kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+$kendo-drawer-scrollbar-bg: #dedede !default;
+$kendo-drawer-scrollbar-radius: 20px !default;
+$kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
+
+$kendo-drawer-item-padding-x: $kendo-padding-md-x !default;
+$kendo-drawer-item-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-drawer-item-font-size: 16px !default;
+$kendo-drawer-item-line-height: $line-height-lg !default;
+
+$kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+$kendo-drawer-item-level-count: 5 !default;
+
+$kendo-drawer-icon-size: $kendo-icon-size !default;
+
+$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size}) !default;
+
+$kendo-drawer-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-hover-text: $kendo-hover-text !default;
+
+$kendo-drawer-focus-bg: $kendo-hover-bg !default;
+$kendo-drawer-focus-shadow: none !default;
+
+$kendo-drawer-selected-bg: null !default;
+$kendo-drawer-selected-text: $kendo-color-secondary !default;
+$kendo-drawer-selected-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-selected-hover-text: $kendo-color-secondary !default;

package/scss/dropdowngrid/_index.scss

@@ -3,16 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../table/_index.scss";
-@import "../input/_index.scss";
 @import "../floating-label/_index.scss";
-@import "../combobox/_index.scss";
+@import "../icons/_index.scss";
+@import "../input/_index.scss";
 @import "../popup/_index.scss";
-@import "../toolbar/_variables.scss";
-@import "../menu/_variables.scss";
-@import "../grid/_variables.scss";
+@import "../table/_index.scss";
 
 
 // Component
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dropdowngrid/_layout.scss

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

package/scss/dropdowngrid/_theme.scss

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

package/scss/dropdowngrid/_variables.scss

@@ -0,0 +1 @@
+// Dropdown grid

package/scss/dropdownlist/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dropdownlist/_layout.scss

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

package/scss/dropdownlist/_theme.scss

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

package/scss/dropdownlist/_variables.scss

@@ -1,20 +1 @@
 // Dropdownlist
-$dropdownlist-bg: $kendo-input-bg !default;
-$dropdownlist-text: $kendo-input-text !default;
-$dropdownlist-border: $kendo-input-border !default;
-$dropdownlist-gradient: null !default;
-
-$dropdownlist-hovered-bg: null !default;
-$dropdownlist-hovered-text: null !default;
-$dropdownlist-hovered-border: $kendo-input-hover-border !default;
-$dropdownlist-hovered-gradient: null !default;
-
-$dropdownlist-focused-bg: null !default;
-$dropdownlist-focused-text: null !default;
-$dropdownlist-focused-border: $kendo-input-focus-border !default;
-$dropdownlist-focused-gradient: null !default;
-$dropdownlist-focused-shadow: null !default;
-
-$dropdownlist-select-text: $subtle-text !default;
-$dropdownlist-select-hovered-text: $kendo-input-text !default;
-$dropdownlist-select-focused-text: $kendo-input-text !default;

package/scss/dropdowntree/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dropdowntree/_layout.scss

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

package/scss/dropdowntree/_theme.scss

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

package/scss/dropdowntree/_variables.scss

@@ -1,3 +1,3 @@
 // Dropdowntree
-$dropdowntree-popup-padding-x: k-map-get( $spacing, 2 ) !default;
-$dropdowntree-popup-padding-y: k-map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;

package/scss/dropzone/_index.scss

@@ -6,6 +6,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dropzone/_layout.scss

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

package/scss/dropzone/_theme.scss

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

package/scss/dropzone/_variables.scss

@@ -1,6 +1,7 @@
 // Dropzone
-$dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
-$dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
+
+$dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $dropzone-border-width: 1px !default;
 $dropzone-min-height: 220px !default;
 
@@ -12,15 +13,15 @@ $dropzone-bg: k-try-shade( $base-bg, 1 ) !default;
 $dropzone-text: $base-text !default;
 $dropzone-border: $base-border !default;
 
-$dropzone-icon-size: ( $icon-size * 3 ) !default;
-$dropzone-icon-spacing: k-map-get( $spacing, 6 ) !default;
+$dropzone-icon-size: ( $kendo-icon-size * 3 ) !default;
+$dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
 $dropzone-icon-text: k-try-tint( $dropzone-text, 4 ) !default;
-$dropzone-icon-hover-text: $primary !default;
+$dropzone-icon-hover-text: $kendo-color-primary !default;
 
 $dropzone-hint-font-size: null !default;
-$dropzone-hint-spacing: k-map-get( $spacing, 2 ) !default;
+$dropzone-hint-spacing: k-map-get( $kendo-spacing, 2 ) !default;
 $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: $subtle-text !default;
+$dropzone-note-text: $kendo-subtle-text !default;

package/scss/editor/_index.scss

@@ -14,6 +14,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/editor/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/editor/_layout.scss";
+@import "@progress/kendo-theme-default/scss/editor/_layout.scss";
 
 @include exports("editor/layout/material") {
 
@@ -16,41 +16,7 @@
         font-size: $font-size-md;
 
         .k-icon {
-            margin-left: $editor-export-tool-icon-margin-x;
+            margin-left: $kendo-editor-export-tool-icon-margin-x;
         }
     }
 }
-
-
-
-
-@include exports( "editor/dialog/layout/material" ) {
-
-    .k-editor-dialog {
-        box-sizing: border-box;
-
-        .k-edit-form-container {
-            width: auto;
-        }
-
-        .k-edit-label {
-            padding: calc( #{$padding-y} - #{$kendo-input-border-width} ) 0;
-            margin: 0 0 -.5em;
-            width: auto;
-            font-size: $font-size-sm;
-            line-height: 1;
-            text-align: inherit;
-            display: block;
-            float: none;
-        }
-
-        .k-edit-field {
-            width: auto;
-            float: none;
-            display: flex;
-            flex-direction: row;
-        }
-
-    }
-
-}

package/scss/editor/_theme.scss

@@ -1,89 +1 @@
-@include exports("editor/theme") {
-
-    .k-editor {
-        @include fill(
-            $panel-text,
-            $panel-bg,
-            $panel-border
-        );
-
-        .k-editor-toolbar {}
-        .k-editable-area {
-            border-color: $panel-border;
-        }
-    }
-
-    // Inline Editor
-    .k-editor-inline {
-
-        .k-table {
-            &,
-            & td {
-                border-color: #cccccc;
-            }
-        }
-
-        .k-element-resize-handle-wrapper {
-            background-color: #ffffff;
-            border-color: #000000;
-        }
-
-        .k-column-resize-handle-wrapper {
-            .k-column-resize-handle {
-                .k-column-resize-marker {
-                    background-color: #00b0ff;
-                }
-            }
-        }
-
-        .k-row-resize-handle-wrapper {
-            .k-row-resize-marker {
-                background-color: #00b0ff;
-            }
-        }
-
-        // Hover & Active state
-        &:hover,
-        &.k-hover
-        &.k-active {
-            border-color: $panel-border;
-        }
-    }
-
-    // Resizable images
-    .k-editor-resize-handle {
-        background-color: $editor-resize-handle-bg;
-        border-color: $editor-resize-handle-border;
-    }
-    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
-        outline-color: $editor-selectednode-outline-color;
-    }
-
-
-    // Insert table
-    .k-ct-popup {
-        .k-selected {
-            @include fill( $selected-text, $selected-bg, $selected-border, none );
-        }
-    }
-
-    // Content
-    .k-editor-content {
-
-        // Selection
-        .k-text-selected,
-        &::selection {
-            @include fill (
-                $color: $editor-selected-text,
-                $bg: $editor-selected-bg
-            );
-        }
-
-        .k-text-highlighted {
-            @include fill (
-                $bg: $editor-highlighted-bg
-            );
-        }
-    }
-
-}
+@import "@progress/kendo-theme-default/scss/editor/_theme.scss";

package/scss/editor/_variables.scss

@@ -1,23 +1,23 @@
 // Editor
-$editor-border-width: 1px !default;
-$editor-font-family: $font-family !default;
-$editor-font-size: $font-size !default;
-$editor-line-height: $line-height !default;
+$kendo-editor-border-width: 1px !default;
+$kendo-editor-font-family: $font-family !default;
+$kendo-editor-font-size: $font-size !default;
+$kendo-editor-line-height: $line-height !default;
 
-$editor-placeholder-text: $kendo-input-placeholder-text !default;
-$editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
+$kendo-editor-placeholder-text: $kendo-input-placeholder-text !default;
+$kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
-$editor-selected-text: $primary-contrast !default;
-$editor-selected-bg: $primary !default;
+$kendo-editor-selected-text: $kendo-color-primary-contrast !default;
+$kendo-editor-selected-bg: $kendo-color-primary !default;
 
-$editor-highlighted-bg: k-color-mix($primary, #ffffff, 20%) !default;
+$kendo-editor-highlighted-bg: k-color-mix($kendo-color-primary, #ffffff, 20%) !default;
 
-$editor-export-tool-icon-margin-x: .5em !default;
+$kendo-editor-export-tool-icon-margin-x: .5em !default;
 
-$editor-resize-handle-size: 8px !default;
-$editor-resize-handle-border-width: 1px !default;
-$editor-resize-handle-border: #000000 !default;
-$editor-resize-handle-bg: #ffffff !default;
+$kendo-editor-resize-handle-size: 8px !default;
+$kendo-editor-resize-handle-border-width: 1px !default;
+$kendo-editor-resize-handle-border: #000000 !default;
+$kendo-editor-resize-handle-bg: #ffffff !default;
 
-$editor-selectednode-outline-width: 2px !default;
-$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
+$kendo-editor-selectednode-outline-width: 2px !default;
+$kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length

package/scss/expansion-panel/_index.scss

@@ -3,13 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_display.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_display.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../list/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/expansion-panel/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/expansion-panel/_layout.scss";
+@import "@progress/kendo-theme-default/scss/expansion-panel/_layout.scss";

package/scss/expansion-panel/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/expansion-panel/_theme.scss";
+@import "@progress/kendo-theme-default/scss/expansion-panel/_theme.scss";