CHIEFSOFT\ameye
423 lines
13 KiB
SCSS
423 lines
13 KiB
SCSS
.app-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: $sidebar;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
transition: all 0.3s ease-out;
|
|
display: block;
|
|
padding-top:60px;
|
|
height: 100%;
|
|
@include box-shadow(1px, 10px, 20px, rgba(115, 105, 215, 0.15));
|
|
z-index: 1050;
|
|
@include mobile-landscape {
|
|
position: fixed;
|
|
left: -$sidebar;
|
|
height:100%;
|
|
}
|
|
@include mobile-portrait-sm {
|
|
position: fixed;
|
|
left: -$sidebar;
|
|
height:100%;
|
|
}
|
|
@include mobile-portrait-xs {
|
|
position: fixed;
|
|
left: -$sidebar;
|
|
height:100%;
|
|
}
|
|
&.expand {
|
|
left: 0;
|
|
padding-top:60px;
|
|
height:100%;
|
|
|
|
|
|
}
|
|
.sidebar-nav {
|
|
-webkit-flex: 1 1 auto !important;
|
|
-ms-flex: 1 1 auto !important;
|
|
flex: 1 1 auto !important;
|
|
-webkit-flex-basis: auto !important;
|
|
-ms-flex-preferred-size: auto !important;
|
|
flex-basis: auto !important;
|
|
margin-bottom: auto;
|
|
background: $sidebar-dark;
|
|
height:100%;
|
|
overflow: hidden;
|
|
|
|
ul.metismenu {
|
|
background: transparent;
|
|
|
|
li {
|
|
a {
|
|
border: none !important;
|
|
padding: 0.9rem 1.6rem;
|
|
color: $sidebar-text;
|
|
display: flex;
|
|
|
|
i {
|
|
margin-right: 10px;
|
|
color:lighten($sidebar-dark, 15%);
|
|
width:20px;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
background: #1f212d;
|
|
color: $white;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.nav-title {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.nav-label {
|
|
position:absolute;
|
|
top:14px;
|
|
right:40px;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
&.has-arrow {
|
|
&:after {
|
|
transform: rotate(135deg) translateY(-50%);
|
|
-webkit-transform: rotate(135deg) translateY(-50%);
|
|
font-size:12px;
|
|
color:lighten($sidebar-dark, 30%);
|
|
right:1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
color:$white;
|
|
i {
|
|
color:$white;
|
|
}
|
|
}
|
|
ul{
|
|
position: relative;
|
|
li{
|
|
a{
|
|
background: transparent !important;
|
|
color: $sidebar-text;
|
|
&:hover,
|
|
&:focus {
|
|
color:$white !important;
|
|
}
|
|
}
|
|
&.active {
|
|
a {
|
|
color:$white !important;
|
|
&:hover,
|
|
&:focus {
|
|
color:$white !important;
|
|
}
|
|
&:before {
|
|
width: 14px;
|
|
height: 2px;
|
|
position: absolute;
|
|
content: '';
|
|
left: 32px;
|
|
background: lighten($sidebar-dark, 5%);
|
|
top: 18px;
|
|
}
|
|
&.has-arrow {
|
|
color:$white !important;
|
|
}
|
|
}
|
|
ul {
|
|
li {
|
|
a {
|
|
padding-left:4.8rem;
|
|
color:$sidebar-text !important;
|
|
}
|
|
&.active {
|
|
a {
|
|
color:$white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
width:2px;
|
|
height: 100%;
|
|
background: lighten($sidebar-dark, 5%);
|
|
top:0;
|
|
left:30px;
|
|
}
|
|
|
|
}
|
|
.has-arrow {
|
|
&:after {
|
|
transform: rotate(225deg) translateY(-50%);
|
|
-webkit-transform: rotate(225deg) translateY(-50%);
|
|
|
|
}
|
|
}
|
|
}
|
|
ul {
|
|
background: $sidebar-dark;
|
|
li {
|
|
a {
|
|
padding: 0.6rem 2rem;
|
|
padding-left:3.78rem;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background:none;
|
|
color:$primary;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
&+li,
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
&.nav-static-title {
|
|
padding: 1rem 1.6rem 0.1rem 1.6rem;
|
|
color:$white;
|
|
font-size:$font-xs;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: $font-semibold;
|
|
color:lighten($sidebar-dark, 15%);
|
|
}
|
|
.has-arrow[aria-expanded=true] {
|
|
&:after {
|
|
transform: rotate(225deg) translateY(-50%);
|
|
-webkit-transform: rotate(225deg) translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sidebar-banner {
|
|
.btn {
|
|
@include hex-rgba($light-gray, 0.3);
|
|
color: $white !important;
|
|
padding: 0.3rem 0.8rem;
|
|
|
|
&:hover, &:focus {
|
|
color: $white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.light-sidebar {
|
|
.app-navbar {
|
|
.sidebar-nav {
|
|
background: $white;
|
|
ul.metismenu {
|
|
li {
|
|
a {
|
|
color: darken( $sidebar-text, 12% );
|
|
&:hover {
|
|
background: $light-gray;
|
|
color:$primary;
|
|
}
|
|
&:focus {
|
|
background: transparent; color: $sidebar-text;
|
|
}
|
|
}
|
|
ul {
|
|
background: lighten( $dark, 76% );
|
|
}
|
|
&.active {
|
|
a {
|
|
background: $white;
|
|
color:$primary;
|
|
&:hover {
|
|
color:$primary !important;
|
|
}
|
|
&:focus {
|
|
color:$primary !important;
|
|
}
|
|
&:active {
|
|
color:$primary !important;
|
|
}
|
|
|
|
i {
|
|
color: $primary;
|
|
}
|
|
&:hover {
|
|
i {
|
|
color: $primary;
|
|
}
|
|
}
|
|
&:focus {
|
|
i {
|
|
color: $primary;
|
|
}
|
|
}
|
|
&:visited {
|
|
i {
|
|
color: $primary;
|
|
}
|
|
}
|
|
&:active {
|
|
i {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
ul {
|
|
&:before {
|
|
background: lighten( $dark, 72% );
|
|
}
|
|
li {
|
|
a {
|
|
color:$sidebar-text;
|
|
}
|
|
&.active {
|
|
|
|
ul {
|
|
li {
|
|
a {
|
|
color:$sidebar-text !important;
|
|
}
|
|
&.active {
|
|
a {
|
|
color:$primary !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
color:$primary !important;
|
|
&:before {
|
|
background: lighten( $dark, 72% );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.top-bar {
|
|
.navbar {
|
|
.navbar-header {
|
|
background: $white;
|
|
}
|
|
}
|
|
.navigation {
|
|
border-left:1px solid $border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.sidebar-fixed {
|
|
.app-navbar {
|
|
position:fixed;
|
|
left:0;
|
|
top:60px;
|
|
height:calc(100vh - 60px);
|
|
}
|
|
}
|
|
|
|
// Sidebar Mini
|
|
|
|
.sidebar-mini {
|
|
.app-navbar {
|
|
width: $sidebar-mini;
|
|
z-index:1052;
|
|
@include mobile-landscape {
|
|
position: fixed;
|
|
left: -$sidebar-mini;
|
|
height:100%;
|
|
}
|
|
@include mobile-portrait-sm {
|
|
position: fixed;
|
|
left: -$sidebar-mini;
|
|
height:100%;
|
|
}
|
|
@include mobile-portrait-xs {
|
|
position: fixed;
|
|
left: -$sidebar-mini;
|
|
height:100%;
|
|
}
|
|
&:hover {
|
|
width: 240px;
|
|
.metismenu {
|
|
li.nav-static-title {
|
|
display: block;
|
|
a{
|
|
&:after {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
li {
|
|
a{
|
|
.nav-title, .nav-label {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.collapse.in{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
ul.metismenu {
|
|
li{
|
|
a{
|
|
.nav-title, .nav-label {
|
|
opacity: 0;
|
|
transition: all 0.7s;
|
|
-webkit-transition: all 0.7s;
|
|
-moz-transition: all 0.7s;
|
|
}
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
&.nav-static-title{
|
|
display: none;
|
|
}
|
|
+ li {
|
|
width: 240px;
|
|
}
|
|
}
|
|
.collapse.in {
|
|
display: none;
|
|
}
|
|
.sidebar-banner {
|
|
display: none !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
.footer{
|
|
width: calc(100% - 60px);
|
|
}
|
|
}
|
|
.sidebar-nav {
|
|
.metismenu {
|
|
li {
|
|
&:last-child {
|
|
margin-bottom:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sidebar-toggled {
|
|
.app-navbar {
|
|
left:0;
|
|
}
|
|
}
|