142 lines
2.6 KiB
Stylus
142 lines
2.6 KiB
Stylus
@import '../bootstrap'
|
|
|
|
v-snack-rtl()
|
|
&__content
|
|
.v-btn
|
|
margin: 0 24px 0 0
|
|
|
|
rtl(v-snack-rtl, "v-snack")
|
|
|
|
.v-snack
|
|
position: fixed
|
|
display: flex
|
|
align-items: center
|
|
color: $snackbar-color
|
|
pointer-events: none
|
|
z-index: 1000
|
|
font-size: 14px
|
|
left: 0
|
|
right: 0
|
|
|
|
&--absolute
|
|
position: absolute
|
|
|
|
&--top
|
|
top: 0
|
|
|
|
&--bottom
|
|
bottom: 0
|
|
|
|
&__wrapper
|
|
display: flex
|
|
align-items: center
|
|
background-color: $snackbar-background-color
|
|
pointer-events: auto
|
|
width: 100%
|
|
elevation(6)
|
|
|
|
&__content
|
|
width: 100%
|
|
height: 48px
|
|
padding: 14px 24px
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
overflow: hidden
|
|
|
|
.v-btn
|
|
color: $snackbar-color
|
|
flex: 0 0 auto
|
|
padding: 8px
|
|
margin: 0 0 0 24px
|
|
height: auto
|
|
min-width: auto
|
|
width: auto
|
|
|
|
&__content
|
|
margin: -2px
|
|
|
|
&::before
|
|
display: none
|
|
|
|
&--multi-line &__content
|
|
height: 80px
|
|
padding: 24px
|
|
|
|
&--vertical &__content
|
|
height: 112px
|
|
padding: 24px 24px 14px
|
|
flex-direction: column
|
|
// https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11
|
|
align-items: stretch
|
|
|
|
.v-btn
|
|
&.v-btn //specificity
|
|
justify-content: flex-end
|
|
padding: 0
|
|
margin-left: 0
|
|
margin-top: 24px
|
|
|
|
&__content
|
|
flex: 0 0 auto
|
|
margin: 0
|
|
|
|
&--auto-height &__content
|
|
height: auto
|
|
|
|
v-snack-sm-and-up-rtl()
|
|
@media $display-breakpoints.sm-and-up
|
|
&__content .v-btn:first-of-type
|
|
margin-left: 0
|
|
margin-right: 42px
|
|
|
|
rtl(v-snack-sm-and-up-rtl, "v-snack")
|
|
|
|
@media $display-breakpoints.sm-and-up
|
|
.v-snack
|
|
&__wrapper
|
|
width: auto
|
|
max-width: 568px
|
|
min-width: 288px
|
|
margin: 0 auto
|
|
border-radius: 2px
|
|
|
|
.v-snack--left &
|
|
margin-left: 0
|
|
.v-snack--right &
|
|
margin-right: 0
|
|
|
|
&--left, &--right
|
|
margin: 0 $snackbar-corner-offset
|
|
&^[0]--top
|
|
transform: translateY($snackbar-corner-offset)
|
|
&^[0]--bottom
|
|
transform: translateY(0 - $snackbar-corner-offset)
|
|
|
|
&__content .v-btn:first-of-type
|
|
margin-left: 42px
|
|
|
|
.v-snack-transition
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: transform .4s $transition.swing
|
|
.v-snack__content
|
|
transition: opacity .3s linear .1s
|
|
|
|
&-enter
|
|
.v-snack__content
|
|
opacity: 0
|
|
|
|
&-enter-to,
|
|
&-leave
|
|
.v-snack__content
|
|
opacity: 1
|
|
|
|
&-enter,
|
|
&-leave-to
|
|
&.v-snack.v-snack--top
|
|
// Extra 8px to hide the bottom shadow
|
|
transform: translateY(calc(-100% - 8px))
|
|
&.v-snack.v-snack--bottom
|
|
transform: translateY(100%)
|