From 9d7c015fe7f538e90882e87ccae56966474f2ca7 Mon Sep 17 00:00:00 2001 From: sercan Date: Fri, 5 Nov 2021 14:55:53 +0300 Subject: [PATCH] (@fuse/navigation) Don't need to use interpolation on scss variables anymore since Tailwind doesn't cause any problems with them anymore --- .../vertical/styles/appearances/compact.scss | 16 ++++----- .../vertical/styles/appearances/default.scss | 18 +++++----- .../vertical/styles/appearances/dense.scss | 33 ++++++++++--------- .../vertical/styles/appearances/thin.scss | 16 ++++----- 4 files changed, 43 insertions(+), 40 deletions(-) diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss index 056a81e4..dd63b1f9 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss @@ -1,20 +1,20 @@ /* Variables */ -$fuse-vertical-navigation-compact-width: 112; +$fuse-vertical-navigation-compact-width: 112px; fuse-vertical-navigation { /* Compact appearance overrides */ &.fuse-vertical-navigation-appearance-compact { - width: #{$fuse-vertical-navigation-compact-width}px; - min-width: #{$fuse-vertical-navigation-compact-width}px; - max-width: #{$fuse-vertical-navigation-compact-width}px; + width: $fuse-vertical-navigation-compact-width; + min-width: $fuse-vertical-navigation-compact-width; + max-width: $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}px; + margin-left: -$fuse-vertical-navigation-compact-width; } /* Opened */ @@ -28,7 +28,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -#{$fuse-vertical-navigation-compact-width}px; + margin-right: -$fuse-vertical-navigation-compact-width; } /* Opened */ @@ -39,7 +39,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { left: auto; - right: #{$fuse-vertical-navigation-compact-width}px; + right: $fuse-vertical-navigation-compact-width; } } @@ -104,7 +104,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: #{$fuse-vertical-navigation-compact-width}px; + left: $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 d0f4396e..c336c564 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss @@ -1,5 +1,5 @@ /* Variables */ -$fuse-vertical-navigation-width: 280; +$fuse-vertical-navigation-width: 280px; fuse-vertical-navigation { position: sticky; @@ -7,9 +7,9 @@ fuse-vertical-navigation { flex-direction: column; flex: 1 0 auto; top: 0; - width: #{$fuse-vertical-navigation-width}px; - min-width: #{$fuse-vertical-navigation-width}px; - max-width: #{$fuse-vertical-navigation-width}px; + width: $fuse-vertical-navigation-width; + min-width: $fuse-vertical-navigation-width; + max-width: $fuse-vertical-navigation-width; height: 100vh; min-height: 100vh; max-height: 100vh; @@ -45,7 +45,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -#{$fuse-vertical-navigation-width}px; + margin-left: -$fuse-vertical-navigation-width; &.fuse-vertical-navigation-opened { margin-left: 0; @@ -73,7 +73,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -#{$fuse-vertical-navigation-width}px; + margin-right: -$fuse-vertical-navigation-width; &.fuse-vertical-navigation-opened { margin-right: 0; @@ -170,8 +170,8 @@ fuse-vertical-navigation { flex-direction: column; top: 0; bottom: 0; - left: #{$fuse-vertical-navigation-width}px; - width: #{$fuse-vertical-navigation-width}px; + left: $fuse-vertical-navigation-width; + width: $fuse-vertical-navigation-width; height: 100%; z-index: 5; overflow-x: hidden; @@ -196,7 +196,7 @@ fuse-vertical-navigation { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: #{$fuse-vertical-navigation-width}px; + right: $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 34790fcb..791ff17b 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss @@ -1,6 +1,6 @@ /* Variables */ -$fuse-vertical-navigation-width: 280; -$fuse-vertical-navigation-dense-width: 80; +$fuse-vertical-navigation-width: 280px; +$fuse-vertical-navigation-dense-width: 80px; fuse-vertical-navigation { @@ -8,16 +8,16 @@ fuse-vertical-navigation { &.fuse-vertical-navigation-appearance-dense { &:not(.fuse-vertical-navigation-mode-over) { - width: #{$fuse-vertical-navigation-dense-width}px; - min-width: #{$fuse-vertical-navigation-dense-width}px; - max-width: #{$fuse-vertical-navigation-dense-width}px; + width: $fuse-vertical-navigation-dense-width; + min-width: $fuse-vertical-navigation-dense-width; + max-width: $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}px; + margin-left: -$fuse-vertical-navigation-dense-width; } /* Opened */ @@ -31,7 +31,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -#{$fuse-vertical-navigation-dense-width}px; + margin-right: -$fuse-vertical-navigation-dense-width; } /* Opened */ @@ -42,14 +42,14 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { left: auto; - right: #{$fuse-vertical-navigation-dense-width}px; + right: $fuse-vertical-navigation-dense-width; } &.fuse-vertical-navigation-hover { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: #{$fuse-vertical-navigation-width}px; + right: $fuse-vertical-navigation-width; } } } @@ -69,9 +69,9 @@ fuse-vertical-navigation { .fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item { - width: #{$fuse-vertical-navigation-width}px - 24px; - min-width: #{$fuse-vertical-navigation-width}px - 24px; - max-width: #{$fuse-vertical-navigation-width}px - 24px; + width: $fuse-vertical-navigation-dense-width - 24px; + min-width: $fuse-vertical-navigation-dense-width - 24px; + max-width: $fuse-vertical-navigation-dense-width - 24px; .fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-badge, @@ -142,20 +142,23 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: #{$fuse-vertical-navigation-dense-width}px; + left: $fuse-vertical-navigation-dense-width; } /* Hover */ &.fuse-vertical-navigation-hover { .fuse-vertical-navigation-wrapper { - width: #{$fuse-vertical-navigation-width}px; + width: $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; .fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-badge, @@ -170,7 +173,7 @@ fuse-vertical-navigation { } .fuse-vertical-navigation-aside-wrapper { - left: #{$fuse-vertical-navigation-width}px; + left: $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 47c2bf79..eadefbc2 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss @@ -1,19 +1,19 @@ /* Variables */ -$fuse-vertical-navigation-thin-width: 80; +$fuse-vertical-navigation-thin-width: 80px; fuse-vertical-navigation { /* Thin appearance overrides */ &.fuse-vertical-navigation-appearance-thin { - width: #{$fuse-vertical-navigation-thin-width}px; - min-width: #{$fuse-vertical-navigation-thin-width}px; - max-width: #{$fuse-vertical-navigation-thin-width}px; + width: $fuse-vertical-navigation-thin-width; + min-width: $fuse-vertical-navigation-thin-width; + max-width: $fuse-vertical-navigation-thin-width; /* Left positioned */ &.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-mode-side { - margin-left: -#{$fuse-vertical-navigation-thin-width}px; + margin-left: -$fuse-vertical-navigation-thin-width; } &.fuse-vertical-navigation-opened { @@ -25,7 +25,7 @@ fuse-vertical-navigation { &.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-mode-side { - margin-right: -#{$fuse-vertical-navigation-thin-width}px; + margin-right: -$fuse-vertical-navigation-thin-width; } &.fuse-vertical-navigation-opened { @@ -34,7 +34,7 @@ fuse-vertical-navigation { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: #{$fuse-vertical-navigation-thin-width}px; + right: $fuse-vertical-navigation-thin-width; } } @@ -91,7 +91,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: #{$fuse-vertical-navigation-thin-width}px; + left: $fuse-vertical-navigation-thin-width; } } }