You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
plain-ui/src/scss/components/_sidebar.scss

85 lines
1.6 KiB

/**
* <div class="sidebar">
* <div class="sidebar__inner">
* <div class="sidebar__body">
* </div>
* <div class="sidebar__footer">
* </div>
* </div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
.sidebar {
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 95%;
visibility: hidden;
transition: visibility 0s linear 0.5s;
// adding overlay with transition for open / close
&:before {
@include overlay($z-index: 9);
transition: background-color 0.5s;
}
// extends from panel
&__body {
@extend .panel__body;
}
// extends from panel
&__inner {
@extend .panel;
position: relative;
height: 100%;
z-index: 10;
transition: transform 0.2s;
transform: translateX(-100%);
}
&__footer {
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
background: var(--background);
width: 100%;
padding: 1rem;
}
// open sidebar and slide in display
&--open {
visibility: visible;
transition: visibility 0s linear 0s;
.sidebar__inner {
transform: translateX(0);
}
&:before {
background: var(--background-alpha);
}
}
@include media-md() {
max-width: 33%;
}
}