.sidenav {
|
display: flex;
|
|
.ps__thumb-y,
|
.ps__rail-y {
|
width: .125rem !important;
|
}
|
|
.ps__rail-y {
|
right: .25rem !important;
|
left: auto !important;
|
background: none !important;
|
|
@include rtl-style {
|
right: auto !important;
|
left: .25rem !important;
|
}
|
}
|
|
.ps__rail-y:hover,
|
.ps__rail-y:focus,
|
.ps__rail-y.ps--clicking,
|
.ps__rail-y:hover > .ps__thumb-y,
|
.ps__rail-y:focus > .ps__thumb-y,
|
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
width: .375rem !important;
|
}
|
}
|
|
.sidenav-inner {
|
display: flex;
|
align-items: flex-start;
|
justify-content: flex-start;
|
margin: 0;
|
padding: 0;
|
}
|
|
.sidenav-item,
|
.sidenav-header,
|
.sidenav-divider,
|
.sidenav-block {
|
flex: 0 0 auto;
|
flex-direction: column;
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
}
|
|
.sidenav-item {
|
align-items: flex-start;
|
justify-content: flex-start;
|
|
&.sidenav-item-animating {
|
transition: height $sidenav-animation-duration ease-in-out;
|
}
|
}
|
|
.sidenav-item .sidenav-link {
|
position: relative;
|
display: flex;
|
align-items: center;
|
flex: 0 1 auto;
|
|
.sidenav-item.active > & {
|
font-weight: $font-weight-semibold;
|
}
|
|
.sidenav-item.disabled & {
|
cursor: default !important;
|
}
|
|
.sidenav:not(.sidenav-no-animation) & {
|
transition-duration: $sidenav-animation-duration;
|
transition-property: color, background-color;
|
}
|
|
> :not(.sidenav-icon) {
|
flex: 0 1 auto;
|
}
|
}
|
|
.sidenav-toggle::after {
|
content: "";
|
position: absolute;
|
top: 50%;
|
display: block;
|
width: $caret-width;
|
height: $caret-width;
|
border: 1px solid;
|
border-top: 0;
|
border-right: 0;
|
transform: translateY(-50%) rotate(45deg);
|
|
@include rtl-style {
|
border-right: 1px solid;
|
border-left: 0;
|
transform: translateY(-50%) rotate(-45deg);
|
}
|
|
.sidenav-item.open:not(.sidenav-item-closing) > & {
|
transform: translateY(-50%) rotate(-45deg);
|
|
@include rtl-style {
|
transform: translateY(-50%) rotate(45deg);
|
}
|
}
|
|
.sidenav:not(.sidenav-no-animation) & {
|
transition-duration: $sidenav-animation-duration;
|
transition-property: -webkit-transform, transform;
|
}
|
}
|
|
.sidenav-menu {
|
display: none;
|
flex-direction: column;
|
margin: 0;
|
padding: 0;
|
|
.sidenav:not(.sidenav-no-animation) & {
|
transition: background-color $sidenav-animation-duration;
|
}
|
|
.sidenav-item.open > & {
|
display: flex;
|
}
|
}
|
|
.sidenav-icon {
|
flex-grow: 0;
|
flex-shrink: 0;
|
margin-right: $sidenav-icon-expanded-spacer;
|
font-size: $sidenav-icon-expanded-font-size;
|
|
@include rtl-style {
|
margin-right: 0;
|
margin-left: $sidenav-icon-expanded-spacer;
|
}
|
}
|
|
.sidenav-divider {
|
width: 100%;
|
border: 0;
|
border-top: 1px solid;
|
}
|
|
// *******************************************************************************
|
// * Vertical
|
|
.sidenav-vertical {
|
overflow: hidden;
|
flex-direction: column;
|
|
&:not(.sidenav-no-animation) {
|
transition: width $sidenav-animation-duration;
|
}
|
|
&,
|
.sidenav-block,
|
.sidenav-inner > .sidenav-item,
|
.sidenav-inner > .sidenav-header {
|
width: $sidenav-width;
|
}
|
|
.sidenav-inner {
|
flex-direction: column;
|
flex: 1 1 auto;
|
|
> .sidenav-item {
|
margin: $sidenav-item-spacer 0;
|
}
|
}
|
|
.sidenav-item .sidenav-link,
|
.sidenav-header,
|
.sidenav-block {
|
padding: $sidenav-vertical-link-padding-y $sidenav-vertical-link-padding-x;
|
}
|
|
.sidenav-divider {
|
margin-top: $sidenav-vertical-link-padding-y;
|
margin-bottom: $sidenav-vertical-link-padding-y;
|
padding: 0;
|
}
|
|
.sidenav-item .sidenav-toggle {
|
padding-right: calc(#{$sidenav-vertical-link-padding-x} + #{$caret-width * 3});
|
|
@include rtl-style {
|
padding-right: $sidenav-vertical-link-padding-x;
|
padding-left: calc(#{$sidenav-vertical-link-padding-x} + #{$caret-width * 3});
|
}
|
|
&::after {
|
right: $sidenav-vertical-link-padding-x;
|
|
@include rtl-style {
|
right: auto;
|
left: $sidenav-vertical-link-padding-x;
|
}
|
}
|
}
|
|
.sidenav-menu {
|
padding-top: $sidenav-vertical-menu-link-padding-y;
|
padding-bottom: $sidenav-vertical-menu-link-padding-y;
|
|
.sidenav-link {
|
padding-top: $sidenav-vertical-menu-link-padding-y;
|
padding-bottom: $sidenav-vertical-menu-link-padding-y;
|
}
|
}
|
|
.sidenav-icon {
|
width: $sidenav-icon-expanded-width;
|
}
|
|
.sidenav-menu .sidenav-icon {
|
margin-right: 0;
|
|
@include rtl-style {
|
margin-left: 0;
|
}
|
}
|
|
// Levels
|
//
|
|
$sidenav-first-level-spacer: $sidenav-vertical-link-padding-x + $sidenav-icon-expanded-width + $sidenav-icon-expanded-spacer;
|
|
.sidenav-menu .sidenav-link {
|
padding-left: $sidenav-first-level-spacer;
|
|
@include rtl-style {
|
padding-right: $sidenav-first-level-spacer;
|
padding-left: $sidenav-vertical-link-padding-x;
|
}
|
}
|
|
@for $i from 2 through $sidenav-max-levels {
|
$selector: '';
|
|
@for $l from 1 through $i {
|
$selector: "#{$selector} .sidenav-menu";
|
}
|
|
#{$selector} .sidenav-link {
|
padding-left: $sidenav-first-level-spacer + ($sidenav-vertical-menu-level-spacer * ($i - 1));
|
|
@include rtl-style {
|
padding-right: $sidenav-first-level-spacer + ($sidenav-vertical-menu-level-spacer * ($i - 1));
|
padding-left: $sidenav-vertical-link-padding-x;
|
}
|
}
|
}
|
}
|
|
|
// *******************************************************************************
|
// * Horizontal
|
|
.sidenav-horizontal {
|
flex-direction: row;
|
width: 100%;
|
|
.sidenav-inner {
|
overflow: hidden;
|
flex-direction: row;
|
flex: 0 1 100%;
|
}
|
|
.sidenav-item .sidenav-link {
|
padding: $sidenav-horizontal-link-padding-y $sidenav-horizontal-link-padding-x;
|
}
|
|
.sidenav-item .sidenav-toggle {
|
padding-right: calc(#{$sidenav-horizontal-link-padding-x} + #{$caret-width * 3});
|
|
@include rtl-style {
|
padding-right: $sidenav-horizontal-link-padding-x;
|
padding-left: calc(#{$sidenav-horizontal-link-padding-x} + #{$caret-width * 3});
|
}
|
|
&::after {
|
right: $sidenav-horizontal-link-padding-x;
|
|
@include rtl-style {
|
right: auto;
|
left: $sidenav-horizontal-link-padding-x;
|
}
|
|
}
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-toggle::after {
|
transform: translateY(-50%) rotate(-45deg);
|
|
@include rtl-style {
|
transform: translateY(-50%) rotate(45deg);
|
}
|
}
|
|
.sidenav-inner > .sidenav-item:not(.sidenav-item-closing).open > .sidenav-toggle::after {
|
transform: translateY(-50%) rotate(135deg);
|
|
@include rtl-style {
|
transform: translateY(-50%) rotate(-135deg);
|
}
|
}
|
|
.sidenav-header,
|
.sidenav-divider {
|
display: none !important;
|
}
|
|
.sidenav-menu {
|
position: absolute;
|
width: $sidenav-menu-width;
|
|
.sidenav-menu {
|
position: static;
|
width: auto;
|
}
|
|
.sidenav-link {
|
padding-top: $sidenav-horizontal-menu-link-padding-y;
|
padding-bottom: $sidenav-horizontal-menu-link-padding-y;
|
}
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-menu {
|
@include border-bottom-radius($border-radius);
|
}
|
|
&:not(.sidenav-no-animation) .sidenav-inner > .sidenav-item.open > .sidenav-menu {
|
animation: sidenavDropdownShow $sidenav-animation-duration ease-in-out;
|
}
|
|
// Levels
|
@for $i from 2 through $sidenav-max-levels {
|
$selector: '';
|
|
@for $l from 1 through $i {
|
$selector: "#{$selector} .sidenav-menu";
|
}
|
|
#{$selector} .sidenav-link {
|
padding-left: $sidenav-horizontal-menu-level-spacer * $i;
|
|
@include rtl-style {
|
padding-right: $sidenav-horizontal-menu-level-spacer * $i;
|
padding-left: $sidenav-horizontal-link-padding-x;
|
}
|
}
|
}
|
}
|
|
.sidenav-horizontal-wrapper {
|
overflow: hidden;
|
flex: 0 1 100%;
|
width: 0;
|
|
.sidenav:not(.sidenav-no-animation) & .sidenav-inner {
|
transition: margin $sidenav-animation-duration;
|
}
|
}
|
|
.sidenav-horizontal-prev,
|
.sidenav-horizontal-next {
|
position: relative;
|
display: block;
|
flex: 0 0 auto;
|
width: $sidenav-control-width;
|
|
&::after {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
display: block;
|
width: $sidenav-control-arrow-size;
|
height: $sidenav-control-arrow-size;
|
border: 1px solid;
|
border-top: 0;
|
}
|
|
&.disabled {
|
cursor: default !important;
|
}
|
}
|
|
.sidenav-horizontal-prev::after {
|
border-right: 0;
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
@include rtl-style {
|
transform: translate(-50%, -50%) rotate(-135deg);
|
}
|
}
|
|
.sidenav-horizontal-next::after {
|
border-left: 0;
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
@include rtl-style {
|
transform: translate(-50%, -50%) rotate(135deg);
|
}
|
}
|
|
@include keyframes(sidenavDropdownShow) {
|
0% {
|
opacity: 0;
|
transform: translateY(-.5rem);
|
}
|
100% {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
// *******************************************************************************
|
// * Universal coloring
|
|
.sidenav-dark {
|
color: $navbar-dark-color;
|
|
.sidenav-link,
|
.sidenav-horizontal-prev,
|
.sidenav-horizontal-next {
|
color: $navbar-dark-color;
|
|
@include hover-focus {
|
color: $navbar-dark-hover-color;
|
}
|
|
&.active {
|
color: $navbar-dark-active-color;
|
}
|
}
|
|
.sidenav-item.disabled .sidenav-link {
|
color: $navbar-dark-disabled-color !important;
|
}
|
|
.sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle,
|
.sidenav-item.active > .sidenav-link {
|
color: $navbar-dark-active-color;
|
}
|
|
.sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
|
background: $sidenav-dark-menu-bg;
|
}
|
|
.sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-menu,
|
.sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-toggle {
|
color: $navbar-dark-color;
|
}
|
|
.sidenav-text {
|
color: $navbar-dark-active-color;
|
}
|
|
.sidenav-header {
|
color: $navbar-dark-color;
|
}
|
|
hr,
|
.sidenav-divider,
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
|
border-color: $sidenav-dark-border-color !important;
|
}
|
|
.sidenav-inner > .sidenav-header::before,
|
.sidenav-block::before {
|
background-color: $navbar-dark-disabled-color;
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before {
|
background-color: $sidenav-dark-border-color;
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
|
background-color: $navbar-dark-active-color;
|
}
|
|
.ps__thumb-y {
|
background: $navbar-dark-color !important;
|
}
|
}
|
|
.sidenav-light {
|
color: $navbar-light-color;
|
|
.sidenav-link,
|
.sidenav-horizontal-prev,
|
.sidenav-horizontal-next {
|
color: $navbar-light-color;
|
|
@include hover-focus {
|
color: $navbar-light-hover-color;
|
}
|
|
&.active {
|
color: $navbar-light-active-color;
|
}
|
}
|
|
.sidenav-item.disabled .sidenav-link {
|
color: $navbar-light-disabled-color !important;
|
}
|
|
.sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle,
|
.sidenav-item.active > .sidenav-link {
|
color: $navbar-light-active-color;
|
}
|
|
.sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
|
background: $sidenav-light-menu-bg;
|
}
|
|
.sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-menu,
|
.sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-toggle {
|
color: $navbar-light-color;
|
}
|
|
.sidenav-text {
|
color: $navbar-light-active-color;
|
}
|
|
.sidenav-header {
|
color: $navbar-light-color;
|
}
|
|
hr,
|
.sidenav-divider,
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
|
border-color: $sidenav-light-border-color !important;
|
}
|
|
.sidenav-inner > .sidenav-header::before,
|
.sidenav-block::before {
|
background-color: $navbar-light-disabled-color;
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before {
|
background-color: $sidenav-light-border-color;
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
|
background-color: $navbar-light-active-color;
|
}
|
|
.ps__thumb-y {
|
background: $navbar-light-color !important;
|
}
|
}
|
|
// *******************************************************************************
|
// * Collapsed
|
|
@mixin sidenav-collapsed() {
|
width: $sidenav-collapsed-width;
|
|
.sidenav-inner > .sidenav-item {
|
width: $sidenav-width + ($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width);
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-link {
|
padding-left: $sidenav-collapsed-width;
|
}
|
|
.sidenav-inner > .sidenav-header,
|
.sidenav-block {
|
position: relative;
|
margin-left: $sidenav-collapsed-width;
|
padding-right: ($sidenav-vertical-link-padding-x * 2) - $sidenav-icon-expanded-spacer;
|
padding-left: $sidenav-icon-expanded-spacer;
|
width: $sidenav-width;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: $sidenav-vertical-link-padding-y;
|
bottom: $sidenav-vertical-link-padding-y;
|
left: -1 * ($sidenav-collapsed-width * .75);
|
display: block;
|
width: $sidenav-collapsed-width / 2;
|
}
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-menu,
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu {
|
position: relative;
|
margin-left: $sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width;
|
background: none !important;
|
|
.sidenav-link {
|
background: none !important;
|
transition: none !important;
|
}
|
}
|
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu {
|
&::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: calc(#{$sidenav-collapsed-width / 2} - 1px);
|
display: block;
|
margin-left: -($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width);
|
width: 0;
|
border-left: 2px solid;
|
}
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle,
|
.sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link {
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 0;
|
display: block;
|
margin-top: -4px;
|
margin-left: calc(#{($sidenav-collapsed-width / 2) - ($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width)} - 4px);
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
}
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-toggle::after {
|
right: auto;
|
left: $sidenav-collapsed-width - $sidenav-control-arrow-size - .375rem;
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-link .sidenav-icon {
|
margin-left: -$sidenav-collapsed-width;
|
width: $sidenav-collapsed-width;
|
text-align: center;
|
}
|
}
|
|
@mixin sidenav-collapsed-rtl() {
|
.sidenav-inner > .sidenav-item > .sidenav-link {
|
padding-right: $sidenav-collapsed-width;
|
padding-left: $sidenav-vertical-link-padding-x;
|
}
|
|
.sidenav-inner > .sidenav-header,
|
.sidenav-block {
|
margin-right: $sidenav-collapsed-width;
|
margin-left: 0;
|
padding-right: $sidenav-icon-expanded-spacer;
|
padding-left: ($sidenav-vertical-link-padding-x * 2) - $sidenav-icon-expanded-spacer;
|
|
&::before {
|
right: -1 * ($sidenav-collapsed-width * .75);
|
left: auto;
|
}
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-menu,
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu {
|
margin-right: $sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width;
|
margin-left: 0;
|
}
|
|
.sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
|
right: calc(#{$sidenav-collapsed-width / 2} - 1px);
|
left: auto;
|
margin-right: -($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width);
|
margin-left: 0;
|
}
|
|
.sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before,
|
.sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
|
right: 0;
|
left: auto;
|
margin-right: calc(#{($sidenav-collapsed-width / 2) - ($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width)} - 4px);
|
margin-left: 0;
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-toggle::after {
|
right: $sidenav-collapsed-width - $sidenav-control-arrow-size - .375rem;
|
left: auto;
|
}
|
|
.sidenav-inner > .sidenav-item > .sidenav-link .sidenav-icon {
|
margin-right: -$sidenav-collapsed-width;
|
margin-left: $sidenav-icon-expanded-spacer;
|
}
|
}
|
|
.sidenav-collapsed:not(:hover) {
|
@include sidenav-collapsed();
|
|
@include rtl-style {
|
@include sidenav-collapsed-rtl();
|
}
|
}
|
