@progress/kendo-theme-utils 6.2.1-dev.0 → 6.2.1-dev.8

package/scss/layout/_overflow.scss

@@ -78,5 +78,6 @@
     // Overflow utility classes
     $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
     @include generate-utils( overflow, overflow, $kendo-utils-overflow );
-
+    @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
+    @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
 }

package/scss/layout/_placement.scss

@@ -0,0 +1,110 @@
+// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
+
+
+// TODO: inset docs
+
+
+/// This is equivalent to `top: 0;`.
+/// @name .k-pos-top
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `right: 0;`.
+/// @name .k-pos-right
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0;`.
+/// @name .k-pos-bottom
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `left: 0;`.
+/// @name .k-pos-left
+/// @group position
+/// @contextType css
+
+@mixin kendo-utils--layout--placement() {
+    // Top / right / bottom / left
+    $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
+    @include generate-utils( top, top, $kendo-utils-placement );
+    @include generate-utils( right, right, $kendo-utils-placement );
+    @include generate-utils( bottom, bottom, $kendo-utils-placement );
+    @include generate-utils( left, left, $kendo-utils-placement );
+
+
+    // Position length utility classes
+    @each $side in (top, right, bottom, left) {
+        .#{$kendo-prefix}#{$side},
+        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
+
+    // Inset utility classes
+    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
+    @include generate-utils( inset, inset, $kendo-utils-inset );
+    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
+    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
+    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}top-start,
+    .#{$kendo-prefix}pos-top-start {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}top-end,
+    .#{$kendo-prefix}pos-top-end {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}bottom-start,
+    .#{$kendo-prefix}pos-bottom-start {
+        bottom: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}bottom-end,
+    .#{$kendo-prefix}pos-bottom-end {
+        bottom: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}top-center,
+    .#{$kendo-prefix}pos-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .#{$kendo-prefix}middle-left,
+    .#{$kendo-prefix}middle-start,
+    .#{$kendo-prefix}pos-middle-start {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-center {
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-right,
+    .#{$kendo-prefix}middle-end,
+    .#{$kendo-prefix}pos-middle-end {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}bottom-center,
+    .#{$kendo-prefix}pos-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+}

package/scss/layout/_position.scss

@@ -25,30 +25,6 @@
 /// @group position
 /// @contextType css
 
-
-// TODO: inset docs
-
-
-/// This is equivalent to `top: 0;`.
-/// @name .k-pos-top
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `right: 0;`.
-/// @name .k-pos-right
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `bottom: 0;`.
-/// @name .k-pos-bottom
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `left: 0;`.
-/// @name .k-pos-left
-/// @group position
-/// @contextType css
-
 @mixin kendo-utils--layout--position() {
 
     // Position utility classes
@@ -68,84 +44,4 @@
     .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
     .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
 
-
-    // Inset utility classes
-    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
-    @include generate-utils( inset, inset, $kendo-utils-inset );
-    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
-    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
-    @include generate-utils( top, top, $kendo-utils-inset );
-    @include generate-utils( right, right, $kendo-utils-inset );
-    @include generate-utils( bottom, bottom, $kendo-utils-inset );
-    @include generate-utils( left, left, $kendo-utils-inset );
-    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
-    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
-    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
-
-
-    // Legacy aliases
-    .#{$kendo-prefix}top-start,
-    .#{$kendo-prefix}pos-top-start {
-        top: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}top-end,
-    .#{$kendo-prefix}pos-top-end {
-        top: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}bottom-start,
-    .#{$kendo-prefix}pos-bottom-start {
-        bottom: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}bottom-end,
-    .#{$kendo-prefix}pos-bottom-end {
-        bottom: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}top-center,
-    .#{$kendo-prefix}pos-top-center {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .#{$kendo-prefix}middle-left,
-    .#{$kendo-prefix}middle-start,
-    .#{$kendo-prefix}pos-middle-start {
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-center {
-        top: 50%;
-        left: 50%;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-right,
-    .#{$kendo-prefix}middle-end,
-    .#{$kendo-prefix}pos-middle-end {
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}bottom-center,
-    .#{$kendo-prefix}pos-bottom-center {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-
-    // Position length utility classes
-    @each $side in (top, right, bottom, left) {
-        .#{$kendo-prefix}#{$side},
-        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
-    }
-
 }

package/scss/layout/index.import.scss

@@ -1,8 +1,13 @@
 @import "./_aspect-ratio.scss";
+@import "./_box-sizing.scss";
 @import "./_clear.scss";
+@import "./_columns.scss";
 @import "./_display.scss";
 @import "./_float.scss";
+@import "./_object-fit.scss";
+@import "./_object-position.scss";
 @import "./_overflow.scss";
+@import "./_placement.scss";
 @import "./_position.scss";
 @import "./_visibility.scss";
 @import "./_zindex.scss";
@@ -10,10 +15,15 @@
 
 @mixin kendo-utils--layout() {
     @include kendo-utils--layout--aspect-ratio();
+    @include kendo-utils--layout--box-sizing();
     @include kendo-utils--layout--clear();
+    @include kendo-utils--layout--columns();
     @include kendo-utils--layout--display();
     @include kendo-utils--layout--float();
+    @include kendo-utils--layout--object-fit();
+    @include kendo-utils--layout--object-position();
     @include kendo-utils--layout--overflow();
+    @include kendo-utils--layout--placement();
     @include kendo-utils--layout--position();
     @include kendo-utils--layout--visibility();
     @include kendo-utils--layout--zindex();

package/scss/svg/_fill.scss

@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--svg--fill() {
+
+    // fill utility classes
+    $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( fill, fill, $kendo-utils-fill );
+
+}

package/scss/svg/_stroke.scss

@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--svg--stroke() {
+
+    // stroke utility classes
+    $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( stroke, stroke, $kendo-utils-stroke );
+
+}

package/scss/svg/index.import.scss

@@ -0,0 +1,7 @@
+@import "./_fill.scss";
+@import "./_stroke.scss";
+
+@mixin kendo-utils--svg() {
+    @include kendo-utils--svg--fill();
+    @include kendo-utils--svg--stroke();
+}

package/scss/typography/_list-style.scss

@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--typography--list-style-type() {
+
+    // list-style-type utility classes
+    $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
+    @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
+
+}

package/scss/typography/_text-decoration.scss

@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--typography--text-decoration() {
+
+    // text-decoration utility classes
+    $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
+    @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
+
+}

package/scss/typography/_vertical-align.scss

@@ -0,0 +1,9 @@
+// TODO: docs
+
+@mixin kendo-utils--typography--vertical-align() {
+
+    // vertical-align utility classes
+    $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
+    @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
+
+}

package/scss/typography/index.import.scss

@@ -6,14 +6,14 @@
 // font variant
 // letter spacing
 // line height
-// list style
+@import "./_list-style.scss";
 @import "./_text-align.scss";
 @import "./_text-color.scss";
-// text decoration
+@import "./_text-decoration.scss";
 @import "./_text-overflow.scss";
 @import "./_text-transform.scss";
 // text indent
-// vertical align
+@import "./_vertical-align.scss";
 @import "./_white-space.scss";
 
 
@@ -21,9 +21,12 @@
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
+    @include kendo-utils--typography--list-style-type();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-decoration();
     @include kendo-utils--typography--text-overflow();
     @include kendo-utils--typography--text-transform();
+    @include kendo-utils--typography--vertical-align();
     @include kendo-utils--typography--white-space();
 }