@salesforcedevs/dx-components 0.79.1 → 0.79.2-alpha.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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/modules/dx/cardDocs/cardDocs.html +0 -1
  3. package/src/modules/dx/tooltip/microtip.css +101 -105
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.79.1",
3
+ "version": "0.79.2-alpha.0",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -28,5 +28,5 @@
28
28
  "@types/lodash.kebabcase": "^4.1.7",
29
29
  "@types/vimeo__player": "^2.16.2"
30
30
  },
31
- "gitHead": "31fa5005b9be9a1e38f71f6ee6a8cd45f75eb40a"
31
+ "gitHead": "1968be492da3999898cb9229e05f6c00e1d70283"
32
32
  }
package/src/modules/dx/cardDocs/cardDocs.html CHANGED
@@ -12,7 +12,6 @@
12
12
  card_section-text
13
13
  "
14
14
  >
15
- <span class="dx-text-label-3">{label}</span>
16
15
  <dx-card-title title={title} target={target}></dx-card-title>
17
16
  <span class="dx-text-body-2">{body}</span>
18
17
  </div>
package/src/modules/dx/tooltip/microtip.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /* Code generated by scripts/postinstall.js DO NOT EDIT*/
2
2
 
3
-
4
3
  /* -------------------------------------------------------------------
5
4
  Microtip
6
5
 
@@ -16,254 +15,251 @@
16
15
  3. Position Modifiers
17
16
  --------------------------------------------------------------------*/
18
17
 
19
-
20
18
  /* ------------------------------------------------
21
19
  [1] Base Styles
22
20
  -------------------------------------------------*/
23
21
 
24
22
  [aria-label][role~="tooltip"] {
25
- position: relative;
23
+ position: relative;
26
24
  }
27
25
 
28
26
  [aria-label][role~="tooltip"]::before,
29
27
  [aria-label][role~="tooltip"]::after {
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;
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;
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, .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;
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;
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
-
71
69
  /* ------------------------------------------------
72
70
  [2] Position Modifiers
73
71
  -------------------------------------------------*/
74
72
 
75
73
  [role~="tooltip"][data-microtip-position|="top"]::before {
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;
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;
80
79
  }
81
80
 
82
81
  [role~="tooltip"][data-microtip-position|="top"]::after {
83
- margin-bottom: 11px;
82
+ margin-bottom: 11px;
84
83
  }
85
84
 
86
85
  [role~="tooltip"][data-microtip-position|="top"]::before {
87
- transform: translate3d(-50%, 0, 0);
88
- bottom: 100%;
89
- left: 50%;
86
+ transform: translate3d(-50%, 0, 0);
87
+ bottom: 100%;
88
+ left: 50%;
90
89
  }
91
90
 
92
91
  [role~="tooltip"][data-microtip-position|="top"]:hover::before {
93
- transform: translate3d(-50%, -5px, 0);
92
+ transform: translate3d(-50%, -5px, 0);
94
93
  }
95
94
 
96
95
  [role~="tooltip"][data-microtip-position|="top"]::after {
97
- transform: translate3d(-50%, 0, 0);
98
- bottom: 100%;
99
- left: 50%;
96
+ transform: translate3d(-50%, 0, 0);
97
+ bottom: 100%;
98
+ left: 50%;
100
99
  }
101
100
 
102
101
  [role~="tooltip"][data-microtip-position="top"]:hover::after {
103
- transform: translate3d(-50%, -5px, 0);
102
+ transform: translate3d(-50%, -5px, 0);
104
103
  }
105
104
 
106
105
  /* ------------------------------------------------
107
106
  [2.1] Top Left
108
107
  -------------------------------------------------*/
109
108
  [role~="tooltip"][data-microtip-position="top-left"]::after {
110
- transform: translate3d(calc(-100% + 16px), 0, 0);
111
- bottom: 100%;
109
+ transform: translate3d(calc(-100% + 16px), 0, 0);
110
+ bottom: 100%;
112
111
  }
113
112
 
114
113
  [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
115
- transform: translate3d(calc(-100% + 16px), -5px, 0);
114
+ transform: translate3d(calc(-100% + 16px), -5px, 0);
116
115
  }
117
116
 
118
-
119
117
  /* ------------------------------------------------
120
118
  [2.2] Top Right
121
119
  -------------------------------------------------*/
122
120
  [role~="tooltip"][data-microtip-position="top-right"]::after {
123
- transform: translate3d(calc(0% + -16px), 0, 0);
124
- bottom: 100%;
121
+ transform: translate3d(calc(0% + -16px), 0, 0);
122
+ bottom: 100%;
125
123
  }
126
124
 
127
125
  [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
128
- transform: translate3d(calc(0% + -16px), -5px, 0);
126
+ transform: translate3d(calc(0% + -16px), -5px, 0);
129
127
  }
130
128
 
131
-
132
129
  /* ------------------------------------------------
133
130
  [2.3] Bottom
134
131
  -------------------------------------------------*/
135
132
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
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;
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;
141
139
  }
142
140
 
143
141
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
144
- margin-top: 11px;
142
+ margin-top: 11px;
145
143
  }
146
144
 
147
145
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
148
- transform: translate3d(-50%, -10px, 0);
149
- bottom: auto;
150
- left: 50%;
151
- top: 100%;
146
+ transform: translate3d(-50%, -10px, 0);
147
+ bottom: auto;
148
+ left: 50%;
149
+ top: 100%;
152
150
  }
153
151
 
154
152
  [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
155
- transform: translate3d(-50%, 0, 0);
153
+ transform: translate3d(-50%, 0, 0);
156
154
  }
157
155
 
158
156
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
159
- transform: translate3d(-50%, -10px, 0);
160
- top: 100%;
161
- left: 50%;
157
+ transform: translate3d(-50%, -10px, 0);
158
+ top: 100%;
159
+ left: 50%;
162
160
  }
163
161
 
164
162
  [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
165
- transform: translate3d(-50%, 0, 0);
163
+ transform: translate3d(-50%, 0, 0);
166
164
  }
167
165
 
168
-
169
166
  /* ------------------------------------------------
170
167
  [2.4] Bottom Left
171
168
  -------------------------------------------------*/
172
169
  [role~="tooltip"][data-microtip-position="bottom-left"]::after {
173
- transform: translate3d(calc(-100% + 16px), -10px, 0);
174
- top: 100%;
170
+ transform: translate3d(calc(-100% + 16px), -10px, 0);
171
+ top: 100%;
175
172
  }
176
173
 
177
174
  [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
178
- transform: translate3d(calc(-100% + 16px), 0, 0);
175
+ transform: translate3d(calc(-100% + 16px), 0, 0);
179
176
  }
180
177
 
181
-
182
178
  /* ------------------------------------------------
183
179
  [2.5] Bottom Right
184
180
  -------------------------------------------------*/
185
181
  [role~="tooltip"][data-microtip-position="bottom-right"]::after {
186
- transform: translate3d(calc(0% + -16px), -10px, 0);
187
- top: 100%;
182
+ transform: translate3d(calc(0% + -16px), -10px, 0);
183
+ top: 100%;
188
184
  }
189
185
 
190
186
  [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
191
- transform: translate3d(calc(0% + -16px), 0, 0);
187
+ transform: translate3d(calc(0% + -16px), 0, 0);
192
188
  }
193
189
 
194
-
195
190
  /* ------------------------------------------------
196
191
  [2.6] Left
197
192
  -------------------------------------------------*/
198
193
  [role~="tooltip"][data-microtip-position="left"]::before,
199
194
  [role~="tooltip"][data-microtip-position="left"]::after {
200
- bottom: auto;
201
- left: auto;
202
- right: 100%;
203
- top: 50%;
204
- transform: translate3d(10px, -50%, 0);
195
+ bottom: auto;
196
+ left: auto;
197
+ right: 100%;
198
+ top: 50%;
199
+ transform: translate3d(10px, -50%, 0);
205
200
  }
206
201
 
207
202
  [role~="tooltip"][data-microtip-position="left"]::before {
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;
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;
213
209
  }
214
210
 
215
211
  [role~="tooltip"][data-microtip-position="left"]::after {
216
- margin-right: 11px;
212
+ margin-right: 11px;
217
213
  }
218
214
 
219
215
  [role~="tooltip"][data-microtip-position="left"]:hover::before,
220
216
  [role~="tooltip"][data-microtip-position="left"]:hover::after {
221
- transform: translate3d(0, -50%, 0);
217
+ transform: translate3d(0, -50%, 0);
222
218
  }
223
219
 
224
-
225
220
  /* ------------------------------------------------
226
221
  [2.7] Right
227
222
  -------------------------------------------------*/
228
223
  [role~="tooltip"][data-microtip-position="right"]::before,
229
224
  [role~="tooltip"][data-microtip-position="right"]::after {
230
- bottom: auto;
231
- left: 100%;
232
- top: 50%;
233
- transform: translate3d(-10px, -50%, 0);
225
+ bottom: auto;
226
+ left: 100%;
227
+ top: 50%;
228
+ transform: translate3d(-10px, -50%, 0);
234
229
  }
235
230
 
236
231
  [role~="tooltip"][data-microtip-position="right"]::before {
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;
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;
242
238
  }
243
239
 
244
240
  [role~="tooltip"][data-microtip-position="right"]::after {
245
- margin-left: 11px;
241
+ margin-left: 11px;
246
242
  }
247
243
 
248
244
  [role~="tooltip"][data-microtip-position="right"]:hover::before,
249
245
  [role~="tooltip"][data-microtip-position="right"]:hover::after {
250
- transform: translate3d(0, -50%, 0);
246
+ transform: translate3d(0, -50%, 0);
251
247
  }
252
248
 
253
249
  /* ------------------------------------------------
254
250
  [3] Size
255
251
  -------------------------------------------------*/
256
252
  [role~="tooltip"][data-microtip-size="small"]::after {
257
- white-space: initial;
258
- width: 80px;
253
+ white-space: initial;
254
+ width: 80px;
259
255
  }
260
256
 
261
257
  [role~="tooltip"][data-microtip-size="medium"]::after {
262
- white-space: initial;
263
- width: 150px;
258
+ white-space: initial;
259
+ width: 150px;
264
260
  }
265
261
 
266
262
  [role~="tooltip"][data-microtip-size="large"]::after {
267
- white-space: initial;
268
- width: 260px;
263
+ white-space: initial;
264
+ width: 260px;
269
265
  }