@progress/kendo-theme-utils 8.2.0 → 9.0.0-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "8.2.0",
+  "version": "9.0.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,10 +43,10 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "8.2.0"
+    "@progress/kendo-theme-core": "9.0.0-dev.1"
   },
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "d1101e416e7e95340e0394c3c6e04107d5681e2b"
+  "gitHead": "b4fd26011605dcdb25e00cef145117c23e2e67a3"
 }

package/scss/_mixins.scss

@@ -34,4 +34,28 @@
             }
         }
     }
+}
+
+
+// Responsive Layout Breakpoints
+@mixin kendo-breakpoint-up( $breakpoint, $media: all ) {
+    @media only #{$media} and (min-width: k-map-get( $kendo-breakpoints, #{$breakpoint} )) {
+        @content;
+    }
+}
+
+@mixin kendo-breakpoint-down( $breakpoint, $media: all ) {
+    @media only #{$media} and (max-width: ( k-map-get( $kendo-breakpoints, #{$breakpoint} ) - .02 )) {
+        @content;
+    }
+}
+
+@mixin kendo-breakpoint-only( $breakpoint, $media: all ) {
+    $breakpoint-index: k-list-index( k-map-keys($kendo-breakpoints), $breakpoint );
+    $next-breakpoint-index: $breakpoint-index + 1;
+
+    $next-breakpoint: k-list-nth( k-map-keys($kendo-breakpoints), $next-breakpoint-index );
+    @media only #{$media} and (min-width: k-map-get( $kendo-breakpoints, #{$breakpoint} )) and (max-width: ( k-map-get( $kendo-breakpoints, #{$next-breakpoint} ) - .02)) {
+        @content;
+    }
 }

package/scss/_variables.scss

@@ -4,7 +4,6 @@
 
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
-$kendo-enable-color-system: false !default;
 
 $kendo-theme-colors: () !default;
 
@@ -64,6 +63,47 @@ $kendo-sizing: () !default;
 
 $kendo-border-radii: () !default;
 
+$_default-kendo-fraction-classes: (
+    '91-6': 91.6666%,
+    '83-3': 83.3333%,
+    '66-6': 66.6666%,
+    '58-3': 58.3333%,
+    '41-6': 41.6666%,
+    '33-3': 33.3333%,
+    '16-7': 16.6666%,
+    '14-3': 14.2857%,
+    '12-5': 12.5%,
+    '11-1': 11.1111%,
+    '9-1': 9.0909%,
+    '8-3': 8.3333%
+);
+
+$kendo-fraction-classes: $_default-kendo-fraction-classes !default;
+$kendo-fraction-classes: k-map-merge($_default-kendo-fraction-classes, $kendo-fraction-classes);
+
+$_default-kendo-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+) !default;
+
+$kendo-breakpoints: $_default-kendo-breakpoints !default;
+$kendo-breakpoints: k-map-merge($_default-kendo-breakpoints, $kendo-breakpoints);
+
+$_default-kendo-container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px
+) !default;
+
+$kendo-container-max-widths: $_default-kendo-container-max-widths !default;
+$kendo-container-max-widths: k-map-merge($_default-kendo-container-max-widths, $kendo-container-max-widths);
+
 $kendo-utils: (
 
     // Accessibility
@@ -273,19 +313,6 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
-        -1: -1,
-        -2: -2,
-        -3: -3,
-        -4: -4,
-        -5: -5,
-        -6: -6,
-        -7: -7,
-        -8: -8,
-        -9: -9,
-        -10: -10,
-        -11: -11,
-        -12: -12,
-        -13: -13,
         auto: auto
     ),
     "grid-column-end": (
@@ -302,19 +329,6 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
-        -1: -1,
-        -2: -2,
-        -3: -3,
-        -4: -4,
-        -5: -5,
-        -6: -6,
-        -7: -7,
-        -8: -8,
-        -9: -9,
-        -10: -10,
-        -11: -11,
-        -12: -12,
-        -13: -13,
         auto: auto
     ),
     "grid-column-span": (
@@ -347,19 +361,6 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
-        -1: -1,
-        -2: -2,
-        -3: -3,
-        -4: -4,
-        -5: -5,
-        -6: -6,
-        -7: -7,
-        -8: -8,
-        -9: -9,
-        -10: -10,
-        -11: -11,
-        -12: -12,
-        -13: -13,
         auto: auto
     ),
     "grid-row-end": (
@@ -376,19 +377,6 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
-        -1: -1,
-        -2: -2,
-        -3: -3,
-        -4: -4,
-        -5: -5,
-        -6: -6,
-        -7: -7,
-        -8: -8,
-        -9: -9,
-        -10: -10,
-        -11: -11,
-        -12: -12,
-        -13: -13,
         auto: auto
     ),
     "grid-row-span": (

package/scss/accessibility/_screen-readers.scss

@@ -1,33 +1,39 @@
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-accessibility-screen-readers"));
+
 @mixin kendo-utils--accessibility--screen-readers() {
+    @include module-render("utils-accessibility-screen-readers") {
 
-    // Screen readers utility classes
-    $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
+        // Screen readers utility classes
+        $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
 
-    @if $kendo-utils-accessibility {
-        /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-        /// @name .k-sr-only
-        /// @group accessibility
-        .#{$kendo-prefix}sr-only {
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-            height: 1px;
-            border-width: 0;
-            overflow: hidden;
-            clip: rect(0, 0, 0, 0);
-            position: absolute;
-        }
+        @if $kendo-utils-accessibility {
+            /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+            /// @name .k-sr-only
+            /// @group accessibility
+            .#{$kendo-prefix}sr-only {
+                margin: -1px;
+                padding: 0;
+                width: 1px;
+                height: 1px;
+                border-width: 0;
+                overflow: hidden;
+                clip: rect(0, 0, 0, 0);
+                position: absolute;
+            }
 
-        .#{$kendo-prefix}not-sr-only {
-            margin: 0;
-            padding: 0;
-            width: auto;
-            height: auto;
-            border-width: 0;
-            overflow: visible;
-            clip: auto;
-            position: static;
+            .#{$kendo-prefix}not-sr-only {
+                margin: 0;
+                padding: 0;
+                width: auto;
+                height: auto;
+                border-width: 0;
+                overflow: visible;
+                clip: auto;
+                position: static;
+            }
         }
-    }
 
+    }
 }

package/scss/background/_background-clip.scss

@@ -22,10 +22,16 @@
 /// @group background-clip
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-background-clip"));
+
 @mixin kendo-utils--background--background-clip() {
+    @include module-render("utils-background-clip") {
 
-    // Background color utility classes
-    $kendo-utils-background-clip: k-map-get( $kendo-utils, "background-clip" ) !default;
-    @include generate-utils( bg-clip, background-clip, $kendo-utils-background-clip );
+        // Background color utility classes
+        $kendo-utils-background-clip: k-map-get( $kendo-utils, "background-clip" ) !default;
+        @include generate-utils( bg-clip, background-clip, $kendo-utils-background-clip );
 
+    }
 }

package/scss/background/_background-color.scss

@@ -22,10 +22,16 @@
 /// @group background-color
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-background-color"));
+
 @mixin kendo-utils--background--background-color() {
+    @include module-render("utils-background-color") {
 
-    // Background color utility classes
-    $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
-    @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );
+        // Background color utility classes
+        $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+        @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );
 
+    }
 }

package/scss/background/_background-position.scss

@@ -52,10 +52,16 @@
 /// @group background-position
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-background-position"));
+
 @mixin kendo-utils--background--background-position() {
+    @include module-render("utils-background-position") {
 
-    // Background position utility classes
-    $kendo-utils-background-position: k-map-get( $kendo-utils, "background-position" ) !default;
-    @include generate-utils( bg, background-position, $kendo-utils-background-position );
+        // Background position utility classes
+        $kendo-utils-background-position: k-map-get( $kendo-utils, "background-position" ) !default;
+        @include generate-utils( bg, background-position, $kendo-utils-background-position );
 
+    }
 }

package/scss/background/_background-size.scss

@@ -16,10 +16,16 @@
 /// @group background-size
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-background-size"));
+
 @mixin kendo-utils--background--background-size() {
+    @include module-render("utils-background-size") {
 
-    // Background size utility classes
-    $kendo-utils-background-size: k-map-get( $kendo-utils, "background-size" ) !default;
-    @include generate-utils( bg, background-size, $kendo-utils-background-size );
+        // Background size utility classes
+        $kendo-utils-background-size: k-map-get( $kendo-utils, "background-size" ) !default;
+        @include generate-utils( bg, background-size, $kendo-utils-background-size );
 
+    }
 }

package/scss/border/_border-color.scss

@@ -28,11 +28,16 @@
 /// @group border-color
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-border-color"));
 
 @mixin kendo-utils--border--border-color() {
+    @include module-render("utils-border-color") {
 
-    // Border color utility classes
-    $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
-    @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );
+        // Border color utility classes
+        $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
+        @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );
 
+    }
 }

package/scss/border/_border-radius.scss

@@ -324,17 +324,23 @@
 
 @import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";
 
-@mixin kendo-utils--border--border-radius() {
-
-    // Border radius utility classes
-    @include generate-utils( rounded, border-radius, $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-tl, border-top-left-radius, $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-tr, border-top-right-radius, $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-br, border-bottom-right-radius, $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
-    @include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-border-radii, $css-var: "border-radius" );
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-border-radius"));
 
+@mixin kendo-utils--border--border-radius() {
+    @include module-render("utils-border-radius") {
+
+        // Border radius utility classes
+        @include generate-utils( rounded, border-radius, $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-tl, border-top-left-radius, $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-tr, border-top-right-radius, $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-br, border-bottom-right-radius, $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-border-radii, $css-var: "border-radius" );
+        @include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-border-radii, $css-var: "border-radius" );
+
+    }
 }

package/scss/border/_border-style.scss

@@ -244,17 +244,22 @@
 /// @group border-style
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-border-style"));
 
 @mixin kendo-utils--border--border-style() {
-
-    // Border style utility classes
-    $kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
-    @include generate-utils( border, border-style, $kendo-utils-border-style );
-    @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
-    @include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
-    @include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
-    @include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
-    @include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
-    @include generate-utils( border-y, border-block-style, $kendo-utils-border-style );
-
+    @include module-render("utils-border-style") {
+
+        // Border style utility classes
+        $kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
+        @include generate-utils( border, border-style, $kendo-utils-border-style );
+        @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
+        @include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
+        @include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
+        @include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
+        @include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
+        @include generate-utils( border-y, border-block-style, $kendo-utils-border-style );
+
+    }
 }

package/scss/border/_border-width.scss

@@ -208,25 +208,29 @@
 /// @group border-width
 /// @contextType css
 
-
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-border-width"));
 
 @mixin kendo-utils--border--border-width() {
-
-    // Border width utility classes
-    $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
-    @include generate-utils( border, border-width, $kendo-utils-border-width );
-    @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
-    @include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
-    @include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
-    @include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
-    @include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
-    @include generate-utils( border-y, border-block-width, $kendo-utils-border-width );
-
-
-    // Legacy aliases
-    @include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
-    @include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
-    @include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
-    @include generate-utils( border-left, border-left-width, $kendo-utils-border-width );
-
+    @include module-render("utils-border-width") {
+
+        // Border width utility classes
+        $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
+        @include generate-utils( border, border-width, $kendo-utils-border-width );
+        @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
+        @include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
+        @include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
+        @include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
+        @include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
+        @include generate-utils( border-y, border-block-width, $kendo-utils-border-width );
+
+
+        // Legacy aliases
+        @include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
+        @include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
+        @include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
+        @include generate-utils( border-left, border-left-width, $kendo-utils-border-width );
+
+    }
 }

package/scss/border/_outline-color.scss

@@ -28,10 +28,16 @@
 /// @group outline-color
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-outline-color"));
+
 @mixin kendo-utils--border--outline-color() {
+    @include module-render("utils-outline-color") {
 
-    // Outline color utility classes
-    $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
-    @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );
+        // Outline color utility classes
+        $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
+        @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );
 
+    }
 }

package/scss/border/_outline-offset.scss

@@ -28,10 +28,16 @@
 /// @group outline-offset
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-outline-offset"));
+
 @mixin kendo-utils--border--outline-offset() {
+    @include module-render("utils-outline-offset") {
 
-    // Outline offset utility classes
-    $kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
-    @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
+        // Outline offset utility classes
+        $kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
+        @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
 
+    }
 }

package/scss/border/_outline-style.scss

@@ -34,10 +34,16 @@
 /// @group outline-style
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-outline-style"));
+
 @mixin kendo-utils--border--outline-style() {
+    @include module-render("utils-outline-style") {
 
-    // Outline style utility classes
-    $kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
-    @include generate-utils( outline, outline-style, $kendo-utils-outline-style );
+        // Outline style utility classes
+        $kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
+        @include generate-utils( outline, outline-style, $kendo-utils-outline-style );
 
+    }
 }

package/scss/border/_outline-width.scss

@@ -28,10 +28,16 @@
 /// @group outline-width
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-outline-width"));
+
 @mixin kendo-utils--border--outline-width() {
+    @include module-render("utils-outline-width") {
 
     // Outline width utility classes
     $kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
     @include generate-utils( outline, outline-width, $kendo-utils-outline-width );
 
+    }
 }

package/scss/effects/_opacity.scss

@@ -10,10 +10,16 @@
 /// @group opacity
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-effects-opacity"));
+
 @mixin kendo-utils--effects--opacity() {
+    @include module-render("utils-effects-opacity") {
 
-    // opacity utility classes
-    $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
-    @include generate-utils( opacity, opacity, $kendo-utils-opacity );
+        // opacity utility classes
+        $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
+        @include generate-utils( opacity, opacity, $kendo-utils-opacity );
 
+    }
 }

package/scss/elevation/index.import.scss

@@ -1,5 +1,11 @@
 @import "@progress/kendo-theme-core/scss/elevation/index.import.scss";
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-elevation"));
+
 @mixin kendo-utils--elevation {
-    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: "elevation");
+    @include module-render("utils-elevation") {
+        @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: "elevation");
+    }
 }

package/scss/filter/_backdrop.scss

@@ -28,10 +28,16 @@
 /// @group backdrop-blur
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-filter-backdrop"));
+
 @mixin kendo-utils--filter--backdrop() {
+    @include module-render("utils-filter-backdrop") {
 
-    // backdrop utility classes
-    $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
-    @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );
+        // backdrop utility classes
+        $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
+        @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );
 
+    }
 }

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

@@ -76,10 +76,16 @@
 /// @group align-content
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-align-content"));
+
 @mixin kendo-utils--flex-grid--align-content() {
+    @include module-render("utils-flex-grid-align-content") {
 
-    // Align content utility classes
-    $kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
-    @include generate-utils( align-content, align-content, $kendo-utils-align-content );
+        // Align content utility classes
+        $kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
+        @include generate-utils( align-content, align-content, $kendo-utils-align-content );
 
+    }
 }