mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-30 20:13:11 +00:00
193 lines
6.2 KiB
SCSS
193 lines
6.2 KiB
SCSS
/* Variables */
|
|
$fuse-vertical-navigation-width: 280px;
|
|
$fuse-vertical-navigation-dense-width: 80px;
|
|
|
|
fuse-vertical-navigation {
|
|
|
|
/* Dense appearance overrides */
|
|
&.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;
|
|
|
|
/* Left positioned */
|
|
&.fuse-vertical-navigation-position-left {
|
|
|
|
/* Side mode */
|
|
&.fuse-vertical-navigation-mode-side {
|
|
margin-left: -$fuse-vertical-navigation-dense-width;
|
|
}
|
|
|
|
/* Opened */
|
|
&.fuse-vertical-navigation-opened {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* Right positioned */
|
|
&.fuse-vertical-navigation-position-right {
|
|
|
|
/* Side mode */
|
|
&.fuse-vertical-navigation-mode-side {
|
|
margin-right: -$fuse-vertical-navigation-dense-width;
|
|
}
|
|
|
|
/* Opened */
|
|
&.fuse-vertical-navigation-opened {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Aside wrapper */
|
|
.fuse-vertical-navigation-aside-wrapper {
|
|
left: auto;
|
|
right: $fuse-vertical-navigation-dense-width;
|
|
}
|
|
|
|
&.fuse-vertical-navigation-hover {
|
|
|
|
.fuse-vertical-navigation-aside-wrapper {
|
|
left: auto;
|
|
right: $fuse-vertical-navigation-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Wrapper */
|
|
.fuse-vertical-navigation-wrapper {
|
|
|
|
/* Content */
|
|
.fuse-vertical-navigation-content {
|
|
|
|
fuse-vertical-navigation-aside-item,
|
|
fuse-vertical-navigation-basic-item,
|
|
fuse-vertical-navigation-collapsable-item,
|
|
fuse-vertical-navigation-group-item {
|
|
|
|
.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;
|
|
|
|
.fuse-vertical-navigation-item-arrow,
|
|
.fuse-vertical-navigation-item-badge,
|
|
.fuse-vertical-navigation-item-title-wrapper {
|
|
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fuse-vertical-navigation-group-item {
|
|
|
|
&:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) {
|
|
|
|
/* Wrapper */
|
|
.fuse-vertical-navigation-wrapper {
|
|
|
|
/* Content */
|
|
.fuse-vertical-navigation-content {
|
|
|
|
.fuse-vertical-navigation-item-wrapper {
|
|
|
|
.fuse-vertical-navigation-item {
|
|
padding: 10px 16px;
|
|
|
|
.fuse-vertical-navigation-item-arrow,
|
|
.fuse-vertical-navigation-item-badge,
|
|
.fuse-vertical-navigation-item-title-wrapper {
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
fuse-vertical-navigation-collapsable-item {
|
|
|
|
.fuse-vertical-navigation-item-children {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
fuse-vertical-navigation-group-item {
|
|
|
|
> .fuse-vertical-navigation-item-wrapper {
|
|
|
|
.fuse-vertical-navigation-item {
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20px;
|
|
width: 23px;
|
|
border-top-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Aside wrapper */
|
|
.fuse-vertical-navigation-aside-wrapper {
|
|
left: $fuse-vertical-navigation-dense-width;
|
|
}
|
|
|
|
/* Hover */
|
|
&.fuse-vertical-navigation-hover {
|
|
|
|
.fuse-vertical-navigation-wrapper {
|
|
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,
|
|
.fuse-vertical-navigation-item-title-wrapper {
|
|
white-space: nowrap;
|
|
animation: removeWhiteSpaceNoWrap 1ms linear 350ms;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fuse-vertical-navigation-aside-wrapper {
|
|
left: $fuse-vertical-navigation-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes removeWhiteSpaceNoWrap {
|
|
0% {
|
|
white-space: nowrap
|
|
}
|
|
99% {
|
|
white-space: nowrap
|
|
}
|
|
100% {
|
|
white-space: normal;
|
|
}
|
|
}
|