Skip to content

Commit 2bbfd72

Browse files
pat270pat270
committed
feat(@clayui/css): LPD-40160 Adds menubar-action for adding New Space
1 parent e282613 commit 2bbfd72

File tree

4 files changed

+154
-0
lines changed

4 files changed

+154
-0
lines changed

‎packages/clay-css/src/scss/cadmin/components/_menubar.scss

+8
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
display: none;
99
}
1010

11+
.menubar-primary {
12+
@include clay-menubar-vertical-variant($cadmin-menubar-primary);
13+
14+
.nav .nav .nav > li > .nav-link {
15+
margin-left: 16px;
16+
}
17+
}
18+
1119
// Menubar Vertical MD
1220

1321
.menubar-vertical-expand-md {

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

+123
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,126 @@
1+
$cadmin-menubar-primary: () !default;
2+
$cadmin-menubar-primary: map-deep-merge(
3+
(
4+
nav-item: (
5+
position: relative,
6+
),
7+
nav-link: (
8+
border-radius: 0,
9+
color: $cadmin-gray-900,
10+
line-height: 24px,
11+
transition: #{color 0.15s ease-in-out,
12+
background-color 0.15s ease-in-out,
13+
border-color 0.15s ease-in-out,
14+
box-shadow 0.15s ease-in-out},
15+
before: (
16+
bottom: 0,
17+
content: '',
18+
display: block,
19+
left: 0,
20+
position: absolute,
21+
top: 0,
22+
transition: $cadmin-transition-base,
23+
),
24+
hover: (
25+
background-color: $cadmin-primary-l3,
26+
color: $cadmin-gray-900,
27+
letter-spacing: 0,
28+
before: (
29+
background: $cadmin-secondary-l0,
30+
width: 2px,
31+
),
32+
),
33+
focus: (
34+
background-color: c-unset,
35+
box-shadow: none,
36+
color: $cadmin-gray-900,
37+
outline: 0,
38+
after: (
39+
bottom: 0,
40+
box-shadow: $cadmin-component-focus-inset-box-shadow,
41+
content: '',
42+
display: block,
43+
left: 0,
44+
pointer-events: none,
45+
position: absolute,
46+
right: 0,
47+
top: 0,
48+
),
49+
),
50+
active-class: (
51+
background-color: $cadmin-primary-l3,
52+
color: $cadmin-gray-900,
53+
font-weight: $cadmin-font-weight-semi-bold,
54+
before: (
55+
background-color: $cadmin-primary,
56+
width: 6px,
57+
),
58+
focus: (
59+
before: (
60+
display: none,
61+
),
62+
),
63+
),
64+
disabled: (
65+
background-color: transparent,
66+
box-shadow: none,
67+
font-weight: $cadmin-font-weight-normal,
68+
letter-spacing: 0.016rem,
69+
before: (
70+
content: none,
71+
),
72+
after: (
73+
content: none,
74+
),
75+
),
76+
show: (
77+
background-color: c-unset,
78+
box-shadow: c-unset,
79+
color: $cadmin-gray-900,
80+
before: (
81+
background-color: transparent,
82+
width: 0,
83+
),
84+
hover: (
85+
before: (
86+
background-color: $cadmin-secondary-l0,
87+
width: 2px,
88+
),
89+
),
90+
),
91+
autofit-row: (
92+
align-items: center,
93+
margin-left: -4px,
94+
margin-right: -4px,
95+
autofit-col: (
96+
padding-left: 4px,
97+
padding-right: 4px,
98+
),
99+
),
100+
collapse-icon: (
101+
font-size: 12px,
102+
font-weight: $cadmin-font-weight-semi-bold,
103+
text-transform: uppercase,
104+
collapse-icon-closed: (
105+
top: calc(22px - (1em / 2)),
106+
),
107+
collapse-icon-open: (
108+
top: calc(22px - (1em / 2)),
109+
),
110+
),
111+
),
112+
menubar-actions-1: (
113+
padding-right: 64px,
114+
),
115+
menubar-action: (
116+
position: absolute,
117+
top: 10px,
118+
right: 32px,
119+
),
120+
),
121+
$cadmin-menubar-primary
122+
);
123+
1124
// Menubar Vertical MD
2125

3126
$cadmin-menubar-vertical-expand-md: () !default;

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

+12
Original file line numberDiff line numberDiff line change
@@ -931,6 +931,10 @@
931931
}
932932
}
933933

934+
.nav-item {
935+
@include clay-css(map-get($map, nav-item));
936+
}
937+
934938
.nav-link {
935939
$_nav-link: setter(map-get($map, nav-link), ());
936940
$_nav-link: map-deep-merge($link, $_nav-link);
@@ -942,6 +946,14 @@
942946
}
943947
}
944948

949+
.menubar-actions-1 {
950+
@include clay-css(map-get($map, menubar-actions-1));
951+
}
952+
953+
.menubar-action {
954+
@include clay-css(map-get($map, menubar-action));
955+
}
956+
945957
$_media-breakpoint-down: map-get($map, media-breakpoint-down);
946958
$_media-breakpoint-up: map-get($map, media-breakpoint-up);
947959

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

+11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
$menubar-primary: () !default;
22
$menubar-primary: map-deep-merge(
33
(
4+
nav-item: (
5+
position: relative,
6+
),
47
nav-link: (
58
border-radius: 0,
69
color: $gray-900,
@@ -106,6 +109,14 @@ $menubar-primary: map-deep-merge(
106109
),
107110
),
108111
),
112+
menubar-actions-1: (
113+
padding-right: 4rem,
114+
),
115+
menubar-action: (
116+
position: absolute,
117+
top: 0.625rem,
118+
right: 2rem,
119+
),
109120
),
110121
$menubar-primary
111122
);

0 commit comments

Comments
 (0)