Skip to content

Commit 12b9636

Browse files
pat270pat270
committed
fix(@clayui/css): Menubar update $menubar-vertical-expand-md and $menubar-vertical-expand-lg to use new keys. Older keys will still win over new keys to preserve backward compatibility.
1 parent 6a9ba26 commit 12b9636

File tree

1 file changed

+94
-26
lines changed

1 file changed

+94
-26
lines changed

‎packages/clay-css/src/scss/variables/_menubar.scss

Lines changed: 94 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,56 @@
33
$menubar-vertical-expand-md: () !default;
44
$menubar-vertical-expand-md: map-deep-merge(
55
(
6-
margin-bottom-mobile: 1.5rem,
7-
margin-left-mobile: -
8-
(
9-
$grid-gutter-width / 2,
10-
),
11-
margin-right-mobile: -
12-
(
13-
$grid-gutter-width / 2,
14-
),
15-
collapse-z-index-mobile:
16-
$zindex-menubar-vertical-expand-md-collapse-mobile,
6+
max-width: 15.625rem,
7+
mobile: (
8+
align-items: center,
9+
display: flex,
10+
flex-wrap: wrap,
11+
justify-content: space-between,
12+
margin-bottom: 1.5rem,
13+
margin-left: math-sign($grid-gutter-width / 2),
14+
margin-right: math-sign($grid-gutter-width / 2),
15+
),
16+
collapse: (
17+
display: block,
18+
),
19+
collapse-mobile: (
20+
border-color: transparent,
21+
border-style: solid,
22+
border-width: 0.0625rem,
23+
display: none,
24+
left: -0.0625rem,
25+
position: absolute,
26+
right: -0.0625rem,
27+
top: 100%,
28+
z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
29+
),
30+
collapse-nav-mobile: (
31+
margin-bottom: 0.5rem,
32+
margin-top: 0.5rem,
33+
),
34+
nav-nested-mobile: (
35+
margin-bottom: 0.5rem,
36+
margin-top: 0.5rem,
37+
),
1738
nav-nested-margins-item-mobile: (
1839
margin-left: 0,
1940
),
20-
toggler-c-inner: (
21-
max-width: none,
41+
toggler-mobile: (
42+
align-items: center,
43+
border-color: transparent,
44+
border-style: solid,
45+
border-width: 0.0625rem,
46+
display: flex,
47+
height: 2rem,
48+
padding-left: 0.5rem,
49+
padding-right: 0.5rem,
50+
c-inner: (
51+
max-width: none,
52+
),
53+
lexicon-icon: (
54+
margin-top: 0,
55+
),
2256
),
2357
),
2458
$menubar-vertical-expand-md
@@ -88,22 +122,56 @@ $menubar-vertical-expand-lg: () !default;
88122
$menubar-vertical-expand-lg: map-deep-merge(
89123
(
90124
breakpoint-up: lg,
91-
margin-bottom-mobile: 1.5rem,
92-
margin-left-mobile: -
93-
(
94-
$grid-gutter-width / 2,
95-
),
96-
margin-right-mobile: -
97-
(
98-
$grid-gutter-width / 2,
99-
),
100-
collapse-z-index-mobile:
101-
$zindex-menubar-vertical-expand-lg-collapse-mobile,
125+
max-width: 15.625rem,
126+
mobile: (
127+
align-items: center,
128+
display: flex,
129+
flex-wrap: wrap,
130+
justify-content: space-between,
131+
margin-bottom: 1.5rem,
132+
margin-left: math-sign($grid-gutter-width / 2),
133+
margin-right: math-sign($grid-gutter-width / 2),
134+
),
135+
collapse: (
136+
display: block,
137+
),
138+
collapse-mobile: (
139+
border-color: transparent,
140+
border-style: solid,
141+
border-width: 0.0625rem,
142+
display: none,
143+
left: -0.0625rem,
144+
position: absolute,
145+
right: -0.0625rem,
146+
top: 100%,
147+
z-index: $zindex-menubar-vertical-expand-md-collapse-mobile,
148+
),
149+
nav-nested-mobile: (
150+
margin-bottom: 0.5rem,
151+
margin-top: 0.5rem,
152+
),
153+
nav-nested-margins-mobile: (
154+
margin-bottom: 0.5rem,
155+
margin-top: 0.5rem,
156+
),
102157
nav-nested-margins-item-mobile: (
103158
margin-left: 0,
104159
),
105-
toggler-c-inner: (
106-
max-width: none,
160+
toggler-mobile: (
161+
align-items: center,
162+
border-color: transparent,
163+
border-style: solid,
164+
border-width: 0.0625rem,
165+
display: flex,
166+
height: 2rem,
167+
padding-left: 0.5rem,
168+
padding-right: 0.5rem,
169+
c-inner: (
170+
max-width: none,
171+
),
172+
lexicon-icon: (
173+
margin-top: 0,
174+
),
107175
),
108176
),
109177
$menubar-vertical-expand-lg

0 commit comments

Comments
 (0)