mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 12:05:08 +00:00
(@fuse/navigation) Don't need to use interpolation on scss variables anymore since Tailwind doesn't cause any problems with them anymore
This commit is contained in:
parent
4b5cac11f2
commit
9d7c015fe7
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user