mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-08 08:53:51 +00:00
Carlos Valente
e1e8410ba4
migrate pin page migrate copy tag migrate pin input migrate dropdown menus migrate radio buttons migrate switch migrate select migrate textarea migrate colour picker migrate select migrate context menu migrate viewparams remove chakra
67 lines
1.1 KiB
SCSS
67 lines
1.1 KiB
SCSS
.separator {
|
|
border-color: $border-color-ondark;
|
|
}
|
|
|
|
.backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: $backdrop-color;
|
|
transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
|
|
|
&[data-starting-style],
|
|
&[data-ending-style] {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.drawer {
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
width: 22rem;
|
|
height: 100vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-block: 1rem;
|
|
|
|
background-color: $gray-1250;
|
|
color: $ui-white;
|
|
border-right: 1px solid $gray-1100;
|
|
|
|
&[data-open] {
|
|
transform: translateX(0%);
|
|
transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
|
}
|
|
|
|
&[data-starting-style],
|
|
&[data-ending-style] {
|
|
transform: translateX(-100%);
|
|
transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
|
}
|
|
|
|
// take the whole screen in mobile devices
|
|
@media (max-width: $min-tablet) {
|
|
width: 100vw;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 3.5rem;
|
|
padding-inline: 1.5rem;
|
|
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|