UNPKG

vuetify

Version:

Vue.js 2 Semantic Component Framework

vuetifyjs.com

vuetifyjs/vuetify

127 lines (104 loc) • 2.42 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
@import '../bootstrap' .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 @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%)