Teso Business 2.0 angular source code
https://bacwaredev.barhendev.com/teso
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
6.0 KiB
190 lines
6.0 KiB
3 years ago
|
/* Variables */
|
||
|
|
$fuse-vertical-navigation-width: 280;
|
||
|
|
$fuse-vertical-navigation-dense-width: 80;
|
||
|
|
|
||
|
|
fuse-vertical-navigation {
|
||
|
|
|
||
|
|
/* Dense appearance overrides */
|
||
|
|
&.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;
|
||
|
|
|
||
|
|
/* Left positioned */
|
||
|
|
&.fuse-vertical-navigation-position-left {
|
||
|
|
|
||
|
|
/* Side mode */
|
||
|
|
&.fuse-vertical-navigation-mode-side {
|
||
|
|
margin-left: -#{$fuse-vertical-navigation-dense-width}px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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}px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Opened */
|
||
|
|
&.fuse-vertical-navigation-opened {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Aside wrapper */
|
||
|
|
.fuse-vertical-navigation-aside-wrapper {
|
||
|
|
left: auto;
|
||
|
|
right: #{$fuse-vertical-navigation-dense-width}px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.fuse-vertical-navigation-hover {
|
||
|
|
|
||
|
|
.fuse-vertical-navigation-aside-wrapper {
|
||
|
|
left: auto;
|
||
|
|
right: #{$fuse-vertical-navigation-width}px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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-width}px - 24px;
|
||
|
|
min-width: #{$fuse-vertical-navigation-width}px - 24px;
|
||
|
|
max-width: #{$fuse-vertical-navigation-width}px - 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}px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hover */
|
||
|
|
&.fuse-vertical-navigation-hover {
|
||
|
|
|
||
|
|
.fuse-vertical-navigation-wrapper {
|
||
|
|
width: #{$fuse-vertical-navigation-width}px;
|
||
|
|
|
||
|
|
.fuse-vertical-navigation-content {
|
||
|
|
|
||
|
|
.fuse-vertical-navigation-item-wrapper {
|
||
|
|
|
||
|
|
.fuse-vertical-navigation-item {
|
||
|
|
|
||
|
|
.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}px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes removeWhiteSpaceNoWrap {
|
||
|
|
0% {
|
||
|
|
white-space: nowrap
|
||
|
|
}
|
||
|
|
99% {
|
||
|
|
white-space: nowrap
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
}
|