feat(utils): add aspect-ratio utility classes

telerik · Mar 30, 2022 · 51dfc5a · 51dfc5a
1 parent 901540f
commit 51dfc5a
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/utils/_aspect-ratio.scss b/packages/bootstrap/scss/utils/_aspect-ratio.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss";
diff --git a/packages/bootstrap/scss/utils/_index.scss b/packages/bootstrap/scss/utils/_index.scss
@@ -6,6 +6,7 @@
 
 
 // Component
+@import "_aspect-ratio.scss";
 @import "_border.scss";
 @import "_display.scss";
 @import "_flex.scss";

diff --git a/packages/classic/scss/utils/_aspect-ratio.scss b/packages/classic/scss/utils/_aspect-ratio.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss";
diff --git a/packages/classic/scss/utils/_index.scss b/packages/classic/scss/utils/_index.scss
@@ -6,6 +6,7 @@
 
 
 // Component
+@import "_aspect-ratio.scss";
 @import "_border.scss";
 @import "_display.scss";
 @import "_flex.scss";

diff --git a/packages/default/scss/utils/_aspect-ratio.scss b/packages/default/scss/utils/_aspect-ratio.scss
@@ -0,0 +1,27 @@
+@include exports( "utils/aspect-ratio" ) {
+
+    // Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
+
+    // @name k-aspect-ratio-auto
+    // @description This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
+    // @group aspect-ratio
+
+    // @name k-aspect-ratio-1
+    // @description This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+    // @group aspect-ratio
+
+    $utils-aspect-ratio: (
+        auto,
+        1
+    ) !default;
+
+    @if $utils-aspect-ratio {
+        @each $aspect-ratio in $utils-aspect-ratio {
+            .k-aspect-ratio-#{$aspect-ratio} { aspect-ratio: $aspect-ratio; }
+
+            // sass-lint:disable-block no-important
+            .\!k-aspect-ratio-#{$aspect-ratio} { aspect-ratio: $aspect-ratio !important; }
+        }
+    }
+
+}
diff --git a/packages/default/scss/utils/_index.scss b/packages/default/scss/utils/_index.scss
@@ -6,6 +6,7 @@
 
 
 // Component
+@import "_aspect-ratio.scss";
 @import "_border.scss";
 @import "_display.scss";
 @import "_flex.scss";

diff --git a/packages/material/scss/utils/_aspect-ratio.scss b/packages/material/scss/utils/_aspect-ratio.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss";
diff --git a/packages/material/scss/utils/_index.scss b/packages/material/scss/utils/_index.scss
@@ -6,6 +6,7 @@
 
 
 // Component
+@import "_aspect-ratio.scss";
 @import "_border.scss";
 @import "_display.scss";
 @import "_flex.scss";