93 lines
2.3 KiB
Sass
93 lines
2.3 KiB
Sass
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
|
||
|
|
.v-navigation-drawer
|
||
|
|
-webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling
|
||
|
|
background: $navigation-drawer-background
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
height: $navigation-drawer-height
|
||
|
|
max-width: 100%
|
||
|
|
pointer-events: auto
|
||
|
|
transition-duration: $navigation-drawer-transition-duration
|
||
|
|
transition-property: $navigation-drawer-transition-property
|
||
|
|
transition-timing-function: $navigation-drawer-transition-timing-function
|
||
|
|
position: absolute
|
||
|
|
|
||
|
|
@include tools.border($navigation-drawer-border...)
|
||
|
|
@include tools.elevation($navigation-drawer-elevation)
|
||
|
|
@include tools.rounded($navigation-drawer-border-radius)
|
||
|
|
@include tools.theme($navigation-drawer-theme...)
|
||
|
|
|
||
|
|
&--rounded
|
||
|
|
@include tools.rounded($navigation-drawer-rounded-border-radius)
|
||
|
|
|
||
|
|
&--top
|
||
|
|
top: 0
|
||
|
|
border-bottom-width: $navigation-drawer-border-thin-width
|
||
|
|
|
||
|
|
&--bottom
|
||
|
|
left: 0
|
||
|
|
border-top-width: $navigation-drawer-border-thin-width
|
||
|
|
|
||
|
|
&--left
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
right: auto
|
||
|
|
border-right-width: $navigation-drawer-border-thin-width
|
||
|
|
|
||
|
|
&--right
|
||
|
|
top: 0
|
||
|
|
left: auto
|
||
|
|
right: 0
|
||
|
|
border-left-width: $navigation-drawer-border-thin-width
|
||
|
|
|
||
|
|
&--floating
|
||
|
|
border: none
|
||
|
|
|
||
|
|
&--temporary
|
||
|
|
@include tools.elevation($navigation-drawer-temporary-elevation)
|
||
|
|
|
||
|
|
&--sticky
|
||
|
|
height: auto
|
||
|
|
transition: box-shadow, transform, visibility, width, height, left, right
|
||
|
|
|
||
|
|
.v-list
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.v-navigation-drawer__content
|
||
|
|
flex: 0 1 auto
|
||
|
|
height: $navigation-drawer-content-height
|
||
|
|
max-width: 100%
|
||
|
|
overflow-x: $navigation-drawer-content-overflow-x
|
||
|
|
overflow-y: $navigation-drawer-content-overflow-y
|
||
|
|
|
||
|
|
.v-navigation-drawer__img
|
||
|
|
height: 100%
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
width: 100%
|
||
|
|
z-index: -1
|
||
|
|
|
||
|
|
img
|
||
|
|
height: $navigation-drawer-img-height
|
||
|
|
object-fit: $navigation-drawer-img-object-fit
|
||
|
|
width: $navigation-drawer-img-width
|
||
|
|
|
||
|
|
.v-navigation-drawer__scrim
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
background: black
|
||
|
|
opacity: $navigation-drawer-scrim-opacity
|
||
|
|
transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function
|
||
|
|
z-index: 1
|
||
|
|
|
||
|
|
.v-navigation-drawer__prepend,
|
||
|
|
.v-navigation-drawer__append
|
||
|
|
flex: none
|
||
|
|
overflow: hidden
|