@linzjs/lui 17.36.10 → 17.36.12
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/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts +2 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +11 -26
- package/dist/index.js.map +1 -1
- package/dist/lui.css +29 -36
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +10 -27
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/HeaderV2/header-v2.scss +3 -2
- package/dist/scss/Components/MenuV2/menu-v2.scss +31 -41
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ $swishHeightSmV2: 3px;
|
|
|
11
11
|
$swishHeightLgV2: 6px;
|
|
12
12
|
// header height is row height + swish height
|
|
13
13
|
// columns in header row is always 100% so it's row and swish that drives the height of the header
|
|
14
|
-
$headerHeightSmV2: $headerRowHeightSmV2
|
|
14
|
+
$headerHeightSmV2: $headerRowHeightSmV2; // doesn't apply swish to small header
|
|
15
15
|
$headerHeightMdV2: $headerRowHeightMdV2 + $swishHeightLgV2;
|
|
16
16
|
$headerHeightLgV2: $headerRowHeightLgV2 + $swishHeightLgV2;
|
|
17
17
|
|
|
@@ -147,7 +147,8 @@ $headerElementPadding: spacing.$unit-xs;
|
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
&:after {
|
|
150
|
-
|
|
150
|
+
// doesn't apply swish gap to small header
|
|
151
|
+
content: none;
|
|
151
152
|
}
|
|
152
153
|
}
|
|
153
154
|
|
|
@@ -18,7 +18,6 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
18
18
|
.LuiHeaderMenuV2-drawer {
|
|
19
19
|
@include LuiHeaderMenuV2-container;
|
|
20
20
|
height: 100%;
|
|
21
|
-
width: 280px;
|
|
22
21
|
max-width: 100%;
|
|
23
22
|
position: absolute;
|
|
24
23
|
z-index: 1;
|
|
@@ -28,11 +27,24 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
28
27
|
|
|
29
28
|
border-left: 2px solid colors.$lily;
|
|
30
29
|
border-bottom: 2px solid colors.$lily;
|
|
31
|
-
|
|
30
|
+
|
|
32
31
|
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12),
|
|
33
32
|
0px 3px 5px rgba(0, 0, 0, 0.2);
|
|
34
33
|
border-radius: 3px;
|
|
35
34
|
|
|
35
|
+
&.sm {
|
|
36
|
+
width: 260px;
|
|
37
|
+
}
|
|
38
|
+
&.md {
|
|
39
|
+
width: 280px;
|
|
40
|
+
}
|
|
41
|
+
&.lg {
|
|
42
|
+
width: 300px;
|
|
43
|
+
}
|
|
44
|
+
&.xlg {
|
|
45
|
+
width: 320px;
|
|
46
|
+
}
|
|
47
|
+
|
|
36
48
|
.LuiHeaderV2 & {
|
|
37
49
|
top: header.$headerHeightMdV2;
|
|
38
50
|
height: calc(100% - #{header.$headerHeightMdV2});
|
|
@@ -51,9 +63,13 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
51
63
|
height: auto;
|
|
52
64
|
}
|
|
53
65
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
66
|
+
// animation
|
|
67
|
+
transition: transform 400ms ease-in-out;
|
|
68
|
+
transform: scaleX(0);
|
|
69
|
+
transform-origin: right center;
|
|
70
|
+
|
|
71
|
+
&.open {
|
|
72
|
+
transform: scaleX(1);
|
|
57
73
|
}
|
|
58
74
|
|
|
59
75
|
&-options {
|
|
@@ -83,31 +99,13 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
83
99
|
}
|
|
84
100
|
|
|
85
101
|
&-badge {
|
|
102
|
+
display: flex;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
align-items: center;
|
|
86
105
|
margin-left: 10px;
|
|
87
|
-
margin-right: 10px;
|
|
88
106
|
}
|
|
89
107
|
}
|
|
90
108
|
}
|
|
91
|
-
// }
|
|
92
|
-
|
|
93
|
-
// drop down
|
|
94
|
-
@keyframes LuiHeaderMenuV2-dropdown-animation-down {
|
|
95
|
-
0% {
|
|
96
|
-
transform: scaleY(0);
|
|
97
|
-
}
|
|
98
|
-
100% {
|
|
99
|
-
transform: scaleY(1);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
@keyframes LuiHeaderMenuV2-dropdown-animation-up {
|
|
104
|
-
0% {
|
|
105
|
-
transform: scaleY(1);
|
|
106
|
-
}
|
|
107
|
-
100% {
|
|
108
|
-
transform: scaleY(0);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
109
|
|
|
112
110
|
.LuiHeaderMenuV2-dropdown-container {
|
|
113
111
|
position: relative;
|
|
@@ -116,24 +114,16 @@ body.LuiHeaderMenuV2-drawer-open {
|
|
|
116
114
|
@include LuiHeaderMenuV2-container;
|
|
117
115
|
position: absolute;
|
|
118
116
|
border-radius: misc.$borderRadius;
|
|
119
|
-
top: spacing.$unit-xs;
|
|
120
117
|
|
|
121
|
-
|
|
118
|
+
top: header.$headerPadding;
|
|
122
119
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
transform-origin: center top;
|
|
128
|
-
display: block;
|
|
129
|
-
}
|
|
120
|
+
// animation
|
|
121
|
+
transition: transform 250ms ease-in-out;
|
|
122
|
+
transform: scaleY(0);
|
|
123
|
+
transform-origin: center top;
|
|
130
124
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
animation: LuiHeaderMenuV2-dropdown-animation-up 250ms ease-in-out
|
|
134
|
-
forwards;
|
|
135
|
-
transform-origin: center top;
|
|
136
|
-
display: block;
|
|
125
|
+
&.open {
|
|
126
|
+
transform: scaleY(1);
|
|
137
127
|
}
|
|
138
128
|
|
|
139
129
|
z-index: 900; // primary menu
|
package/package.json
CHANGED