purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 19:45:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(@fuse/navigation) Don't need to use interpolation on scss variables anymore since Tailwind doesn't cause any problems with them anymore

Browse Source
This commit is contained in:
sercan 2021-11-05 14:55:53 +03:00
parent 4b5cac11f2
commit 9d7c015fe7
4 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
View File

@ -1,20 +1,20 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-compact-width: 112; $fuse-vertical-navigation-compact-width: 112px;
fuse-vertical-navigation { fuse-vertical-navigation {
/* Compact appearance overrides */ /* Compact appearance overrides */
&.fuse-vertical-navigation-appearance-compact { &.fuse-vertical-navigation-appearance-compact {
width: #{$fuse-vertical-navigation-compact-width}px; width: $fuse-vertical-navigation-compact-width;
min-width: #{$fuse-vertical-navigation-compact-width}px; min-width: $fuse-vertical-navigation-compact-width;
max-width: #{$fuse-vertical-navigation-compact-width}px; max-width: $fuse-vertical-navigation-compact-width;
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -#{$fuse-vertical-navigation-compact-width}px; margin-left: -$fuse-vertical-navigation-compact-width;
} }
/* Opened */ /* Opened */
@ -28,7 +28,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -#{$fuse-vertical-navigation-compact-width}px; margin-right: -$fuse-vertical-navigation-compact-width;
} }
/* Opened */ /* Opened */
@ -39,7 +39,7 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: #{$fuse-vertical-navigation-compact-width}px; right: $fuse-vertical-navigation-compact-width;
} }
} }
@ -104,7 +104,7 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: #{$fuse-vertical-navigation-compact-width}px; left: $fuse-vertical-navigation-compact-width;
} }
} }
} }

18
src/@fuse/components/navigation/vertical/styles/appearances/default.scss
View File

@ -1,5 +1,5 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-width: 280; $fuse-vertical-navigation-width: 280px;
fuse-vertical-navigation { fuse-vertical-navigation {
position: sticky; position: sticky;
@ -7,9 +7,9 @@ fuse-vertical-navigation {
flex-direction: column; flex-direction: column;
flex: 1 0 auto; flex: 1 0 auto;
top: 0; top: 0;
width: #{$fuse-vertical-navigation-width}px; width: $fuse-vertical-navigation-width;
min-width: #{$fuse-vertical-navigation-width}px; min-width: $fuse-vertical-navigation-width;
max-width: #{$fuse-vertical-navigation-width}px; max-width: $fuse-vertical-navigation-width;
height: 100vh; height: 100vh;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; max-height: 100vh;
@ -45,7 +45,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -#{$fuse-vertical-navigation-width}px; margin-left: -$fuse-vertical-navigation-width;
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
margin-left: 0; margin-left: 0;
@ -73,7 +73,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -#{$fuse-vertical-navigation-width}px; margin-right: -$fuse-vertical-navigation-width;
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
margin-right: 0; margin-right: 0;
@ -170,8 +170,8 @@ fuse-vertical-navigation {
flex-direction: column; flex-direction: column;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: #{$fuse-vertical-navigation-width}px; left: $fuse-vertical-navigation-width;
width: #{$fuse-vertical-navigation-width}px; width: $fuse-vertical-navigation-width;
height: 100%; height: 100%;
z-index: 5; z-index: 5;
overflow-x: hidden; overflow-x: hidden;
@ -196,7 +196,7 @@ fuse-vertical-navigation {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: #{$fuse-vertical-navigation-width}px; right: $fuse-vertical-navigation-width;
} }
} }

33
src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
View File

@ -1,6 +1,6 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-width: 280; $fuse-vertical-navigation-width: 280px;
$fuse-vertical-navigation-dense-width: 80; $fuse-vertical-navigation-dense-width: 80px;
fuse-vertical-navigation { fuse-vertical-navigation {
@ -8,16 +8,16 @@ fuse-vertical-navigation {
&.fuse-vertical-navigation-appearance-dense { &.fuse-vertical-navigation-appearance-dense {
&:not(.fuse-vertical-navigation-mode-over) { &:not(.fuse-vertical-navigation-mode-over) {
width: #{$fuse-vertical-navigation-dense-width}px; width: $fuse-vertical-navigation-dense-width;
min-width: #{$fuse-vertical-navigation-dense-width}px; min-width: $fuse-vertical-navigation-dense-width;
max-width: #{$fuse-vertical-navigation-dense-width}px; max-width: $fuse-vertical-navigation-dense-width;
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -#{$fuse-vertical-navigation-dense-width}px; margin-left: -$fuse-vertical-navigation-dense-width;
} }
/* Opened */ /* Opened */
@ -31,7 +31,7 @@ fuse-vertical-navigation {
/* Side mode */ /* Side mode */
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -#{$fuse-vertical-navigation-dense-width}px; margin-right: -$fuse-vertical-navigation-dense-width;
} }
/* Opened */ /* Opened */
@ -42,14 +42,14 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: #{$fuse-vertical-navigation-dense-width}px; right: $fuse-vertical-navigation-dense-width;
} }
&.fuse-vertical-navigation-hover { &.fuse-vertical-navigation-hover {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; 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-wrapper {
.fuse-vertical-navigation-item { .fuse-vertical-navigation-item {
width: #{$fuse-vertical-navigation-width}px - 24px; width: $fuse-vertical-navigation-dense-width - 24px;
min-width: #{$fuse-vertical-navigation-width}px - 24px; min-width: $fuse-vertical-navigation-dense-width - 24px;
max-width: #{$fuse-vertical-navigation-width}px - 24px; max-width: $fuse-vertical-navigation-dense-width - 24px;
.fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-arrow,
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
@ -142,20 +142,23 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: #{$fuse-vertical-navigation-dense-width}px; left: $fuse-vertical-navigation-dense-width;
} }
/* Hover */ /* Hover */
&.fuse-vertical-navigation-hover { &.fuse-vertical-navigation-hover {
.fuse-vertical-navigation-wrapper { .fuse-vertical-navigation-wrapper {
width: #{$fuse-vertical-navigation-width}px; width: $fuse-vertical-navigation-width;
.fuse-vertical-navigation-content { .fuse-vertical-navigation-content {
.fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item-wrapper {
.fuse-vertical-navigation-item { .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-arrow,
.fuse-vertical-navigation-item-badge, .fuse-vertical-navigation-item-badge,
@ -170,7 +173,7 @@ fuse-vertical-navigation {
} }
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: #{$fuse-vertical-navigation-width}px; left: $fuse-vertical-navigation-width;
} }
} }
} }

16
src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
View File

@ -1,19 +1,19 @@
/* Variables */ /* Variables */
$fuse-vertical-navigation-thin-width: 80; $fuse-vertical-navigation-thin-width: 80px;
fuse-vertical-navigation { fuse-vertical-navigation {
/* Thin appearance overrides */ /* Thin appearance overrides */
&.fuse-vertical-navigation-appearance-thin { &.fuse-vertical-navigation-appearance-thin {
width: #{$fuse-vertical-navigation-thin-width}px; width: $fuse-vertical-navigation-thin-width;
min-width: #{$fuse-vertical-navigation-thin-width}px; min-width: $fuse-vertical-navigation-thin-width;
max-width: #{$fuse-vertical-navigation-thin-width}px; max-width: $fuse-vertical-navigation-thin-width;
/* Left positioned */ /* Left positioned */
&.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-position-left {
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-left: -#{$fuse-vertical-navigation-thin-width}px; margin-left: -$fuse-vertical-navigation-thin-width;
} }
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
@ -25,7 +25,7 @@ fuse-vertical-navigation {
&.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-position-right {
&.fuse-vertical-navigation-mode-side { &.fuse-vertical-navigation-mode-side {
margin-right: -#{$fuse-vertical-navigation-thin-width}px; margin-right: -$fuse-vertical-navigation-thin-width;
} }
&.fuse-vertical-navigation-opened { &.fuse-vertical-navigation-opened {
@ -34,7 +34,7 @@ fuse-vertical-navigation {
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: auto; left: auto;
right: #{$fuse-vertical-navigation-thin-width}px; right: $fuse-vertical-navigation-thin-width;
} }
} }
@ -91,7 +91,7 @@ fuse-vertical-navigation {
/* Aside wrapper */ /* Aside wrapper */
.fuse-vertical-navigation-aside-wrapper { .fuse-vertical-navigation-aside-wrapper {
left: #{$fuse-vertical-navigation-thin-width}px; left: $fuse-vertical-navigation-thin-width;
} }
} }
} }