refactor(styles): use pad function (#1829)

* refactor(styles): use pad function

* chore(tile-mangager): revert using pad function

* fix(input): fix indigo and material inputs using pad function

* fix(carousel): fix carousel pad functions

* fix(file-input): revert using pad function

* fix(input): revert using pad for helper text margin

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: didimmova

src/components/accordion/themes/accordion.base.scss

@@ -8,7 +8,7 @@
     }
 
     ::slotted(igc-expansion-panel[open]) {
-        margin: rem(8px) 0;
+        margin: pad-block(rem(8px)) 0;
     }
 
     ::slotted(igc-expansion-panel:first-of-type) {

src/components/banner/themes/banner.base.scss

@@ -9,7 +9,8 @@
 [part~='spacer'] {
     display: flex;
     flex-wrap: wrap;
-    padding: rem(16px) rem(8px);
+    padding-block: pad-block(16px);
+    padding-inline: pad-inline(8px);
     gap: rem(8px);
     justify-content: flex-end;
 }
@@ -45,7 +46,7 @@
 }
 
 ::slotted([slot='prefix']) {
-    margin-inline-end: rem(16px);
+    margin-inline-end: pad-inline(rem(16px));
 }
 
 // OPEN CLOSE BEHAVIOR

src/components/banner/themes/shared/banner.bootstrap.scss

@@ -10,7 +10,7 @@ $theme: $bootstrap;
 }
 
 [part~='message'] {
-    padding: 0 rem(8px);
+    padding: 0 pad-inline(rem(8px));
 }
 
 ::slotted([slot='prefix']) {

src/components/banner/themes/shared/banner.fluent.scss

@@ -10,7 +10,7 @@ $theme: $fluent;
 }
 
 [part~='message'] {
-    padding: 0 rem(8px);
+    padding: 0 pad-inline(rem(8px));
 }
 
 ::slotted([slot='prefix']) {

src/components/banner/themes/shared/banner.indigo.scss

@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 [part~='spacer'] {
-    padding: rem(16px);
+    padding: pad(rem(16px));
     background: var-get($theme, 'banner-background');
     box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
     border-radius: var-get($theme, 'border-radius');

src/components/banner/themes/shared/banner.material.scss

@@ -10,7 +10,7 @@ $theme: $material;
 }
 
 [part~='message'] {
-    padding: 0 rem(8px);
+    padding: 0 pad-inline(rem(8px));
 }
 
 ::slotted([slot='prefix']) {

src/components/button/themes/button/button.base.scss

@@ -36,7 +36,7 @@
     white-space: nowrap;
     text-decoration: none;
     z-index: 0;
-    padding: 0 pad(8px, 12px, 16px);
+    padding: 0 pad-inline(8px, 12px, 16px);
     gap: var(--gap);
     min-width: rem(88px);
 }

src/components/button/themes/button/shared/button.common.scss

@@ -30,7 +30,7 @@ $outlined-theme: $material-outlined;
     border-radius: var-get($fab-theme, 'border-radius');
     min-height: var-get($fab-theme, 'size');
     min-width: var-get($fab-theme, 'size');
-    padding: 0 pad(6px, 10px, 14px);
+    padding: 0 pad-inline(6px, 10px, 14px);
 }
 /* stylelint-enable */
 

src/components/button/themes/button/shared/button.fluent.scss

@@ -31,7 +31,7 @@ $outlined-btn-indent: rem(2px);
 }
 
 [part~='base'] {
-    padding: 0 pad(8px, 12px, 16px);
+    padding: 0 pad-inline(8px, 12px, 16px);
     transition: all .1s ease-in-out;
 }
 

src/components/button/themes/button/shared/button.indigo.scss

@@ -8,8 +8,8 @@ $outlined-theme: $indigo-outlined;
 
 :host [part~='base']{
     min-width: rem(28px);
-    padding: 0 pad(10px, 16px, 24px);
-    
+    padding: 0 pad-inline(10px, 16px, 24px);
+
     ::slotted(igc-icon) {
         --component-size: var(--ig-size-medium) !important;
     }
@@ -34,7 +34,7 @@ $outlined-theme: $indigo-outlined;
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 
     [part~='base'] {
-        padding: 0 pad(rem(6px), rem(8px), rem(10px));
+        padding: 0 pad-inline(rem(6px), rem(8px), rem(10px));
     }
 }