From 461787e56a87a118efddbdd76243d5a32bd274ed Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 27 Aug 2025 11:19:52 +0300 Subject: [PATCH 1/6] refactor(styles): use pad function --- .../accordion/themes/accordion.base.scss | 2 +- src/components/banner/themes/banner.base.scss | 5 ++-- .../themes/shared/banner.bootstrap.scss | 2 +- .../banner/themes/shared/banner.fluent.scss | 2 +- .../banner/themes/shared/banner.indigo.scss | 2 +- .../banner/themes/shared/banner.material.scss | 2 +- .../button/themes/button/button.base.scss | 2 +- .../themes/button/shared/button.common.scss | 2 +- .../themes/button/shared/button.fluent.scss | 2 +- .../themes/button/shared/button.indigo.scss | 6 ++-- .../calendar/themes/calendar.base.scss | 4 +-- .../calendar/themes/days-view.base.scss | 4 +-- .../shared/bootstrap/calendar.bootstrap.scss | 6 ++-- .../shared/bootstrap/days-view.bootstrap.scss | 6 ++-- .../bootstrap/year-month-view.bootstrap.scss | 2 +- .../themes/shared/fluent/calendar.fluent.scss | 6 ++-- .../themes/shared/indigo/calendar.indigo.scss | 8 +++--- .../shared/material/calendar.material.scss | 10 +++---- .../calendar/themes/year-month-view.base.scss | 4 +-- .../card/themes/card.actions.base.scss | 4 +-- .../card/themes/card.content.base.scss | 2 +- .../card/themes/card.header.base.scss | 4 +-- .../actions/card.actions.bootstrap.scss | 2 +- .../shared/actions/card.actions.indigo.scss | 2 +- .../shared/container/card.bootstrap.scss | 4 +-- .../themes/shared/container/card.indigo.scss | 4 +-- .../content/card.content.bootstrap.scss | 4 +-- .../shared/header/card.header.fluent.scss | 2 +- .../shared/header/card.header.indigo.scss | 4 +-- .../carousel/themes/carousel.base.scss | 28 +++++++++---------- .../themes/shared/carousel.indigo.scss | 12 ++++---- .../shared/checkbox/checkbox.bootstrap.scss | 2 +- .../shared/checkbox/checkbox.fluent.scss | 2 +- .../shared/checkbox/checkbox.indigo.scss | 2 +- .../shared/checkbox/checkbox.material.scss | 4 +-- .../chip/themes/shared/chip.indigo.scss | 2 +- src/components/combo/themes/combo.base.scss | 2 +- .../combo/themes/shared/combo.bootstrap.scss | 4 +-- .../combo/themes/shared/combo.fluent.scss | 2 +- .../combo/themes/shared/combo.indigo.scss | 4 +-- .../combo/themes/shared/combo.material.scss | 2 +- .../date-picker/themes/date-picker.base.scss | 2 +- .../themes/shared/date-picker.bootstrap.scss | 4 +-- .../themes/shared/date-picker.common.scss | 2 +- .../themes/shared/date-picker.fluent.scss | 2 +- .../themes/shared/date-picker.indigo.scss | 2 +- .../date-range-picker.base.scss | 4 +-- .../predefined-ranges-area.base.scss | 6 ++-- .../shared/date-range-picker.bootstrap.scss | 4 +-- .../shared/date-range-picker.common.scss | 6 ++-- .../shared/date-range-picker.fluent.scss | 2 +- .../shared/date-range-picker.indigo.scss | 4 +-- src/components/dialog/themes/dialog.base.scss | 2 +- .../themes/shared/dialog.bootstrap.scss | 4 +-- .../dialog/themes/shared/dialog.common.scss | 8 +++--- .../dialog/themes/shared/dialog.fluent.scss | 10 +++---- .../dialog/themes/shared/dialog.indigo.scss | 6 ++-- .../dropdown/themes/dropdown-item.base.scss | 4 +-- .../themes/shared/dropdown.indigo.scss | 2 +- .../shared/item/dropdown-item.indigo.scss | 2 +- .../themes/expansion-panel.base.scss | 4 +-- .../themes/shared/expansion-panel.indigo.scss | 8 +++--- .../themes/shared/file-input.material.scss | 6 ++-- .../input/themes/shared/input.bootstrap.scss | 6 ++-- .../input/themes/shared/input.fluent.scss | 6 ++-- .../input/themes/shared/input.indigo.scss | 6 ++-- .../input/themes/shared/input.material.scss | 16 +++++------ .../container/nav-drawer.bootstrap.scss | 2 +- .../shared/container/nav-drawer.indigo.scss | 2 +- .../shared/container/nav-drawer.material.scss | 2 +- .../header-item/header-item.bootstrap.scss | 2 +- .../header-item/header-item.fluent.scss | 2 +- .../header-item/header-item.indigo.scss | 2 +- .../header-item/header-item.material.scss | 2 +- .../themes/shared/item/item.bootstrap.scss | 2 +- .../themes/shared/item/item.fluent.scss | 2 +- .../themes/shared/item/item.indigo.scss | 6 ++-- .../themes/shared/item/item.material.scss | 2 +- src/components/navbar/themes/navbar.base.scss | 4 +-- .../themes/shared/navbar.bootstrap.scss | 4 +-- .../navbar/themes/shared/navbar.indigo.scss | 2 +- .../linear/shared/linear.progress.fluent.scss | 4 +-- .../linear/shared/linear.progress.indigo.scss | 4 +-- .../radio-group/themes/radio-group.base.scss | 2 +- .../themes/shared/radio-group.bootstrap.scss | 2 +- .../themes/shared/radio-group.fluent.scss | 2 +- .../themes/shared/radio-group.indigo.scss | 2 +- .../themes/shared/radio-group.material.scss | 4 +-- .../radio/themes/shared/radio.bootstrap.scss | 2 +- .../radio/themes/shared/radio.fluent.scss | 2 +- .../radio/themes/shared/radio.indigo.scss | 2 +- .../radio/themes/shared/radio.material.scss | 2 +- src/components/rating/themes/rating.base.scss | 4 +-- .../rating/themes/shared/rating.indigo.scss | 2 +- .../themes/shared/select.bootstrap.scss | 4 +-- .../select/themes/shared/select.fluent.scss | 2 +- .../select/themes/shared/select.indigo.scss | 4 +-- .../select/themes/shared/select.material.scss | 4 +-- .../slider/themes/shared/slider.common.scss | 2 +- src/components/slider/themes/slider.base.scss | 2 +- .../themes/shared/snackbar.indigo.scss | 2 +- .../snackbar/themes/snackbar.base.scss | 4 +-- .../tabs/themes/shared/tab/tab.bootstrap.scss | 2 +- .../tabs/themes/shared/tab/tab.fluent.scss | 2 +- .../tabs/themes/shared/tab/tab.indigo.scss | 2 +- .../tabs/themes/shared/tab/tab.material.scss | 2 +- .../themes/shared/textarea.bootstrap.scss | 6 ++-- .../themes/shared/textarea.fluent.scss | 6 ++-- .../themes/shared/textarea.indigo.scss | 8 +++--- .../themes/shared/textarea.material.scss | 16 +++++------ .../textarea/themes/textarea.base.scss | 6 ++-- .../themes/tile-manager.base.scss | 2 +- .../toast/themes/shared/toast.bootstrap.scss | 2 +- .../toast/themes/shared/toast.common.scss | 2 +- .../toast/themes/shared/toast.fluent.scss | 4 +-- src/components/toast/themes/toast.base.scss | 2 +- .../tooltip/themes/tooltip.base.scss | 2 +- src/components/tree/themes/item.base.scss | 4 +-- .../tree/themes/shared/item.common.scss | 2 +- .../tree/themes/shared/item.indigo.scss | 4 +-- .../tree/themes/shared/item.material.scss | 2 +- 121 files changed, 237 insertions(+), 236 deletions(-) diff --git a/src/components/accordion/themes/accordion.base.scss b/src/components/accordion/themes/accordion.base.scss index c311253d7..549fcd70b 100644 --- a/src/components/accordion/themes/accordion.base.scss +++ b/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) { diff --git a/src/components/banner/themes/banner.base.scss b/src/components/banner/themes/banner.base.scss index 647fb6935..e28b5b1d8 100644 --- a/src/components/banner/themes/banner.base.scss +++ b/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 diff --git a/src/components/banner/themes/shared/banner.bootstrap.scss b/src/components/banner/themes/shared/banner.bootstrap.scss index fe7d91362..3d29b1f1f 100644 --- a/src/components/banner/themes/shared/banner.bootstrap.scss +++ b/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']) { diff --git a/src/components/banner/themes/shared/banner.fluent.scss b/src/components/banner/themes/shared/banner.fluent.scss index 35b50284d..eb8423ae8 100644 --- a/src/components/banner/themes/shared/banner.fluent.scss +++ b/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']) { diff --git a/src/components/banner/themes/shared/banner.indigo.scss b/src/components/banner/themes/shared/banner.indigo.scss index 9f3d4f580..c076e72b6 100644 --- a/src/components/banner/themes/shared/banner.indigo.scss +++ b/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'); diff --git a/src/components/banner/themes/shared/banner.material.scss b/src/components/banner/themes/shared/banner.material.scss index 9285ea335..0684ba44e 100644 --- a/src/components/banner/themes/shared/banner.material.scss +++ b/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']) { diff --git a/src/components/button/themes/button/button.base.scss b/src/components/button/themes/button/button.base.scss index ce5b4d902..abd342e34 100644 --- a/src/components/button/themes/button/button.base.scss +++ b/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); } diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss index c8deee71c..e631c5303 100644 --- a/src/components/button/themes/button/shared/button.common.scss +++ b/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 */ diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss index b0fe2dc6b..0c7fb4df9 100644 --- a/src/components/button/themes/button/shared/button.fluent.scss +++ b/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; } diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss index 3a46e6a9b..cd2d4a779 100644 --- a/src/components/button/themes/button/shared/button.indigo.scss +++ b/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)); } } diff --git a/src/components/calendar/themes/calendar.base.scss b/src/components/calendar/themes/calendar.base.scss index 06482e5dc..39d4186e1 100644 --- a/src/components/calendar/themes/calendar.base.scss +++ b/src/components/calendar/themes/calendar.base.scss @@ -55,7 +55,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0rem(16px); + padding: 0 pad-inline(rem(16px)); user-select: none; } @@ -136,7 +136,7 @@ display: flex; flex-direction: column; justify-content: space-between; - padding: rem(16px); + padding: pad(rem(16px)); } [part~='content'] { diff --git a/src/components/calendar/themes/days-view.base.scss b/src/components/calendar/themes/days-view.base.scss index 7562c51ee..103a53a67 100644 --- a/src/components/calendar/themes/days-view.base.scss +++ b/src/components/calendar/themes/days-view.base.scss @@ -8,7 +8,7 @@ $row-gap: rem(4px); display: flex; flex-direction: column; outline: none; - padding: rem(16px) rem(12px); + padding: pad-block(rem(16px)) pad-inline(rem(12px)); overflow: hidden; box-sizing: border-box; gap: $row-gap; @@ -116,7 +116,7 @@ $row-gap: rem(4px); [part~='week-number'] { order: 0; cursor: default; - margin-inline-end: $row-gap; + margin-inline-end: pad-inline($row-gap); } [part='week-number-inner first'] { diff --git a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss index 4a5432b65..5fffb24f6 100644 --- a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss @@ -17,21 +17,21 @@ $theme: $bootstrap; [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view::part(days-row) { - padding-inline: rem(22px); + padding-inline: pad-inline(rem(22px)); } } [part='days-view-container']:first-of-type:not(:only-child) { [part='navigation'], igc-days-view::part(days-row) { - padding-inline-end: rem(22px); + padding-inline-end: pad-inline(rem(22px)); } } [part='days-view-container']:last-of-type:not(:only-child) { [part='navigation'], igc-days-view::part(days-row) { - padding-inline-end: rem(12px); + padding-inline-end: pad-inline(rem(12px)); } } } diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 1ea80ccff..3d32ab207 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -7,15 +7,15 @@ $border-size: rem(1px); :host([part='days-view']) { overflow: hidden; position: relative; - padding: 0 0 rem(16px); + padding: 0 0 pad-block(rem(16px)); } [part~='days-row'] { - padding: 0 rem(12px); + padding: 0 pad-inline(rem(12px)); } :host([part='days-view']) + :host([part='days-view']) { - margin-inline-start: rem(8px); + margin-inline-start: pad-inline(rem(8px)); } [part~='days-row'][part~='first'] { diff --git a/src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss index 58cf000b6..bfe26b332 100644 --- a/src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss @@ -4,7 +4,7 @@ $theme: $bootstrap; :host { - padding-block-start: rem(16px); + padding-block-start: pad-block(rem(16px)); } [part~='month-inner'], diff --git a/src/components/calendar/themes/shared/fluent/calendar.fluent.scss b/src/components/calendar/themes/shared/fluent/calendar.fluent.scss index 690382837..640db7939 100644 --- a/src/components/calendar/themes/shared/fluent/calendar.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/calendar.fluent.scss @@ -17,21 +17,21 @@ $theme: $fluent; [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view { - padding-inline: rem(22px); + padding-inline: pad-inline(rem(22px)); } } [part='days-view-container']:last-of-type:not(:only-child) { [part='navigation'], igc-days-view { - padding-inline-end: rem(12px); + padding-inline-end: pad-inline(rem(12px)); } } [part='days-view-container']:first-of-type:not(:only-child) { [part='navigation'], igc-days-view { - padding-inline-end: rem(22px); + padding-inline-end: pad-inline(rem(22px)); } } } diff --git a/src/components/calendar/themes/shared/indigo/calendar.indigo.scss b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss index 99f7d03c6..524ab62e8 100644 --- a/src/components/calendar/themes/shared/indigo/calendar.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss @@ -33,21 +33,21 @@ $theme: $indigo; [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view { - padding-inline: rem(22px); + padding-inline: pad-inline(rem(22px)); } } [part='days-view-container']:last-of-type:not(:only-child) { [part='navigation'], igc-days-view { - padding-inline-end: rem(12px); + padding-inline-end: pad-inline(rem(12px)); } } [part='days-view-container']:first-of-type:not(:only-child) { [part='navigation'], igc-days-view { - padding-inline-end: rem(22px); + padding-inline-end: pad-inline(rem(22px)); } } } @@ -84,7 +84,7 @@ $theme: $indigo; [part~='navigation-button'] { color: var-get($theme, 'navigation-color'); - padding: rem(5px); + padding: pad(rem(5px)); &:hover { color: var-get($theme, 'navigation-hover-color'); diff --git a/src/components/calendar/themes/shared/material/calendar.material.scss b/src/components/calendar/themes/shared/material/calendar.material.scss index 052604743..a789b3ab2 100644 --- a/src/components/calendar/themes/shared/material/calendar.material.scss +++ b/src/components/calendar/themes/shared/material/calendar.material.scss @@ -22,21 +22,21 @@ $theme: $material; [part='days-view-container'] + [part='days-view-container'] { [part='navigation'], igc-days-view { - padding-inline: rem(22px); + padding-inline: pad-inline(rem(22px)); } } [part='days-view-container']:last-of-type:not(:only-child) { [part='navigation'], igc-days-view { - padding-inline-end: rem(12px); + padding-inline-end: pad-inline(rem(12px)); } } [part='days-view-container']:first-of-type:not(:only-child) { [part='navigation'], igc-days-view { - padding-inline-end: rem(22px); + padding-inline-end: pad-inline(rem(22px)); } } } @@ -46,7 +46,7 @@ $theme: $material; } [part='header'] { - padding: rem(16px) rem(24px); + padding: pad-block(rem(16px)) pad-inline(rem(24px)); gap: rem(28px); } @@ -56,7 +56,7 @@ $theme: $material; height: rem(56px); color: var-get($theme, 'picker-foreground'); background: var-get($theme, 'picker-background'); - padding: 0 rem(24px); + padding: 0 pad-inline(rem(24px)); } [part='navigation-buttons'] { diff --git a/src/components/calendar/themes/year-month-view.base.scss b/src/components/calendar/themes/year-month-view.base.scss index b8d6694b3..a0306142b 100644 --- a/src/components/calendar/themes/year-month-view.base.scss +++ b/src/components/calendar/themes/year-month-view.base.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: column; outline: none; - padding-block: rem(16px); + padding-block: pad-block(rem(16px)); padding-inline: pad-inline(rem(8px), rem(8px), rem(16px)); overflow: hidden; box-sizing: border-box; @@ -36,7 +36,7 @@ user-select: none; max-width: rem(240px); cursor: pointer; - padding: 0 rem(12px); + padding: 0 pad-inline(rem(12px)); margin: 0; } diff --git a/src/components/card/themes/card.actions.base.scss b/src/components/card/themes/card.actions.base.scss index 564ced964..aab6c1a21 100644 --- a/src/components/card/themes/card.actions.base.scss +++ b/src/components/card/themes/card.actions.base.scss @@ -6,7 +6,7 @@ flex-flow: column nowrap; align-items: flex-end; justify-content: space-between; - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); flex-basis: min-content; } @@ -17,7 +17,7 @@ ::slotted(igc-icon-button:not(:first-of-type)), ::slotted(igc-button:not(:first-of-type)), ::slotted(igc-icon:not(:first-of-type)) { - margin-inline-start: rem(8px); + margin-inline-start: pad-inline(rem(8px)); } } diff --git a/src/components/card/themes/card.content.base.scss b/src/components/card/themes/card.content.base.scss index 913acf76a..27530ea14 100644 --- a/src/components/card/themes/card.content.base.scss +++ b/src/components/card/themes/card.content.base.scss @@ -7,7 +7,7 @@ display: block; width: 100%; overflow: auto; - padding: rem(16px); + padding: pad(rem(16px)); } ::slotted(*) { diff --git a/src/components/card/themes/card.header.base.scss b/src/components/card/themes/card.header.base.scss index cbd271736..49d36b6b9 100644 --- a/src/components/card/themes/card.header.base.scss +++ b/src/components/card/themes/card.header.base.scss @@ -7,7 +7,7 @@ align-items: center; align-content: flex-start; width: 100%; - padding: rem(16px); + padding: pad(rem(16px)); box-sizing: border-box; } @@ -35,5 +35,5 @@ header { ::slotted([slot='thumbnail']) { display: flex; align-self: flex-start; - margin-inline-end: rem(16px); + margin-inline-end: pad-inline(rem(16px)); } diff --git a/src/components/card/themes/shared/actions/card.actions.bootstrap.scss b/src/components/card/themes/shared/actions/card.actions.bootstrap.scss index 4096bda44..f0661da8c 100644 --- a/src/components/card/themes/shared/actions/card.actions.bootstrap.scss +++ b/src/components/card/themes/shared/actions/card.actions.bootstrap.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; :host { - padding: rem(16px); + padding: pad(rem(16px)); } diff --git a/src/components/card/themes/shared/actions/card.actions.indigo.scss b/src/components/card/themes/shared/actions/card.actions.indigo.scss index 5e22be112..0fab82cc1 100644 --- a/src/components/card/themes/shared/actions/card.actions.indigo.scss +++ b/src/components/card/themes/shared/actions/card.actions.indigo.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; :host { - padding: rem(16px); + padding: pad(rem(16px)); ::slotted(igc-button), ::slotted(igc-icon-button) { diff --git a/src/components/card/themes/shared/container/card.bootstrap.scss b/src/components/card/themes/shared/container/card.bootstrap.scss index e2e7e31a7..ecf58f4d4 100644 --- a/src/components/card/themes/shared/container/card.bootstrap.scss +++ b/src/components/card/themes/shared/container/card.bootstrap.scss @@ -5,11 +5,11 @@ $theme: $bootstrap; :host { ::slotted(igc-card-content:only-child) { - padding-block-end: rem(16px); + padding-block-end: pad-block(rem(16px)); } ::slotted(igc-card-content:last-child) { - padding-block-end: rem(16px); + padding-block-end: pad-block(rem(16px)); } } diff --git a/src/components/card/themes/shared/container/card.indigo.scss b/src/components/card/themes/shared/container/card.indigo.scss index e7fbcce1a..999d4ad14 100644 --- a/src/components/card/themes/shared/container/card.indigo.scss +++ b/src/components/card/themes/shared/container/card.indigo.scss @@ -10,11 +10,11 @@ $theme: $indigo; ::slotted(igc-card-header:first-child), ::slotted(igc-card-header:last-child) { - padding-block-end: rem(16px); + padding-block-end: pad-block(rem(16px)); } ::slotted(igc-card-content:not(:last-child)) { - padding-block-end: rem(8px); + padding-block-end: pad-block(rem(8px)); } } diff --git a/src/components/card/themes/shared/content/card.content.bootstrap.scss b/src/components/card/themes/shared/content/card.content.bootstrap.scss index 46a35ef6f..87e102a90 100644 --- a/src/components/card/themes/shared/content/card.content.bootstrap.scss +++ b/src/components/card/themes/shared/content/card.content.bootstrap.scss @@ -3,8 +3,8 @@ :host { @include type-style('body-1'); - padding-inline: rem(16px); - padding-block: rem(16px) rem(24px) ; + padding-inline: pad-inline(rem(16px)); + padding-block: pad-block(rem(16px)) pad-block(rem(24px)); } ::slotted(*) { diff --git a/src/components/card/themes/shared/header/card.header.fluent.scss b/src/components/card/themes/shared/header/card.header.fluent.scss index c34a8cfaf..9b06b4f86 100644 --- a/src/components/card/themes/shared/header/card.header.fluent.scss +++ b/src/components/card/themes/shared/header/card.header.fluent.scss @@ -9,5 +9,5 @@ } :host { - padding: rem(16px); + padding: pad(rem(16px)); } diff --git a/src/components/card/themes/shared/header/card.header.indigo.scss b/src/components/card/themes/shared/header/card.header.indigo.scss index f00a10b32..ed79b801d 100644 --- a/src/components/card/themes/shared/header/card.header.indigo.scss +++ b/src/components/card/themes/shared/header/card.header.indigo.scss @@ -13,9 +13,9 @@ ::slotted([slot='subtitle']) { @include type-style('body-2'); - margin-block-end: rem(2px); + margin-block-end: pad-block(rem(2px)); } ::slotted([slot='thumbnail']) { - margin-inline-end: rem(8px); + margin-inline-end: pad-inline(rem(8px)); } diff --git a/src/components/carousel/themes/carousel.base.scss b/src/components/carousel/themes/carousel.base.scss index 9650a049c..906ec3c6e 100644 --- a/src/components/carousel/themes/carousel.base.scss +++ b/src/components/carousel/themes/carousel.base.scss @@ -1,7 +1,7 @@ @use 'styles/common/component'; @use 'styles/utilities' as *; -:host { +:host { display: block; width: 100%; height: 100%; @@ -24,18 +24,18 @@ display: flex; justify-content: center; align-items: center; - margin: rem(16px) 0; + margin: pad-block(rem(16px)) 0; list-style: none; z-index: 10; gap: rem(8px); - padding: rem(4px) rem(6px); + padding: pad-block(rem(4px)) pad-inline(rem(6px)); } [part='label indicators'], [part='label indicators start'] { @include type-style('caption'); - margin: rem(16px) 0; + margin: pad-block(rem(16px)) 0; min-width: rem(46px); } @@ -92,12 +92,12 @@ igc-button::part(base) { [part='navigation previous'] { inset-inline-start: 0; - margin-inline-start: rem(16px); + margin-inline-start: pad-inline(rem(16px)); } [part='navigation next'] { inset-inline-end: 0; - margin-inline-end: rem(16px); + margin-inline-end: pad-inline(rem(16px)); } [part='navigation next'], @@ -121,7 +121,7 @@ igc-button::part(base) { :host([vertical]) { [part~='navigation'] { inset-inline-end: 0; - margin-inline-end: rem(16px); + margin-inline-end: pad-inline(rem(16px)); igc-icon { transform: rotate(90deg); @@ -130,12 +130,12 @@ igc-button::part(base) { [part='navigation previous'] { inset-block-start: 0; - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); } [part='navigation next'] { inset-block-end: 0; - margin-block-end: rem(16px); + margin-block-end: pad-block(rem(16px)); } [part~='indicators'] { @@ -144,24 +144,24 @@ igc-button::part(base) { inset-block-start: 50%; transform: translateY(-50%); margin-block: 0; - margin-inline-end: rem(29px); - padding: rem(6px) rem(4px); + margin-inline-end: pad-inline(rem(29px)); + padding: pad-block(rem(6px)) pad-inline(rem(4px)); } [part='label indicators'] { - margin-inline-end: rem(16px); + margin-inline-end: pad-inline(rem(16px)); } [part='indicators start'], [part='label indicators start'] { inset-inline-end: unset; inset-inline-start: 0; - margin-inline-start: rem(16px); + margin-inline-start: pad-inline(rem(16px)); margin-inline-end: unset; } [part='label indicators'], [part='label indicators start'] { - padding: rem(4px) rem(6px); + padding: pad-block(rem(4px)) pad-inline(rem(6px)); } } diff --git a/src/components/carousel/themes/shared/carousel.indigo.scss b/src/components/carousel/themes/shared/carousel.indigo.scss index e7b3a84bb..457d4df84 100644 --- a/src/components/carousel/themes/shared/carousel.indigo.scss +++ b/src/components/carousel/themes/shared/carousel.indigo.scss @@ -23,12 +23,12 @@ igc-button::part(focused):hover { [part~='indicators'] { gap: rem(4px); - padding: rem(6px); + padding: pad(rem(6px)); } [part='label indicators'], [part='label indicators start'] { - padding: rem(4px) rem(6px); + padding: pad-block(rem(4px)) pad-inline(rem(6px)); min-width: rem(28px); border-radius: rem(2px); } @@ -75,22 +75,22 @@ igc-button::part(focused):hover { :host([vertical]) { [part~='indicators'] { - padding: rem(6px); + padding: pad-block(rem(6px)); } [part='label indicators'], [part='label indicators start'] { - padding: rem(4px) rem(6px); + padding: pad-block(rem(4px)) pad-inline(rem(6px)); } [part~='indicators'], [part='label indicators'] { - margin-inline-end: rem(16px); + margin-inline-end: pad-inline(rem(16px)); } [part='indicators start'], [part='label indicators start'] { - margin-inline-start: rem(16px); + margin-inline-start: pad-inline(rem(16px)); } [part~='dot'] { diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss index 22a29267e..0b78e9a6c 100644 --- a/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss @@ -7,7 +7,7 @@ $theme: $bootstrap; ::part(helper-text) { @include type-style('body-2'); - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss index b4a2a74c9..b3b4502d3 100644 --- a/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss @@ -13,7 +13,7 @@ $disabled-color: var-get($theme, 'disabled-color'); ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss index e16f2e153..6dadfd94a 100644 --- a/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss @@ -16,7 +16,7 @@ $error-color-hover: var-get($theme, 'error-color-hover'); ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss index 99db4571b..9d7f07689 100644 --- a/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss @@ -7,7 +7,7 @@ $theme: $material; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(8px); + margin-block-start: pad-block(rem(8px)); grid-auto-rows: minmax(rem(18px), auto); } } @@ -19,7 +19,7 @@ $theme: $material; [part~='control'] { // We expose that css variable to override the padding of // the checkbox control in components that we nest it in like List and Tree. - padding: var(--control-padding, rem(20px)); + padding: pad(var(--control-padding, rem(20px))); transition: background .15s ease-in; &::after { diff --git a/src/components/chip/themes/shared/chip.indigo.scss b/src/components/chip/themes/shared/chip.indigo.scss index 84803401c..8083676b4 100644 --- a/src/components/chip/themes/shared/chip.indigo.scss +++ b/src/components/chip/themes/shared/chip.indigo.scss @@ -9,7 +9,7 @@ $theme: $indigo; :host button { border: rem(1px) solid var-get($theme, 'border-color'); - padding: 0 pad(3px, 5px, 7px); + padding: 0 pad-inline(3px, 5px, 7px); &:focus { box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index 1f4004236..164f2dee5 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -82,7 +82,7 @@ justify-content: center; align-items: center; width: 100%; - padding: rem(16px) rem(24px); + padding: pad-block(rem(16px)) pad-inline(rem(24px)); font-size: rem(13px); } diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index 3bb469c75..5f5407f0c 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -15,7 +15,7 @@ $dropdown-theme: dropdown-theme.$bootstrap; @include type-style('body-2'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); } ::slotted([slot='suffix']), @@ -156,4 +156,4 @@ $dropdown-theme: dropdown-theme.$bootstrap; ::slotted([slot='prefix']) { border-inline-start: rem(1px) solid var(--border-color); } -} \ No newline at end of file +} diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss index c279f28d4..7259142bf 100644 --- a/src/components/combo/themes/shared/combo.fluent.scss +++ b/src/components/combo/themes/shared/combo.fluent.scss @@ -12,7 +12,7 @@ $dropdown-theme: dropdown-theme.$fluent; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(5px); + margin-block-start: pad-block(rem(5px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index c7086fbe6..b439d3b60 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -18,7 +18,7 @@ $dropdown-theme: dropdown-theme.$indigo; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(15px), auto); } } @@ -43,7 +43,7 @@ $dropdown-theme: dropdown-theme.$indigo; background: var-get($dropdown-theme, 'background-color'); border-radius: var-get($dropdown-theme, 'border-radius'); outline: var-get($dropdown-theme, 'border-width') solid var-get($dropdown-theme, 'border-color'); - padding: rem(3px); + padding: pad(rem(3px)); igc-input { --ig-theme: indigo; diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index 0ace18790..2ee082908 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -14,7 +14,7 @@ $dropdown-theme: dropdown-theme.$material; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(18px), auto); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss index 7c41c5586..0f583cd68 100644 --- a/src/components/date-picker/themes/date-picker.base.scss +++ b/src/components/date-picker/themes/date-picker.base.scss @@ -40,7 +40,7 @@ [part='actions'] { display: flex; justify-content: flex-end; - padding: rem(8px); + padding: pad(rem(8px)); gap: rem(8px); ::slotted(*) { diff --git a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss index fcd07d731..4b9bf7cf7 100644 --- a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss +++ b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss @@ -15,7 +15,7 @@ $theme: $bootstrap; [part~='label'] { @include type-style('body-1'); - margin-bottom: rem(4px); + margin-bottom: pad-block(rem(4px)); &:empty { display: none; @@ -28,7 +28,7 @@ $theme: $bootstrap; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); padding-inline-start: 0; - margin-block-start: rem(4px) + margin-block-start: pad-block(rem(4px)); } } diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss index f030603f7..40b3bb457 100644 --- a/src/components/date-picker/themes/shared/date-picker.common.scss +++ b/src/components/date-picker/themes/shared/date-picker.common.scss @@ -61,7 +61,7 @@ $input-theme: input-theme.$material; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } } diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss index 78a59db85..6392fb5b3 100644 --- a/src/components/date-picker/themes/shared/date-picker.fluent.scss +++ b/src/components/date-picker/themes/shared/date-picker.fluent.scss @@ -19,7 +19,7 @@ $theme: $fluent; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: rem(5px); + margin-block-start: pad-block(rem(5px)); padding-inline-start: 0; } } diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss index 7d72776a3..23f245aef 100644 --- a/src/components/date-picker/themes/shared/date-picker.indigo.scss +++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss @@ -56,5 +56,5 @@ $input-theme: input-theme.$indigo; [part='actions'] { min-height: #{sizable(rem(40px), rem(44px), rem(48px))}; - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); } diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss index 56343c52f..a50f2f3c9 100644 --- a/src/components/date-range-picker/date-range-picker.base.scss +++ b/src/components/date-range-picker/date-range-picker.base.scss @@ -50,7 +50,7 @@ [part='actions'] { display: flex; justify-content: flex-end; - padding: rem(8px); + padding: pad(rem(8px)); gap: rem(8px); ::slotted(*) { @@ -66,4 +66,4 @@ igc-date-time-input { width: 100%; -} \ No newline at end of file +} diff --git a/src/components/date-range-picker/predefined-ranges-area.base.scss b/src/components/date-range-picker/predefined-ranges-area.base.scss index 2fe590a0a..5ea400325 100644 --- a/src/components/date-range-picker/predefined-ranges-area.base.scss +++ b/src/components/date-range-picker/predefined-ranges-area.base.scss @@ -5,14 +5,14 @@ display: flex; flex-direction: row; align-items: center; - padding: rem(8px); + padding: pad(rem(8px)); } [part='ranges'] { display: flex; flex-flow: wrap; - padding: rem(4px); + padding: pad(rem(4px)); gap: rem(8px); max-height: #{sizable(rem(84px), rem(96px), rem(120px))}; overflow-y: auto; -} \ No newline at end of file +} diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss index 804df06dc..5aad3307e 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss @@ -18,7 +18,7 @@ $theme: $bootstrap; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); padding-inline-start: 0; - margin-block-start: rem(4px) + margin-block-start: pad-block(rem(4px)); } } @@ -84,4 +84,4 @@ $theme: $bootstrap; [part|='clear-icon'] { border-inline-end: rem(1px) solid var(--disabled-border-color); } -} \ No newline at end of file +} diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss index 434d76216..9dde79ba5 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss @@ -30,7 +30,7 @@ $theme: $material; } igc-dialog::part(footer) { - padding: rem(8px); + padding: pad(rem(8px)); background: var-get($theme, 'content-background'); border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color'); } @@ -55,7 +55,7 @@ $theme: $material; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } } @@ -133,4 +133,4 @@ igc-icon, ::slotted([slot|='suffix']), ::slotted([slot|='prefix']) { padding-inline: var(--affix-padding); -} \ No newline at end of file +} diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss index 901ceeac2..6098061f1 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss @@ -15,7 +15,7 @@ $theme: $fluent; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: rem(5px); + margin-block-start: pad-block(rem(5px)); padding-inline-start: 0; } } diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss index 7302b6f5d..be4a3c1b3 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss @@ -12,7 +12,7 @@ $theme: $indigo; } igc-dialog::part(footer) { - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); gap: rem(8px); } @@ -27,7 +27,7 @@ $theme: $indigo; [part='actions'] { min-height: #{sizable(rem(40px), rem(44px), rem(48px))}; - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); } :host([readonly]) { diff --git a/src/components/dialog/themes/dialog.base.scss b/src/components/dialog/themes/dialog.base.scss index 1ed69b88b..f1e0cb5b9 100644 --- a/src/components/dialog/themes/dialog.base.scss +++ b/src/components/dialog/themes/dialog.base.scss @@ -61,7 +61,7 @@ slot[name='title'] { &::slotted(:last-child) { - margin-inline-start: rem(8px); + margin-inline-start: pad-inline(rem(8px)); } } diff --git a/src/components/dialog/themes/shared/dialog.bootstrap.scss b/src/components/dialog/themes/shared/dialog.bootstrap.scss index 2fefb3102..63fa9f102 100644 --- a/src/components/dialog/themes/shared/dialog.bootstrap.scss +++ b/src/components/dialog/themes/shared/dialog.bootstrap.scss @@ -14,11 +14,11 @@ $theme: $bootstrap; margin: 0; } - padding: rem(16px); + padding: pad(rem(16px)); } [part='content'] { - padding: rem(16px); + padding: pad(rem(16px)); } [part='title'] { diff --git a/src/components/dialog/themes/shared/dialog.common.scss b/src/components/dialog/themes/shared/dialog.common.scss index 1c42a7c72..461a0ab85 100644 --- a/src/components/dialog/themes/shared/dialog.common.scss +++ b/src/components/dialog/themes/shared/dialog.common.scss @@ -21,17 +21,17 @@ $theme: $material; [part='title'] { color: var-get($theme, 'title-color'); - padding-inline: rem(24px); - padding-block-start: rem(16px); + padding-inline: pad-inline(rem(24px)); + padding-block-start: pad-block(rem(16px)); } [part='content'] { color: var-get($theme, 'message-color'); - padding: rem(14px) rem(24px); + padding: pad-block(rem(14px)) pad-inline(rem(24px)); } [part='footer'] { color: var-get($theme, 'title-color'); - padding: rem(8px); + padding: pad(rem(8px)); padding-block-start: 0; } diff --git a/src/components/dialog/themes/shared/dialog.fluent.scss b/src/components/dialog/themes/shared/dialog.fluent.scss index 7d982a592..c827cc47d 100644 --- a/src/components/dialog/themes/shared/dialog.fluent.scss +++ b/src/components/dialog/themes/shared/dialog.fluent.scss @@ -1,8 +1,8 @@ @use 'styles/utilities' as *; [part='title'] { - padding: rem(24px); - padding-block-start: rem(16px); + padding: pad(rem(24px)); + padding-block-start: pad-block(rem(16px)); } [part='content'] { @@ -10,11 +10,11 @@ margin: 0; } - padding-inline: rem(24px); - padding-block: 0 rem(20px); + padding-inline: pad-inline(rem(24px)); + padding-block: 0 pad-block(rem(20px)); } [part='footer'] { - padding: rem(24px); + padding: pad(rem(24px)); padding-block-start: 0; } diff --git a/src/components/dialog/themes/shared/dialog.indigo.scss b/src/components/dialog/themes/shared/dialog.indigo.scss index d1cf961a3..8149e8817 100644 --- a/src/components/dialog/themes/shared/dialog.indigo.scss +++ b/src/components/dialog/themes/shared/dialog.indigo.scss @@ -8,15 +8,15 @@ } [part='title'] { - padding: rem(24px) rem(24px) 0; + padding: pad-block(rem(24px)) pad-inline(rem(24px)) 0; } [part='content'] { - padding: rem(16px) rem(24px); + padding: pad-block(rem(16px)) pad-inline(rem(24px)); } [part='footer'] { - padding: rem(16px) rem(24px) rem(24px); + padding: pad-block(rem(16px)) pad-inline(rem(24px)) pad-block(rem(24px)); gap: rem(16px); } diff --git a/src/components/dropdown/themes/dropdown-item.base.scss b/src/components/dropdown/themes/dropdown-item.base.scss index 2a5369428..b969338c8 100644 --- a/src/components/dropdown/themes/dropdown-item.base.scss +++ b/src/components/dropdown/themes/dropdown-item.base.scss @@ -42,11 +42,11 @@ [name='prefix']::slotted(*) { --component-size: var(--dropdown-size) !important; - margin-inline-end: pad(rem(8px)); + margin-inline-end: pad-inline(rem(8px)); } [name='suffix']::slotted(*) { --component-size: var(--dropdown-size) !important; - margin-inline-start: pad(rem(8px)); + margin-inline-start: pad-inline(rem(8px)); } diff --git a/src/components/dropdown/themes/shared/dropdown.indigo.scss b/src/components/dropdown/themes/shared/dropdown.indigo.scss index b46623df4..91656f030 100644 --- a/src/components/dropdown/themes/shared/dropdown.indigo.scss +++ b/src/components/dropdown/themes/shared/dropdown.indigo.scss @@ -8,7 +8,7 @@ $theme: $indigo; } [part='base'] { - padding: rem(3px); + padding: pad(rem(3px)); outline: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); outline-offset: rem(-1px); } diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss index 99b84b50b..d660dbdb3 100644 --- a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss +++ b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss @@ -5,7 +5,7 @@ $theme: $indigo; :host { padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); - margin-block: rem(2px); + margin-block: pad-block(rem(2px)); --item-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; diff --git a/src/components/expansion-panel/themes/expansion-panel.base.scss b/src/components/expansion-panel/themes/expansion-panel.base.scss index e71007ff2..cc67ba188 100644 --- a/src/components/expansion-panel/themes/expansion-panel.base.scss +++ b/src/components/expansion-panel/themes/expansion-panel.base.scss @@ -77,12 +77,12 @@ } :host([indicator-position='start']) [part~='indicator'] { - margin-inline-end: pad(16px); + margin-inline-end: pad-inline(16px); } :host([indicator-position='end']) [part~='indicator'] { order: 2; - margin-inline-start: pad(16px); + margin-inline-start: pad-inline(16px); } :host([indicator-position='none']) [part~='indicator'] { diff --git a/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss index 446e2e65e..a7d75cb21 100644 --- a/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss +++ b/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss @@ -12,7 +12,7 @@ } [part='title']::slotted(*) { - margin-bottom: pad(2px); + margin-bottom: pad-block(2px); } [part='header'] { @@ -28,9 +28,9 @@ } :host([indicator-position='start']) [part~='indicator'] { - margin-inline-end: pad(8px); + margin-inline-end: pad-inline(8px); } :host([indicator-position='end']) [part~='indicator'] { - margin-inline-start: pad(8px); -} \ No newline at end of file + margin-inline-start: pad-inline(8px); +} diff --git a/src/components/file-input/themes/shared/file-input.material.scss b/src/components/file-input/themes/shared/file-input.material.scss index 9e1c1c35f..a063c13ee 100644 --- a/src/components/file-input/themes/shared/file-input.material.scss +++ b/src/components/file-input/themes/shared/file-input.material.scss @@ -26,7 +26,7 @@ $active-border-width: rem(2px) !default; [part~='file-names'] { grid-area: 1 / 3 / span 1 / span 2; - padding-inline: rem(4px); + padding-inline: pad-inline(rem(4px)); } [part~='input'] { @@ -95,8 +95,8 @@ $active-border-width: rem(2px) !default; } [part~='labelled'] [part~='file-names'] { - padding-top: rem(20px); - padding-bottom: rem(6px); + padding-top: pad-block(rem(20px)); + padding-bottom: pad-block(rem(6px)); } [part='label'] { diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss index 05c3cfc1c..ce719ce67 100644 --- a/src/components/input/themes/shared/input.bootstrap.scss +++ b/src/components/input/themes/shared/input.bootstrap.scss @@ -17,7 +17,7 @@ $theme: $bootstrap; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); } [part='prefix'] { @@ -82,7 +82,7 @@ $theme: $bootstrap; } [part~='label'] { - margin-block-end: rem(4px); + margin-block-end: pad-block(rem(4px)); color: var-get($theme, 'idle-secondary-color'); &:empty { @@ -240,4 +240,4 @@ $theme: $bootstrap; ::slotted([slot='prefix']) { border-inline-start: rem(1px) solid var(--disabled-border-color); } -} \ No newline at end of file +} diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss index a957f7c34..4195425b6 100644 --- a/src/components/input/themes/shared/input.fluent.scss +++ b/src/components/input/themes/shared/input.fluent.scss @@ -25,7 +25,7 @@ $theme: $fluent; @include type-style('caption'); color: var-get($theme, 'helper-text-color'); - margin-block-start: rem(5px); + margin-block-start: pad-block(rem(5px)); grid-auto-rows: minmax(rem(18px), auto); } @@ -49,7 +49,7 @@ $theme: $fluent; @include type-style('subtitle-2') { --ig-subtitle-2-line-height: #{rem(16px)}; - margin-block: 0 rem(5px); + margin-block: 0 pad-block(rem(5px)); }; color: var-get($theme, 'idle-secondary-color'); @@ -88,7 +88,7 @@ $theme: $fluent; color: var-get($theme, 'idle-text-color'); background: initial; font-size: rem(14px); - padding-inline: rem(8px); + padding-inline: pad-inline(rem(8px)); max-height: 100%; border: none; grid-area: 1 / 2; diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss index 9002d7785..577411f05 100644 --- a/src/components/input/themes/shared/input.indigo.scss +++ b/src/components/input/themes/shared/input.indigo.scss @@ -26,7 +26,7 @@ $transition-duration: .25s; @include type-style('caption'); color: var-get($theme, 'helper-text-color'); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(15px), auto); } @@ -65,7 +65,7 @@ $transition-duration: .25s; @include type-style('caption'); color: var-get($theme, 'idle-secondary-color'); - margin-block-end: rem(4px); + margin-block-end: pad-block(rem(4px)); } [part^='container'] { @@ -99,7 +99,7 @@ $transition-duration: .25s; font-size: rem(12px); line-height: rem(16px); background: initial; - padding-block: rem(6px); + padding-block: pad-block(rem(6px)); padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); border: none; grid-area: 1 / 2; diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 6e9f19092..dc04e26b2 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -35,7 +35,7 @@ $fs: rem(16px) !default; @include type-style('caption'); color: var-get($theme, 'helper-text-color'); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(18px), auto); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } @@ -57,7 +57,7 @@ input:placeholder-shown + [part='notch'] [part='label'], [part~='input'] { color: var-get($theme, 'filled-text-color'); background: transparent; - padding: 0 rem(4px); + padding: 0 pad-inline(rem(4px)); font-size: rem(16px); grid-area: 1 / 2 / span 1 / span 2; } @@ -104,7 +104,7 @@ input:placeholder-shown + [part='notch'] [part='label'], min-width: 0; height: 100%; grid-area: 1 / 2; - padding: 0 rem(4px); + padding: 0 pad-inline(rem(4px)); overflow: visible; &:empty { @@ -208,8 +208,8 @@ input:placeholder-shown + [part='notch'] [part='label'], } [part~='labelled'] [part~='input'] { - padding-top: rem(20px); - padding-bottom: rem(6px); + padding-top: pad-block(rem(20px)); + padding-bottom: pad-block(rem(6px)); } input:placeholder-shown + [part='notch'] [part='label'], @@ -325,8 +325,8 @@ input:placeholder-shown + [part='notch'] [part='label'], :host([outlined][type='search']) { [part~='labelled'] [part~='input'] { - padding-top: rem(20px); - padding-bottom: rem(6px); + padding-top: pad-block(rem(20px)); + padding-bottom: pad-block(rem(6px)); } } @@ -561,7 +561,7 @@ input:placeholder-shown + [part='notch'] [part='label'], [part='suffix'], [part='prefix'] { ::slotted(*) { - padding-block: pad-block(10px, 12px, 14px); + padding-block: pad-block(rem(10px), rem(12px), rem(14px)); } } } diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss index 2d224b6bd..62203edce 100644 --- a/src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss @@ -6,5 +6,5 @@ [part='mini'], [part='main'] { - padding: rem(16px); + padding: pad(rem(16px)); } diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss index 5de55ca7a..03491e247 100644 --- a/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss @@ -11,6 +11,6 @@ $theme: $indigo; } [part='mini'], [part="main"] { - padding: rem(8px); + padding: pad(rem(8px)); } } diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss index b38832b7d..84db0c339 100644 --- a/src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss @@ -6,5 +6,5 @@ [part='mini'], [part='main'] { - padding: rem(8px); + padding: pad(rem(8px)); } diff --git a/src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss index 7ebb6a067..81885c5b6 100644 --- a/src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss @@ -3,7 +3,7 @@ :host { @include type-style('caption'); - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); min-height: rem(40px); } diff --git a/src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss index 5e759f8c1..1bf2afcc3 100644 --- a/src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; :host { - padding: rem(10px) rem(8px); + padding: pad-block(rem(10px)) pad-inline(rem(8px)); min-height: rem(44px) } diff --git a/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss index 4900d1479..32d507d77 100644 --- a/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss @@ -3,7 +3,7 @@ :host { @include type-style('overline'); - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); box-sizing: content-box; min-height: 16px; } diff --git a/src/components/nav-drawer/themes/shared/header-item/header-item.material.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.material.scss index cad3d9655..8d1ce38c9 100644 --- a/src/components/nav-drawer/themes/shared/header-item/header-item.material.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.material.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; :host { - padding: rem(12px) rem(8px); + padding: pad-block(rem(12px)) pad-inline(rem(8px)); min-height: rem(48px); } diff --git a/src/components/nav-drawer/themes/shared/item/item.bootstrap.scss b/src/components/nav-drawer/themes/shared/item/item.bootstrap.scss index ee33608fc..ac7c761d4 100644 --- a/src/components/nav-drawer/themes/shared/item/item.bootstrap.scss +++ b/src/components/nav-drawer/themes/shared/item/item.bootstrap.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; [part~='base'] { - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); gap: rem(8px); min-height: rem(40px); } diff --git a/src/components/nav-drawer/themes/shared/item/item.fluent.scss b/src/components/nav-drawer/themes/shared/item/item.fluent.scss index 6352c14a8..8c0be2214 100644 --- a/src/components/nav-drawer/themes/shared/item/item.fluent.scss +++ b/src/components/nav-drawer/themes/shared/item/item.fluent.scss @@ -1,7 +1,7 @@ @use 'styles/utilities' as *; [part~='base'] { - padding: rem(10px) rem(8px); + padding: pad-block(rem(10px)) pad-inline(rem(8px)); gap: rem(8px); min-height: rem(44px); } diff --git a/src/components/nav-drawer/themes/shared/item/item.indigo.scss b/src/components/nav-drawer/themes/shared/item/item.indigo.scss index 9e46b9e16..a0cb5c897 100644 --- a/src/components/nav-drawer/themes/shared/item/item.indigo.scss +++ b/src/components/nav-drawer/themes/shared/item/item.indigo.scss @@ -2,9 +2,9 @@ [part~='base'] { gap: rem(16px); - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); margin: 0; - margin-block-end: rem(4px); + margin-block-end: pad-block(rem(4px)); ::slotted(igc-icon) { --ig-size: 2; @@ -12,5 +12,5 @@ } [part='base mini'] { - padding: rem(8px); + padding: pad(rem(8px)); } diff --git a/src/components/nav-drawer/themes/shared/item/item.material.scss b/src/components/nav-drawer/themes/shared/item/item.material.scss index 06b63921e..fd6aad0ae 100644 --- a/src/components/nav-drawer/themes/shared/item/item.material.scss +++ b/src/components/nav-drawer/themes/shared/item/item.material.scss @@ -4,7 +4,7 @@ $theme: $material; [part~='base'] { - padding: rem(12px) rem(8px); + padding: pad-block(rem(12px)) pad-inline(rem(8px)); gap: rem(32px); background: transparent; min-height: rem(48px); diff --git a/src/components/navbar/themes/navbar.base.scss b/src/components/navbar/themes/navbar.base.scss index c0d4398c5..869330ebe 100644 --- a/src/components/navbar/themes/navbar.base.scss +++ b/src/components/navbar/themes/navbar.base.scss @@ -6,7 +6,7 @@ width: 100%; min-height: rem(56px); max-height: rem(128px); - padding: 0 rem(16px); + padding: 0 pad-inline(rem(16px)); font-family: var(--ig-font-family); z-index: 4; @@ -54,7 +54,7 @@ } [name='start']::slotted(*) { - margin-inline-end: rem(16px); + margin-inline-end: pad-inline(rem(16px)); } ::slotted(igc-icon) { diff --git a/src/components/navbar/themes/shared/navbar.bootstrap.scss b/src/components/navbar/themes/shared/navbar.bootstrap.scss index 39c71ea29..37c350134 100644 --- a/src/components/navbar/themes/shared/navbar.bootstrap.scss +++ b/src/components/navbar/themes/shared/navbar.bootstrap.scss @@ -5,11 +5,11 @@ $theme: $bootstrap; :host { box-shadow: var(--ig-elevation-0); - padding: 0 rem(8px); + padding: 0 pad-inline(rem(8px)); } [part='base'] { - padding-inline: rem(4px); + padding-inline: pad-inline(rem(4px)); } ::slotted(*) { diff --git a/src/components/navbar/themes/shared/navbar.indigo.scss b/src/components/navbar/themes/shared/navbar.indigo.scss index 1ef13816b..3368cfb90 100644 --- a/src/components/navbar/themes/shared/navbar.indigo.scss +++ b/src/components/navbar/themes/shared/navbar.indigo.scss @@ -25,7 +25,7 @@ ::slotted(igc-icon) { --size: rem(16px); - padding: rem(6px); + padding: pad(rem(6px)); margin: 0; } diff --git a/src/components/progress/themes/linear/shared/linear.progress.fluent.scss b/src/components/progress/themes/linear/shared/linear.progress.fluent.scss index fb75689e7..3cb17866d 100644 --- a/src/components/progress/themes/linear/shared/linear.progress.fluent.scss +++ b/src/components/progress/themes/linear/shared/linear.progress.fluent.scss @@ -21,7 +21,7 @@ $track-color: color(gray, 200); :host([label-align='top-start']), :host([label-align='top-end']) { [part~='track'] { - margin-block-start: rem(2px); + margin-block-start: pad-block(rem(2px)); } } @@ -29,7 +29,7 @@ $track-color: color(gray, 200); :host([label-align='bottom-start']), :host([label-align='bottom-end']) { [part~='track'] { - margin-block-end: rem(2px); + margin-block-end: pad-block(rem(2px)); } } diff --git a/src/components/progress/themes/linear/shared/linear.progress.indigo.scss b/src/components/progress/themes/linear/shared/linear.progress.indigo.scss index bf9180d45..fe64dc8b0 100644 --- a/src/components/progress/themes/linear/shared/linear.progress.indigo.scss +++ b/src/components/progress/themes/linear/shared/linear.progress.indigo.scss @@ -11,7 +11,7 @@ $stripe-space: rem(14px); :host([label-align='top-start']), :host([label-align='top-end']) { [part~='track'] { - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); } } @@ -19,7 +19,7 @@ $stripe-space: rem(14px); :host([label-align='bottom-start']), :host([label-align='bottom-end']) { [part~='track'] { - margin-block-end: rem(4px); + margin-block-end: pad-block(rem(4px)); } } diff --git a/src/components/radio-group/themes/radio-group.base.scss b/src/components/radio-group/themes/radio-group.base.scss index 20e6da347..66cce5cfa 100644 --- a/src/components/radio-group/themes/radio-group.base.scss +++ b/src/components/radio-group/themes/radio-group.base.scss @@ -14,7 +14,7 @@ width: max-content; ::slotted(label) { - margin-block-end: rem(8px); + margin-block-end: pad-block(rem(8px)); } } diff --git a/src/components/radio-group/themes/shared/radio-group.bootstrap.scss b/src/components/radio-group/themes/shared/radio-group.bootstrap.scss index 98bb27906..b6c502412 100644 --- a/src/components/radio-group/themes/shared/radio-group.bootstrap.scss +++ b/src/components/radio-group/themes/shared/radio-group.bootstrap.scss @@ -3,7 +3,7 @@ :host { ::slotted(label) { @include type-style('body-1') { - margin-block-end: rem(16px); + margin-block-end: pad-block(rem(16px)); }; } } diff --git a/src/components/radio-group/themes/shared/radio-group.fluent.scss b/src/components/radio-group/themes/shared/radio-group.fluent.scss index ac83f07ae..d9cc240e9 100644 --- a/src/components/radio-group/themes/shared/radio-group.fluent.scss +++ b/src/components/radio-group/themes/shared/radio-group.fluent.scss @@ -3,7 +3,7 @@ :host { ::slotted(label) { @include type-style('subtitle-2') { - margin-block-end: rem(16px); + margin-block-end: pad-block(rem(16px)); }; } } diff --git a/src/components/radio-group/themes/shared/radio-group.indigo.scss b/src/components/radio-group/themes/shared/radio-group.indigo.scss index 23390d8e8..03e9f9d28 100644 --- a/src/components/radio-group/themes/shared/radio-group.indigo.scss +++ b/src/components/radio-group/themes/shared/radio-group.indigo.scss @@ -3,7 +3,7 @@ :host { ::slotted(label) { @include type-style('caption') { - margin-block-end: rem(16px); + margin-block-end: pad-block(rem(16px)); }; } } diff --git a/src/components/radio-group/themes/shared/radio-group.material.scss b/src/components/radio-group/themes/shared/radio-group.material.scss index 3eea71b3b..8682168ce 100644 --- a/src/components/radio-group/themes/shared/radio-group.material.scss +++ b/src/components/radio-group/themes/shared/radio-group.material.scss @@ -3,7 +3,7 @@ :host { ::slotted(label) { @include type-style('subtitle-1') { - margin-block-end: rem(16px); + margin-block-end: pad-block(rem(16px)); }; } } @@ -12,7 +12,7 @@ gap: 0; ::slotted(label) { - margin-block-end: rem(16px); + margin-block-end: pad-block(rem(16px)); } } diff --git a/src/components/radio/themes/shared/radio.bootstrap.scss b/src/components/radio/themes/shared/radio.bootstrap.scss index a4c5c5d50..fa1412257 100644 --- a/src/components/radio/themes/shared/radio.bootstrap.scss +++ b/src/components/radio/themes/shared/radio.bootstrap.scss @@ -11,7 +11,7 @@ $theme: $bootstrap; ::part(helper-text) { @include type-style('body-2'); - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); grid-auto-rows: minmax(rem(20px), auto); } } diff --git a/src/components/radio/themes/shared/radio.fluent.scss b/src/components/radio/themes/shared/radio.fluent.scss index 55e5e9555..3063b9712 100644 --- a/src/components/radio/themes/shared/radio.fluent.scss +++ b/src/components/radio/themes/shared/radio.fluent.scss @@ -7,7 +7,7 @@ $theme: $fluent; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/radio/themes/shared/radio.indigo.scss b/src/components/radio/themes/shared/radio.indigo.scss index c6a1eadac..84eefdedf 100644 --- a/src/components/radio/themes/shared/radio.indigo.scss +++ b/src/components/radio/themes/shared/radio.indigo.scss @@ -7,7 +7,7 @@ $theme: $indigo; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(16px); + margin-block-start: pad-block(rem(16px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/radio/themes/shared/radio.material.scss b/src/components/radio/themes/shared/radio.material.scss index e1fa81245..b4b64a7f9 100644 --- a/src/components/radio/themes/shared/radio.material.scss +++ b/src/components/radio/themes/shared/radio.material.scss @@ -7,7 +7,7 @@ $theme: $material; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(8px); + margin-block-start: pad-block(rem(8px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/rating/themes/rating.base.scss b/src/components/rating/themes/rating.base.scss index 2a8bb2269..d23558a24 100644 --- a/src/components/rating/themes/rating.base.scss +++ b/src/components/rating/themes/rating.base.scss @@ -21,13 +21,13 @@ display: flex; justify-content: center; align-items: center; - padding: rem(2px); + padding: pad(rem(2px)); gap: rem(2px); inset-inline-start: 0; } [part~='label'] { - padding-inline-start: rem(4px); + padding-inline-start: pad-inline(rem(4px)); height: auto; width: auto; min-height: 0; diff --git a/src/components/rating/themes/shared/rating.indigo.scss b/src/components/rating/themes/shared/rating.indigo.scss index 1682d5f38..c24e6d8a4 100644 --- a/src/components/rating/themes/shared/rating.indigo.scss +++ b/src/components/rating/themes/shared/rating.indigo.scss @@ -19,7 +19,7 @@ $theme: $indigo; } [part~='label'] { - padding-inline-start: rem(2px); + padding-inline-start: pad-inline(rem(2px)); } [part~='symbols'] { diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss index c12e228db..1d014f0a3 100644 --- a/src/components/select/themes/shared/select.bootstrap.scss +++ b/src/components/select/themes/shared/select.bootstrap.scss @@ -15,7 +15,7 @@ $input-theme: input-theme.$bootstrap; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); } ::slotted([slot='suffix']), @@ -28,7 +28,7 @@ $input-theme: input-theme.$bootstrap; [part='base'] { border: rem(1px) solid var(--dd-border-color); - padding: rem(8px) 0; + padding: pad-block(rem(8px)) 0; } :host(:not(:state(ig-invalid)):focus-within) { diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss index f44e17bf1..99f9b5ac5 100644 --- a/src/components/select/themes/shared/select.fluent.scss +++ b/src/components/select/themes/shared/select.fluent.scss @@ -16,7 +16,7 @@ $input-theme: input-theme.$fluent; @include type-style('caption'); color: var-get($theme, 'helper-text-color'); - margin-block-start: rem(5px); + margin-block-start: pad-block(rem(5px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss index d3a09f733..67e7f9c87 100644 --- a/src/components/select/themes/shared/select.indigo.scss +++ b/src/components/select/themes/shared/select.indigo.scss @@ -15,7 +15,7 @@ $input-theme: input-theme.$indigo; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(15px), auto); } @@ -30,7 +30,7 @@ $input-theme: input-theme.$indigo; [part='base'] { outline: var-get($dropdown-theme, 'border-width') solid var-get($dropdown-theme, 'border-color'); - padding: rem(3px); + padding: pad(rem(3px)); } :host(:hover) { diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss index 998c296bd..84da43c9b 100644 --- a/src/components/select/themes/shared/select.material.scss +++ b/src/components/select/themes/shared/select.material.scss @@ -12,7 +12,7 @@ $idle-border-width: rem(1px) !default; $active-border-width: rem(2px) !default; [part='base'] { - padding: rem(8px) 0; + padding: pad-block(rem(8px)) 0; } :host { @@ -23,7 +23,7 @@ $active-border-width: rem(2px) !default; ::part(helper-text) { @include type-style('caption'); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); grid-auto-rows: minmax(rem(18px), auto); } diff --git a/src/components/slider/themes/shared/slider.common.scss b/src/components/slider/themes/shared/slider.common.scss index b479efc96..88296ffb2 100644 --- a/src/components/slider/themes/shared/slider.common.scss +++ b/src/components/slider/themes/shared/slider.common.scss @@ -26,7 +26,7 @@ $theme: $material; [part='thumb-label-inner'] { color: var-get($theme, 'label-text-color'); background: var-get($theme, 'label-background-color'); - padding: 0 rem(8px); + padding: 0 pad-inline(rem(8px)); &::after { border-top: rem(10px) solid var-get($theme, 'label-background-color'); diff --git a/src/components/slider/themes/slider.base.scss b/src/components/slider/themes/slider.base.scss index 728ccd768..f5c7dc767 100644 --- a/src/components/slider/themes/slider.base.scss +++ b/src/components/slider/themes/slider.base.scss @@ -161,7 +161,7 @@ slot { justify-content: center; white-space: nowrap; margin-inline-start: -50%; - padding: 0 rem(2px); + padding: 0 pad-inline(rem(2px)); &::after { content: ''; diff --git a/src/components/snackbar/themes/shared/snackbar.indigo.scss b/src/components/snackbar/themes/shared/snackbar.indigo.scss index 04645dd8a..2e1d81871 100644 --- a/src/components/snackbar/themes/shared/snackbar.indigo.scss +++ b/src/components/snackbar/themes/shared/snackbar.indigo.scss @@ -11,7 +11,7 @@ $theme: $indigo; [part~='base'] { min-height: rem(36px); - padding: rem(4px) rem(16px); + padding: pad-block(rem(4px)) pad-inline(rem(16px)); } igc-button::part(base), diff --git a/src/components/snackbar/themes/snackbar.base.scss b/src/components/snackbar/themes/snackbar.base.scss index 830203e4f..65146a2cb 100644 --- a/src/components/snackbar/themes/snackbar.base.scss +++ b/src/components/snackbar/themes/snackbar.base.scss @@ -28,8 +28,8 @@ align-items: center; justify-content: space-between; min-height: rem(48px); - padding: rem(7px) rem(24px); - margin: rem(8px); + padding: pad-block(rem(7px)) pad-inline(rem(24px)); + margin: pad(rem(8px)); gap: rem(24px); backface-visibility: hidden; backdrop-filter: blur(8px); diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss index 821f93716..dccff6569 100644 --- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss +++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss @@ -10,7 +10,7 @@ $theme: $bootstrap; [part='tab-header'] { transition: none; border-radius: 0; - padding: rem(8px) rem(16px); + padding: pad-block(rem(8px)) pad-inline(rem(16px)); &::before { content: ''; diff --git a/src/components/tabs/themes/shared/tab/tab.fluent.scss b/src/components/tabs/themes/shared/tab/tab.fluent.scss index d8dc49726..247bda866 100644 --- a/src/components/tabs/themes/shared/tab/tab.fluent.scss +++ b/src/components/tabs/themes/shared/tab/tab.fluent.scss @@ -5,7 +5,7 @@ $theme: $fluent; [part='tab-header'] { transition: all .3s cubic-bezier(.35, 0, .25, 1); - padding: rem(10px) rem(16px); + padding: pad-block(rem(10px)) pad-inline(rem(16px)); } [part='content'] { diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss index 44dbcc15d..8da76773e 100644 --- a/src/components/tabs/themes/shared/tab/tab.indigo.scss +++ b/src/components/tabs/themes/shared/tab/tab.indigo.scss @@ -12,7 +12,7 @@ $theme: $indigo; } [part='tab-header'] { - padding: rem(12px) rem(16px); + padding: pad-block(rem(12px)) pad-inline(rem(16px)); } [part='content'] { diff --git a/src/components/tabs/themes/shared/tab/tab.material.scss b/src/components/tabs/themes/shared/tab/tab.material.scss index 7923bf248..7f901294a 100644 --- a/src/components/tabs/themes/shared/tab/tab.material.scss +++ b/src/components/tabs/themes/shared/tab/tab.material.scss @@ -8,7 +8,7 @@ $theme: $material; } [part='tab-header'] { - padding: rem(12px) rem(16px); + padding: pad-block(rem(12px)) pad-inline(rem(16px)); } ::slotted(igc-icon) { diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index 2eee77e0d..01741c5e0 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -14,7 +14,7 @@ $theme: $bootstrap; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); } ::slotted([slot="prefix"]), @@ -31,7 +31,7 @@ $theme: $bootstrap; padding: 0; transform: translateY(0); transform-origin: top left; - margin-block: 0 rem(4px); + margin-block: 0 pad-block(rem(4px)); height: auto; font-size: rem(16px); } @@ -98,7 +98,7 @@ textarea { @include type-style('body-1'); border: rem(1px) solid var-get($theme, 'border-color'); - padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); + padding-block: pad-block(rem(4px), rem(6px), rem(8px)); padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); border-radius: var-get($theme, 'border-border-radius'); z-index: 1; diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index 692596e64..be02ebdb2 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -16,7 +16,7 @@ $border-size: rem(1px); color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: rem(5px); + margin-block-start: pad-block(rem(5px)); } } @@ -24,7 +24,7 @@ $border-size: rem(1px); @include type-style('subtitle-2') { --ig-subtitle-2-line-height: #{rem(16px)}; - margin-block: 0 rem(5px); + margin-block: 0 pad-block(rem(5px)); }; display: block; @@ -82,7 +82,7 @@ $border-size: rem(1px); textarea { @include type-style('body-2'); - padding: rem(8px); + padding: pad(rem(8px)); } :host([required]:not(:disabled)), diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss index a39ec36bd..79149f881 100644 --- a/src/components/textarea/themes/shared/textarea.indigo.scss +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -20,7 +20,7 @@ $theme: $indigo; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(15px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); } } @@ -69,7 +69,7 @@ $theme: $indigo; transform-origin: top left; margin-top: 0; height: auto; - margin-block-end: rem(4px); + margin-block-end: pad-block(rem(4px)); } [part~='container'] { @@ -92,9 +92,9 @@ $theme: $indigo; textarea { @include type-style('body-2'); - padding-block: rem(6px); + padding-block: pad-block(rem(6px)); padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); - margin-block-end: rem(1px); + margin-block-end: pad-block(rem(1px)); &::placeholder { font-style: italic; diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 0abc4f209..218e716ad 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -17,7 +17,7 @@ $input-bottom-padding: rem(6px); color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: rem(4px); + margin-block-start: pad-block(rem(4px)); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } } @@ -26,12 +26,12 @@ textarea { border: none; padding: 0; overflow: auto; - margin-block-start: $input-top-padding; + margin-block-start: pad-block($input-top-padding); grid-area: 1 / 2 / span 1 / span 2; flex-grow: 1; position: relative; max-width: inherit; - padding-inline: rem(4px); + padding-inline: pad-inline(rem(4px)); z-index: 1; } @@ -39,7 +39,7 @@ textarea { position: absolute; transform-origin: top left; inset-block-start: calc($input-top-padding - #{rem(2px)}); - padding-inline-end: rem(4px); + padding-inline-end: pad-inline(rem(4px)); transition: transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), @@ -72,7 +72,7 @@ textarea { border-start-start-radius: var-get($theme, 'box-border-radius'); border-start-end-radius: var-get($theme, 'box-border-radius'); background: var-get($theme, 'box-background'); - padding-inline-end: rem(1px); + padding-inline-end: pad-inline(rem(1px)); &::after { content: ''; @@ -84,7 +84,7 @@ textarea { } textarea { - margin-block-end: rem(2px); + margin-block-end: pad-block(rem(2px)); } } @@ -214,7 +214,7 @@ textarea { height: 100%; position: relative; grid-area: 1 / 2; - padding-inline: rem(4px); + padding-inline: pad-inline(rem(4px)); } [part='filler'] { @@ -298,7 +298,7 @@ textarea { [part='notch'] { border-block: rem(1px) solid var-get($theme, 'border-color'); - padding: 0 rem(4px); + padding: 0 pad-inline(rem(4px)); &:empty { display: none; diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index 5a073e1a1..59ba307d4 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -46,7 +46,7 @@ textarea { position: relative; display: block; border: none; - padding-block: rem(20px) rem(6px); + padding-block: pad-block(rem(20px)) pad-block(rem(6px)); padding-inline-start: 0; width: 100%; min-width: 0; @@ -109,7 +109,7 @@ textarea { justify-content: space-between; > * { - margin-inline-end: rem(8px); + margin-inline-end: pad-inline(rem(8px)); &:last-child { margin-inline-end: 0; @@ -130,7 +130,7 @@ textarea { content: '*'; font-size: inherit; vertical-align: top; - margin-inline-start: rem(2px); + margin-inline-start: pad-inline(rem(2px)); display: inline-block; } } diff --git a/src/components/tile-manager/themes/tile-manager.base.scss b/src/components/tile-manager/themes/tile-manager.base.scss index f4b1b4798..b263ed1af 100644 --- a/src/components/tile-manager/themes/tile-manager.base.scss +++ b/src/components/tile-manager/themes/tile-manager.base.scss @@ -11,7 +11,7 @@ [part~='base'] { display: grid; position: relative; - padding: rem(20px); + padding: pad(rem(20px)); width: 100%; height: 100%; grid-template-columns: repeat(var(--column-count, auto-fit), minmax(min(var(--min-col-width, 100%)), 1fr)); diff --git a/src/components/toast/themes/shared/toast.bootstrap.scss b/src/components/toast/themes/shared/toast.bootstrap.scss index 55018a2fa..b98e8a045 100644 --- a/src/components/toast/themes/shared/toast.bootstrap.scss +++ b/src/components/toast/themes/shared/toast.bootstrap.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; :host { - padding: rem(12px); + padding: pad(rem(12px)); } diff --git a/src/components/toast/themes/shared/toast.common.scss b/src/components/toast/themes/shared/toast.common.scss index 75da5efbe..c9862e396 100644 --- a/src/components/toast/themes/shared/toast.common.scss +++ b/src/components/toast/themes/shared/toast.common.scss @@ -4,7 +4,7 @@ $theme: $material; :host { - padding: rem(10px) rem(16px); + padding: pad-block(rem(10px)) pad-inline(rem(16px)); color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); box-shadow: var-get($theme, 'elevation'); diff --git a/src/components/toast/themes/shared/toast.fluent.scss b/src/components/toast/themes/shared/toast.fluent.scss index beea27949..450e21df0 100644 --- a/src/components/toast/themes/shared/toast.fluent.scss +++ b/src/components/toast/themes/shared/toast.fluent.scss @@ -3,7 +3,7 @@ :host { @include type-style('caption'); - padding: rem(8px) rem(12px); - margin-block: rem(42px); + padding: pad-block(rem(8px)) pad-inline(rem(12px)); + margin-block: pad-block(rem(42px)); margin-inline: auto; } diff --git a/src/components/toast/themes/toast.base.scss b/src/components/toast/themes/toast.base.scss index 50ec5fe3a..4a99df1a5 100644 --- a/src/components/toast/themes/toast.base.scss +++ b/src/components/toast/themes/toast.base.scss @@ -11,7 +11,7 @@ text-align: center; inset-inline: 50% auto; transform: translateX(calc(-50% + .5px)); - margin: rem(42px) auto; + margin: pad-block(rem(42px)) auto; min-width: rem(52px); &::after { diff --git a/src/components/tooltip/themes/tooltip.base.scss b/src/components/tooltip/themes/tooltip.base.scss index 05edfb62d..eb687cd89 100644 --- a/src/components/tooltip/themes/tooltip.base.scss +++ b/src/components/tooltip/themes/tooltip.base.scss @@ -11,7 +11,7 @@ [part="base"] { @include type-style('body-2'); - padding: rem(4px) rem(8px); + padding: pad-block(rem(4px)) pad-inline(rem(8px)); font-size: rem(10px); font-weight: 600; line-height: rem(16px); diff --git a/src/components/tree/themes/item.base.scss b/src/components/tree/themes/item.base.scss index a5403de70..07c83128f 100644 --- a/src/components/tree/themes/item.base.scss +++ b/src/components/tree/themes/item.base.scss @@ -32,7 +32,7 @@ display: flex; align-items: center; position: relative; - padding: 0 pad(12px, 16px, 24px); + padding: 0 pad-inline(12px, 16px, 24px); cursor: pointer; background: inherit; color: inherit; @@ -58,7 +58,7 @@ justify-content: center; cursor: pointer; user-select: none; - margin-inline-end: rem(4px); + margin-inline-end: pad-inline(rem(4px)); min-width: rem(24px); } diff --git a/src/components/tree/themes/shared/item.common.scss b/src/components/tree/themes/shared/item.common.scss index df82fd0c2..ad7a85e65 100644 --- a/src/components/tree/themes/shared/item.common.scss +++ b/src/components/tree/themes/shared/item.common.scss @@ -54,7 +54,7 @@ $theme: $material; } [part~='select'] { - margin-inline-end: rem(8px); + margin-inline-end: pad-inline(rem(8px)); } [part~='focused'] { diff --git a/src/components/tree/themes/shared/item.indigo.scss b/src/components/tree/themes/shared/item.indigo.scss index cd16cc3dd..3d46b2510 100644 --- a/src/components/tree/themes/shared/item.indigo.scss +++ b/src/components/tree/themes/shared/item.indigo.scss @@ -16,8 +16,8 @@ $theme: $indigo; [part~='wrapper'] { border-radius: rem(4px); - margin-block-end: rem(4px); - padding: 0 pad(8px, 12px, 16px); + margin-block-end: pad-block(rem(4px)); + padding: 0 pad-inline(8px, 12px, 16px); &::after { border-radius: rem(4px); diff --git a/src/components/tree/themes/shared/item.material.scss b/src/components/tree/themes/shared/item.material.scss index 0d4a6503f..786b69512 100644 --- a/src/components/tree/themes/shared/item.material.scss +++ b/src/components/tree/themes/shared/item.material.scss @@ -5,5 +5,5 @@ igc-checkbox { } [part~='select'] { - margin-inline: rem(10px) rem(14px); + margin-inline: pad-inline(rem(10px)) pad-inline(rem(14px)); } From 03f9f1a548c4134861551e08e4c2cb2e2c462f48 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 27 Aug 2025 11:38:18 +0300 Subject: [PATCH 2/6] chore(tile-mangager): revert using pad function --- src/components/tile-manager/themes/tile-manager.base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tile-manager/themes/tile-manager.base.scss b/src/components/tile-manager/themes/tile-manager.base.scss index b263ed1af..f4b1b4798 100644 --- a/src/components/tile-manager/themes/tile-manager.base.scss +++ b/src/components/tile-manager/themes/tile-manager.base.scss @@ -11,7 +11,7 @@ [part~='base'] { display: grid; position: relative; - padding: pad(rem(20px)); + padding: rem(20px); width: 100%; height: 100%; grid-template-columns: repeat(var(--column-count, auto-fit), minmax(min(var(--min-col-width, 100%)), 1fr)); From 8aa60e7d93915cd9e03cd97da8642da7e23d1e0d Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 27 Aug 2025 12:02:53 +0300 Subject: [PATCH 3/6] fix(input): fix indigo and material inputs using pad function --- src/components/input/themes/shared/input.indigo.scss | 2 +- src/components/input/themes/shared/input.material.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss index 577411f05..efbbb1285 100644 --- a/src/components/input/themes/shared/input.indigo.scss +++ b/src/components/input/themes/shared/input.indigo.scss @@ -99,7 +99,7 @@ $transition-duration: .25s; font-size: rem(12px); line-height: rem(16px); background: initial; - padding-block: pad-block(rem(6px)); + padding-block: rem(6px); padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); border: none; grid-area: 1 / 2; diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index dc04e26b2..050b45b89 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -208,8 +208,8 @@ input:placeholder-shown + [part='notch'] [part='label'], } [part~='labelled'] [part~='input'] { - padding-top: pad-block(rem(20px)); - padding-bottom: pad-block(rem(6px)); + padding-top: rem(20px); + padding-bottom: rem(6px); } input:placeholder-shown + [part='notch'] [part='label'], From eb56e4e0f89eb035c856e6ecc09afdda3c2d4a15 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 28 Aug 2025 13:07:59 +0300 Subject: [PATCH 4/6] fix(carousel): fix carousel pad functions --- src/components/carousel/themes/carousel.base.scss | 12 ++++++------ .../carousel/themes/shared/carousel.indigo.scss | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/carousel/themes/carousel.base.scss b/src/components/carousel/themes/carousel.base.scss index 906ec3c6e..806df2485 100644 --- a/src/components/carousel/themes/carousel.base.scss +++ b/src/components/carousel/themes/carousel.base.scss @@ -24,7 +24,7 @@ display: flex; justify-content: center; align-items: center; - margin: pad-block(rem(16px)) 0; + margin: rem(16px) 0; list-style: none; z-index: 10; gap: rem(8px); @@ -35,7 +35,7 @@ [part='label indicators start'] { @include type-style('caption'); - margin: pad-block(rem(16px)) 0; + margin: rem(16px) 0; min-width: rem(46px); } @@ -92,12 +92,12 @@ igc-button::part(base) { [part='navigation previous'] { inset-inline-start: 0; - margin-inline-start: pad-inline(rem(16px)); + margin-inline-start: rem(16px); } [part='navigation next'] { inset-inline-end: 0; - margin-inline-end: pad-inline(rem(16px)); + margin-inline-end: rem(16px); } [part='navigation next'], @@ -121,7 +121,7 @@ igc-button::part(base) { :host([vertical]) { [part~='navigation'] { inset-inline-end: 0; - margin-inline-end: pad-inline(rem(16px)); + margin-inline-end: rem(16px); igc-icon { transform: rotate(90deg); @@ -144,7 +144,7 @@ igc-button::part(base) { inset-block-start: 50%; transform: translateY(-50%); margin-block: 0; - margin-inline-end: pad-inline(rem(29px)); + margin-inline-end: rem(29px); padding: pad-block(rem(6px)) pad-inline(rem(4px)); } diff --git a/src/components/carousel/themes/shared/carousel.indigo.scss b/src/components/carousel/themes/shared/carousel.indigo.scss index 457d4df84..45de09fd9 100644 --- a/src/components/carousel/themes/shared/carousel.indigo.scss +++ b/src/components/carousel/themes/shared/carousel.indigo.scss @@ -85,12 +85,12 @@ igc-button::part(focused):hover { [part~='indicators'], [part='label indicators'] { - margin-inline-end: pad-inline(rem(16px)); + margin-inline-end: rem(16px); } [part='indicators start'], [part='label indicators start'] { - margin-inline-start: pad-inline(rem(16px)); + margin-inline-start: rem(16px); } [part~='dot'] { From b9986176bbce17a5b49f84b26992b0d5b14970ec Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 28 Aug 2025 14:59:43 +0300 Subject: [PATCH 5/6] fix(file-input): revert using pad function --- .../file-input/themes/shared/file-input.material.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/file-input/themes/shared/file-input.material.scss b/src/components/file-input/themes/shared/file-input.material.scss index a063c13ee..a08413276 100644 --- a/src/components/file-input/themes/shared/file-input.material.scss +++ b/src/components/file-input/themes/shared/file-input.material.scss @@ -95,8 +95,8 @@ $active-border-width: rem(2px) !default; } [part~='labelled'] [part~='file-names'] { - padding-top: pad-block(rem(20px)); - padding-bottom: pad-block(rem(6px)); + padding-top: rem(20px); + padding-bottom: rem(6px); } [part='label'] { From c0b570a05b617e433333f12aa8497f394a1523d3 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 28 Aug 2025 15:19:19 +0300 Subject: [PATCH 6/6] fix(input): revert using pad for helper text margin --- src/components/input/themes/shared/input.bootstrap.scss | 4 ++-- src/components/input/themes/shared/input.fluent.scss | 4 ++-- src/components/input/themes/shared/input.indigo.scss | 2 +- src/components/input/themes/shared/input.material.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss index ce719ce67..ba50e5360 100644 --- a/src/components/input/themes/shared/input.bootstrap.scss +++ b/src/components/input/themes/shared/input.bootstrap.scss @@ -17,7 +17,7 @@ $theme: $bootstrap; color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: pad-block(rem(4px)); + margin-block-start: rem(4px); } [part='prefix'] { @@ -82,7 +82,7 @@ $theme: $bootstrap; } [part~='label'] { - margin-block-end: pad-block(rem(4px)); + margin-block-end: rem(4px); color: var-get($theme, 'idle-secondary-color'); &:empty { diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss index 4195425b6..ceb15946b 100644 --- a/src/components/input/themes/shared/input.fluent.scss +++ b/src/components/input/themes/shared/input.fluent.scss @@ -25,7 +25,7 @@ $theme: $fluent; @include type-style('caption'); color: var-get($theme, 'helper-text-color'); - margin-block-start: pad-block(rem(5px)); + margin-block-start: rem(5px); grid-auto-rows: minmax(rem(18px), auto); } @@ -49,7 +49,7 @@ $theme: $fluent; @include type-style('subtitle-2') { --ig-subtitle-2-line-height: #{rem(16px)}; - margin-block: 0 pad-block(rem(5px)); + margin-block: 0 rem(5px); }; color: var-get($theme, 'idle-secondary-color'); diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss index efbbb1285..50f900fc5 100644 --- a/src/components/input/themes/shared/input.indigo.scss +++ b/src/components/input/themes/shared/input.indigo.scss @@ -65,7 +65,7 @@ $transition-duration: .25s; @include type-style('caption'); color: var-get($theme, 'idle-secondary-color'); - margin-block-end: pad-block(rem(4px)); + margin-block-end: rem(4px); } [part^='container'] { diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 050b45b89..ab7e7fe55 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -35,7 +35,7 @@ $fs: rem(16px) !default; @include type-style('caption'); color: var-get($theme, 'helper-text-color'); - margin-block-start: pad-block(rem(4px)); + margin-block-start: rem(4px); grid-auto-rows: minmax(rem(18px), auto); padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); }