From 0f7a23132ddc0d1a9e2e572490be03fa1c21a563 Mon Sep 17 00:00:00 2001 From: extern-milly-igor Date: Mon, 29 Nov 2021 15:43:08 +0100 Subject: [PATCH] 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 --- .../src/accordion/expansion-panel-header.scss | 4 ++-- projects/ng-aquila/src/accordion/expansion-panel.scss | 4 ++-- .../src/shared-styles/theming/themes/expert.scss | 4 ++++ .../ng-aquila/src/shared-styles/theming/tokens.scss | 10 +++++++--- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/projects/ng-aquila/src/accordion/expansion-panel-header.scss b/projects/ng-aquila/src/accordion/expansion-panel-header.scss index 292ea1b95..bcceecfe4 100644 --- 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 index 393a488f5..0fdfdf998 100644 --- 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 index 797be93e5..5412108ef 100644 --- 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 index 053dadde3..ee2f977c4 100644 --- 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,