vuetify
Version:
Vue.js 2 Semantic Component Framework
114 lines (86 loc) • 2.02 kB
text/stylus
@import '../bootstrap'
@import '../theme'
v-navigation-drawer($material)
background-color: $material.cards
&:not(.v-navigation-drawer--floating)
.v-navigation-drawer__border
background-color: $material.dividers
.v-divider
border-color: $material.dividers
theme(v-navigation-drawer, "v-navigation-drawer")
.v-navigation-drawer
bootable()
display: block
left: 0
max-width: 100%
overflow-y: auto
overflow-x: hidden
pointer-events: auto
top: 0
will-change: transform
z-index: 3
-webkit-overflow-scrolling: touch
&[data-booted="true"]
transition-property: transform, width
&__border
position: absolute
right: 0
top: 0
height: 100%
width: 1px
&.v-navigation-drawer--right
&:after
left: 0
right: initial
&--right
left: auto
right: 0
> .v-navigation-drawer__border
right: auto
left: 0
&--absolute
position: absolute
&--fixed
position: fixed
&--floating:after
display: none
&--mini-variant
overflow: hidden
.v-list__group__header__prepend-icon
flex: 1 0 auto
justify-content: center
width: 100%
.v-list__tile__action,
.v-list__tile__avatar
justify-content: center
min-width: 48px
.v-list__tile__content,
.v-list__tile:after
opacity: 0
.v-subheader,
.v-divider,
.v-list--group
display: none
&--temporary,
&--is-mobile
z-index: 6
&:not(.v-navigation-drawer--close)
elevation(16)
.v-list
background: inherit
> .v-list
.v-list__tile
transition: none
font-weight: $navigation-drawer-item-font-weight
&--active
.v-list__tile__title
color: inherit
.v-list--group
.v-list__tile
font-weight: $navigation-drawer-group-item-font-weight
&__header--active
&:after
background: transparent
> .v-list:not(.v-list--dense)
.v-list__tile
font-size: $navigation-drawer-item-font-size