404 lines
7.2 KiB
Plaintext
404 lines
7.2 KiB
Plaintext
.sidebar-menu {
|
|
display: table-cell;
|
|
position: relative;
|
|
width: @sidebar-width;
|
|
background: @sidebar-background;
|
|
z-index: 1;
|
|
|
|
.logo-env {
|
|
padding: @default-padding (@double-margin + @sidebar-horizontal-link-padding);
|
|
border-bottom: 1px solid @sidebar-menu-border;
|
|
&:extend(.clearfix all);
|
|
|
|
.logo {
|
|
float: left;
|
|
|
|
.logo-collapsed {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.settings-icon {
|
|
float: right;
|
|
position: relative;
|
|
top: 1px;
|
|
|
|
a {
|
|
@s: 18px;
|
|
|
|
color: @main-text-color;
|
|
line-height: 1;
|
|
|
|
i {
|
|
line-height: 1;
|
|
font-size: @s;
|
|
}
|
|
|
|
&:hover {
|
|
color: @main-text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Main Menu
|
|
.main-menu {
|
|
padding-left: @double-margin;
|
|
padding-right: @double-margin;
|
|
margin-top: @base-margin;
|
|
margin-bottom: @base-margin;
|
|
list-style: none;
|
|
|
|
@media screen and (max-width: @screen-sm){
|
|
margin-top: @base-padding;
|
|
margin-bottom: @base-padding;
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: @main-text-color;
|
|
text-decoration: none;
|
|
display: block;
|
|
padding: @sidebar-vertical-link-padding @sidebar-horizontal-link-padding;
|
|
border-bottom: 1px solid @sidebar-menu-border;
|
|
&:extend(.transall);
|
|
|
|
> i {
|
|
display: inline-block;
|
|
margin-right: @base-padding;
|
|
|
|
+ span {
|
|
padding-right: @base-padding;
|
|
}
|
|
}
|
|
|
|
> span {
|
|
display: inline-block;
|
|
}
|
|
|
|
> .label {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
> .badge {
|
|
font-size: 75%;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
&:hover {
|
|
color: @main-text-active-color;
|
|
}
|
|
}
|
|
|
|
// Active
|
|
li.active > a {
|
|
color: @main-text-active-color;
|
|
}
|
|
|
|
// With Subs
|
|
li.has-sub {
|
|
|
|
> a {
|
|
|
|
&:before {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: 'FontAwesome';
|
|
content: '\f107';
|
|
float: right;
|
|
color: lighten(@sidebar-menu-border, 25%);
|
|
margin-left: @base-padding;
|
|
.rotate(-90deg);
|
|
.transition(~"all 150ms ease-in-out");
|
|
}
|
|
}
|
|
|
|
&.opened, &.expanded {
|
|
|
|
> a:before {
|
|
.rotate(0deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// First Level
|
|
> li {
|
|
|
|
&.opened {
|
|
|
|
> ul {
|
|
display: block;
|
|
}
|
|
|
|
.opened {
|
|
|
|
> ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Subs
|
|
ul {
|
|
@sub-spacing: 25px;
|
|
|
|
display: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
list-style: none;
|
|
|
|
li {
|
|
@show-delay: 80ms;
|
|
|
|
position: relative;
|
|
|
|
&.is-hidden {
|
|
|
|
@media screen and (min-width: @screen-sm){
|
|
left: -@base-margin;
|
|
.opacity(0);
|
|
}
|
|
}
|
|
|
|
&.is-shown {
|
|
left: 0;
|
|
.opacity(1);
|
|
.transition(~"all 200ms ease-in-out");
|
|
|
|
+ .is-shown { .transition-delay(@show-delay * 1); }
|
|
+ .is-shown + .is-shown { .transition-delay(@show-delay * 1.5); }
|
|
+ .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 2); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 2.5); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 3); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 3.5); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 4); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 4.5); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 5); }
|
|
+ .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown + .is-shown { .transition-delay(@show-delay * 5.5); }
|
|
}
|
|
|
|
&.hidden-item {
|
|
visibility: hidden;
|
|
.opacity(0);
|
|
.transition(~"all 250ms ease-in-out");
|
|
}
|
|
}
|
|
|
|
// Second Level
|
|
li a { padding-left: @base-padding + @sub-spacing * 1; }
|
|
|
|
// Third Level
|
|
li ul li a { padding-left: @base-padding + @sub-spacing * 2; }
|
|
|
|
// Fourth Level
|
|
li ul li ul li a { padding-left: @base-padding + @sub-spacing * 3; }
|
|
|
|
// Fifth Level
|
|
li ul li ul li ul li a { padding-left: @base-padding + @sub-spacing * 4; }
|
|
}
|
|
}
|
|
|
|
|
|
// Scrollbar
|
|
.ps-scrollbar-x-rail .ps-scrollbar-x,
|
|
.ps-scrollbar-y-rail .ps-scrollbar-y {
|
|
background-color: fade(#fff, 60%);
|
|
}
|
|
|
|
|
|
// Fixed sidebar
|
|
&.fixed {
|
|
//position: fixed;
|
|
height: 100%;
|
|
|
|
.sidebar-menu-inner {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: inherit;
|
|
overflow: hidden;
|
|
|
|
.page-body.right-sidebar & {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Collapsed sidebar
|
|
@media screen and (min-width: @screen-sm) {
|
|
|
|
&.collapsed {
|
|
width: @sidebar-collapsed-width;
|
|
z-index: 10;
|
|
overflow: visible;
|
|
|
|
.hidden-collapsed {
|
|
display: none !important;
|
|
}
|
|
|
|
+ .main-content {
|
|
|
|
.user-info-navbar {
|
|
|
|
.user-info-menu {
|
|
|
|
a[data-toggle="sidebar"] {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-footer {
|
|
left: @sidebar-collapsed-width;
|
|
}
|
|
}
|
|
|
|
&.fixed {
|
|
}
|
|
|
|
.sidebar-menu-inner {
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
.logo-env {
|
|
@vpadd: 18px;
|
|
|
|
padding: @vpadd 0;
|
|
|
|
.logo-collapsed {
|
|
display: block;
|
|
text-align: center;
|
|
|
|
img {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.logo-expanded, .settings-icon {
|
|
display: none;
|
|
}
|
|
|
|
.logo {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.main-menu {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
> li {
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
&.active, li.active {
|
|
background-color: darken(@sidebar-background, 3%);
|
|
}
|
|
|
|
> a {
|
|
|
|
> i {
|
|
margin-right: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
> span {
|
|
display: none;
|
|
|
|
&.label {
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.has-sub {
|
|
|
|
> a:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.opened {
|
|
|
|
> ul {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
position: absolute;
|
|
background: @sidebar-background;
|
|
width: @sidebar-collapsed-submenu-width;
|
|
top: 0;
|
|
left: 100%;
|
|
text-align: left;
|
|
//display: block;
|
|
|
|
.page-body.right-sidebar & {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
|
|
// First level
|
|
> li > a {
|
|
padding-left: @base-margin;
|
|
}
|
|
|
|
> li > ul > li > a {
|
|
padding-left: @base-margin + 15 * 1;
|
|
}
|
|
|
|
> li > ul > li > ul > li > a {
|
|
padding-left: @base-margin + 15 * 2;
|
|
}
|
|
|
|
> li > ul > li > ul > li > ul > li > a {
|
|
padding-left: @base-margin + 15 * 3;
|
|
}
|
|
|
|
> li > ul > li > ul > li > ul > li > ul > li > a {
|
|
padding-left: @base-margin + 15 * 4;
|
|
}
|
|
|
|
li.has-sub {
|
|
|
|
> a {
|
|
|
|
&:before {
|
|
margin-right: @base-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover > ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Right sidebar
|
|
.page-body.right-sidebar {
|
|
|
|
.page-container {
|
|
direction: rtl;
|
|
|
|
> * {
|
|
direction: ltr;
|
|
}
|
|
}
|
|
} |