fix(accordion): correct paddings and add missing css variables (#415)

* feat: retail regular desktop body paddings * feat: padding progress * feat: apply neww variables * feat: expert paddings * feat: misc changes * feat: misc change * feat: add header padding variable Co-authored-by: Igor Milly <[email protected]>
allianz · Nov 29, 2021 · 0f7a231 · 0f7a231
1 parent bac8599
commit 0f7a231
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/projects/ng-aquila/src/accordion/expansion-panel-header.scss b/projects/ng-aquila/src/accordion/expansion-panel-header.scss
@@ -18,7 +18,7 @@
   @include var(background, accordion-regular-header-background-color);
 
   @include media-breakpoint-down(small) {
-    padding: nx-spacer(s);
+    padding: v(accordion-regular-mobile-header-padding);
   }
 }
 
@@ -74,7 +74,7 @@ $header-title-small-screen-margin-after: nx-spacer(s);
     background: transparent;
 
     @include media-breakpoint-down(small) {
-      padding: nx-spacer(s) 0;
+      padding: v(accordion-light-mobile-header-padding);
     }
   }
 

diff --git a/projects/ng-aquila/src/accordion/expansion-panel.scss b/projects/ng-aquila/src/accordion/expansion-panel.scss
@@ -20,7 +20,7 @@
   @include type-style(accordion-body);
 
   @include media-breakpoint-down(small) {
-    padding: nx-spacer(m) nx-spacer(s);
+    padding: v(accordion-regular-mobile-body-padding);
   }
 }
 
@@ -70,7 +70,7 @@
     padding: v(accordion-light-body-padding);
 
     @include media-breakpoint-down(small) {
-      padding: 0 0 nx-spacer(m);
+      padding: v(accordion-light-mobile-body-padding);
     }
   }
 }

diff --git a/projects/ng-aquila/src/shared-styles/theming/themes/expert.scss b/projects/ng-aquila/src/shared-styles/theming/themes/expert.scss
@@ -22,7 +22,9 @@ $expert-theme: (
   accordion-light-hover-chevron-color: interactive-text,
 
   accordion-light-header-padding: 16px,
+  accordion-light-mobile-header-padding: 16px 0,
   accordion-light-body-padding: 0 16px 16px,
+  accordion-light-mobile-body-padding: 0 0 16px,
 
   accordion-regular-header-background-color: ui-02,
   accordion-regular-header-hover-text-color: interactive-text,
@@ -31,7 +33,9 @@ $expert-theme: (
   accordion-regular-mobile-border-color: ui-04,
   accordion-regular-mobile-separator-color: transparent,
   accordion-regular-header-padding: 16px,
+  accordion-regular-mobile-header-padding: 16px,
   accordion-regular-body-padding: 16px,
+  accordion-regular-mobile-body-padding: 16px,
 
   comparison-table-placeholder-cell-border-color: comparison-table-border-color,
   comparison-table-toggle-section-header-padding: 16px,

diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -227,19 +227,23 @@ $nx-theme: (
   accordion-regular-mobile-separator-color: ui-04,
 
   accordion-regular-header-padding: 24px 32px,
-  accordion-regular-body-padding: 24px 32px,
+  accordion-regular-mobile-header-padding: 16px,
+  accordion-regular-body-padding: 24px 32px 16px,
+  accordion-regular-mobile-body-padding: 24px 16px 32px,
   accordion-light-header-text-color: interactive-text,
   accordion-light-header-hover-text-color: interactive-text,
   accordion-light-chevron-color: interactive-text,
   accordion-light-hover-chevron-color: interactive-text,
   accordion-light-header-padding: 24px 32px,
-  accordion-light-body-padding: 24px 32px,
+  accordion-light-mobile-header-padding: 16px 0,
+  accordion-light-body-padding: 0 32px 32px,
+  accordion-light-mobile-body-padding: 0 0 24px,
   accordion-light-border-color: ui-04,
 
   accordion-extra-light-header-top-margin: 16px,
   accordion-extra-light-chevron-color: interactive-text,
   accordion-extra-light-header-text-color: interactive-text,
-  accordion-extra-light-body-padding: 8px 0 8px 0,
+  accordion-extra-light-body-padding: 16px 0 8px,
 
   accordion-extra-light-font-size: 16px,
   accordion-extra-light-line-height: 24px,