185 lines
4.6 KiB
Sass
185 lines
4.6 KiB
Sass
@use 'sass:map'
|
|
@use '../../styles/tools'
|
|
@use '../../styles/settings'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-snackbar
|
|
justify-content: center
|
|
z-index: $snackbar-z-index
|
|
margin: $snackbar-wrapper-margin
|
|
margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
|
|
padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)
|
|
|
|
--v-snackbar-current-offset: var(--v-snackbar-offset)
|
|
transform: translateY(calc(var(--v-snackbar-direction) * (var(--v-snackbar-current-offset) + var(--v-snackbar-mobile-notch, 0px))))
|
|
transition: transform .2s settings.$standard-easing
|
|
|
|
&:not(.v-snackbar--center):not(.v-snackbar--top)
|
|
align-items: flex-end
|
|
|
|
&__wrapper
|
|
align-items: center
|
|
display: flex
|
|
flex-wrap: wrap
|
|
max-width: $snackbar-wrapper-max-width
|
|
min-height: $snackbar-wrapper-min-height
|
|
min-width: $snackbar-wrapper-min-width
|
|
overflow: hidden
|
|
padding: $snackbar-wrapper-padding
|
|
|
|
transition: .35s settings.$standard-easing
|
|
transition-property: height, width
|
|
|
|
@include tools.rounded($snackbar-border-radius)
|
|
|
|
@at-root .v-snackbar
|
|
@include tools.variant($snackbar-variants...)
|
|
|
|
&--variant-outlined,
|
|
&--variant-tonal
|
|
background: $snackbar-fallback-background
|
|
|
|
@media (forced-colors: active)
|
|
border: thick solid
|
|
|
|
&__header
|
|
flex-basis: 100%
|
|
|
|
&:after
|
|
content: ''
|
|
display: block
|
|
flex-basis: 100%
|
|
|
|
&__prepend
|
|
align-self: center
|
|
display: flex
|
|
margin-inline: $snackbar-prepend-margin-inline
|
|
|
|
&__prepend + &__content
|
|
padding-inline-start: 0
|
|
|
|
&__title
|
|
font-weight: $snackbar-title-font-weight
|
|
|
|
&__content
|
|
flex: 1 1
|
|
font-size: $snackbar-font-size
|
|
font-weight: $snackbar-font-weight
|
|
letter-spacing: $snackbar-letter-spacing
|
|
line-height: $snackbar-line-height
|
|
margin-right: auto
|
|
padding: $snackbar-content-padding
|
|
text-align: initial
|
|
|
|
&__actions
|
|
align-items: center
|
|
align-self: center
|
|
display: flex
|
|
margin-inline-end: $snackbar-action-margin
|
|
|
|
& > .v-btn
|
|
padding: $snackbar-btn-padding
|
|
min-width: auto
|
|
|
|
&__timer
|
|
width: 100%
|
|
position: absolute
|
|
|
|
&--top
|
|
top: 0
|
|
|
|
&--bottom
|
|
bottom: 0
|
|
|
|
.v-progress-linear
|
|
transition: .2s linear
|
|
|
|
&--absolute
|
|
position: absolute
|
|
z-index: $snackbar-absolute-z-index
|
|
|
|
&--vertical .v-snackbar__actions
|
|
flex-basis: 100%
|
|
justify-content: end
|
|
margin-bottom: $snackbar-vertical-action-margin-bottom
|
|
|
|
&:before
|
|
content: ''
|
|
display: block
|
|
flex-basis: 100%
|
|
|
|
&--center
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
&--top
|
|
align-items: flex-start
|
|
|
|
@media #{map.get(settings.$display-breakpoints, 'sm-and-down')}
|
|
--v-snackbar-mobile-notch: max(env(safe-area-inset-top), 0px)
|
|
|
|
&--bottom
|
|
align-items: flex-end
|
|
|
|
@media #{map.get(settings.$display-breakpoints, 'sm-and-down')}
|
|
--v-snackbar-mobile-notch: max(env(safe-area-inset-bottom), 0px)
|
|
|
|
&--left,
|
|
&--start
|
|
justify-content: flex-start
|
|
|
|
&--right,
|
|
&--end
|
|
justify-content: flex-end
|
|
|
|
&--collapsed
|
|
--v-snackbar-current-offset: calc(var(--v-snackbar-gap) * var(--v-snackbar-index, 0))
|
|
|
|
.v-snackbar__wrapper
|
|
min-width: 0
|
|
width: calc(var(--v-snackbar-collapsed-width) - 2 * var(--v-snackbar-gap) * var(--v-snackbar-index, 0))
|
|
height: var(--v-snackbar-collapsed-height)
|
|
|
|
> *
|
|
opacity: 0
|
|
|
|
&.v-snackbar--start,
|
|
&.v-snackbar--left
|
|
.v-snackbar__wrapper
|
|
transform: translateX(calc(var(--v-snackbar-gap) * var(--v-snackbar-index, 0)))
|
|
|
|
&.v-snackbar--end,
|
|
&.v-snackbar--right
|
|
.v-snackbar__wrapper
|
|
transform: translateX(calc(-1 * var(--v-snackbar-gap) * var(--v-snackbar-index, 0)))
|
|
|
|
.v-progress-linear
|
|
opacity: 0
|
|
|
|
.v-avatar
|
|
background: transparent
|
|
|
|
@include tools.layer('transitions')
|
|
.v-snackbar-transition
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition-duration: .15s
|
|
transition-timing-function: settings.$decelerated-easing
|
|
|
|
&-enter-active
|
|
transition-property: opacity, transform
|
|
|
|
@media (prefers-reduced-motion: reduce)
|
|
transition-property: opacity
|
|
|
|
&-enter-from
|
|
opacity: 0
|
|
transform: scale($snackbar-transition-scale)
|
|
|
|
&-leave-active
|
|
transition-property: opacity
|
|
|
|
&-leave-to
|
|
opacity: 0
|