VSnackbar.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. .v-snackbar {
  2. justify-content: center;
  3. z-index: 10000;
  4. margin: 8px;
  5. margin-inline-end: calc(8px + var(--v-scrollbar-offset));
  6. padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left);
  7. }
  8. .v-snackbar:not(.v-snackbar--center):not(.v-snackbar--top) {
  9. align-items: flex-end;
  10. }
  11. .v-snackbar__wrapper {
  12. align-items: center;
  13. display: flex;
  14. max-width: 672px;
  15. min-height: 48px;
  16. min-width: 344px;
  17. overflow: hidden;
  18. padding: 0;
  19. }
  20. .v-snackbar__wrapper {
  21. border-radius: 4px;
  22. }
  23. .v-snackbar--variant-plain, .v-snackbar--variant-outlined, .v-snackbar--variant-text, .v-snackbar--variant-tonal {
  24. background: transparent;
  25. color: inherit;
  26. }
  27. .v-snackbar--variant-plain {
  28. opacity: 0.62;
  29. }
  30. .v-snackbar--variant-plain:focus, .v-snackbar--variant-plain:hover {
  31. opacity: 1;
  32. }
  33. .v-snackbar--variant-plain .v-snackbar__overlay {
  34. display: none;
  35. }
  36. .v-snackbar--variant-elevated, .v-snackbar--variant-flat {
  37. background: rgb(var(--v-theme-surface-variant));
  38. color: rgb(var(--v-theme-on-surface-variant));
  39. }
  40. .v-snackbar--variant-elevated {
  41. box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 6px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 18px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
  42. }
  43. .v-snackbar--variant-flat {
  44. box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
  45. }
  46. .v-snackbar--variant-outlined {
  47. border: thin solid currentColor;
  48. }
  49. .v-snackbar--variant-text .v-snackbar__overlay {
  50. background: currentColor;
  51. }
  52. .v-snackbar--variant-tonal .v-snackbar__underlay {
  53. background: currentColor;
  54. opacity: var(--v-activated-opacity);
  55. border-radius: inherit;
  56. top: 0;
  57. right: 0;
  58. bottom: 0;
  59. left: 0;
  60. pointer-events: none;
  61. }
  62. .v-snackbar .v-snackbar__underlay {
  63. position: absolute;
  64. }
  65. .v-snackbar__content {
  66. flex-grow: 1;
  67. font-size: 0.875rem;
  68. font-weight: 400;
  69. letter-spacing: 0.0178571429em;
  70. line-height: 1.425;
  71. margin-right: auto;
  72. padding: 14px 16px;
  73. text-align: initial;
  74. }
  75. .v-snackbar__actions {
  76. align-items: center;
  77. align-self: center;
  78. display: flex;
  79. margin-inline-end: 8px;
  80. }
  81. .v-snackbar__actions > .v-btn {
  82. padding: 0 8px;
  83. min-width: auto;
  84. }
  85. .v-snackbar__timer {
  86. width: 100%;
  87. position: absolute;
  88. top: 0;
  89. }
  90. .v-snackbar__timer .v-progress-linear {
  91. transition: 0.2s linear;
  92. }
  93. .v-snackbar--absolute {
  94. position: absolute;
  95. z-index: 1;
  96. }
  97. .v-snackbar--multi-line .v-snackbar__wrapper {
  98. min-height: 68px;
  99. }
  100. .v-snackbar--vertical .v-snackbar__wrapper {
  101. flex-direction: column;
  102. }
  103. .v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
  104. align-self: flex-end;
  105. margin-bottom: 8px;
  106. }
  107. .v-snackbar--center {
  108. align-items: center;
  109. justify-content: center;
  110. }
  111. .v-snackbar--top {
  112. align-items: flex-start;
  113. }
  114. .v-snackbar--bottom {
  115. align-items: flex-end;
  116. }
  117. .v-snackbar--left, .v-snackbar--start {
  118. justify-content: flex-start;
  119. }
  120. .v-snackbar--right, .v-snackbar--end {
  121. justify-content: flex-end;
  122. }
  123. .v-snackbar-transition-enter-active, .v-snackbar-transition-leave-active {
  124. transition-duration: 0.15s;
  125. transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  126. }
  127. .v-snackbar-transition-enter-active {
  128. transition-property: opacity, transform;
  129. }
  130. .v-snackbar-transition-enter-from {
  131. opacity: 0;
  132. transform: scale(0.8);
  133. }
  134. .v-snackbar-transition-leave-active {
  135. transition-property: opacity;
  136. }
  137. .v-snackbar-transition-leave-to {
  138. opacity: 0;
  139. }