@salesforcedevs/dx-components 0.79.2 → 1.0.0

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/tooltip/microtip.css +105 -101
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.79.2",
3
+ "version": "1.0.0",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/tooltip/microtip.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* Code generated by scripts/postinstall.js DO NOT EDIT*/
2
2
 
3
+
3
4
  /* -------------------------------------------------------------------
4
5
  Microtip
5
6
 
@@ -15,251 +16,254 @@
15
16
  3. Position Modifiers
16
17
  --------------------------------------------------------------------*/
17
18
 
19
+
18
20
  /* ------------------------------------------------
19
21
  [1] Base Styles
20
22
  -------------------------------------------------*/
21
23
 
22
24
  [aria-label][role~="tooltip"] {
23
- position: relative;
25
+ position: relative;
24
26
  }
25
27
 
26
28
  [aria-label][role~="tooltip"]::before,
27
29
  [aria-label][role~="tooltip"]::after {
28
- transform: translate3d(0, 0, 0);
29
- -webkit-backface-visibility: hidden;
30
- backface-visibility: hidden;
31
- will-change: transform;
32
- opacity: 0;
33
- pointer-events: none;
34
- transition: all var(--microtip-transition-duration, 0.18s)
35
- var(--microtip-transition-easing, ease-in-out)
36
- var(--microtip-transition-delay, 0s);
37
- position: absolute;
38
- box-sizing: border-box;
39
- z-index: 10;
40
- transform-origin: top;
30
+ transform: translate3d(0, 0, 0);
31
+ -webkit-backface-visibility: hidden;
32
+ backface-visibility: hidden;
33
+ will-change: transform;
34
+ opacity: 0;
35
+ pointer-events: none;
36
+ transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
37
+ position: absolute;
38
+ box-sizing: border-box;
39
+ z-index: 10;
40
+ transform-origin: top;
41
41
  }
42
42
 
43
43
  [aria-label][role~="tooltip"]::before {
44
- background-size: 100% auto !important;
45
- content: "";
44
+ background-size: 100% auto !important;
45
+ content: "";
46
46
  }
47
47
 
48
48
  [aria-label][role~="tooltip"]::after {
49
- background: rgba(17, 17, 17, 0.9);
50
- border-radius: 4px;
51
- color: #ffffff;
52
- content: attr(aria-label);
53
- font-size: var(--microtip-font-size, 13px);
54
- font-weight: var(--microtip-font-weight, normal);
55
- text-transform: var(--microtip-text-transform, none);
56
- padding: 0.5em 1em;
57
- white-space: nowrap;
58
- box-sizing: content-box;
49
+ background: rgba(17, 17, 17, .9);
50
+ border-radius: 4px;
51
+ color: #ffffff;
52
+ content: attr(aria-label);
53
+ font-size: var(--microtip-font-size, 13px);
54
+ font-weight: var(--microtip-font-weight, normal);
55
+ text-transform: var(--microtip-text-transform, none);
56
+ padding: .5em 1em;
57
+ white-space: nowrap;
58
+ box-sizing: content-box;
59
59
  }
60
60
 
61
61
  [aria-label][role~="tooltip"]:hover::before,
62
62
  [aria-label][role~="tooltip"]:hover::after,
63
63
  [aria-label][role~="tooltip"]:focus::before,
64
64
  [aria-label][role~="tooltip"]:focus::after {
65
- opacity: 1;
66
- pointer-events: auto;
65
+ opacity: 1;
66
+ pointer-events: auto;
67
67
  }
68
68
 
69
+
70
+
69
71
  /* ------------------------------------------------
70
72
  [2] Position Modifiers
71
73
  -------------------------------------------------*/
72
74
 
73
75
  [role~="tooltip"][data-microtip-position|="top"]::before {
74
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
75
- no-repeat;
76
- height: 6px;
77
- width: 18px;
78
- margin-bottom: 5px;
76
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
77
+ height: 6px;
78
+ width: 18px;
79
+ margin-bottom: 5px;
79
80
  }
80
81
 
81
82
  [role~="tooltip"][data-microtip-position|="top"]::after {
82
- margin-bottom: 11px;
83
+ margin-bottom: 11px;
83
84
  }
84
85
 
85
86
  [role~="tooltip"][data-microtip-position|="top"]::before {
86
- transform: translate3d(-50%, 0, 0);
87
- bottom: 100%;
88
- left: 50%;
87
+ transform: translate3d(-50%, 0, 0);
88
+ bottom: 100%;
89
+ left: 50%;
89
90
  }
90
91
 
91
92
  [role~="tooltip"][data-microtip-position|="top"]:hover::before {
92
- transform: translate3d(-50%, -5px, 0);
93
+ transform: translate3d(-50%, -5px, 0);
93
94
  }
94
95
 
95
96
  [role~="tooltip"][data-microtip-position|="top"]::after {
96
- transform: translate3d(-50%, 0, 0);
97
- bottom: 100%;
98
- left: 50%;
97
+ transform: translate3d(-50%, 0, 0);
98
+ bottom: 100%;
99
+ left: 50%;
99
100
  }
100
101
 
101
102
  [role~="tooltip"][data-microtip-position="top"]:hover::after {
102
- transform: translate3d(-50%, -5px, 0);
103
+ transform: translate3d(-50%, -5px, 0);
103
104
  }
104
105
 
105
106
  /* ------------------------------------------------
106
107
  [2.1] Top Left
107
108
  -------------------------------------------------*/
108
109
  [role~="tooltip"][data-microtip-position="top-left"]::after {
109
- transform: translate3d(calc(-100% + 16px), 0, 0);
110
- bottom: 100%;
110
+ transform: translate3d(calc(-100% + 16px), 0, 0);
111
+ bottom: 100%;
111
112
  }
112
113
 
113
114
  [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
114
- transform: translate3d(calc(-100% + 16px), -5px, 0);
115
+ transform: translate3d(calc(-100% + 16px), -5px, 0);
115
116
  }
116
117
 
118
+
117
119
  /* ------------------------------------------------
118
120
  [2.2] Top Right
119
121
  -------------------------------------------------*/
120
122
  [role~="tooltip"][data-microtip-position="top-right"]::after {
121
- transform: translate3d(calc(0% + -16px), 0, 0);
122
- bottom: 100%;
123
+ transform: translate3d(calc(0% + -16px), 0, 0);
124
+ bottom: 100%;
123
125
  }
124
126
 
125
127
  [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
126
- transform: translate3d(calc(0% + -16px), -5px, 0);
128
+ transform: translate3d(calc(0% + -16px), -5px, 0);
127
129
  }
128
130
 
131
+
129
132
  /* ------------------------------------------------
130
133
  [2.3] Bottom
131
134
  -------------------------------------------------*/
132
135
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
133
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
134
- no-repeat;
135
- height: 6px;
136
- width: 18px;
137
- margin-top: 5px;
138
- margin-bottom: 0;
136
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
137
+ height: 6px;
138
+ width: 18px;
139
+ margin-top: 5px;
140
+ margin-bottom: 0;
139
141
  }
140
142
 
141
143
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
142
- margin-top: 11px;
144
+ margin-top: 11px;
143
145
  }
144
146
 
145
147
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
146
- transform: translate3d(-50%, -10px, 0);
147
- bottom: auto;
148
- left: 50%;
149
- top: 100%;
148
+ transform: translate3d(-50%, -10px, 0);
149
+ bottom: auto;
150
+ left: 50%;
151
+ top: 100%;
150
152
  }
151
153
 
152
154
  [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
153
- transform: translate3d(-50%, 0, 0);
155
+ transform: translate3d(-50%, 0, 0);
154
156
  }
155
157
 
156
158
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
157
- transform: translate3d(-50%, -10px, 0);
158
- top: 100%;
159
- left: 50%;
159
+ transform: translate3d(-50%, -10px, 0);
160
+ top: 100%;
161
+ left: 50%;
160
162
  }
161
163
 
162
164
  [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
163
- transform: translate3d(-50%, 0, 0);
165
+ transform: translate3d(-50%, 0, 0);
164
166
  }
165
167
 
168
+
166
169
  /* ------------------------------------------------
167
170
  [2.4] Bottom Left
168
171
  -------------------------------------------------*/
169
172
  [role~="tooltip"][data-microtip-position="bottom-left"]::after {
170
- transform: translate3d(calc(-100% + 16px), -10px, 0);
171
- top: 100%;
173
+ transform: translate3d(calc(-100% + 16px), -10px, 0);
174
+ top: 100%;
172
175
  }
173
176
 
174
177
  [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
175
- transform: translate3d(calc(-100% + 16px), 0, 0);
178
+ transform: translate3d(calc(-100% + 16px), 0, 0);
176
179
  }
177
180
 
181
+
178
182
  /* ------------------------------------------------
179
183
  [2.5] Bottom Right
180
184
  -------------------------------------------------*/
181
185
  [role~="tooltip"][data-microtip-position="bottom-right"]::after {
182
- transform: translate3d(calc(0% + -16px), -10px, 0);
183
- top: 100%;
186
+ transform: translate3d(calc(0% + -16px), -10px, 0);
187
+ top: 100%;
184
188
  }
185
189
 
186
190
  [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
187
- transform: translate3d(calc(0% + -16px), 0, 0);
191
+ transform: translate3d(calc(0% + -16px), 0, 0);
188
192
  }
189
193
 
194
+
190
195
  /* ------------------------------------------------
191
196
  [2.6] Left
192
197
  -------------------------------------------------*/
193
198
  [role~="tooltip"][data-microtip-position="left"]::before,
194
199
  [role~="tooltip"][data-microtip-position="left"]::after {
195
- bottom: auto;
196
- left: auto;
197
- right: 100%;
198
- top: 50%;
199
- transform: translate3d(10px, -50%, 0);
200
+ bottom: auto;
201
+ left: auto;
202
+ right: 100%;
203
+ top: 50%;
204
+ transform: translate3d(10px, -50%, 0);
200
205
  }
201
206
 
202
207
  [role~="tooltip"][data-microtip-position="left"]::before {
203
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
204
- no-repeat;
205
- height: 18px;
206
- width: 6px;
207
- margin-right: 5px;
208
- margin-bottom: 0;
208
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
209
+ height: 18px;
210
+ width: 6px;
211
+ margin-right: 5px;
212
+ margin-bottom: 0;
209
213
  }
210
214
 
211
215
  [role~="tooltip"][data-microtip-position="left"]::after {
212
- margin-right: 11px;
216
+ margin-right: 11px;
213
217
  }
214
218
 
215
219
  [role~="tooltip"][data-microtip-position="left"]:hover::before,
216
220
  [role~="tooltip"][data-microtip-position="left"]:hover::after {
217
- transform: translate3d(0, -50%, 0);
221
+ transform: translate3d(0, -50%, 0);
218
222
  }
219
223
 
224
+
220
225
  /* ------------------------------------------------
221
226
  [2.7] Right
222
227
  -------------------------------------------------*/
223
228
  [role~="tooltip"][data-microtip-position="right"]::before,
224
229
  [role~="tooltip"][data-microtip-position="right"]::after {
225
- bottom: auto;
226
- left: 100%;
227
- top: 50%;
228
- transform: translate3d(-10px, -50%, 0);
230
+ bottom: auto;
231
+ left: 100%;
232
+ top: 50%;
233
+ transform: translate3d(-10px, -50%, 0);
229
234
  }
230
235
 
231
236
  [role~="tooltip"][data-microtip-position="right"]::before {
232
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
233
- no-repeat;
234
- height: 18px;
235
- width: 6px;
236
- margin-bottom: 0;
237
- margin-left: 5px;
237
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
238
+ height: 18px;
239
+ width: 6px;
240
+ margin-bottom: 0;
241
+ margin-left: 5px;
238
242
  }
239
243
 
240
244
  [role~="tooltip"][data-microtip-position="right"]::after {
241
- margin-left: 11px;
245
+ margin-left: 11px;
242
246
  }
243
247
 
244
248
  [role~="tooltip"][data-microtip-position="right"]:hover::before,
245
249
  [role~="tooltip"][data-microtip-position="right"]:hover::after {
246
- transform: translate3d(0, -50%, 0);
250
+ transform: translate3d(0, -50%, 0);
247
251
  }
248
252
 
249
253
  /* ------------------------------------------------
250
254
  [3] Size
251
255
  -------------------------------------------------*/
252
256
  [role~="tooltip"][data-microtip-size="small"]::after {
253
- white-space: initial;
254
- width: 80px;
257
+ white-space: initial;
258
+ width: 80px;
255
259
  }
256
260
 
257
261
  [role~="tooltip"][data-microtip-size="medium"]::after {
258
- white-space: initial;
259
- width: 150px;
262
+ white-space: initial;
263
+ width: 150px;
260
264
  }
261
265
 
262
266
  [role~="tooltip"][data-microtip-size="large"]::after {
263
- white-space: initial;
264
- width: 260px;
267
+ white-space: initial;
268
+ width: 260px;
265
269
  }