adrigm
5/8/2018 - 1:03 PM
New Slidebar
.ms-slidebar {
box-shadow: 0 0px 5px rgba(0, 0, 0, .6);
background-color: $color-dark;
color: $color-light;
min-width: 256px;
width: 256px;
z-index: 2000;
//overflow: hidden;
display: flex;
.ms-slidebar-content {
//flex: 0 0 256px;
overflow: hidden;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
}
.ms-slidebar-header-container {
.ms-slidebar-header {
display: flex;
align-items: center;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
padding: 0 2rem;
height: 60px;
color: #fff;
transition: background ease 0.5s;
&:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
}
.ms-slidebar-title {
line-height: 0;
font-size: 2.2rem;
display: inline-block;
margin-left: 1.5rem;
word-spacing: -6px;
span {
font-weight: 400;
}
}
}
.ms-slidebar-user {
height: 80px;
display: flex;
align-items: center;
padding: 0 2rem;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
img {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
.ms-slidebar-user-name {
font-size: 18px;
font-weight: 500;
line-height: 0;
}
.ms-slidebar-user-work {
margin-top: 22px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: -0.2px;
color: rgba(255, 255, 255, 0.5);
line-height: 0;
}
}
.nav.nav-tabs.ms-slidebar-tabs {
background-color: rgba(0, 0, 0, 0.1);
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
.nav-item {
.nav-link {
padding: 0;
height: 40px;
display: flex;
align-items: center;
align-content: center;
border-radius: 0;
font-size: 16px;
i {
margin: 0 auto;
display: block;
}
&.active {
color: #fff !important;
}
}
}
.ms-tabs-indicator {
height: 1px;
bottom: -1px;
}
.ms-tabs-indicator-hover {
transition: left ease 0.3s, width ease .4s;
height: 1px;
bottom: -1px;
display: block;
position: absolute;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
//z-index: 2;
}
}
&.ms-slidebar-header-primary {
background-color: $color-primary;
.ms-slidebar-header {
border-color: $color-primary;
}
.ms-slidebar-user {
border-color: $color-primary;
}
.nav-tabs.ms-slidebar-tabs {
border-color: rgba(0, 0, 0, 0.1);
.ms-tabs-indicator {
background-color: #fff;
height: 2px;
}
}
}
}
.ms-slidebar-body {
display: flex;
flex-grow: 1;
flex-basis: 1;
direction: row;
overflow-x: hidden;
transition: all ease .3s;
top: 0;
bottom: 0;
.ms-slidebar-panel {
width: 256px;
//background-color: #ff0;
top: 0;
bottom: 0;
&:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.2);
}
.ms-slidebar-accordion {
height: 100%;
.card {
background-color: transparent;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
.ms-slidebar-accordion-item {
.ms-slidebar-btn {
color: #fff;
margin: 0;
border-radius: 0;
display: block;
padding: 0 2rem;
color: #fff;
height: 60px;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
transition: all ease .2s;
//transform: translateY(20px);
background-color: rgba(0, 0, 0, 0.2);
padding-top: 16px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
span {
flex: 1 1 auto;
padding: 0;
align-self: center;
}
i {
align-self: center;
margin-right: 8px;
margin-top: -1px;
}
&:after {
position: absolute;
right: 2.5rem;
top: 1.5rem;
font-family: 'FontAwesome';
content: "\f107";
transform: rotate(0);
transition: all ease 0.4s;
transform: rotate(180deg);
color: rgba(255, 255, 255, 0.5);
//opacity: 0;
}
.desc {
flex: 0 1 100%;
color: rgba(255, 255, 255, 0.5);
line-height: 1;
font-size: 12px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-bottom: 3px;
transition: all ease .3s;
opacity: 0;
margin: 0;
}
&:focus,
&:hover {
background-color: rgba(0, 0, 0, 0.2);
}
&.collapsed {
height: 80px;
padding-top: 11px;
background-color: transparent;
.desc {
opacity: 1;
}
&:after {
opacity: 0;
transform: none;
}
&:focus {
background-color: transparent;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
}
.ms-slidebar-collapse {
.ms-slidebar-sub {
margin-top: 0px;
margin: 0;
list-style-type: none;
padding: 0;
font-weight: 400;
font-size: 15px;
background-color: rgba(0, 0, 0, 0.2);
padding-bottom: 1.4rem;
li {
a {
color: rgba(255, 255, 255, 0.8);
padding: 0.5rem 2rem;
display: block;
position: relative;
i {
width: 15px;
margin-right: 8px;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active {
a {
color: $color-primary;
}
}
.ms-slidebar-sub-sub {
position: relative;
background-color: rgba(0, 0, 0, 0.2);
&:after {
position: absolute;
right: 2.5rem;
top: 0.5rem;
font-family: 'FontAwesome';
content: "\f107";
transition: all ease 0.4s;
transform: rotate(0deg);
color: rgba(255, 255, 255, 0.5);
}
&.collapsed {
background-color: transparent;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&:after {
transform: rotate(90deg);
}
}
}
}
.ms-slidebar-submenu {
background-color: rgba(0, 0, 0, 0.2);
list-style-type: none;
padding: 0.5rem 0 2rem 0;
li {
a {
padding: .3rem 4.5rem .3rem 4.5rem;
}
}
}
}
}
}
}
}
}
&.ms-slidebar-light {
background-color: #fff;
color: $color-dark;
.ms-slidebar-header-container {
.ms-slidebar-header {
border-bottom: solid 1px rgba($color-alt, 0.15);
color: $color-alt-dark;
&:hover {
color: $color-alt-dark;
background-color: rgba(0, 0, 0, 0.1);
}
.ms-slidebar-title {
span {
}
}
}
.ms-slidebar-user {
border-bottom: solid 1px rgba($color-alt, 0.15);
img {
}
.ms-slidebar-user-name {
color: $color-primary;
}
.ms-slidebar-user-work {
color: rgba(0, 0, 0, 0.3);
}
}
.nav.nav-tabs.ms-slidebar-tabs {
background-color: transparent;
border-bottom: solid 1px rgba($color-alt, 0.15);
.nav-item {
.nav-link {
color: $color-alt-light;
i {
color: $color-alt-light;
}
&.active {
color: $color-primary !important;
i {
color: $color-primary;
}
}
}
}
}
&.ms-slidebar-header-primary {
background-color: $color-primary;
color: #fff;
.ms-slidebar-header {
border-color: $color-primary;
color: #fff;
}
.ms-slidebar-user {
border-color: $color-primary;
color: #fff;
.ms-slidebar-user-name {
color: #fff;
}
.ms-slidebar-user-work {
color: rgba(255, 255, 255, 0.5);
}
}
.nav-tabs.ms-slidebar-tabs {
border-color: rgba($color-alt, 0.1);
.nav-item {
.nav-link {
color: #fff;
i {
color: #fff;
}
&.active {
i {
color: #fff;
}
}
}
}
.ms-tabs-indicator {
background-color: $color-dark;
height: 2px;
}
}
}
}
.ms-slidebar-body {
.ms-slidebar-panel {
&:nth-child(2n) {
background-color: rgba($color-alt, 0.1);
}
.ms-slidebar-accordion {
.card {
border-bottom: solid 1px rgba($color-alt, 0.1);
.ms-slidebar-accordion-item {
.ms-slidebar-btn {
box-shadow: inset 0 2px 3px 0px rgba($color-alt, 0.1);
color: #fff;
background-color: lighten($color-alt-light, 42);
color: $color-alt;
&:after {
color: $color-alt-light;
}
span {
i {
}
}
.desc {
color: lighten($color-alt-light, 15);
}
&:focus,
&:hover {
background-color: lighten($color-alt-light, 42);
}
&.collapsed {
background-color: #fff;
box-shadow: none;
.desc {
}
&:after {
}
&:focus {
}
&:hover {
background-color: lighten($color-alt-light, 42);
}
}
}
}
.ms-slidebar-collapse {
.ms-slidebar-sub {
background-color: lighten($color-alt-light, 42);
li {
a {
color: rgba($color-alt, 1);
i {
}
&:hover {
background-color: lighten($color-alt, 46);
}
}
&.active {
a {
color: $color-primary;
}
}
}
}
}
}
}
}
}
}
&.ms-slidebar-compact {
.ms-slidebar-body {
.ms-slidebar-panel {
.card {
border: 0 !important;
.ms-slidebar-accordion-item {
.ms-slidebar-btn {
//height: 50px;
font-size: 1.4rem;
padding-top: 0;
font-weight: 400;
&:after {
top: .8rem;
transform: rotate(0deg);
}
span {
}
.desc {
display: none;
}
&.collapsed {
box-shadow: none;
height: 40px;
justify-content: center;
align-items: center;
padding-top: 0;
&:after {
opacity: 1;
transform: rotate(90deg)
}
}
}
}
.ms-slidebar-collapse {
border-bottom: solid 1px rgba($color-alt, 0.2) !important;
.ms-slidebar-sub {
li {
a {
padding: 0.4rem 2rem;
//font-weight: 300;
font-size: 1.4rem;
}
}
}
}
}
}
}
}
&.ms-slidebar-collapse {
//min-width: 70px;
//max-width: 70px;
.ms-slidebar-content {
.ms-slidebar-header-container {
.ms-slidebar-header {
.ms-slidebar-title {
display: none;
}
}
.ms-slidebar-user {
.ms-slidebar-user-info {
display: none;
}
}
.ms-slidebar-tabs {
display: none;
}
}
.ms-slidebar-body {
.ms-slidebar-accordion {
.card {
.ms-slidebar-btn {
}
}
}
}
}
}
}
/*
os-theme-thin-light
*/
.os-theme-thin-light>.os-scrollbar-horizontal {
right: 5px;
height: 14px;
padding: 0px 6px;
}
.os-theme-thin-light>.os-scrollbar-vertical {
bottom: 14px;
width: 5px;
padding: 6px 0px;
}
.os-theme-thin-light.os-host-rtl>.os-scrollbar-horizontal {
left: 14px;
right: 0;
}
.os-theme-thin-light>.os-scrollbar-corner {
height: 14px;
width: 14px;
background-color: transparent;
}
.os-theme-thin-light>.os-scrollbar>.os-scrollbar-track {
background: transparent;
}
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track:before,
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track:before {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.15);
}
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track:before,
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle:before {
left: 0;
right: 0;
height: 2px;
top: 50%;
margin-top: -1px;
}
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track:before,
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle:before {
top: 0;
bottom: 0;
width: 2px;
left: 50%;
margin-left: -1px;
}
.os-theme-thin-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle:before {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle:hover:before,
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle.active:before {
height: 4px;
margin-top: -2px;
}
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle:hover:before,
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle.active:before {
width: 4px;
margin-left: -2px;
}
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle:hover:before,
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle:hover:before {
background: rgba(255, 255, 255, 0.4);
}
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle.active:before,
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle.active:before {
background: rgba(255, 255, 255, 0.6);
}
.os-theme-thin-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle {
height: 100%;
min-width: 30px;
}
.os-theme-thin-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle {
width: 100%;
min-height: 30px;
}
.os-theme-thin-light.os-host-transition>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle:before {
transition: height 0.3s, margin-top 0.3s, background 0.2s;
}
.os-theme-thin-light.os-host-transition>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle:before {
transition: width 0.3s, margin-left 0.3s, background 0.2s;
}