@wizco/fenixds-core 1.0.3 → 1.0.5
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.
- package/esm2022/lib/styles/styles.component.mjs +3 -3
- package/fesm2022/wizco-fenixds-core.mjs +3 -3
- package/package.json +1 -1
- package/styles/core.css +2571 -56
- package/styles/scss/button.scss +14 -4
- package/styles/scss/forms.scss +105 -64
- package/styles/scss/helpers.scss +4241 -0
- package/styles/scss/tooltip.scss +29 -8
package/styles/scss/tooltip.scss
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
[data-tooltip] {
|
|
2
|
-
position: relative;
|
|
2
|
+
position: relative;
|
|
3
|
+
/* opinion 1 */
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
/* Applies to all tooltips */
|
|
6
7
|
[data-tooltip]::before,
|
|
7
8
|
[data-tooltip]::after {
|
|
8
|
-
text-transform: none;
|
|
9
|
-
|
|
9
|
+
text-transform: none;
|
|
10
|
+
/* opinion 2 */
|
|
11
|
+
font-size: .9em;
|
|
12
|
+
/* opinion 3 */
|
|
10
13
|
line-height: 1;
|
|
11
14
|
user-select: none;
|
|
12
15
|
pointer-events: none;
|
|
@@ -14,13 +17,18 @@
|
|
|
14
17
|
display: none;
|
|
15
18
|
opacity: 0;
|
|
16
19
|
}
|
|
20
|
+
|
|
17
21
|
[data-tooltip]::before {
|
|
18
22
|
content: '';
|
|
19
|
-
border: 5px solid transparent;
|
|
20
|
-
|
|
23
|
+
border: 5px solid transparent;
|
|
24
|
+
/* opinion 4 */
|
|
25
|
+
z-index: 1001;
|
|
26
|
+
/* absurdity 1 */
|
|
21
27
|
}
|
|
28
|
+
|
|
22
29
|
[data-tooltip]::after {
|
|
23
|
-
content: attr(data-tooltip);
|
|
30
|
+
content: attr(data-tooltip);
|
|
31
|
+
/* magic! */
|
|
24
32
|
|
|
25
33
|
/* most of the rest of this is opinion */
|
|
26
34
|
text-align: center;
|
|
@@ -39,7 +47,8 @@
|
|
|
39
47
|
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
|
|
40
48
|
background: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
|
|
41
49
|
color: var(--tooltip-color, var(--wco-color-primary-50, #fff));
|
|
42
|
-
z-index: 1000;
|
|
50
|
+
z-index: 1000;
|
|
51
|
+
/* absurdity 2 */
|
|
43
52
|
}
|
|
44
53
|
|
|
45
54
|
/* Make the tooltips respond to hover */
|
|
@@ -61,10 +70,12 @@
|
|
|
61
70
|
border-bottom-width: 0;
|
|
62
71
|
border-top-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
|
|
63
72
|
}
|
|
73
|
+
|
|
64
74
|
[data-tooltip]:not([data-flow])::after,
|
|
65
75
|
[data-tooltip][data-flow^="top"]::after {
|
|
66
76
|
bottom: calc(100% + 5px);
|
|
67
77
|
}
|
|
78
|
+
|
|
68
79
|
[data-tooltip]:not([data-flow])::before,
|
|
69
80
|
[data-tooltip]:not([data-flow])::after,
|
|
70
81
|
[data-tooltip][data-flow^="top"]::before,
|
|
@@ -80,9 +91,11 @@
|
|
|
80
91
|
border-bottom-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
|
|
81
92
|
|
|
82
93
|
}
|
|
94
|
+
|
|
83
95
|
[data-tooltip][data-flow^="bottom"]::after {
|
|
84
96
|
top: calc(100% + 5px);
|
|
85
97
|
}
|
|
98
|
+
|
|
86
99
|
[data-tooltip][data-flow^="bottom"]::before,
|
|
87
100
|
[data-tooltip][data-flow^="bottom"]::after {
|
|
88
101
|
left: 50%;
|
|
@@ -97,6 +110,7 @@
|
|
|
97
110
|
left: calc(0em - 5px);
|
|
98
111
|
transform: translate(-.5em, -50%);
|
|
99
112
|
}
|
|
113
|
+
|
|
100
114
|
[data-tooltip][data-flow^="left"]::after {
|
|
101
115
|
top: 50%;
|
|
102
116
|
right: calc(100% + 5px);
|
|
@@ -111,6 +125,7 @@
|
|
|
111
125
|
right: calc(0em - 5px);
|
|
112
126
|
transform: translate(.5em, -50%);
|
|
113
127
|
}
|
|
128
|
+
|
|
114
129
|
[data-tooltip][data-flow^="right"]::after {
|
|
115
130
|
top: 50%;
|
|
116
131
|
left: calc(100% + 5px);
|
|
@@ -153,27 +168,33 @@
|
|
|
153
168
|
--tooltip-background: var(--wco-color-neutral-50);
|
|
154
169
|
--tooltip-color: var(--wco-color-neutral-900);
|
|
155
170
|
}
|
|
171
|
+
|
|
156
172
|
.tooltip-primary {
|
|
157
173
|
--tooltip-background: var(--wco-color-primary-500);
|
|
158
174
|
--tooltip-color: var(--wco-color-primary-900);
|
|
159
175
|
}
|
|
176
|
+
|
|
160
177
|
.tooltip-secondary {
|
|
161
178
|
--tooltip-background: var(--wco-color-secondary-500);
|
|
162
179
|
--tooltip-color: var(--wco-color-secondary-50);
|
|
163
180
|
}
|
|
181
|
+
|
|
164
182
|
.tooltip-warning {
|
|
165
183
|
--tooltip-background: var(--wco-color-warning-500);
|
|
166
184
|
--tooltip-color: var(--wco-color-warning-extradark);
|
|
167
185
|
}
|
|
186
|
+
|
|
168
187
|
.tooltip-error {
|
|
169
188
|
--tooltip-background: var(--wco-color-danger-500);
|
|
170
189
|
--tooltip-color: var(--wco-color-danger-900-extradark);
|
|
171
190
|
}
|
|
191
|
+
|
|
172
192
|
.tooltip-success {
|
|
173
193
|
--tooltip-background: var(--wco-color-success-500);
|
|
174
194
|
--tooltip-color: var(--wco-color-success-extradark);
|
|
175
195
|
}
|
|
196
|
+
|
|
176
197
|
.tooltip-info {
|
|
177
198
|
--tooltip-background: var(--wco-color-info-500);
|
|
178
199
|
--tooltip-color: var(--wco-color-info-900);
|
|
179
|
-
}
|
|
200
|
+
}
|