@progress/kendo-theme-default 6.2.1-dev.0 → 6.2.1-dev.44

package/scss/dialog/_theme.scss

@@ -1,5 +1,6 @@
-@include exports("dialog/theme") {
-    // Titlebar
+@mixin kendo-dialog--theme-base() {
+
+    // Dialog titlebar
     .k-dialog-titlebar {
         @include fill(
             $kendo-dialog-titlebar-text,
@@ -17,3 +18,8 @@
     }
 
 }
+
+
+@mixin kendo-dialog--theme() {
+    @include kendo-dialog--theme-base();
+}

package/scss/draggable/_index.scss

@@ -16,3 +16,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-draggable--styles() {
+    @include module-render( "draggable" ) {
+        @include kendo-draggable--layout();
+        @include kendo-draggable--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-draggable--styles();
+}

package/scss/draggable/_layout.scss

@@ -1,4 +1,4 @@
-@include exports( "draggable/layout" ) {
+@mixin kendo-draggable--layout-base() {
 
     // Layout
     .k-drag-clue {
@@ -121,3 +121,8 @@
     }
 
 }
+
+
+@mixin kendo-draggable--layout() {
+    @include kendo-draggable--layout-base();
+}

package/scss/draggable/_theme.scss

@@ -1,6 +1,6 @@
-@include exports( "draggable/theme" ) {
+@mixin kendo-draggable--theme-base() {
 
-    // Theme
+    // Drag hint
     .k-drag-clue {
         @include fill(
             $kendo-drag-hint-text,
@@ -12,3 +12,8 @@
     }
 
 }
+
+
+@mixin kendo-draggable--theme() {
+    @include kendo-draggable--theme-base();
+}

package/scss/drawer/_index.scss

@@ -24,3 +24,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-drawer--styles() {
+    @include module-render( "drawer" ) {
+        @include kendo-drawer--layout();
+        @include kendo-drawer--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-drawer--styles();
+}

package/scss/drawer/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("drawer/layout") {
+@mixin kendo-drawer--layout-base() {
 
     .k-drawer-container {
         display: flex;
@@ -242,3 +242,8 @@
         }
     }
 }
+
+
+@mixin kendo-drawer--layout() {
+    @include kendo-drawer--layout-base();
+}

package/scss/drawer/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("drawer/theme") {
+@mixin kendo-drawer--theme-base() {
 
     .k-drawer {
         @include fill(
@@ -58,3 +58,8 @@
     }
 
 }
+
+
+@mixin kendo-drawer--theme() {
+    @include kendo-drawer--theme-base();
+}

package/scss/dropdowngrid/_index.scss

@@ -27,3 +27,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-dropdown-grid--styles() {
+    @include module-render( "dropdown-grid" ) {
+        @include kendo-dropdown-grid--layout();
+        @include kendo-dropdown-grid--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-dropdown-grid--styles();
+}

package/scss/dropdowngrid/_layout.scss

@@ -1,9 +1,10 @@
-@include exports("dropdowngrid/layout") {
+@mixin kendo-dropdown-grid--layout-base() {
 
-    // DropdownGrid
+    // Dropdown grid
     .k-dropdown-grid {}
 
-    // DropdowGrid Popup
+
+    // Dropdown grid popup
     .k-dropdowngrid-popup {
         overflow: hidden;
     }
@@ -12,3 +13,8 @@
     }
 
 }
+
+
+@mixin kendo-dropdown-grid--layout() {
+    @include kendo-dropdown-grid--layout-base();
+}

package/scss/dropdowngrid/_theme.scss

@@ -1,6 +1,11 @@
-@include exports("dropdowngrid/theme") {
+@mixin kendo-dropdown-grid--theme-base() {
 
     // Dropdown grid
     .k-dropdown-grid {}
 
 }
+
+
+@mixin kendo-dropdown-grid--theme() {
+    @include kendo-dropdown-grid--theme-base();
+}

package/scss/dropdownlist/_index.scss

@@ -26,3 +26,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-dropdown-list--styles() {
+    @include module-render( "dropdown-list" ) {
+        @include kendo-dropdown-list--layout();
+        @include kendo-dropdown-list--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-dropdown-list--styles();
+}

package/scss/dropdownlist/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("dropdownlist/layout") {
+@mixin kendo-dropdown-list--layout-base() {
 
     // Dropdown list
     .k-dropdown-list {}
@@ -29,10 +29,16 @@
         }
     }
 
-    // Alias
+
+    // Legacy aliases
     .k-dropdown,
     .k-dropdownlist {
         @extend .k-dropdown-list !optional;
     }
 
 }
+
+
+@mixin kendo-dropdown-list--layout() {
+    @include kendo-dropdown-list--layout-base();
+}

package/scss/dropdownlist/_theme.scss

@@ -1,4 +1,4 @@
-@include exports( "dropdownlist/theme" ) {
+@mixin kendo-dropdown-list--theme-base() {
 
     // Dropdown list
     .k-dropdown-list {}
@@ -7,3 +7,8 @@
     select.k-dropdown-list {}
 
 }
+
+
+@mixin kendo-dropdown-list--theme() {
+    @include kendo-dropdown-list--theme-base();
+}

package/scss/dropdowntree/_index.scss

@@ -26,3 +26,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-dropdown-tree--styles() {
+    @include module-render( "dropdown-tree" ) {
+        @include kendo-dropdown-tree--layout();
+        @include kendo-dropdown-tree--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-dropdown-tree--styles();
+}

package/scss/dropdowntree/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("dropdowntree/layout") {
+@mixin kendo-dropdown-tree--layout-base() {
 
     // Dropdown tree
     .k-dropdown-tree {}
@@ -18,3 +18,8 @@
     }
 
 }
+
+
+@mixin kendo-dropdown-tree--layout() {
+    @include kendo-dropdown-tree--layout-base();
+}

package/scss/dropdowntree/_theme.scss

@@ -1,6 +1,11 @@
-@include exports("dropdowntree/theme") {
+@mixin kendo-dropdown-tree--theme-base() {
 
     // Dropdown tree
     .k-dropdown-tree {}
 
 }
+
+
+@mixin kendo-dropdown-tree--theme() {
+    @include kendo-dropdown-tree--theme-base();
+}

package/scss/dropzone/_index.scss

@@ -17,3 +17,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-dropzone--styles() {
+    @include module-render( "dropzone" ) {
+        @include kendo-dropzone--layout();
+        @include kendo-dropzone--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-dropzone--styles();
+}

package/scss/dropzone/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("dropzone/layout") {
+@mixin kendo-dropzone--layout-base() {
 
     // Dropzone
     .k-external-dropzone {
@@ -7,7 +7,7 @@
         flex-flow: row nowrap;
     }
 
-    // Dropzpne inner
+    // Dropzone inner
     .k-dropzone-inner {
         padding-block: $kendo-dropzone-padding-y;
         padding-inline: $kendo-dropzone-padding-x;
@@ -47,3 +47,8 @@
     }
 
 }
+
+
+@mixin kendo-dropzone--layout() {
+    @include kendo-dropzone--layout-base();
+}

package/scss/dropzone/_theme.scss

@@ -1,4 +1,4 @@
-@include exports( "dropzone/theme" ) {
+@mixin kendo-dropzone--theme-base() {
 
     // Dropzone
     .k-dropzone-inner {
@@ -31,3 +31,8 @@
     }
 
 }
+
+
+@mixin kendo-dropzone--theme() {
+    @include kendo-dropzone--theme-base();
+}

package/scss/editor/_index.scss

@@ -36,3 +36,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-editor--styles() {
+    @include module-render( "editor" ) {
+        @include kendo-editor--layout();
+        @include kendo-editor--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-editor--styles();
+}

package/scss/editor/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("editor/layout") {
+@mixin kendo-editor--layout-base() {
 
     // Base
     .k-editor {
@@ -12,7 +12,6 @@
         display: flex;
         flex-flow: column nowrap;
         position: relative;
-        z-index: 1;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -133,7 +132,7 @@
     }
 
 
-    // Тoolbar
+    // Toolbar
     .k-editor-toolbar {
         border-width: 0 0 $kendo-toolbar-border-width 0;
         flex-shrink: 0;
@@ -346,9 +345,9 @@
             align-items: center;
         }
     }
-}
 
-@include exports( "editor/dialog/layout" ) {
+
+
 
     // Text area in editor dialog
     .k-textarea.k-editor-textarea {
@@ -357,13 +356,11 @@
         resize: none;
     }
 
-}
-
-
 
-@include exports( "editor/filebrowser/layout" ) {
 
 
+    // File browser
+    // TODO: replace with file manager component
     .k-filebrowser {
         max-width: 100%;
 
@@ -493,13 +490,10 @@
         }
     }
 
-}
-
-
 
 
-@include exports( "editor/table-wizard/layout" ) {
 
+    // Table wizard dialog
     .k-editor-table-wizard-window {
 
         // Tabstrip wrapper
@@ -660,3 +654,8 @@
     }
 
 }
+
+
+@mixin kendo-editor--layout() {
+    @include kendo-editor--layout-base();
+}

package/scss/editor/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("editor/theme") {
+@mixin kendo-editor--theme-base() {
 
     .k-editor {
         @include fill(
@@ -98,3 +98,8 @@
     }
 
 }
+
+
+@mixin kendo-editor--theme() {
+    @include kendo-editor--theme-base();
+}

package/scss/expansion-panel/_index.scss

@@ -25,3 +25,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-expander--styles() {
+    @include module-render( "expander" ) {
+        @include kendo-expander--layout();
+        @include kendo-expander--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-expander--styles();
+}

package/scss/expansion-panel/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("expansion-panel/layout") {
+@mixin kendo-expander--layout-base() {
 
     // Base
     .k-expander {
@@ -74,3 +74,8 @@
         border-top-width: 0;
     }
 }
+
+
+@mixin kendo-expander--layout() {
+    @include kendo-expander--layout-base();
+}

package/scss/expansion-panel/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("expansion-panel/theme") {
+@mixin kendo-expander--theme-base() {
 
     .k-expander {
         @include fill(
@@ -39,3 +39,8 @@
         color: $kendo-expander-header-sub-title-text;
     }
 }
+
+
+@mixin kendo-expander--theme() {
+    @include kendo-expander--theme-base();
+}

package/scss/fab/_index.scss

@@ -26,3 +26,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-fab--styles() {
+    @include module-render( "fab" ) {
+        @include kendo-fab--layout();
+        @include kendo-fab--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-fab--styles();
+}

package/scss/fab/_layout.scss

@@ -1,4 +1,4 @@
-@include exports( "fab/layout" ) {
+@mixin kendo-fab--layout-base() {
 
     // Floating Action Button (FAB)
     .k-fab {
@@ -39,25 +39,23 @@
         width: $kendo-fab-icon-width;
         height: $kendo-fab-icon-height;
 
+        .k-icon-wrapper-host:not(:only-child) &,
         &:not(:only-child) {
-            margin-right: $kendo-fab-icon-spacing;
-            margin-left: -$kendo-fab-icon-spacing;
+            margin-inline-end: $kendo-fab-icon-spacing;
+            margin-inline-start: -$kendo-fab-icon-spacing;
         }
     }
 
 
     // Sizes
-    .k-fab-sm {
-        padding-block: $kendo-fab-sm-padding-y;
-        padding-inline: $kendo-fab-sm-padding-x;
-    }
-    .k-fab-md {
-        padding-block: $kendo-fab-padding-y;
-        padding-inline: $kendo-fab-padding-x;
-    }
-    .k-fab-lg {
-        padding-block: $kendo-fab-lg-padding-y;
-        padding-inline: $kendo-fab-lg-padding-x;
+    @each $size, $size-props in $kendo-fab-sizes {
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+
+        .k-fab-#{$size} {
+            padding: $_padding-y $_padding-x;
+        }
+
     }
 
     // Items
@@ -72,19 +70,19 @@
         flex-direction: column;
     }
     .k-fab-items-bottom .k-fab-item:last-child {
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 
     .k-fab-items-top {
         flex-direction: column-reverse;
     }
     .k-fab-items-top .k-fab-item:first-child {
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 
     .k-fab-item {
         list-style-type: none;
-        margin-bottom: k-map-get( $kendo-spacing, 2 );
+        margin-block-end: k-map-get( $kendo-spacing, 2 );
         outline: none;
         white-space: nowrap;
         display: flex;
@@ -96,6 +94,7 @@
             flex-direction: row;
 
             .k-fab-item-text {
+                // Needed for fab item positioning in RTL
                 margin-right: k-map-get( $kendo-spacing, 2 );
             }
         }
@@ -103,6 +102,7 @@
             flex-direction: row-reverse;
 
             .k-fab-item-text {
+                // Needed for fab item positioning in RTL
                 margin-left: k-map-get( $kendo-spacing, 2 );
             }
         }
@@ -128,22 +128,7 @@
         outline: none;
     }
 
-}
-
-@include exports("fab/layout/rtl") {
 
-    .k-rtl .k-fab,
-    .k-fab[dir="rtl"],
-    [dir="rtl"] .k-fab {
-        direction: rtl;
-
-        .k-fab-icon {
-            &:not(:only-child) {
-                margin-right: -$kendo-icon-spacing;
-                margin-left: $kendo-icon-spacing;
-            }
-        }
-    }
 
     .k-rtl .k-fab-popup,
     [dir="rtl"] .k-fab-popup {
@@ -155,5 +140,9 @@
             flex-direction: row-reverse;
         }
     }
+}
+
 
+@mixin kendo-fab--layout() {
+    @include kendo-fab--layout-base();
 }