@volverjs/style 0.1.2-beta.18 → 0.1.2-beta.19

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 (37) hide show
  1. package/dist/components/vv-accordion.css +1 -1
  2. package/dist/components/vv-alert.css +1 -1
  3. package/dist/components/vv-avatar.css +1 -1
  4. package/dist/components/vv-badge.css +1 -1
  5. package/dist/components/vv-button.css +1 -1
  6. package/dist/components/vv-nav.css +1 -1
  7. package/dist/components/vv-select.css +1 -1
  8. package/dist/components/vv-text.css +1 -1
  9. package/dist/components/vv-toast.css +1 -1
  10. package/dist/components/vv-tooltip.css +1 -1
  11. package/dist/components.css +1 -1
  12. package/dist/export.css +1 -1
  13. package/dist/props/animation.css +1 -1
  14. package/dist/props/spacing.css +1 -1
  15. package/dist/props.css +1 -1
  16. package/dist/utilities/flexbox.css +1 -1
  17. package/dist/utilities/layout.css +1 -1
  18. package/dist/utilities/sizing.css +1 -1
  19. package/dist/utilities/spacing.css +1 -1
  20. package/dist/utilities.css +1 -1
  21. package/dist/volver.css +1 -1
  22. package/package.json +1 -1
  23. package/src/_preflight.scss +33 -1
  24. package/src/components/vv-tooltip.scss +18 -0
  25. package/src/props/animation.scss +11 -0
  26. package/src/settings/_spacing.scss +1 -0
  27. package/src/settings/components/_vv-accordion.scss +7 -5
  28. package/src/settings/components/_vv-alert.scss +12 -0
  29. package/src/settings/components/_vv-avatar.scss +28 -20
  30. package/src/settings/components/_vv-badge.scss +27 -12
  31. package/src/settings/components/_vv-button.scss +10 -6
  32. package/src/settings/components/_vv-nav.scss +57 -14
  33. package/src/settings/components/_vv-select.scss +2 -1
  34. package/src/settings/components/_vv-text.scss +20 -0
  35. package/src/settings/components/_vv-toast.scss +137 -5
  36. package/src/settings/components/_vv-tooltip.scss +54 -120
  37. package/src/tools/_mixins.scss +2 -1
package/src/settings/components/_vv-tooltip.scss CHANGED
@@ -1,138 +1,72 @@
1
1
  $vv-tooltip: (
2
- position: relative,
3
- display: inline-flex,
4
- align-items: center,
5
- element: (
6
- content: (
7
- opacity: 0,
2
+ opacity: 0,
3
+ display: block,
4
+ position: absolute,
5
+ inset-inline: 100% auto,
6
+ top: 50%,
7
+ transform: translate(var(--spacing-10), -50%),
8
+ z-index: var(--z-tooltip),
9
+ inline-size: max-content,
10
+ max-inline-size: 25ch,
11
+ border-radius: var(--rounded-md),
12
+ padding: var(--spacing-4) var(--spacing-sm),
13
+ background: var(--color-gray-darken-4),
14
+ font-size: var(--text-12),
15
+ font-weight: var(--font-normal),
16
+ color: var(--color-gray-lighten-5),
17
+ text-align: center,
18
+ box-shadow: var(--shadow-md),
19
+ will-change: opacity,
20
+ transition: opacity 0.3s ease-in-out,
21
+ pseudo: (
22
+ after: (
8
23
  position: absolute,
9
- z-index: var(--z-tooltip),
10
- display: block,
11
- min-width: var(--spacing-160),
12
- border-radius: var(--rounded-md),
13
- border-width: 2px,
24
+ z-index: -1,
25
+ inset-inline: 0 auto,
26
+ inset-block: 50% auto,
27
+ transform: translate(-100%, -50%),
28
+ border-width: var(--spacing-8),
14
29
  border-style: solid,
15
- border-color: var(--color-gray-darken-4),
16
- padding: var(--spacing-4) var(--spacing-sm),
17
- margin: 0 0 0 var(--spacing-xs),
18
- background: var(--color-gray-darken-4),
19
- font-size: var(--text-12),
20
- font-weight: var(--font-normal),
21
- color: var(--color-gray-lighten-5),
22
- text-align: center,
23
- inset-inline: 100% auto,
24
- inset-block: auto,
25
- box-shadow: var(--shadow-md),
26
- pseudo: (
27
- after: (
28
- position: absolute,
29
- z-index: -1,
30
- inset-inline: -10% auto,
31
- inset-block: 50% auto,
32
- transform: translateY(-50%),
33
- border-width: 10px,
34
- border-style: solid,
35
- border-color: transparent var(--color-gray-darken-4)
36
- transparent transparent,
37
- ),
38
- ),
30
+ border-color: transparent var(--color-gray-darken-4) transparent
31
+ transparent,
39
32
  ),
40
33
  ),
41
34
  modifier: (
42
- top: (
43
- element: (
44
- content: (
45
- margin: 0 0 var(--spacing-xs) 0,
46
- inset-inline: auto,
47
- inset-block: auto 100%,
48
- pseudo: (
49
- after: (
50
- position: absolute,
51
- z-index: -1,
52
- inset-inline: 45% auto,
53
- inset-block: 130% auto,
54
- border-width: 10px,
55
- border-style: solid,
56
- border-color: var(--color-gray-darken-4) transparent
57
- transparent,
58
- ),
59
- ),
60
- ),
61
- ),
35
+ visible: (
36
+ opacity: 1,
62
37
  ),
63
- right: (
64
- element: (
65
- content: (
66
- margin: 0 0 0 var(--spacing-xs),
67
- inset-inline: 100% auto,
68
- inset-block: auto,
69
- pseudo: (
70
- after: (
71
- position: absolute,
72
- z-index: -1,
73
- inset-inline: -10% auto,
74
- inset-block: 50% auto,
75
- transform: translateY(-50%),
76
- border-width: 10px,
77
- border-style: solid,
78
- border-color: transparent var(--color-gray-darken-4)
79
- transparent transparent,
80
- ),
81
- ),
38
+ top: (
39
+ inset-inline: 50% 0,
40
+ inset-block: auto 100%,
41
+ transform: translate(-50%, calc(var(--spacing-10) * -1)),
42
+ pseudo: (
43
+ after: (
44
+ inset-inline: 50% auto,
45
+ inset-block: 100% auto,
46
+ transform: translate(-50%, 0) rotate(-90deg),
82
47
  ),
83
48
  ),
84
49
  ),
85
50
  bottom: (
86
- element: (
87
- content: (
88
- margin: var(--spacing-xs) 0 0 0,
89
- inset-inline: auto,
90
- inset-block: 100% auto,
91
- pseudo: (
92
- after: (
93
- position: absolute,
94
- z-index: -1,
95
- inset-inline: 45% auto,
96
- inset-block: auto 50%,
97
- border-width: 10px,
98
- border-style: solid,
99
- border-color: transparent transparent
100
- var(--color-gray-darken-4) transparent,
101
- ),
102
- ),
51
+ inset-inline: 50% 0,
52
+ inset-block: 100% auto,
53
+ transform: translate(-50%, var(--spacing-10)),
54
+ pseudo: (
55
+ after: (
56
+ inset-inline: 50% auto,
57
+ inset-block: 0 auto,
58
+ transform: translate(-50%, -100%) rotate(90deg),
103
59
  ),
104
60
  ),
105
61
  ),
106
62
  left: (
107
- element: (
108
- content: (
109
- margin: 0 var(--spacing-xs) 0 0,
110
- inset-inline: auto 100%,
111
- inset-block: auto,
112
- pseudo: (
113
- after: (
114
- position: absolute,
115
- z-index: -1,
116
- inset-inline: auto -10%,
117
- inset-block: 50% auto,
118
- transform: translateY(-50%),
119
- border-width: 10px,
120
- border-style: solid,
121
- border-color: transparent transparent transparent
122
- var(--color-gray-darken-4),
123
- ),
124
- ),
125
- ),
126
- ),
127
- ),
128
- ),
129
- state: (
130
- hover: (
131
- element: (
132
- content: (
133
- opacity: 1,
134
- will-change: opacity,
135
- transition: opacity 0.3s ease-in-out,
63
+ inset-inline: auto 100%,
64
+ transform: translate(calc(var(--spacing-10) * -1), -50%),
65
+ pseudo: (
66
+ after: (
67
+ position: absolute,
68
+ inset-inline: auto 0,
69
+ transform: translate(100%, -50%) rotate(180deg),
136
70
  ),
137
71
  ),
138
72
  ),
package/src/tools/_mixins.scss CHANGED
@@ -699,7 +699,8 @@
699
699
  -moz-progress-bar,
700
700
  -moz-progress-value,
701
701
  -moz-inner-element,
702
- -webkit-details-marker
702
+ -webkit-details-marker,
703
+ -webkit-scrollbar
703
704
  ),
704
705
  $pseudo-element
705
706
  )