@vue/ui
Version:
UI components used in the vuejs organization apps
79 lines (66 loc) • 2.01 kB
text/stylus
.v-popper--theme-tooltip
$background = $vue-ui-gray-800
$dark-background = $vue-ui-white
$color = $vue-ui-white
$dark-color = $vue-ui-gray-800
font-size 14px
.v-popper__inner
background $background
color $color
.v-popper__arrow
border-color $background
.vue-ui-dark-mode &
.v-popper__inner
background $dark-background
color $dark-color
.v-popper__arrow
border-color $dark-background
.v-popper--theme-dropdown
$background = $vue-ui-white
$dark-background = $vue-ui-gray-900
$color = $vue-ui-gray-800
$dark-color = $vue-ui-white
.v-popper__inner
background $background
color $color
padding 4px 0
box-shadow 0 0 3px rgba(black, .05), 0 10px 30px rgba(black, .1)
.v-popper__arrow
border-color $background
.vue-ui-dark-mode &
.v-popper__inner
background $dark-background
color $dark-color
.v-popper__arrow
border-color $dark-background
&[data-popper-placement^='top']
.v-popper__arrow
filter drop-shadow(0 3px 3px rgba(black, .15))
&[data-popper-placement^='bottom']
.v-popper__arrow
filter drop-shadow(0 -3px 3px rgba(black, .15))
&[data-popper-placement^='left']
.v-popper__arrow
filter drop-shadow(3px 0 3px rgba(black, .15))
&[data-popper-placement^='right']
.v-popper__arrow
filter drop-shadow(-3px 0 3px rgba(black, .15))
// Animation
&.v-popper__popper--show-to,
&.v-popper__popper--hide-to
> .v-popper__wrapper
transition transform .12s ease-out
&.v-popper__popper--show-from,
&.v-popper__popper--hide-to
&[data-popper-placement^='top']
> .v-popper__wrapper
transform translateY(6px)
&[data-popper-placement^='bottom']
> .v-popper__wrapper
transform translateY(-6px)
&[data-popper-placement^='left']
> .v-popper__wrapper
transform translateX(6px)
&[data-popper-placement^='right']
> .v-popper__wrapper
transform translateX(-6px)