feat(fab): extract size map variable

telerik · Mar 28, 2023 · 42e0bb1 · 42e0bb1
1 parent cd2dac4
commit 42e0bb1
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 11 deletions.
diff --git a/packages/bootstrap/scss/fab/_variables.scss b/packages/bootstrap/scss/fab/_variables.scss
@@ -89,6 +89,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: 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ), 0px 3px 5px rgba( black, .2 ) !default;

diff --git a/packages/classic/scss/fab/_variables.scss b/packages/classic/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( black, .14 ), 0 1px 18px rgba( black, .12 ), 0 3px 5px rgba( black, .2 ) !default;

diff --git a/packages/default/scss/fab/_layout.scss b/packages/default/scss/fab/_layout.scss
@@ -47,17 +47,14 @@
 
 
     // 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

diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/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;

diff --git a/packages/material/scss/fab/_variables.scss b/packages/material/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: 0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ) !default;