From 42241b279dcb30b0275e040ad190fd5ac9227e71 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 14 Jan 2022 11:35:12 +0300 Subject: [PATCH] (@fuse/navigation) Expose the width variables as css custom properties, so they can be overridden from the outside (@fuse/drawer) Expose the width variable as a css custom property, so it can be overridden from the outside --- .../components/drawer/drawer.component.scss | 14 ++++--- .../vertical/styles/appearances/compact.scss | 18 +++++---- .../vertical/styles/appearances/default.scss | 20 +++++----- .../vertical/styles/appearances/dense.scss | 38 ++++++++++--------- .../vertical/styles/appearances/thin.scss | 18 +++++---- 5 files changed, 59 insertions(+), 49 deletions(-) diff --git a/src/@fuse/components/drawer/drawer.component.scss b/src/@fuse/components/drawer/drawer.component.scss index 2016b2d4..e10cad2a 100644 --- a/src/@fuse/components/drawer/drawer.component.scss +++ b/src/@fuse/components/drawer/drawer.component.scss @@ -1,14 +1,16 @@ /* Variables */ -$fuse-drawer-width: 320; +:root { + --fuse-drawer-width: 320px; +} fuse-drawer { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; - width: #{$fuse-drawer-width}px; - min-width: #{$fuse-drawer-width}px; - max-width: #{$fuse-drawer-width}px; + width: var(--fuse-drawer-width); + min-width: var(--fuse-drawer-width); + max-width: var(--fuse-drawer-width); z-index: 300; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35); @apply bg-card; @@ -43,7 +45,7 @@ fuse-drawer { /* Side mode */ &.fuse-drawer-mode-side { - margin-left: -#{$fuse-drawer-width}px; + margin-left: calc(var(--fuse-drawer-width) * -1); &.fuse-drawer-opened { margin-left: 0; @@ -71,7 +73,7 @@ fuse-drawer { /* Side mode */ &.fuse-drawer-mode-side { - margin-right: -#{$fuse-drawer-width}px; + margin-right: calc(var(--fuse-drawer-width) * -1); &.fuse-drawer-opened { margin-right: 0; diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss index dd63b1f9..e91fbc66 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss @@ -1,20 +1,22 @@ /* Variables */ -$fuse-vertical-navigation-compact-width: 112px; +:root { + --fuse-vertical-navigation-compact-width: 112px; +} fuse-vertical-navigation { /* Compact appearance overrides */ &.fuse-vertical-navigation-appearance-compact { - width: $fuse-vertical-navigation-compact-width; - min-width: $fuse-vertical-navigation-compact-width; - max-width: $fuse-vertical-navigation-compact-width; + width: var(--fuse-vertical-navigation-compact-width); + min-width: var(--fuse-vertical-navigation-compact-width); + max-width: var(--fuse-vertical-navigation-compact-width); /* Left positioned */ &.fuse-vertical-navigation-position-left { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-compact-width; + margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1); } /* Opened */ @@ -28,7 +30,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-compact-width; + margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1); } /* Opened */ @@ -39,7 +41,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-compact-width; + right: var(--fuse-vertical-navigation-compact-width); } } @@ -104,7 +106,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-compact-width; + left: var(--fuse-vertical-navigation-compact-width); } } } diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss index c336c564..569ad4f0 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss @@ -1,5 +1,7 @@ /* Variables */ -$fuse-vertical-navigation-width: 280px; +:root { + --fuse-vertical-navigation-width: 280px; +} fuse-vertical-navigation { position: sticky; @@ -7,9 +9,9 @@ fuse-vertical-navigation { flex-direction: column; flex: 1 0 auto; top: 0; - width: $fuse-vertical-navigation-width; - min-width: $fuse-vertical-navigation-width; - max-width: $fuse-vertical-navigation-width; + width: var(--fuse-vertical-navigation-width); + min-width: var(--fuse-vertical-navigation-width); + max-width: var(--fuse-vertical-navigation-width); height: 100vh; min-height: 100vh; max-height: 100vh; @@ -45,7 +47,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-width; + margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1); &.fuse-vertical-navigation-opened { margin-left: 0; @@ -73,7 +75,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-width; + margin-right: calc(var(--fuse-vertical-navigation-width) * -1); &.fuse-vertical-navigation-opened { margin-right: 0; @@ -170,8 +172,8 @@ fuse-vertical-navigation { flex-direction: column; top: 0; bottom: 0; - left: $fuse-vertical-navigation-width; - width: $fuse-vertical-navigation-width; + left: var(--fuse-vertical-navigation-width); + width: var(--fuse-vertical-navigation-width); height: 100%; z-index: 5; overflow-x: hidden; @@ -196,7 +198,7 @@ fuse-vertical-navigation { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-width; + right: var(--fuse-vertical-navigation-width); } } diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss index 791ff17b..8bbebe24 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss @@ -1,6 +1,8 @@ /* Variables */ -$fuse-vertical-navigation-width: 280px; -$fuse-vertical-navigation-dense-width: 80px; +:root { + --fuse-vertical-navigation-width: 280px; + --fuse-vertical-navigation-dense-width: 80px; +} fuse-vertical-navigation { @@ -8,16 +10,16 @@ fuse-vertical-navigation { &.fuse-vertical-navigation-appearance-dense { &:not(.fuse-vertical-navigation-mode-over) { - width: $fuse-vertical-navigation-dense-width; - min-width: $fuse-vertical-navigation-dense-width; - max-width: $fuse-vertical-navigation-dense-width; + width: var(--fuse-vertical-navigation-dense-width); + min-width: var(--fuse-vertical-navigation-dense-width); + max-width: var(--fuse-vertical-navigation-dense-width); /* Left positioned */ &.fuse-vertical-navigation-position-left { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-dense-width; + margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1); } /* Opened */ @@ -31,7 +33,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-dense-width; + margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1); } /* Opened */ @@ -42,14 +44,14 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-dense-width; + right: var(--fuse-vertical-navigation-dense-width); } &.fuse-vertical-navigation-hover { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-width; + right: var(--fuse-vertical-navigation-width); } } } @@ -69,9 +71,9 @@ fuse-vertical-navigation { .fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item { - width: $fuse-vertical-navigation-dense-width - 24px; - min-width: $fuse-vertical-navigation-dense-width - 24px; - max-width: $fuse-vertical-navigation-dense-width - 24px; + width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); .fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-badge, @@ -142,23 +144,23 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-dense-width; + left: var(--fuse-vertical-navigation-dense-width); } /* Hover */ &.fuse-vertical-navigation-hover { .fuse-vertical-navigation-wrapper { - width: $fuse-vertical-navigation-width; + width: var(--fuse-vertical-navigation-width); .fuse-vertical-navigation-content { .fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item { - width: $fuse-vertical-navigation-width - 24px; - min-width: $fuse-vertical-navigation-width - 24px; - max-width: $fuse-vertical-navigation-width - 24px; + width: calc(var(--fuse-vertical-navigation-width) - 24px); + min-width: calc(var(--fuse-vertical-navigation-width) - 24px); + max-width: calc(var(--fuse-vertical-navigation-width) - 24px); .fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-badge, @@ -173,7 +175,7 @@ fuse-vertical-navigation { } .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-width; + left: var(--fuse-vertical-navigation-width); } } } diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss index eadefbc2..997bf254 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss @@ -1,19 +1,21 @@ /* Variables */ -$fuse-vertical-navigation-thin-width: 80px; +:root { + --fuse-vertical-navigation-thin-width: 80px; +} fuse-vertical-navigation { /* Thin appearance overrides */ &.fuse-vertical-navigation-appearance-thin { - width: $fuse-vertical-navigation-thin-width; - min-width: $fuse-vertical-navigation-thin-width; - max-width: $fuse-vertical-navigation-thin-width; + width: var(--fuse-vertical-navigation-thin-width); + min-width: var(--fuse-vertical-navigation-thin-width); + max-width: var(--fuse-vertical-navigation-thin-width); /* Left positioned */ &.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-thin-width; + margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1); } &.fuse-vertical-navigation-opened { @@ -25,7 +27,7 @@ fuse-vertical-navigation { &.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-thin-width; + margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1); } &.fuse-vertical-navigation-opened { @@ -34,7 +36,7 @@ fuse-vertical-navigation { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-thin-width; + right: var(--fuse-vertical-navigation-thin-width); } } @@ -91,7 +93,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-thin-width; + left: var(--fuse-vertical-navigation-thin-width); } } }