@volverjs/style 0.1.9-beta.7 → 0.1.9-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/base.css +1 -1
  2. package/dist/components/vv-alert-group.css +1 -0
  3. package/dist/components/vv-alert.css +1 -1
  4. package/dist/components/vv-dropdown-option.css +1 -1
  5. package/dist/components/vv-input-text.css +1 -1
  6. package/dist/components/vv-select.css +1 -1
  7. package/dist/components/vv-textarea.css +1 -1
  8. package/dist/components.css +1 -1
  9. package/dist/props/input.css +1 -1
  10. package/dist/props.css +1 -1
  11. package/dist/volver.css +1 -1
  12. package/package.json +19 -19
  13. package/src/_config.scss +1 -1
  14. package/src/components/index.scss +1 -1
  15. package/src/components/{vv-toast.scss → vv-alert-group.scss} +2 -2
  16. package/src/settings/_index.scss +1 -1
  17. package/src/settings/_input.scss +19 -19
  18. package/src/settings/components/_vv-alert-group.scss +171 -0
  19. package/src/settings/components/_vv-alert.scss +254 -58
  20. package/src/settings/components/_vv-dropdown-option.scss +6 -2
  21. package/src/settings/components/_vv-input-text.scss +2 -2
  22. package/src/settings/components/_vv-select.scss +3 -1
  23. package/src/settings/components/_vv-textarea.scss +2 -2
  24. package/src/tools/_mixins.scss +1 -1
  25. package/dist/components/vv-toast.css +0 -1
  26. package/src/settings/components/_vv-toast.scss +0 -259
package/src/settings/components/_vv-toast.scss DELETED
@@ -1,259 +0,0 @@
1
- $vv-toast: (
2
- --toast-pie-animation-duration: 3s,
3
- position: relative,
4
- display: flex,
5
- flex-direction: column,
6
- overflow: hidden,
7
- border-radius: var(--rounded),
8
- background-color: var(--color-surface),
9
- box-shadow: var(--shadow-lg),
10
- color: var(--color-word-2),
11
- backdrop-filter: none,
12
- border-width: var(--border),
13
- border-style: solid,
14
- border-color: var(--color-gray),
15
- width: clamp(15vw, 20rem, 80vw),
16
- element: (
17
- header: (
18
- display: flex,
19
- overflow: hidden,
20
- align-items: center,
21
- padding: var(--spacing-10),
22
- color: var(--color-white),
23
- background-color: var(--color-gray),
24
- font-size: var(--text-16),
25
- ),
26
- content: (
27
- padding: var(--spacing-10),
28
- background-color: var(--color-surface-2),
29
- flex-grow: 1,
30
- min-height: 0,
31
- overflow: auto,
32
- font-size: var(--text-14),
33
- ),
34
- close: (
35
- position: absolute,
36
- right: var(--spacing-10),
37
- inline-size: 1.1em,
38
- block-size: 1.1em,
39
- cursor: pointer,
40
- border-radius: var(--rounded),
41
- background-image: var(--bg-close),
42
- background-color: var(--color-surface-2),
43
- background-position: center,
44
- background-size: 70% auto,
45
- background-repeat: no-repeat,
46
- ),
47
- pie: (
48
- position: absolute,
49
- display: block,
50
- right: var(--spacing-10),
51
- width: 1.1em,
52
- height: 1.1em,
53
- background-color: var(--color-white),
54
- border: 1px solid var(--color-white),
55
- border-radius: 50%,
56
- overflow: hidden,
57
- opacity: var(--opacity-80),
58
- cursor: pointer,
59
- pseudo: (
60
- before: (
61
- position: absolute,
62
- top: 0,
63
- width: 50%,
64
- height: 100%,
65
- transform-origin: 100% 50%,
66
- background-color: var(--color-gray),
67
- border-radius: 100% 0 0 100% / 50% 0 0 50%,
68
- will-change: transform,
69
- [animation]: spin var(--toast-pie-animation-duration) linear,
70
- ),
71
- after: (
72
- position: absolute,
73
- top: 0,
74
- width: 50%,
75
- height: 100%,
76
- background-color: var(--color-white),
77
- will-change: opacity,
78
- border-radius: 100% 0 0 100% / 50% 0 0 50%,
79
- [animation]: pie-masks var(--toast-pie-animation-duration)
80
- steps(1, end),
81
- opacity: var(--opacity-0),
82
- ),
83
- ),
84
- ),
85
- pie-mask: (
86
- position: absolute,
87
- top: 0,
88
- width: 50%,
89
- height: 100%,
90
- left: 50%,
91
- background-color: var(--color-gray),
92
- will-change: opacity,
93
- [animation]: pie-masks var(--toast-pie-animation-duration)
94
- steps(1, end) reverse,
95
- z-index: 1,
96
- ),
97
- ),
98
- modifier: (
99
- fixed: (
100
- position: fixed,
101
- z-index: var(--z-toast),
102
- ),
103
- top: (
104
- inset-block: var(--spacing-lg) auto,
105
- ),
106
- right: (
107
- inset-inline: auto var(--spacing-lg),
108
- ),
109
- bottom: (
110
- inset-block: auto var(--spacing-lg),
111
- ),
112
- left: (
113
- inset-inline: var(--spacing-lg) auto,
114
- ),
115
- center: (
116
- inset-inline: 50% auto,
117
- transform: translateX(-50%),
118
- ),
119
- dismissable: (
120
- element: (
121
- header: (
122
- padding-right: calc(var(--spacing-10) * 2 + 1.1em),
123
- ),
124
- ),
125
- ),
126
- success: (
127
- border-color: var(--color-success),
128
- element: (
129
- header: (
130
- background-color: var(--color-success),
131
- ),
132
- content: (
133
- border-color: var(--color-success),
134
- background-color: var(--color-surface-success),
135
- ),
136
- pie: (
137
- pseudo: (
138
- before: (
139
- background-color: var(--color-success),
140
- ),
141
- ),
142
- ),
143
- pie-mask: (
144
- background-color: var(--color-success),
145
- ),
146
- ),
147
- ),
148
- danger: (
149
- border-color: var(--color-danger),
150
- element: (
151
- header: (
152
- background-color: var(--color-danger),
153
- ),
154
- content: (
155
- border-color: var(--color-danger),
156
- background-color: var(--color-surface-danger),
157
- ),
158
- pie: (
159
- pseudo: (
160
- before: (
161
- background-color: var(--color-danger),
162
- ),
163
- ),
164
- ),
165
- pie-mask: (
166
- background-color: var(--color-danger),
167
- ),
168
- ),
169
- ),
170
- warning: (
171
- border-color: var(--color-warning-darken-1),
172
- element: (
173
- header: (
174
- background-color: var(--color-warning-darken-1),
175
- ),
176
- content: (
177
- border-color: var(--color-warning),
178
- background-color: var(--color-surface-warning),
179
- ),
180
- pie: (
181
- pseudo: (
182
- before: (
183
- background-color: var(--color-warning),
184
- ),
185
- ),
186
- ),
187
- pie-mask: (
188
- background-color: var(--color-warning),
189
- ),
190
- ),
191
- ),
192
- info: (
193
- border-color: var(--color-info-darken-1),
194
- element: (
195
- header: (
196
- background-color: var(--color-info-darken-1),
197
- ),
198
- content: (
199
- border-color: var(--color-info),
200
- background-color: var(--color-surface-info),
201
- ),
202
- pie: (
203
- pseudo: (
204
- before: (
205
- background-color: var(--color-info-darken-1),
206
- ),
207
- ),
208
- ),
209
- pie-mask: (
210
- background-color: var(--color-info-darken-1),
211
- ),
212
- ),
213
- ),
214
- accent: (
215
- border-color: var(--color-accent),
216
- element: (
217
- header: (
218
- background-color: var(--color-accent),
219
- ),
220
- content: (
221
- border-color: var(--color-accent),
222
- background-color: var(--color-surface-accent),
223
- ),
224
- pie: (
225
- pseudo: (
226
- before: (
227
- background-color: var(--color-accent),
228
- ),
229
- ),
230
- ),
231
- pie-mask: (
232
- background-color: var(--color-accent),
233
- ),
234
- ),
235
- ),
236
- brand: (
237
- border-color: var(--color-brand),
238
- element: (
239
- header: (
240
- background-color: var(--color-brand),
241
- ),
242
- content: (
243
- border-color: var(--color-brand),
244
- background-color: var(--color-surface-brand),
245
- ),
246
- pie: (
247
- pseudo: (
248
- before: (
249
- background-color: var(--color-brand),
250
- ),
251
- ),
252
- ),
253
- pie-mask: (
254
- background-color: var(--color-brand),
255
- ),
256
- ),
257
- ),
258
- ),
259
- ) !default;