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

package/scss/dropdowntree/_layout.scss

@@ -1,10 +1,12 @@
-@include exports("dropdowntree/layout") {
+@mixin kendo-dropdown-tree--layout-base() {
 
     // Dropdown tree
     .k-dropdown-tree {}
 
     // Dropdowntree popup
-    .k-popup-dropdowntree {
+    .k-popup-dropdowntree, // remove legacy class once updated in components
+    .k-dropdowntree-popup,
+    .k-multiselecttree-popup {
         padding: 0;
 
         .k-check-all {
@@ -18,3 +20,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();
 }

package/scss/fab/_theme.scss

@@ -1,10 +1,10 @@
-@include exports( "fab/theme" ) {
+@mixin kendo-fab--theme-base() {
 
     // Normal state
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
-            outline: $kendo-fab-border-width solid $color;
+            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
             color: k-contrast-legacy( $color );
@@ -28,9 +28,7 @@
             @if $kendo-enable-focus-contrast {
                 @include box-shadow( inset 0 0 0 2px currentColor );
             } @else {
-                outline-style: solid;
-                outline-width: 2px;
-                outline-color: rgba( $color, .3 );
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 );
             }
         }
     }
@@ -74,7 +72,7 @@
             $kendo-fab-item-icon-border
         );
         @include box-shadow($kendo-fab-item-shadow);
-        outline: $kendo-fab-border-width solid rgba(0, 0, 0, .08);
+        outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
         outline-offset: -$kendo-fab-border-width;
     }
 
@@ -93,9 +91,7 @@
         @if $kendo-enable-focus-contrast {
             @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
         } @else {
-            outline-style: solid;
-            outline-width: 2px;
-            outline-color: rgba(0, 0, 0, .08);
+            outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }
     }
 
@@ -126,3 +122,8 @@
     }
 
 }
+
+
+@mixin kendo-fab--theme() {
+    @include kendo-fab--theme-base();
+}

package/scss/fab/_variables.scss

@@ -90,6 +90,23 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 /// @group floating-action-button
 $kendo-fab-theme-colors: $kendo-theme-colors !default;
 
+/// Size map for the FAB.
+/// @group floating-action-button
+$kendo-fab-sizes: (
+    sm: (
+        padding-x: $kendo-fab-sm-padding-x,
+        padding-y: $kendo-fab-sm-padding-y
+    ),
+    md: (
+        padding-x: $kendo-fab-md-padding-x,
+        padding-y: $kendo-fab-md-padding-y
+    ),
+    lg: (
+        padding-x: $kendo-fab-lg-padding-x,
+        padding-y: $kendo-fab-lg-padding-y
+    )
+) !default;
+
 /// The base shadow of the FAB.
 /// @group floating-action-button
 $kendo-fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
@@ -99,6 +116,12 @@ $kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1
 /// The active shadow of the FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;
+/// The outline style of the FAB.
+/// @group floating-action-button
+$kendo-fab-outline-style: solid !default;
+/// The outline width of the FAB.
+/// @group floating-action-button
+$kendo-fab-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// The base text color of the FAB item.
 /// @group floating-action-button
@@ -129,3 +152,12 @@ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
 /// The active shadow of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
+/// The outline style of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-outline-style: solid !default;
+/// The outline width of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The outline color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;

package/scss/filemanager/_index.scss

@@ -40,3 +40,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-file-manager--styles() {
+    @include module-render( "file-manager" ) {
+        @include kendo-file-manager--layout();
+        @include kendo-file-manager--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-file-manager--styles();
+}

package/scss/filemanager/_layout.scss

@@ -1,4 +1,4 @@
-@include exports( "filemanager/layout" ) {
+@mixin kendo-file-manager--layout-base() {
 
     // File Manager
     .k-filemanager {
@@ -238,3 +238,8 @@
     }
 
 }
+
+
+@mixin kendo-file-manager--layout() {
+    @include kendo-file-manager--layout-base();
+}

package/scss/filemanager/_theme.scss

@@ -1,4 +1,4 @@
-@include exports( "filemanager/theme") {
+@mixin kendo-file-manager--theme-base() {
 
     // Filemanager
     .k-filemanager {
@@ -107,3 +107,8 @@
     }
 
 }
+
+
+@mixin kendo-file-manager--theme() {
+    @include kendo-file-manager--theme-base();
+}

package/scss/filter/_index.scss

@@ -32,3 +32,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-filter--styles() {
+    @include module-render( "filter" ) {
+        @include kendo-filter--layout();
+        @include kendo-filter--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-filter--styles();
+}

package/scss/filter/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("filter/layout") {
+@mixin kendo-filter--layout-base() {
 
     .k-filter {
         box-sizing: border-box;
@@ -120,4 +120,10 @@
             }
         }
     }
+
+}
+
+
+@mixin kendo-filter--layout() {
+    @include kendo-filter--layout-base();
 }

package/scss/filter/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("filter/theme") {
+@mixin kendo-filter--theme-base() {
 
     .k-filter {
         color: $kendo-component-text;
@@ -27,3 +27,8 @@
     }
 
 }
+
+
+@mixin kendo-filter--theme() {
+    @include kendo-filter--theme-base();
+}

package/scss/floating-label/_index.scss

@@ -20,3 +20,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-floating-label--styles() {
+    @include module-render( "floating-label" ) {
+        @include kendo-floating-label--layout();
+        @include kendo-floating-label--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-floating-label--styles();
+}

package/scss/floating-label/_layout.scss

@@ -1,4 +1,4 @@
-@include exports( "floating-label/layout" ) {
+@mixin kendo-floating-label--layout-base() {
 
 
     // Floating label
@@ -91,3 +91,8 @@
     }
 
 }
+
+
+@mixin kendo-floating-label--layout() {
+    @include kendo-floating-label--layout-base();
+}

package/scss/floating-label/_theme.scss

@@ -1,4 +1,4 @@
-@include exports( "floating-label/theme" ) {
+@mixin kendo-floating-label--theme-base() {
 
     // Floating label
     .k-floating-label-container {
@@ -20,3 +20,8 @@
     }
 
 }
+
+
+@mixin kendo-floating-label--theme() {
+    @include kendo-floating-label--theme-base();
+}

package/scss/forms/_index.scss

@@ -23,3 +23,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-form--styles() {
+    @include module-render( "form" ) {
+        @include kendo-form--layout();
+        @include kendo-form--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-form--styles();
+}