VSnackbar.sass 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. @use '../../styles/tools'
  2. @use '../../styles/settings'
  3. @use './variables' as *
  4. @include tools.layer('components')
  5. .v-snackbar
  6. justify-content: center
  7. z-index: $snackbar-z-index
  8. margin: $snackbar-wrapper-margin
  9. margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
  10. padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)
  11. &:not(.v-snackbar--center):not(.v-snackbar--top)
  12. align-items: flex-end
  13. &__wrapper
  14. align-items: center
  15. display: flex
  16. max-width: $snackbar-wrapper-max-width
  17. min-height: $snackbar-wrapper-min-height
  18. min-width: $snackbar-wrapper-min-width
  19. overflow: hidden
  20. padding: $snackbar-wrapper-padding
  21. @include tools.rounded($snackbar-border-radius)
  22. @at-root .v-snackbar
  23. @include tools.variant($snackbar-variants...)
  24. &__content
  25. flex-grow: 1
  26. font-size: $snackbar-font-size
  27. font-weight: $snackbar-font-weight
  28. letter-spacing: $snackbar-letter-spacing
  29. line-height: $snackbar-line-height
  30. margin-right: auto
  31. padding: $snackbar-content-padding
  32. text-align: initial
  33. &__actions
  34. align-items: center
  35. align-self: center
  36. display: flex
  37. margin-inline-end: $snackbar-action-margin
  38. & > .v-btn
  39. padding: $snackbar-btn-padding
  40. min-width: auto
  41. &__timer
  42. width: 100%
  43. position: absolute
  44. top: 0
  45. .v-progress-linear
  46. transition: .2s linear
  47. &--absolute
  48. position: absolute
  49. z-index: $snackbar-absolute-z-index
  50. &--multi-line &__wrapper
  51. min-height: $snackbar-multi-line-wrapper-min-height
  52. &--vertical &__wrapper
  53. flex-direction: column
  54. .v-snackbar__actions
  55. align-self: flex-end
  56. margin-bottom: $snackbar-vertical-action-margin-bottom
  57. &--center
  58. align-items: center
  59. justify-content: center
  60. &--top
  61. align-items: flex-start
  62. &--bottom
  63. align-items: flex-end
  64. &--left,
  65. &--start
  66. justify-content: flex-start
  67. &--right,
  68. &--end
  69. justify-content: flex-end
  70. .v-snackbar-transition
  71. &-enter-active,
  72. &-leave-active
  73. transition-duration: .15s
  74. transition-timing-function: settings.$decelerated-easing
  75. &-enter-active
  76. transition-property: opacity, transform
  77. &-enter-from
  78. opacity: 0
  79. transform: scale($snackbar-transition-scale)
  80. &-leave-active
  81. transition-property: opacity
  82. &-leave-to
  83. opacity: 0