fix(tilelayout): set padding through themes instead of inline

telerik · Jul 24, 2023 · f5c7186 · f5c7186
1 parent 6ae6c13
commit f5c7186
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/tilelayout/_variables.scss b/packages/bootstrap/scss/tilelayout/_variables.scss
@@ -7,6 +7,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: $gray-100 !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout card.
 /// @group tilelayout
 $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;

diff --git a/packages/classic/scss/tilelayout/_variables.scss b/packages/classic/scss/tilelayout/_variables.scss
@@ -7,6 +7,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: $kendo-base-bg !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout card.
 /// @group tilelayout
 $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;

diff --git a/packages/default/scss/tilelayout/_layout.scss b/packages/default/scss/tilelayout/_layout.scss
@@ -6,6 +6,7 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

diff --git a/packages/default/scss/tilelayout/_variables.scss b/packages/default/scss/tilelayout/_variables.scss
@@ -7,6 +7,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: $kendo-base-bg !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout card.
 /// @group tilelayout
 $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;

diff --git a/packages/fluent/scss/tilelayout/_layout.scss b/packages/fluent/scss/tilelayout/_layout.scss
@@ -9,6 +9,8 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        padding-block: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-y} );
+        padding-inline: var( --kendo-tile-layout-padding-x, #{$kendo-tile-layout-padding-x} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }

diff --git a/packages/fluent/scss/tilelayout/_variables.scss b/packages/fluent/scss/tilelayout/_variables.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:map";
 @use "../core/" as *;
 @use "../card/_variables.scss" as *;
 
@@ -9,6 +10,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: k-get-theme-color-var( neutral-10 ) !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: map.get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-border-width: 1px !default;

diff --git a/packages/material/scss/tilelayout/_variables.scss b/packages/material/scss/tilelayout/_variables.scss
@@ -7,6 +7,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout card.
 /// @group tilelayout
 $kendo-tile-layout-card-border-width: 1px !default;