@salesforcedevs/dx-components 1.2.18-lightdom → 1.2.18-lightdom-4
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/package.json +1 -1
- package/src/modules/dx/banner/banner.css +33 -1
- package/src/modules/dx/banner/banner.html +2 -5
- package/src/modules/dx/banner/banner.ts +1 -3
- package/src/modules/dx/brandThemeProvider/brandThemeProvider.html +1 -1
- package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts +4 -4
- package/src/modules/dx/button/button.html +5 -5
- package/src/modules/dx/button/{button.css → button.scoped.css} +1 -16
- package/src/modules/dx/button/button.ts +11 -9
- package/src/modules/dx/cardPodcastEpisode/{cardPodcastEpisode.scoped.css → cardPodcastEpisode.css} +4 -0
- package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html +1 -1
- package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts +0 -2
- package/src/modules/dx/cardTitle/cardTitle.css +24 -2
- package/src/modules/dx/cardTitle/cardTitle.html +4 -4
- package/src/modules/dx/cardTitle/cardTitle.ts +0 -1
- package/src/modules/dx/dropdown/dropdown.css +6 -12
- package/src/modules/dx/dropdown/dropdown.html +3 -2
- package/src/modules/dx/dropdown/dropdown.ts +1 -1
- package/src/modules/dx/featuredContentHeader/featuredContentHeader.css +8 -8
- package/src/modules/dx/header/header.css +0 -10
- package/src/modules/dx/header/header.html +1 -1
- package/src/modules/dx/header/header.scoped.css +5 -0
- package/src/modules/dx/header/header.ts +2 -2
- package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css +147 -2
- package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.html +5 -6
- package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts +3 -5
- package/src/modules/dx/headerNav/{headerNav.scoped.css → headerNav.css} +3 -1
- package/src/modules/dx/headerNav/headerNav.html +2 -2
- package/src/modules/dx/headerNav/headerNav.ts +0 -2
- package/src/modules/dx/headerSearch/headerSearch.css +61 -2
- package/src/modules/dx/headerSearch/headerSearch.html +3 -3
- package/src/modules/dx/headerSearch/headerSearch.ts +0 -2
- package/src/modules/dx/icon/icon.css +4 -1
- package/src/modules/dx/icon/icon.html +1 -1
- package/src/modules/dx/icon/icon.scoped.css +5 -0
- package/src/modules/dx/icon/icon.ts +0 -2
- package/src/modules/dx/logo/{logo.scoped.css → logo.css} +3 -0
- package/src/modules/dx/logo/logo.html +1 -1
- package/src/modules/dx/logo/logo.ts +0 -2
- package/src/modules/dx/popover/popover.html +2 -2
- package/src/modules/dx/popover/{popover.css → popover.scoped.css} +0 -2
- package/src/modules/dx/popover/popover.ts +33 -19
- package/src/modules/dx/relativeDateTime/relativeDateTime.html +1 -1
- package/src/modules/dx/relativeDateTime/relativeDateTime.ts +0 -1
- package/src/modules/dx/skipNavLink/{skipNavLink.scoped.css → skipNavLink.css} +2 -0
- package/src/modules/dx/skipNavLink/skipNavLink.html +1 -1
- package/src/modules/dx/skipNavLink/skipNavLink.ts +1 -4
- package/src/modules/dx/tooltip/microtip.css +105 -101
- package/src/modules/dxHelpers/card/card.css +1 -11
- package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +2 -2
- package/src/modules/dx/banner/banner.scoped.css +0 -28
- package/src/modules/dx/cardTitle/cardTitle.scoped.css +0 -25
- package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.scoped.css +0 -142
- package/src/modules/dx/headerSearch/headerSearch.scoped.css +0 -56
- package/src/modules/dx/relativeDateTime/relativeDateTime.scoped.css +0 -3
|
@@ -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
|
-
|
|
25
|
+
position: relative;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
[aria-label][role~="tooltip"]::before,
|
|
27
29
|
[aria-label][role~="tooltip"]::after {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
45
|
-
|
|
44
|
+
background-size: 100% auto !important;
|
|
45
|
+
content: "";
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
[aria-label][role~="tooltip"]::after {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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
|
-
|
|
66
|
-
|
|
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
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
-
|
|
83
|
+
margin-bottom: 11px;
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
[role~="tooltip"][data-microtip-position|="top"]::before {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
-
|
|
93
|
+
transform: translate3d(-50%, -5px, 0);
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
[role~="tooltip"][data-microtip-position|="top"]::after {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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
|
-
|
|
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
|
-
|
|
110
|
-
|
|
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
|
-
|
|
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
|
-
|
|
122
|
-
|
|
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
|
-
|
|
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
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
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
|
-
|
|
144
|
+
margin-top: 11px;
|
|
143
145
|
}
|
|
144
146
|
|
|
145
147
|
[role~="tooltip"][data-microtip-position|="bottom"]::before {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
-
|
|
155
|
+
transform: translate3d(-50%, 0, 0);
|
|
154
156
|
}
|
|
155
157
|
|
|
156
158
|
[role~="tooltip"][data-microtip-position|="bottom"]::after {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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
|
-
|
|
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
|
-
|
|
171
|
-
|
|
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
|
-
|
|
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
|
-
|
|
183
|
-
|
|
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
|
-
|
|
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
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
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
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
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
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
254
|
-
|
|
257
|
+
white-space: initial;
|
|
258
|
+
width: 80px;
|
|
255
259
|
}
|
|
256
260
|
|
|
257
261
|
[role~="tooltip"][data-microtip-size="medium"]::after {
|
|
258
|
-
|
|
259
|
-
|
|
262
|
+
white-space: initial;
|
|
263
|
+
width: 150px;
|
|
260
264
|
}
|
|
261
265
|
|
|
262
266
|
[role~="tooltip"][data-microtip-size="large"]::after {
|
|
263
|
-
|
|
264
|
-
|
|
267
|
+
white-space: initial;
|
|
268
|
+
width: 260px;
|
|
265
269
|
}
|
|
@@ -2,17 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
/* main card base */
|
|
4
4
|
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
|
|
8
|
-
--dx-g-card-border: 1px solid var(--dx-g-gray-90);
|
|
9
|
-
--dx-g-card-border-radius: 16px;
|
|
10
|
-
--dx-g-card-item-spacing: 12px;
|
|
11
|
-
--dx-g-card-img-spacing: 20px;
|
|
12
|
-
--dx-c-body-max-lines: 6;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.base-card {
|
|
5
|
+
:host {
|
|
16
6
|
display: block;
|
|
17
7
|
|
|
18
8
|
--dx-g-card-border: 1px solid var(--dx-g-gray-90);
|
|
@@ -53,7 +53,7 @@ dx-tree:not(:last-child) {
|
|
|
53
53
|
color: var(--dx-g-blue-vibrant-30);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
.header-toggle-icon dx-icon
|
|
56
|
+
.header-toggle-icon dx-icon {
|
|
57
57
|
transition: var(--dx-g-transition-transform-2x);
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -122,7 +122,7 @@ dx-tree:not(:last-child) {
|
|
|
122
122
|
margin-bottom: 0;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
.container.container-mobile.collapsed .header-toggle-icon dx-icon
|
|
125
|
+
.container.container-mobile.collapsed .header-toggle-icon dx-icon {
|
|
126
126
|
transform: rotateZ(-90deg);
|
|
127
127
|
}
|
|
128
128
|
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
--primary-color: var(--dx-g-cloud-blue-vibrant-50);
|
|
3
|
-
--secondary-color: var(--dx-g-cloud-blue-vibrant-40);
|
|
4
|
-
|
|
5
|
-
width: 100%;
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: row;
|
|
8
|
-
align-items: center;
|
|
9
|
-
justify-content: center;
|
|
10
|
-
min-height: 24px;
|
|
11
|
-
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
12
|
-
background: repeating-linear-gradient(
|
|
13
|
-
45deg,
|
|
14
|
-
var(--primary-color),
|
|
15
|
-
var(--primary-color) 20px,
|
|
16
|
-
var(--secondary-color) 20px,
|
|
17
|
-
var(--secondary-color) 40px
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.container_inner {
|
|
22
|
-
height: 100%;
|
|
23
|
-
display: flex;
|
|
24
|
-
background: var(--primary-color);
|
|
25
|
-
padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
|
|
26
|
-
color: white;
|
|
27
|
-
font-weight: bold;
|
|
28
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
h3.dx-text-heading-4 {
|
|
2
|
-
color: var(--dx-c-card-title-color);
|
|
3
|
-
transition: var(--dx-g-transition-hue-1x);
|
|
4
|
-
font-size: var(--dx-c-card-title-font-size);
|
|
5
|
-
line-height: var(--dx-c-card-title-line-height);
|
|
6
|
-
letter-spacing: var(--dx-c-card-title-letter-spacing);
|
|
7
|
-
word-break: break-word;
|
|
8
|
-
hyphens: auto;
|
|
9
|
-
font-family: var(--dx-g-font-display);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
a {
|
|
13
|
-
font-family: var(--dx-g-font-display);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.nowrap {
|
|
17
|
-
white-space: nowrap;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@media screen and (max-width: 1024px) {
|
|
21
|
-
.dx-text-heading-4 {
|
|
22
|
-
font-size: 20px;
|
|
23
|
-
line-height: 24px;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
.nav-menu {
|
|
2
|
-
position: absolute;
|
|
3
|
-
top: 100%;
|
|
4
|
-
left: 0;
|
|
5
|
-
width: 100%;
|
|
6
|
-
max-height: 56vh;
|
|
7
|
-
overflow-y: auto;
|
|
8
|
-
padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
|
|
9
|
-
var(--dx-g-spacing-sm);
|
|
10
|
-
background: var(--dx-c-color-background);
|
|
11
|
-
box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
|
|
12
|
-
transform: translateY(0);
|
|
13
|
-
border-top: 1px solid transparent;
|
|
14
|
-
transition: var(--dx-g-transition-transform-2x),
|
|
15
|
-
var(--dx-g-transition-hue-1x);
|
|
16
|
-
z-index: 1000;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.nav-menu.has-scrollshadow {
|
|
20
|
-
border-color: var(--dx-c-color-border-2);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.nav-menu ul {
|
|
24
|
-
display: flex;
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
width: 100%;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.nav-menu_item {
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.nav-menu_item,
|
|
35
|
-
.nav-menu_item_cta-main {
|
|
36
|
-
transition: var(--dx-g-transition-hue-1x);
|
|
37
|
-
border-radius: var(--dx-g-spacing-xs);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.nav-menu_item_cta-main {
|
|
41
|
-
justify-content: space-between;
|
|
42
|
-
font-family: var(--dx-g-font-display);
|
|
43
|
-
font-size: var(--dx-g-text-base);
|
|
44
|
-
color: var(--dx-g-blue-vibrant-20);
|
|
45
|
-
line-height: 20px;
|
|
46
|
-
padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
|
|
47
|
-
width: 100%;
|
|
48
|
-
display: flex;
|
|
49
|
-
align-items: center;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.nav-menu ul > .nav-menu_item:not(:last-of-type) {
|
|
53
|
-
margin-bottom: var(--dx-g-spacing-xs);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.nav-menu_item.state-open {
|
|
57
|
-
background: var(--dx-c-button-color-background-inactive);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.nav-menu_item_cta-main:not(.state-active):hover {
|
|
61
|
-
background: var(--dx-c-button-color-background-inactive);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.nav-menu_item.state-open .nav-menu_item_cta-main:hover {
|
|
65
|
-
background: var(--dx-c-button-color-background-inactive-hover);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.nav-menu_item.state-open .chevrondown {
|
|
69
|
-
transform: rotateX(180deg);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.nav-menu_item_cta-options {
|
|
73
|
-
position: relative;
|
|
74
|
-
display: none;
|
|
75
|
-
flex-direction: column;
|
|
76
|
-
width: 100%;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.nav-menu_item.state-open > .nav-menu_item_cta-options {
|
|
80
|
-
display: flex;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.nav-menu_item_cta {
|
|
84
|
-
height: var(--dx-g-spacing-3xl);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.nav-menu_item_cta-main.state-active {
|
|
88
|
-
background: var(--dx-c-button-color-background-active);
|
|
89
|
-
color: var(--dx-c-color);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.nav-menu_item_cta-main > span {
|
|
93
|
-
transform: translateY(3px); /* ghost padding */
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.nav-menu_item_cta-sub {
|
|
97
|
-
--dx-c-button-secondary-color-hover: var(
|
|
98
|
-
--dx-c-button-color-background-inactive-hover
|
|
99
|
-
);
|
|
100
|
-
|
|
101
|
-
font-size: var(--dx-g-text-sm);
|
|
102
|
-
width: 100%;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.nav-menu_item_cta-sub::part(container) {
|
|
106
|
-
justify-content: flex-start;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.nav-menu_item_cta-sub.state-active {
|
|
110
|
-
text-decoration: underline;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type) {
|
|
114
|
-
padding-top: var(--dx-g-spacing-xs);
|
|
115
|
-
margin-top: var(--dx-g-spacing-xs);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type)::after {
|
|
119
|
-
content: "";
|
|
120
|
-
position: absolute;
|
|
121
|
-
top: 0;
|
|
122
|
-
left: var(--dx-g-spacing-md);
|
|
123
|
-
width: calc(100% - var(--dx-g-spacing-xl));
|
|
124
|
-
height: 1px;
|
|
125
|
-
background: var(--dx-c-color-border-2);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.backdrop {
|
|
129
|
-
position: fixed;
|
|
130
|
-
top: 0;
|
|
131
|
-
left: 0;
|
|
132
|
-
height: 100vh;
|
|
133
|
-
width: 100vw;
|
|
134
|
-
z-index: -1;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.nav-menu.state-closed {
|
|
138
|
-
opacity: 0;
|
|
139
|
-
visibility: hidden;
|
|
140
|
-
transform: translateY(-16px);
|
|
141
|
-
pointer-events: none;
|
|
142
|
-
}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
/* DESKTOP */
|
|
2
|
-
|
|
3
|
-
.desktop_search-container {
|
|
4
|
-
position: relative;
|
|
5
|
-
display: flex;
|
|
6
|
-
height: var(--dx-g-spacing-xl);
|
|
7
|
-
font-size: var(--dx-g-text-sm);
|
|
8
|
-
font-family: var(--dx-g-font-sans);
|
|
9
|
-
color: var(--dx-g-gray-50);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.desktop_search-container dx-input {
|
|
13
|
-
--dx-c-input-width: calc(
|
|
14
|
-
var(--dx-c-header-search-width) - var(--toggle-width)
|
|
15
|
-
);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* MOBILE */
|
|
19
|
-
|
|
20
|
-
.mobile_search-button {
|
|
21
|
-
position: relative;
|
|
22
|
-
z-index: 3;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.mobile_search-dropdown {
|
|
26
|
-
--dx-c-popover-border-radius: 0;
|
|
27
|
-
--dx-c-popover-border: none;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.mobile_search-input {
|
|
31
|
-
position: absolute;
|
|
32
|
-
top: 0;
|
|
33
|
-
left: 0;
|
|
34
|
-
height: 100%;
|
|
35
|
-
width: 100%;
|
|
36
|
-
transition: var(--dx-g-transition-hue-1x);
|
|
37
|
-
opacity: 0;
|
|
38
|
-
pointer-events: none;
|
|
39
|
-
|
|
40
|
-
--dx-c-input-border: none;
|
|
41
|
-
--dx-c-input-border-radius: 0;
|
|
42
|
-
--dx-c-input-border-active: none;
|
|
43
|
-
--dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
|
|
44
|
-
--dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
|
|
45
|
-
--dx-c-input-background: var(--dx-g-brand-current-color-background-2);
|
|
46
|
-
--dx-c-input-background-active: var(
|
|
47
|
-
--dx-g-brand-current-color-background-2
|
|
48
|
-
);
|
|
49
|
-
--dx-c-input-height: 100% !important;
|
|
50
|
-
--dx-c-input-width: 100%;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.mobile_search-input.state-open {
|
|
54
|
-
opacity: 1;
|
|
55
|
-
pointer-events: auto;
|
|
56
|
-
}
|