@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.
Files changed (55) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/banner/banner.css +33 -1
  3. package/src/modules/dx/banner/banner.html +2 -5
  4. package/src/modules/dx/banner/banner.ts +1 -3
  5. package/src/modules/dx/brandThemeProvider/brandThemeProvider.html +1 -1
  6. package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts +4 -4
  7. package/src/modules/dx/button/button.html +5 -5
  8. package/src/modules/dx/button/{button.css → button.scoped.css} +1 -16
  9. package/src/modules/dx/button/button.ts +11 -9
  10. package/src/modules/dx/cardPodcastEpisode/{cardPodcastEpisode.scoped.css → cardPodcastEpisode.css} +4 -0
  11. package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html +1 -1
  12. package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts +0 -2
  13. package/src/modules/dx/cardTitle/cardTitle.css +24 -2
  14. package/src/modules/dx/cardTitle/cardTitle.html +4 -4
  15. package/src/modules/dx/cardTitle/cardTitle.ts +0 -1
  16. package/src/modules/dx/dropdown/dropdown.css +6 -12
  17. package/src/modules/dx/dropdown/dropdown.html +3 -2
  18. package/src/modules/dx/dropdown/dropdown.ts +1 -1
  19. package/src/modules/dx/featuredContentHeader/featuredContentHeader.css +8 -8
  20. package/src/modules/dx/header/header.css +0 -10
  21. package/src/modules/dx/header/header.html +1 -1
  22. package/src/modules/dx/header/header.scoped.css +5 -0
  23. package/src/modules/dx/header/header.ts +2 -2
  24. package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css +147 -2
  25. package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.html +5 -6
  26. package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts +3 -5
  27. package/src/modules/dx/headerNav/{headerNav.scoped.css → headerNav.css} +3 -1
  28. package/src/modules/dx/headerNav/headerNav.html +2 -2
  29. package/src/modules/dx/headerNav/headerNav.ts +0 -2
  30. package/src/modules/dx/headerSearch/headerSearch.css +61 -2
  31. package/src/modules/dx/headerSearch/headerSearch.html +3 -3
  32. package/src/modules/dx/headerSearch/headerSearch.ts +0 -2
  33. package/src/modules/dx/icon/icon.css +4 -1
  34. package/src/modules/dx/icon/icon.html +1 -1
  35. package/src/modules/dx/icon/icon.scoped.css +5 -0
  36. package/src/modules/dx/icon/icon.ts +0 -2
  37. package/src/modules/dx/logo/{logo.scoped.css → logo.css} +3 -0
  38. package/src/modules/dx/logo/logo.html +1 -1
  39. package/src/modules/dx/logo/logo.ts +0 -2
  40. package/src/modules/dx/popover/popover.html +2 -2
  41. package/src/modules/dx/popover/{popover.css → popover.scoped.css} +0 -2
  42. package/src/modules/dx/popover/popover.ts +33 -19
  43. package/src/modules/dx/relativeDateTime/relativeDateTime.html +1 -1
  44. package/src/modules/dx/relativeDateTime/relativeDateTime.ts +0 -1
  45. package/src/modules/dx/skipNavLink/{skipNavLink.scoped.css → skipNavLink.css} +2 -0
  46. package/src/modules/dx/skipNavLink/skipNavLink.html +1 -1
  47. package/src/modules/dx/skipNavLink/skipNavLink.ts +1 -4
  48. package/src/modules/dx/tooltip/microtip.css +105 -101
  49. package/src/modules/dxHelpers/card/card.css +1 -11
  50. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +2 -2
  51. package/src/modules/dx/banner/banner.scoped.css +0 -28
  52. package/src/modules/dx/cardTitle/cardTitle.scoped.css +0 -25
  53. package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.scoped.css +0 -142
  54. package/src/modules/dx/headerSearch/headerSearch.scoped.css +0 -56
  55. 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
- 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
  }
@@ -2,17 +2,7 @@
2
2
 
3
3
  /* main card base */
4
4
 
5
- :host { /* TODO: remove this after it has been completely supplanted by .base-card */
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 svg {
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 svg {
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
- }
@@ -1,3 +0,0 @@
1
- time {
2
- font-family: var(--dx-g-font-display);
3
- }