mirror of
https://github.com/tabler/tabler.git
synced 2026-08-03 00:44:37 +04:00
chomik
75 lines
1.3 KiB
SCSS
75 lines
1.3 KiB
SCSS
$sidebar-width: 15rem;
|
|
|
|
.sidebar {
|
|
flex: 1 0 15rem;
|
|
width: $sidebar-width;
|
|
height: 100%;
|
|
padding: 1.5rem;
|
|
background: #fff;
|
|
border-right: 1px solid $border-color;
|
|
|
|
@include media-breakpoint-down(md) {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
max-width: 90vw;
|
|
margin-left: -($sidebar-width);
|
|
transition: .3s transform;
|
|
|
|
@at-root body.sidebar-opened & {
|
|
transform: translate($sidebar-width, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
display: none;
|
|
visibility: hidden;
|
|
background: rgba(0, 0, 0, .1);
|
|
opacity: 0;
|
|
backdrop-filter: blur(1px);
|
|
|
|
@include media-breakpoint-down(md) {
|
|
display: block;
|
|
transition: .3s backdrop-filter, .3s opacity;
|
|
|
|
@at-root body.sidebar-opened & {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-btn {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
z-index: 1001;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
color: $text-muted !important;
|
|
background: theme-color-lightest($text-muted);
|
|
border-radius: 50%;
|
|
box-shadow: $box-shadow-sm;
|
|
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
display: none;
|
|
}
|
|
}
|