From 83101892aa5f5d9b2a33af0cdc1d8a8e8dbc012d Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 25 Jun 2024 22:13:15 +0800 Subject: [PATCH] refactor: migrate to new shadows (#7933) --- .../line-chart/line-chart.style.less | 2 +- projects/addon-doc/components/demo/index.less | 4 ++-- .../components/internal/header/index.less | 2 +- .../loader-android/loader-android.style.less | 2 +- .../sheet-dialog/sheet-dialog.style.less | 2 +- .../core/components/alert/alert.style.less | 2 +- .../core/components/dialog/dialog.style.less | 2 +- .../directives/dropdown/dropdown.style.less | 2 +- .../directives/surface/surface.style.less | 6 ++--- projects/core/styles/theme/variables.less | 22 +++++-------------- .../components/app-bar/examples/1/index.less | 2 +- .../components/app-bar/examples/2/index.less | 2 +- .../components/app-bar/examples/3/index.less | 2 +- .../components/badge/examples/5/index.less | 2 +- .../components/carousel/examples/2/index.less | 2 +- .../components/push/examples/1/index.less | 2 +- .../components/surface/examples/1/base.less | 2 +- .../components/surface/examples/1/index.less | 2 +- .../components/tiles/examples/1/index.less | 2 +- .../components/tiles/examples/2/index.less | 2 +- .../portals/examples/1/index.less | 2 +- .../src/modules/markup/shadows/index.html | 12 +++++----- .../src/modules/markup/shadows/index.less | 14 ++++++------ .../markup/spaces/examples/1/index.less | 2 +- .../markup/spaces/examples/2/index.less | 2 +- .../components/files/files/files.styles.less | 2 +- .../line-clamp/line-clamp-box.style.less | 2 +- projects/kit/components/push/push.style.less | 2 +- .../sheet/components/sheet/sheet.style.less | 4 ++-- .../components/table-bar/table-bar.style.less | 2 +- projects/legacy/styles/mixins/mixins.less | 4 ++-- projects/legacy/styles/mixins/mixins.scss | 4 ++-- projects/styles/markup/tui-island.less | 4 ++-- 33 files changed, 55 insertions(+), 67 deletions(-) diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less index 7c88c06967f8..137b9dca024c 100644 --- a/projects/addon-charts/components/line-chart/line-chart.style.less +++ b/projects/addon-charts/components/line-chart/line-chart.style.less @@ -81,7 +81,7 @@ .t-hint { position: absolute; - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); font: var(--tui-font-text-xs); height: 1.25rem; line-height: 1.25rem; diff --git a/projects/addon-doc/components/demo/index.less b/projects/addon-doc/components/demo/index.less index 73ce88a8b750..c1a819ce457a 100644 --- a/projects/addon-doc/components/demo/index.less +++ b/projects/addon-doc/components/demo/index.less @@ -34,7 +34,7 @@ } .t-wrapper { - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); display: flex; border: 1px solid var(--tui-border-normal); border-radius: var(--tui-radius-m); @@ -108,7 +108,7 @@ } .t-resizer { - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); position: relative; width: 3.5rem; min-height: inherit; diff --git a/projects/addon-doc/components/internal/header/index.less b/projects/addon-doc/components/internal/header/index.less index a68fba1d5b81..7fd1b4744091 100644 --- a/projects/addon-doc/components/internal/header/index.less +++ b/projects/addon-doc/components/internal/header/index.less @@ -8,7 +8,7 @@ // fix for Safari to prevent tabs underline above sidebar z-index: 1; display: flex; - box-shadow: var(--tui-shadow-navigation); + box-shadow: var(--tui-shadow-small); height: 3.9375rem; align-items: center; padding: 0 1.25rem; diff --git a/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less b/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less index b377608e9029..bcf52a4d7cdc 100644 --- a/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less +++ b/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less @@ -26,7 +26,7 @@ top: -2.5rem; left: 50%; display: flex; - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); height: 2.25rem; width: 2.25rem; background-color: var(--tui-background-neutral-1); diff --git a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less index 404dc25fd663..4ea43898fd0d 100644 --- a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less +++ b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less @@ -38,7 +38,7 @@ } .t-sheet { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); border-radius: 0.75rem 0.75rem 0 0; padding: 0 1rem; margin-top: auto; diff --git a/projects/core/components/alert/alert.style.less b/projects/core/components/alert/alert.style.less index 2cf666921254..bf4167e4e53c 100644 --- a/projects/core/components/alert/alert.style.less +++ b/projects/core/components/alert/alert.style.less @@ -2,7 +2,7 @@ :host { display: block; - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); border-radius: var(--tui-radius-l); width: 18rem; diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less index fd19df77cba8..3064455e8efa 100644 --- a/projects/core/components/dialog/dialog.style.less +++ b/projects/core/components/dialog/dialog.style.less @@ -16,7 +16,7 @@ content: ''; border-radius: inherit; pointer-events: none; - box-shadow: var(--tui-shadow-modal); + box-shadow: var(--tui-shadow-popup); } &[data-size='auto'] { diff --git a/projects/core/directives/dropdown/dropdown.style.less b/projects/core/directives/dropdown/dropdown.style.less index bfc69ba651cf..4efc5cf43041 100644 --- a/projects/core/directives/dropdown/dropdown.style.less +++ b/projects/core/directives/dropdown/dropdown.style.less @@ -3,7 +3,7 @@ :host { position: absolute; display: flex; - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); background: var(--tui-background-elevation-2); border-radius: var(--tui-radius-m); overflow: hidden; diff --git a/projects/core/directives/surface/surface.style.less b/projects/core/directives/surface/surface.style.less index cd74e1014bc7..378ade6c6f3c 100644 --- a/projects/core/directives/surface/surface.style.less +++ b/projects/core/directives/surface/surface.style.less @@ -130,19 +130,19 @@ input[tuiSurfaceLayer] { } [tuiSurface][data-surface='elevated'] { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); background-color: var(--tui-background-elevation-1); button&, a& { &:active { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); transform: scale(0.95); } @media (hover: hover) and (pointer: fine) { &:hover { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); transform: translate3d(0, -0.25rem, 0); background: var(--tui-background-elevation-1); } diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less index 782552df5fdb..245afc8dccdf 100644 --- a/projects/core/styles/theme/variables.less +++ b/projects/core/styles/theme/variables.less @@ -115,14 +115,11 @@ --tui-chart-categorical-21: #3682db; --tui-chart-categorical-22: #34b41f; // Shadows - --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12); - --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2); - --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04), - 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05); - --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48); - --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12); - --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08); - --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24); + --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); + --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14); + --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12); + --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18); + --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2); } [tuiTheme='dark'] { @@ -165,13 +162,4 @@ --tui-text-tertiary: rgba(255, 255, 255, 0.6); --tui-text-action: #6788ff; --tui-text-action-hover: #526ed3; - // Shadows - --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12); - --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2); - --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04), - 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05); - --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48); - --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12); - --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08); - --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24); } diff --git a/projects/demo/src/modules/components/app-bar/examples/1/index.less b/projects/demo/src/modules/components/app-bar/examples/1/index.less index 4a03300f0348..8174605b274c 100644 --- a/projects/demo/src/modules/components/app-bar/examples/1/index.less +++ b/projects/demo/src/modules/components/app-bar/examples/1/index.less @@ -1,7 +1,7 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; tui-app-bar { - box-shadow: var(--tui-shadow-navigation); + box-shadow: var(--tui-shadow-small); width: 20rem; margin-bottom: 1rem; } diff --git a/projects/demo/src/modules/components/app-bar/examples/2/index.less b/projects/demo/src/modules/components/app-bar/examples/2/index.less index 5c78b44f9216..00d61b300125 100644 --- a/projects/demo/src/modules/components/app-bar/examples/2/index.less +++ b/projects/demo/src/modules/components/app-bar/examples/2/index.less @@ -1,7 +1,7 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; tui-app-bar { - box-shadow: var(--tui-shadow-navigation); + box-shadow: var(--tui-shadow-small); width: 30rem; margin-bottom: 1rem; } diff --git a/projects/demo/src/modules/components/app-bar/examples/3/index.less b/projects/demo/src/modules/components/app-bar/examples/3/index.less index 9b73d88035e5..7b4586004657 100644 --- a/projects/demo/src/modules/components/app-bar/examples/3/index.less +++ b/projects/demo/src/modules/components/app-bar/examples/3/index.less @@ -1,7 +1,7 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; tui-app-bar { - box-shadow: var(--tui-shadow-navigation); + box-shadow: var(--tui-shadow-small); width: 20rem; margin-bottom: 1rem; } diff --git a/projects/demo/src/modules/components/badge/examples/5/index.less b/projects/demo/src/modules/components/badge/examples/5/index.less index 5fa30535d40a..b94cdb3093e8 100644 --- a/projects/demo/src/modules/components/badge/examples/5/index.less +++ b/projects/demo/src/modules/components/badge/examples/5/index.less @@ -2,7 +2,7 @@ .custom-1 { .gradient(#0094cf, #24c0ff); - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); } .custom-2 { diff --git a/projects/demo/src/modules/components/carousel/examples/2/index.less b/projects/demo/src/modules/components/carousel/examples/2/index.less index 0a536df3a88e..391c07710d5d 100644 --- a/projects/demo/src/modules/components/carousel/examples/2/index.less +++ b/projects/demo/src/modules/components/carousel/examples/2/index.less @@ -8,7 +8,7 @@ border-radius: 100%; &_active { - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); transform: scale(1.2); } } diff --git a/projects/demo/src/modules/components/push/examples/1/index.less b/projects/demo/src/modules/components/push/examples/1/index.less index ee01e72259cd..80eb69145cbe 100644 --- a/projects/demo/src/modules/components/push/examples/1/index.less +++ b/projects/demo/src/modules/components/push/examples/1/index.less @@ -5,7 +5,7 @@ } .wrapper { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); width: 22.5rem; max-width: 100%; border-radius: var(--tui-radius-l); diff --git a/projects/demo/src/modules/components/surface/examples/1/base.less b/projects/demo/src/modules/components/surface/examples/1/base.less index edb78291a157..5a6b3b89733f 100644 --- a/projects/demo/src/modules/components/surface/examples/1/base.less +++ b/projects/demo/src/modules/components/surface/examples/1/base.less @@ -6,7 +6,7 @@ gap: 1rem; * { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); font-weight: bold; text-align: center; } diff --git a/projects/demo/src/modules/components/surface/examples/1/index.less b/projects/demo/src/modules/components/surface/examples/1/index.less index b530b4f50f43..61911b110720 100644 --- a/projects/demo/src/modules/components/surface/examples/1/index.less +++ b/projects/demo/src/modules/components/surface/examples/1/index.less @@ -64,5 +64,5 @@ } .shadow:hover { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); } diff --git a/projects/demo/src/modules/components/tiles/examples/1/index.less b/projects/demo/src/modules/components/tiles/examples/1/index.less index 8481931ea375..fcc85c01ad38 100644 --- a/projects/demo/src/modules/components/tiles/examples/1/index.less +++ b/projects/demo/src/modules/components/tiles/examples/1/index.less @@ -28,7 +28,7 @@ overflow: hidden; tui-tile._dragged & { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); } } diff --git a/projects/demo/src/modules/components/tiles/examples/2/index.less b/projects/demo/src/modules/components/tiles/examples/2/index.less index f07be9f54891..690f9eca1b54 100644 --- a/projects/demo/src/modules/components/tiles/examples/2/index.less +++ b/projects/demo/src/modules/components/tiles/examples/2/index.less @@ -24,6 +24,6 @@ cursor: ns-resize; tui-tile._dragged & { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); } } diff --git a/projects/demo/src/modules/customization/portals/examples/1/index.less b/projects/demo/src/modules/customization/portals/examples/1/index.less index 893edc54b365..3f7580b565c8 100644 --- a/projects/demo/src/modules/customization/portals/examples/1/index.less +++ b/projects/demo/src/modules/customization/portals/examples/1/index.less @@ -6,7 +6,7 @@ } .template { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); padding: 0.5rem; margin: 0.5rem; border-radius: 0.25rem; diff --git a/projects/demo/src/modules/markup/shadows/index.html b/projects/demo/src/modules/markup/shadows/index.html index 0176616ab6d8..369198775578 100644 --- a/projects/demo/src/modules/markup/shadows/index.html +++ b/projects/demo/src/modules/markup/shadows/index.html @@ -6,29 +6,29 @@ Basic shadow: --tui-shadow with - --tui-shadow-hover + --tui-shadow-small-hover when hovered
Dropdown shadow: - --tui-shadow-dropdown + --tui-shadow-medium
Modal shadow: - --tui-shadow-modal + --tui-shadow-popup
Sidebar shadow: - --tui-shadow-sidebar + --tui-shadow-medium
Navigation shadow: - --tui-shadow-navigation + --tui-shadow-small
Mobile modal shadow: - --tui-shadow-sheet + --tui-shadow-popup
diff --git a/projects/demo/src/modules/markup/shadows/index.less b/projects/demo/src/modules/markup/shadows/index.less index 0bfafd030b70..39fa45f2f34f 100644 --- a/projects/demo/src/modules/markup/shadows/index.less +++ b/projects/demo/src/modules/markup/shadows/index.less @@ -28,31 +28,31 @@ text-align: center; &_default { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); &:hover { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); } } &_dropdown { - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); } &_modal { - box-shadow: var(--tui-shadow-modal); + box-shadow: var(--tui-shadow-popup); } &_sidebar { - box-shadow: var(--tui-shadow-sidebar); + box-shadow: var(--tui-shadow-medium); } &_navigation { - box-shadow: var(--tui-shadow-navigation); + box-shadow: var(--tui-shadow-small); } &_mobile { - box-shadow: var(--tui-shadow-sheet); + box-shadow: var(--tui-shadow-popup); } } diff --git a/projects/demo/src/modules/markup/spaces/examples/1/index.less b/projects/demo/src/modules/markup/spaces/examples/1/index.less index 588a4d489545..e6b46b9f43a4 100644 --- a/projects/demo/src/modules/markup/spaces/examples/1/index.less +++ b/projects/demo/src/modules/markup/spaces/examples/1/index.less @@ -23,7 +23,7 @@ .example { font: var(--tui-font-text-m); - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); display: flex; align-items: center; justify-content: center; diff --git a/projects/demo/src/modules/markup/spaces/examples/2/index.less b/projects/demo/src/modules/markup/spaces/examples/2/index.less index adb1deb4578c..4f526cc178fa 100644 --- a/projects/demo/src/modules/markup/spaces/examples/2/index.less +++ b/projects/demo/src/modules/markup/spaces/examples/2/index.less @@ -25,7 +25,7 @@ .example { .tui-space(left, 2); font: var(--tui-font-text-m); - box-shadow: var(--tui-shadow-modal); + box-shadow: var(--tui-shadow-popup); display: flex; align-items: center; justify-content: center; diff --git a/projects/kit/components/files/files/files.styles.less b/projects/kit/components/files/files/files.styles.less index 90c088491841..c288d792c9eb 100644 --- a/projects/kit/components/files/files/files.styles.less +++ b/projects/kit/components/files/files/files.styles.less @@ -25,7 +25,7 @@ tui-files { background: var(--tui-background-base); &_collapsed { - box-shadow: var(--tui-shadow-modal); + box-shadow: var(--tui-shadow-popup); margin-top: -1.5rem; } } diff --git a/projects/kit/components/line-clamp/line-clamp-box.style.less b/projects/kit/components/line-clamp/line-clamp-box.style.less index f232958726ba..ab39cab7bef7 100644 --- a/projects/kit/components/line-clamp/line-clamp-box.style.less +++ b/projects/kit/components/line-clamp/line-clamp-box.style.less @@ -2,7 +2,7 @@ :host { position: absolute; - box-shadow: var(--tui-shadow-dropdown); + box-shadow: var(--tui-shadow-medium); width: min-content; padding: 0.75rem 1rem; margin-left: calc(-1px - 1rem); diff --git a/projects/kit/components/push/push.style.less b/projects/kit/components/push/push.style.less index 4f20f9ab71e3..2f2be1dcf2de 100644 --- a/projects/kit/components/push/push.style.less +++ b/projects/kit/components/push/push.style.less @@ -11,7 +11,7 @@ font: var(--tui-font-text-m); border-radius: var(--tui-radius-xl); background: var(--tui-background-elevation-2); - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); } .t-image { diff --git a/projects/legacy/components/sheet/components/sheet/sheet.style.less b/projects/legacy/components/sheet/components/sheet/sheet.style.less index 0a127650c106..f22c3646dfab 100644 --- a/projects/legacy/components/sheet/components/sheet/sheet.style.less +++ b/projects/legacy/components/sheet/components/sheet/sheet.style.less @@ -51,7 +51,7 @@ scroll-snap-align: start; &_shadow { - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); } } @@ -59,7 +59,7 @@ position: sticky; top: 0; border-radius: 0.8rem 0.8rem 0 0; - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); transform: scaleX(-1); overflow: hidden; diff --git a/projects/legacy/components/table-bar/table-bar.style.less b/projects/legacy/components/table-bar/table-bar.style.less index 452d18f2bbe5..c48d0c70aebd 100644 --- a/projects/legacy/components/table-bar/table-bar.style.less +++ b/projects/legacy/components/table-bar/table-bar.style.less @@ -3,7 +3,7 @@ :host { display: block; width: 100%; - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); flex: 0 0 100%; &[data-appearance='onLight'] { diff --git a/projects/legacy/styles/mixins/mixins.less b/projects/legacy/styles/mixins/mixins.less index 66e9a4478e6e..a740a46fe55c 100644 --- a/projects/legacy/styles/mixins/mixins.less +++ b/projects/legacy/styles/mixins/mixins.less @@ -178,13 +178,13 @@ .hoverable-with-shadow() { .transition(); - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); cursor: pointer; transition-property: transform, box-shadow; will-change: transform, box-shadow; &:hover { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); transform: translateY(-0.25rem); } } diff --git a/projects/legacy/styles/mixins/mixins.scss b/projects/legacy/styles/mixins/mixins.scss index 85869378c1dc..e4bbc17fc501 100644 --- a/projects/legacy/styles/mixins/mixins.scss +++ b/projects/legacy/styles/mixins/mixins.scss @@ -160,12 +160,12 @@ @mixin hoverable-with-shadow() { @include transition(all); cursor: pointer; - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); transition-property: transform, box-shadow; will-change: transform, box-shadow; &:hover { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); transform: translateY(-0.25rem); } } diff --git a/projects/styles/markup/tui-island.less b/projects/styles/markup/tui-island.less index 2ba802298fe9..cb2e08bd2ac8 100644 --- a/projects/styles/markup/tui-island.less +++ b/projects/styles/markup/tui-island.less @@ -33,13 +33,13 @@ .transition(); background: var(--tui-background-elevation-2); - box-shadow: var(--tui-shadow); + box-shadow: var(--tui-shadow-small); cursor: pointer; transition-property: transform, box-shadow; will-change: transform, box-shadow; &:hover { - box-shadow: var(--tui-shadow-hover); + box-shadow: var(--tui-shadow-small-hover); transform: translateY(-0.25rem); } }