@progress/kendo-theme-utils 6.0.2 → 6.0.3

package/scss/flex-grid/_grid-row-start-end.scss

@@ -1,21 +1,25 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+@mixin kendo-utils--flex-grid--grid-row-start-end() {
 
-@include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
+    // Grid row start/end utility classes
+    $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+    @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
 
 
-$kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+    // Grid row start/end utility classes
+    $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+    @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
 
-@include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
 
+    // Grid row span utility classes
+    $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
+    @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
 
-$kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
 
-@include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
+    // Legacy aliases
+    @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
+    .#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
+    .\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
 
-
-// Legacy aliases
-@include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
-.#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
-.\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
+}

package/scss/flex-grid/_grid-template-columns.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
+@mixin kendo-utils--flex-grid--grid-template-columns() {
 
-@include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
+    // Grid template columns utility classes
+    $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
+    @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
+
+}

package/scss/flex-grid/_grid-template-rows.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
+@mixin kendo-utils--flex-grid--grid-template-rows() {
 
-@include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
+    // Grid template rows utility classes
+    $kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
+    @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
+
+}

package/scss/flex-grid/_justify-content.scss

@@ -1,8 +1,14 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
+@mixin kendo-utils--flex-grid--justify-content() {
 
-@include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
+    // Justify content utility classes
+    $kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
+    @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
 
-.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
-.\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format
+
+    // Custom justify-content classes
+    .#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
+    .\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format
+
+}

package/scss/flex-grid/_justify-items.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
+@mixin kendo-utils--flex-grid--justify-items() {
 
-@include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
+    // Justify items utility classes
+    $kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
+    @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
+
+}

package/scss/flex-grid/_justify-self.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
+@mixin kendo-utils--flex-grid--justify-self() {
 
-@include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
+    // Justify self utility classes
+    $kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
+    @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
+
+}

package/scss/flex-grid/_order.scss

@@ -18,6 +18,10 @@
 /// @group order
 /// @contextType css
 
-$kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
+@mixin kendo-utils--flex-grid--order() {
 
-@include generate-utils( order, order, $kendo-utils-order );
+    // Order utility classes
+    $kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
+    @include generate-utils( order, order, $kendo-utils-order );
+
+}

package/scss/flex-grid/_place-content.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
+@mixin kendo-utils--flex-grid--place-content() {
 
-@include generate-utils( place-content, place-content, $kendo-utils-place-content );
+    // Place content utility classes
+    $kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
+    @include generate-utils( place-content, place-content, $kendo-utils-place-content );
+
+}

package/scss/flex-grid/_place-items.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
+@mixin kendo-utils--flex-grid--place-items() {
 
-@include generate-utils( place-items, place-items, $kendo-utils-place-items );
+    // Place items utility classes
+    $kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
+    @include generate-utils( place-items, place-items, $kendo-utils-place-items );
+
+}

package/scss/flex-grid/_place-self.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
+@mixin kendo-utils--flex-grid--place-self() {
 
-@include generate-utils( place-self, place-self, $kendo-utils-place-self );
+    // Place self utility classes
+    $kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
+    @include generate-utils( place-self, place-self, $kendo-utils-place-self );
+
+}

package/scss/flex-grid/index.import.scss

@@ -1,24 +1,52 @@
+@import "./_align-content.scss";
+@import "./_align-items.scss";
+@import "./_align-self.scss";
+@import "./_flex-basis.scss";
 @import "./_flex-direction.scss";
-@import "./_flex-wrap.scss";
-@import "./_flex.scss";
 @import "./_flex-grow.scss";
 @import "./_flex-shrink.scss";
-@import "./_flex-basis.scss";
-@import "./_order.scss";
-@import "./_grid-template-columns.scss";
-@import "./_grid-template-rows.scss";
-@import "./_grid-column-start-end.scss";
-@import "./_grid-row-start-end.scss";
-@import "./_grid-auto-flow.scss";
+@import "./_flex-wrap.scss";
+@import "./_flex.scss";
+@import "./_gap.scss";
 @import "./_grid-auto-columns.scss";
+@import "./_grid-auto-flow.scss";
 @import "./_grid-auto-rows.scss";
-@import "./_gap.scss";
-@import "./_align-content.scss";
-@import "./_align-items.scss";
-@import "./_align-self.scss";
+@import "./_grid-column-start-end.scss";
+@import "./_grid-row-start-end.scss";
+@import "./_grid-template-columns.scss";
+@import "./_grid-template-rows.scss";
 @import "./_justify-content.scss";
 @import "./_justify-items.scss";
 @import "./_justify-self.scss";
+@import "./_order.scss";
 @import "./_place-content.scss";
 @import "./_place-items.scss";
 @import "./_place-self.scss";
+
+
+@mixin kendo-utils--flex-grid() {
+    @include kendo-utils--flex-grid--align-content();
+    @include kendo-utils--flex-grid--align-items();
+    @include kendo-utils--flex-grid--align-self();
+    @include kendo-utils--flex-grid--flex-basis();
+    @include kendo-utils--flex-grid--flex-direction();
+    @include kendo-utils--flex-grid--flex-grow();
+    @include kendo-utils--flex-grid--flex-shrink();
+    @include kendo-utils--flex-grid--flex-wrap();
+    @include kendo-utils--flex-grid--flex();
+    @include kendo-utils--flex-grid--gap();
+    @include kendo-utils--flex-grid--grid-auto-columns();
+    @include kendo-utils--flex-grid--grid-auto-flow();
+    @include kendo-utils--flex-grid--grid-auto-rows();
+    @include kendo-utils--flex-grid--grid-column-start-end();
+    @include kendo-utils--flex-grid--grid-row-start-end();
+    @include kendo-utils--flex-grid--grid-template-columns();
+    @include kendo-utils--flex-grid--grid-template-rows();
+    @include kendo-utils--flex-grid--justify-content();
+    @include kendo-utils--flex-grid--justify-items();
+    @include kendo-utils--flex-grid--justify-self();
+    @include kendo-utils--flex-grid--order();
+    @include kendo-utils--flex-grid--place-content();
+    @include kendo-utils--flex-grid--place-items();
+    @include kendo-utils--flex-grid--place-self();
+}

package/scss/index.import.scss

@@ -16,3 +16,19 @@
 // transition
 @import "./transform/index.import.scss";
 @import "./interactivity/index.import.scss";
+
+
+// Mixin for all styles
+@mixin kendo-utils() {
+    @include kendo-utils--accessibility();
+    @include kendo-utils--layout();
+    @include kendo-utils--flex-grid();
+    @include kendo-utils--spacing();
+    @include kendo-utils--sizing();
+    @include kendo-utils--typography();
+    @include kendo-utils--background();
+    @include kendo-utils--border();
+    @include kendo-utils--table();
+    @include kendo-utils--transform();
+    @include kendo-utils--interactivity();
+}

package/scss/interactivity/_accent-color.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
+@mixin kendo-utils--interactivity--accent-color() {
 
-@include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
+    // Accent color utility classes
+    $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
+    @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
+
+}

package/scss/interactivity/_appearance.scss

@@ -8,7 +8,10 @@
 /// @group appearance
 /// @contextType css
 
-// Appearance utility classes
-$kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
+@mixin kendo-utils--interactivity--appearance() {
 
-@include generate-utils( appearance, appearance, $kendo-utils-appearance );
+    // Appearance utility classes
+    $kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
+    @include generate-utils( appearance, appearance, $kendo-utils-appearance );
+
+}

package/scss/interactivity/_caret-color.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
+@mixin kendo-utils--interactivity--caret-color() {
 
-@include generate-utils( caret, caret-color, $kendo-utils-caret-color );
+    // Caret color utility classes
+    $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
+    @include generate-utils( caret, caret-color, $kendo-utils-caret-color );
+
+}

package/scss/interactivity/_cursor.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
+@mixin kendo-utils--interactivity--cursor() {
 
-@include generate-utils( cursor, cursor, $kendo-utils-cursor );
+    // Cursor utility classes
+    $kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
+    @include generate-utils( cursor, cursor, $kendo-utils-cursor );
+
+}

package/scss/interactivity/_pointer-events.scss

@@ -10,7 +10,10 @@
 /// @group pointer-events
 /// @contextType css
 
-// Pointer events utility classes
-$kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
+@mixin kendo-utils--interactivity--pointer-events() {
 
-@include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
+    // Pointer events utility classes
+    $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
+    @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
+
+}

package/scss/interactivity/_resize.scss

@@ -20,7 +20,10 @@
 /// @group resize
 /// @contextType css
 
-// Resize utility classes
-$kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
+@mixin kendo-utils--interactivity--resize() {
 
-@include generate-utils( resize, resize, $kendo-utils-resize );
+    // Resize utility classes
+    $kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
+    @include generate-utils( resize, resize, $kendo-utils-resize );
+
+}

package/scss/interactivity/_scroll.scss

@@ -1,45 +1,50 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
+@mixin kendo-utils--interactivity--scroll() {
 
-@include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
+    // Scroll behavior utility classes
+    $kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
+    @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
 
 
-$kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
+    // Scroll snap type utility classes
+    $kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
+    @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
 
-@include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
+    // Custom scroll snap type utility classes
+    .#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
+    .#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
 
-.#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
-.#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
 
+    // Scroll snap stop utility classes
+    $kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+    @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
 
-$kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
 
-@include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
+    // Scroll snap align utility classes
+    $kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
+    @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
 
 
-$kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
+    // Scroll margin utility classes
+    $kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
+    @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
 
-@include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
 
+    // Scroll padding utility classes
+    $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
+    @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );
 
-$kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
-
-@include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
-
-
-$kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
-
-@include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );
+}

package/scss/interactivity/_touch-action.scss

@@ -1,4 +1,4 @@
-// TODO DOCS
+// TODO: docs
 
 /// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
 /// @name .k-touch-action-none
@@ -10,7 +10,10 @@
 /// @group touch-action
 /// @contextType css
 
-// Touch-action utility classes
-$kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
+@mixin kendo-utils--interactivity--touch-action() {
 
-@include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
+    // Touch-action utility classes
+    $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
+    @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
+
+}

package/scss/interactivity/_user-select.scss

@@ -25,7 +25,10 @@
 /// @group user-select
 /// @contextType css
 
-// User select utility classes
-$kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
+@mixin kendo-utils--interactivity--user-select() {
 
-@include generate-utils( user-select, user-select, $kendo-utils-user-select );
+    // User select utility classes
+    $kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
+    @include generate-utils( user-select, user-select, $kendo-utils-user-select );
+
+}

package/scss/interactivity/_will-change.scss

@@ -1,5 +1,9 @@
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
+@mixin kendo-utils--interactivity--will-change() {
 
-@include generate-utils( will-change, will-change, $kendo-utils-will-change );
+    // Will change utility classes
+    $kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
+    @include generate-utils( will-change, will-change, $kendo-utils-will-change );
+
+}

package/scss/interactivity/index.import.scss

@@ -1,10 +1,24 @@
 @import "./_accent-color.scss";
 @import "./_appearance.scss";
-@import "./_cursor.scss";
 @import "./_caret-color.scss";
+@import "./_cursor.scss";
 @import "./_pointer-events.scss";
 @import "./_resize.scss";
 @import "./_scroll.scss";
 @import "./_touch-action.scss";
 @import "./_user-select.scss";
 @import "./_will-change.scss";
+
+
+@mixin kendo-utils--interactivity() {
+    @include kendo-utils--interactivity--accent-color();
+    @include kendo-utils--interactivity--appearance();
+    @include kendo-utils--interactivity--caret-color();
+    @include kendo-utils--interactivity--cursor();
+    @include kendo-utils--interactivity--pointer-events();
+    @include kendo-utils--interactivity--resize();
+    @include kendo-utils--interactivity--scroll();
+    @include kendo-utils--interactivity--touch-action();
+    @include kendo-utils--interactivity--user-select();
+    @include kendo-utils--interactivity--will-change();
+}

package/scss/layout/_aspect-ratio.scss

@@ -20,10 +20,14 @@
 /// @group aspect-ratio
 /// @contextType css
 
-$kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
+@mixin kendo-utils--layout--aspect-ratio() {
 
-@include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+    // Aspect ratio utility classes
+    $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
+    @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
 
 
-// Legacy aliases
-@include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+    // Legacy aliases
+    @include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+
+}

package/scss/layout/_clear.scss

@@ -20,6 +20,10 @@
 /// @group float
 /// @contextType css
 
-$kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
+@mixin kendo-utils--layout--clear() {
 
-@include generate-utils( clear, clear, $kendo-utils-clear );
+    // Clear utility classes
+    $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
+    @include generate-utils( clear, clear, $kendo-utils-clear );
+
+}

package/scss/layout/_display.scss

@@ -53,15 +53,18 @@
 /// @group display
 /// @contextType css
 
-// Display utility classes
-$kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+@mixin kendo-utils--layout--display() {
 
-@include generate-utils( d, display, $kendo-utils-display );
+    // Display utility classes
+    $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+    @include generate-utils( d, display, $kendo-utils-display );
 
 
-// Legacy alias
-@include generate-utils( display, display, $kendo-utils-display );
-.#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
-.\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
-.#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
-.\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+    // Legacy aliases
+    @include generate-utils( display, display, $kendo-utils-display );
+    .#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
+    .\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+    .#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
+    .\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+
+}

package/scss/layout/_float.scss

@@ -15,6 +15,10 @@
 /// @group float
 /// @contextType css
 
-$kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
+@mixin kendo-utils--layout--float() {
 
-@include generate-utils( float, float, $kendo-utils-float );
+    // Float utility classes
+    $kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
+    @include generate-utils( float, float, $kendo-utils-float );
+
+}

package/scss/layout/_overflow.scss

@@ -73,7 +73,10 @@
 /// @group overflow
 /// @contextType css
 
-// Overflow utility classes
-$kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
+@mixin kendo-utils--layout--overflow() {
 
-@include generate-utils( overflow, overflow, $kendo-utils-overflow );
+    // Overflow utility classes
+    $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
+    @include generate-utils( overflow, overflow, $kendo-utils-overflow );
+
+}