@nuvoui/core 1.4.7 → 1.5.1

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 (8) hide show
  1. package/dist/nuvoui.css +461 -507
  2. package/dist/nuvoui.css.map +1 -1
  3. package/dist/nuvoui.min.css +1 -1
  4. package/dist/nuvoui.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/base/_base.scss +200 -201
  7. package/src/styles/base/_reset.scss +131 -127
  8. package/src/styles/components/_tooltips.scss +217 -215
package/src/styles/components/_tooltips.scss CHANGED
@@ -24,248 +24,250 @@
24
24
  }
25
25
 
26
26
  @if fn-flags.feature-enabled("tooltips") {
27
- // Apply variables based on parent selector
28
- @if config-flags.$parent-selector == "" {
29
- :root {
30
- @include tooltip-variables;
27
+ @layer components {
28
+ // Apply variables based on parent selector
29
+ @if config-flags.$parent-selector == "" {
30
+ :root {
31
+ @include tooltip-variables;
32
+ }
33
+ } @else {
34
+ #{config-flags.$parent-selector} {
35
+ @include tooltip-variables;
36
+ }
31
37
  }
32
- } @else {
33
- #{config-flags.$parent-selector} {
34
- @include tooltip-variables;
35
- }
36
- }
37
-
38
- #{config-flags.$parent-selector} [data-tooltip][role~="tooltip"] {
39
- position: relative;
40
-
41
- &::before,
42
- &::after {
43
- transform: translate3d(0, 0, 0);
44
- backface-visibility: hidden;
45
- will-change: transform;
46
- opacity: 0;
47
- pointer-events: none;
48
- transition:
49
- opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay),
50
- transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
51
- position: absolute;
52
- box-sizing: border-box;
53
- z-index: 10;
54
- transform-origin: top;
55
- }
56
-
57
- &::before {
58
- background-size: 100% auto !important;
59
- content: "";
60
- }
61
-
62
- &::after {
63
- background: var(--tooltip-bg);
64
- box-shadow: 0 3px 7px var(--tooltip-shadow-color);
65
- border-radius: var(--tooltip-border-radius);
66
- color: var(--tooltip-text-color);
67
- content: attr(data-tooltip);
68
- font-size: var(--microtip-font-size);
69
- font-weight: var(--microtip-font-weight);
70
- text-transform: var(--microtip-text-transform);
71
- padding: 0.5em 1em;
72
- white-space: nowrap;
73
- box-sizing: content-box;
74
- }
75
-
76
- &:hover::before,
77
- &:hover::after,
78
- &:focus::before,
79
- &:focus::after {
80
- opacity: 1;
81
- pointer-events: auto;
82
- }
83
- }
84
-
85
- // Top position tooltips
86
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
87
- &::before {
88
- border-left: 9px solid transparent;
89
- border-right: 9px solid transparent;
90
- border-top: 6px solid var(--tooltip-bg);
91
- height: 0;
92
- width: 0;
93
- margin-bottom: 6px;
94
- transform: translate3d(-50%, 0, 0);
95
- bottom: 100%;
96
- left: 50%;
97
- z-index: 999;
98
- }
99
-
100
- &::after {
101
- margin-bottom: 11px;
102
- transform: translate3d(-50%, 0, 0);
103
- bottom: 100%;
104
- left: 50%;
105
- }
106
-
107
- &:hover::before {
108
- transform: translate3d(-50%, -5px, 0);
109
- }
110
-
111
- &:hover::after {
112
- transform: translate3d(-50%, -5px, 0);
113
- }
114
- }
115
38
 
116
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
117
- &::after {
118
- transform: translate3d(calc(-100% + 16px), 0, 0);
119
- bottom: 100%;
39
+ #{config-flags.$parent-selector} [data-tooltip][role~="tooltip"] {
40
+ position: relative;
41
+
42
+ &::before,
43
+ &::after {
44
+ transform: translate3d(0, 0, 0);
45
+ backface-visibility: hidden;
46
+ will-change: transform;
47
+ opacity: 0;
48
+ pointer-events: none;
49
+ transition:
50
+ opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay),
51
+ transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
52
+ position: absolute;
53
+ box-sizing: border-box;
54
+ z-index: 10;
55
+ transform-origin: top;
56
+ }
57
+
58
+ &::before {
59
+ background-size: 100% auto !important;
60
+ content: "";
61
+ }
62
+
63
+ &::after {
64
+ background: var(--tooltip-bg);
65
+ box-shadow: 0 3px 7px var(--tooltip-shadow-color);
66
+ border-radius: var(--tooltip-border-radius);
67
+ color: var(--tooltip-text-color);
68
+ content: attr(data-tooltip);
69
+ font-size: var(--microtip-font-size);
70
+ font-weight: var(--microtip-font-weight);
71
+ text-transform: var(--microtip-text-transform);
72
+ padding: 0.5em 1em;
73
+ white-space: nowrap;
74
+ box-sizing: content-box;
75
+ }
76
+
77
+ &:hover::before,
78
+ &:hover::after,
79
+ &:focus::before,
80
+ &:focus::after {
81
+ opacity: 1;
82
+ pointer-events: auto;
83
+ }
120
84
  }
121
85
 
122
- &:hover::after {
123
- transform: translate3d(calc(-100% + 16px), -5px, 0);
86
+ // Top position tooltips
87
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
88
+ &::before {
89
+ border-left: 9px solid transparent;
90
+ border-right: 9px solid transparent;
91
+ border-top: 6px solid var(--tooltip-bg);
92
+ height: 0;
93
+ width: 0;
94
+ margin-bottom: 6px;
95
+ transform: translate3d(-50%, 0, 0);
96
+ bottom: 100%;
97
+ left: 50%;
98
+ z-index: 999;
99
+ }
100
+
101
+ &::after {
102
+ margin-bottom: 11px;
103
+ transform: translate3d(-50%, 0, 0);
104
+ bottom: 100%;
105
+ left: 50%;
106
+ }
107
+
108
+ &:hover::before {
109
+ transform: translate3d(-50%, -5px, 0);
110
+ }
111
+
112
+ &:hover::after {
113
+ transform: translate3d(-50%, -5px, 0);
114
+ }
124
115
  }
125
- }
126
116
 
127
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
128
- &::after {
129
- transform: translate3d(calc(0% + -16px), 0, 0);
130
- bottom: 100%;
131
- }
132
-
133
- &:hover::after {
134
- transform: translate3d(calc(0% + -16px), -5px, 0);
135
- }
136
- }
137
-
138
- // Bottom position tooltips
139
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
140
- &::before {
141
- border-left: 9px solid transparent;
142
- border-right: 9px solid transparent;
143
- border-bottom: 6px solid var(--tooltip-bg);
144
- height: 0;
145
- width: 0;
146
- margin-top: 5px;
147
- margin-bottom: 0;
148
- transform: translate3d(-50%, -10px, 0);
149
- bottom: auto;
150
- left: 50%;
151
- top: 100%;
152
- z-index: 999;
153
- }
117
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
118
+ &::after {
119
+ transform: translate3d(calc(-100% + 16px), 0, 0);
120
+ bottom: 100%;
121
+ }
154
122
 
155
- &::after {
156
- margin-top: 11px;
157
- transform: translate3d(-50%, -10px, 0);
158
- top: 100%;
159
- left: 50%;
123
+ &:hover::after {
124
+ transform: translate3d(calc(-100% + 16px), -5px, 0);
125
+ }
160
126
  }
161
127
 
162
- &:hover::before {
163
- transform: translate3d(-50%, 0, 0);
164
- }
128
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
129
+ &::after {
130
+ transform: translate3d(calc(0% + -16px), 0, 0);
131
+ bottom: 100%;
132
+ }
165
133
 
166
- &:hover::after {
167
- transform: translate3d(-50%, 0, 0);
134
+ &:hover::after {
135
+ transform: translate3d(calc(0% + -16px), -5px, 0);
136
+ }
168
137
  }
169
- }
170
138
 
171
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
172
- &::after {
173
- transform: translate3d(calc(-100% + 16px), -10px, 0);
174
- top: 100%;
139
+ // Bottom position tooltips
140
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
141
+ &::before {
142
+ border-left: 9px solid transparent;
143
+ border-right: 9px solid transparent;
144
+ border-bottom: 6px solid var(--tooltip-bg);
145
+ height: 0;
146
+ width: 0;
147
+ margin-top: 5px;
148
+ margin-bottom: 0;
149
+ transform: translate3d(-50%, -10px, 0);
150
+ bottom: auto;
151
+ left: 50%;
152
+ top: 100%;
153
+ z-index: 999;
154
+ }
155
+
156
+ &::after {
157
+ margin-top: 11px;
158
+ transform: translate3d(-50%, -10px, 0);
159
+ top: 100%;
160
+ left: 50%;
161
+ }
162
+
163
+ &:hover::before {
164
+ transform: translate3d(-50%, 0, 0);
165
+ }
166
+
167
+ &:hover::after {
168
+ transform: translate3d(-50%, 0, 0);
169
+ }
175
170
  }
176
171
 
177
- &:hover::after {
178
- transform: translate3d(calc(-100% + 16px), 0, 0);
179
- }
180
- }
172
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
173
+ &::after {
174
+ transform: translate3d(calc(-100% + 16px), -10px, 0);
175
+ top: 100%;
176
+ }
181
177
 
182
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
183
- &::after {
184
- transform: translate3d(calc(0% + -16px), -10px, 0);
185
- top: 100%;
178
+ &:hover::after {
179
+ transform: translate3d(calc(-100% + 16px), 0, 0);
180
+ }
186
181
  }
187
182
 
188
- &:hover::after {
189
- transform: translate3d(calc(0% + -16px), 0, 0);
190
- }
191
- }
192
-
193
- // Left position tooltips
194
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
195
- &::before,
196
- &::after {
197
- inset: auto auto auto 100%;
198
- left: auto; // Remove any left positioning
199
- right: 100%; // Position to the left of the element
200
- top: 50%;
201
- transform: translate3d(10px, -50%, 0);
202
- }
183
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
184
+ &::after {
185
+ transform: translate3d(calc(0% + -16px), -10px, 0);
186
+ top: 100%;
187
+ }
203
188
 
204
- &::before {
205
- border-top: 9px solid transparent;
206
- border-bottom: 9px solid transparent;
207
- border-left: 6px solid var(--tooltip-bg);
208
- height: 0;
209
- width: 0;
210
- margin-right: 5px;
211
- margin-bottom: 0;
212
- z-index: 999;
189
+ &:hover::after {
190
+ transform: translate3d(calc(0% + -16px), 0, 0);
191
+ }
213
192
  }
214
193
 
215
- &::after {
216
- margin-right: 11px;
194
+ // Left position tooltips
195
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
196
+ &::before,
197
+ &::after {
198
+ inset: auto auto auto 100%;
199
+ left: auto; // Remove any left positioning
200
+ right: 100%; // Position to the left of the element
201
+ top: 50%;
202
+ transform: translate3d(10px, -50%, 0);
203
+ }
204
+
205
+ &::before {
206
+ border-top: 9px solid transparent;
207
+ border-bottom: 9px solid transparent;
208
+ border-left: 6px solid var(--tooltip-bg);
209
+ height: 0;
210
+ width: 0;
211
+ margin-right: 5px;
212
+ margin-bottom: 0;
213
+ z-index: 999;
214
+ }
215
+
216
+ &::after {
217
+ margin-right: 11px;
218
+ }
219
+
220
+ &:hover::before,
221
+ &:hover::after {
222
+ transform: translate3d(0, -50%, 0);
223
+ }
217
224
  }
218
225
 
219
- &:hover::before,
220
- &:hover::after {
221
- transform: translate3d(0, -50%, 0);
222
- }
223
- }
224
-
225
- // Right position tooltips
226
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
227
- &::before,
228
- &::after {
229
- bottom: auto;
230
- left: 100%;
231
- top: 50%;
232
- transform: translate3d(-10px, -50%, 0);
226
+ // Right position tooltips
227
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
228
+ &::before,
229
+ &::after {
230
+ bottom: auto;
231
+ left: 100%;
232
+ top: 50%;
233
+ transform: translate3d(-10px, -50%, 0);
234
+ }
235
+
236
+ &::before {
237
+ border-top: 9px solid transparent;
238
+ border-bottom: 9px solid transparent;
239
+ border-right: 6px solid var(--tooltip-bg);
240
+ height: 0;
241
+ width: 0;
242
+ margin-bottom: 0;
243
+ margin-left: 5px;
244
+ z-index: 999;
245
+ }
246
+
247
+ &::after {
248
+ margin-left: 11px;
249
+ }
250
+
251
+ &:hover::before,
252
+ &:hover::after {
253
+ transform: translate3d(0, -50%, 0);
254
+ }
233
255
  }
234
256
 
235
- &::before {
236
- border-top: 9px solid transparent;
237
- border-bottom: 9px solid transparent;
238
- border-right: 6px solid var(--tooltip-bg);
239
- height: 0;
240
- width: 0;
241
- margin-bottom: 0;
242
- margin-left: 5px;
243
- z-index: 999;
257
+ // Tooltip sizes
258
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
259
+ white-space: initial;
260
+ width: var(--tooltip-small-width);
244
261
  }
245
262
 
246
- &::after {
247
- margin-left: 11px;
263
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
264
+ white-space: initial;
265
+ width: var(--tooltip-medium-width);
248
266
  }
249
267
 
250
- &:hover::before,
251
- &:hover::after {
252
- transform: translate3d(0, -50%, 0);
268
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
269
+ white-space: initial;
270
+ width: var(--tooltip-large-width);
253
271
  }
254
- }
255
-
256
- // Tooltip sizes
257
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
258
- white-space: initial;
259
- width: var(--tooltip-small-width);
260
- }
261
-
262
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
263
- white-space: initial;
264
- width: var(--tooltip-medium-width);
265
- }
266
-
267
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
268
- white-space: initial;
269
- width: var(--tooltip-large-width);
270
- }
272
+ } // end @layer components
271
273
  }