@linzjs/lui 17.36.7 → 17.36.9
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/CHANGELOG.md +14 -0
- package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts +12 -0
- package/dist/index.js +43 -13
- package/dist/index.js.map +1 -1
- package/dist/lui.css +67 -5
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +43 -13
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/HeaderV2/header-v2.scss +66 -0
- package/dist/scss/Components/MenuV2/menu-v2.scss +14 -5
- package/package.json +1 -1
|
@@ -175,6 +175,10 @@ $headerElementPadding: spacing.$unit-xs;
|
|
|
175
175
|
}
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
+
.LuiHeaderV2-non-sticky {
|
|
179
|
+
width: 100%;
|
|
180
|
+
}
|
|
181
|
+
|
|
178
182
|
.LuiHeaderV2-menu-item {
|
|
179
183
|
.LuiHeaderV2-menu-button {
|
|
180
184
|
@include fonts.font-semibold;
|
|
@@ -199,6 +203,68 @@ $headerElementPadding: spacing.$unit-xs;
|
|
|
199
203
|
fill: colors.$white;
|
|
200
204
|
}
|
|
201
205
|
|
|
206
|
+
.tooltip {
|
|
207
|
+
display: none;
|
|
208
|
+
background-color: black;
|
|
209
|
+
text-align: center;
|
|
210
|
+
border-radius: 4px;
|
|
211
|
+
padding: 6px 6px;
|
|
212
|
+
@include fonts.font-regular;
|
|
213
|
+
font-size: 14px;
|
|
214
|
+
white-space: nowrap;
|
|
215
|
+
|
|
216
|
+
position: absolute;
|
|
217
|
+
top: 60px;
|
|
218
|
+
z-index: 10;
|
|
219
|
+
|
|
220
|
+
box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;
|
|
221
|
+
|
|
222
|
+
&.dark {
|
|
223
|
+
color: colors.$hint;
|
|
224
|
+
background-color: colors.$charcoal;
|
|
225
|
+
}
|
|
226
|
+
&.light {
|
|
227
|
+
color: colors.$charcoal;
|
|
228
|
+
background-color: colors.$hint;
|
|
229
|
+
}
|
|
230
|
+
&.left {
|
|
231
|
+
left: 8px;
|
|
232
|
+
}
|
|
233
|
+
&.right {
|
|
234
|
+
right: 8px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
&::after {
|
|
238
|
+
content: '';
|
|
239
|
+
position: absolute;
|
|
240
|
+
top: -14px;
|
|
241
|
+
border-width: 8px;
|
|
242
|
+
border-style: solid;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&.left:after {
|
|
246
|
+
left: 0;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
&.right:after {
|
|
250
|
+
right: 0;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
&.dark::after {
|
|
254
|
+
border-color: transparent transparent colors.$charcoal transparent;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
&.light::after {
|
|
258
|
+
border-color: transparent transparent colors.$hint transparent;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&:hover {
|
|
263
|
+
.tooltip {
|
|
264
|
+
display: block;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
202
268
|
.LuiHeaderV2-menu-icon {
|
|
203
269
|
display: flex;
|
|
204
270
|
align-items: center;
|
|
@@ -18,15 +18,20 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
18
18
|
.LuiHeaderMenuV2-drawer {
|
|
19
19
|
@include LuiHeaderMenuV2-container;
|
|
20
20
|
height: 100%;
|
|
21
|
-
width:
|
|
21
|
+
width: 280px;
|
|
22
22
|
max-width: 100%;
|
|
23
|
-
position:
|
|
23
|
+
position: absolute;
|
|
24
24
|
z-index: 1;
|
|
25
25
|
top: 0;
|
|
26
|
-
right:
|
|
26
|
+
right: 0px;
|
|
27
27
|
overflow-x: hidden;
|
|
28
|
+
|
|
28
29
|
border-left: 2px solid colors.$lily;
|
|
30
|
+
border-bottom: 2px solid colors.$lily;
|
|
29
31
|
transition: right 0.5s, visibility 0.6s;
|
|
32
|
+
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12),
|
|
33
|
+
0px 3px 5px rgba(0, 0, 0, 0.2);
|
|
34
|
+
border-radius: 3px;
|
|
30
35
|
|
|
31
36
|
.LuiHeaderV2 & {
|
|
32
37
|
top: header.$headerHeightMdV2;
|
|
@@ -39,12 +44,15 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
39
44
|
}
|
|
40
45
|
|
|
41
46
|
.LuiHeaderV2-small & {
|
|
47
|
+
&.non-sticky {
|
|
48
|
+
border-right: 0.5px solid colors.$lily;
|
|
49
|
+
}
|
|
42
50
|
top: header.$headerHeightSmV2;
|
|
43
|
-
height:
|
|
51
|
+
height: auto;
|
|
44
52
|
}
|
|
45
53
|
|
|
46
54
|
&-closed {
|
|
47
|
-
right: -
|
|
55
|
+
right: -280px;
|
|
48
56
|
visibility: hidden;
|
|
49
57
|
}
|
|
50
58
|
|
|
@@ -80,6 +88,7 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
80
88
|
}
|
|
81
89
|
}
|
|
82
90
|
}
|
|
91
|
+
// }
|
|
83
92
|
|
|
84
93
|
// drop down
|
|
85
94
|
@keyframes LuiHeaderMenuV2-dropdown-animation-down {
|
package/package.json
CHANGED