Skip to content

Commit 1b9bff1

Browse files
febdaofebdao
committedFeb 27, 2025·
[#447] Menu style in header.
1 parent 3a84d88 commit 1b9bff1

File tree

3 files changed

+121
-87
lines changed

3 files changed

+121
-87
lines changed
 

‎components/00-base/_variables.components.scss

-8
Original file line numberDiff line numberDiff line change
@@ -1148,18 +1148,10 @@ $ct-navigation-light-menu-item-active-background-color: transparent !default;
11481148
$ct-navigation-light-menu-item-active-border-color: ct-color-light('highlight') !default;
11491149
$ct-navigation-light-menu-item-active-trail-background-color: ct-color-light('interaction-background') !default;
11501150
$ct-navigation-light-menu-item-active-trail-color: ct-color-light('background') !default;
1151-
$ct-navigation-light-drawer-border-color: ct-color-light('interaction-background') !default;
1152-
$ct-navigation-light-drawer-color: ct-color-light('interaction-background') !default;
1153-
$ct-navigation-light-drawer-hover-color: ct-color-light('interaction-hover-background') !default;
1154-
$ct-navigation-light-drawer-active-color: ct-color-light('interaction-hover-background') !default;
11551151
$ct-navigation-light-drawer-menu-item-background-color: transparent !default;
1156-
$ct-navigation-light-drawer-menu-item-border-color: transparent !default;
11571152
$ct-navigation-light-drawer-menu-item-hover-background-color: transparent !default;
1158-
$ct-navigation-light-drawer-menu-item-hover-border-color: ct-color-light('interaction-hover-background') !default;
11591153
$ct-navigation-light-drawer-menu-item-active-background-color: transparent !default;
1160-
$ct-navigation-light-drawer-menu-item-active-border-color: ct-color-light('highlight') !default;
11611154
$ct-navigation-light-drawer-menu-item-active-trail-background-color: ct-color-light('interaction-background') !default;
1162-
$ct-navigation-light-drawer-menu-item-active-trail-color: ct-color-light('background') !default;
11631155
$ct-navigation-light-drawer-sub-menu-background-color: ct-color-light('background-light') !default;
11641156
$ct-navigation-light-drawer-sub-menu-item-background-color: transparent !default;
11651157
$ct-navigation-light-drawer-sub-menu-item-heading-color: ct-color-light('heading') !default;

‎components/02-molecules/search/search.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
padding-left: ct-spacing(2);
2424
padding-right: ct-spacing(2);
2525
padding-top: $ct-navigation-drawer-top-offset;
26-
padding-bottom: $ct-navigation-drawer-top-offset;
26+
padding-bottom: calc($ct-navigation-drawer-top-offset + ct-particle(0.25));
2727
text-align: center;
2828
}
2929

@@ -41,28 +41,28 @@
4141

4242
@include ct-component-theme($root) using($root, $theme) {
4343
> .ct-link {
44-
@include ct-component-property(ct-navigation, $theme, drawer, menu-item, background-color);
45-
@include ct-component-property(ct-navigation, $theme, drawer, color);
44+
@include ct-component-property(ct-navigation, $theme, drawer, background-color);
45+
@include ct-component-property(ct-navigation, $theme, menu, color);
4646

4747
& {
48-
border-bottom-color: ct-component-var(ct-navigation, $theme, drawer, menu-item, border-color);
48+
border-bottom-color: ct-component-var(ct-navigation, $theme, menu, menu-item, border-color);
4949
}
5050

5151
&:hover {
5252
@include ct-breakpoint($ct-header-desktop-menu-breakpoint) {
5353
@include ct-component-property(ct-navigation, $theme, drawer, menu-item, hover, background-color);
54-
@include ct-component-property(ct-navigation, $theme, drawer, hover, color);
54+
@include ct-component-property(ct-navigation, $theme, menu, hover, color);
5555

56-
border-bottom-color: ct-component-var(ct-navigation, $theme, drawer, menu-item, hover, border-color);
56+
border-bottom-color: ct-component-var(ct-navigation, $theme, menu, menu-item, hover, border-color);
5757
}
5858
}
5959

6060
&[aria-expanded='true'],
6161
&:active {
6262
@include ct-component-property(ct-navigation, $theme, drawer, menu-item, active, background-color);
63-
@include ct-component-property(ct-navigation, $theme, drawer, active, color);
63+
@include ct-component-property(ct-navigation, $theme, menu, active, color);
6464

65-
border-bottom-color: ct-component-var(ct-navigation, $theme, drawer, menu-item, active, border-color);
65+
border-bottom-color: ct-component-var(ct-navigation, $theme, menu, menu-item, active, border-color);
6666
}
6767
}
6868
}

‎components/03-organisms/header/header.scss

+113-71
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,20 @@
8585
}
8686

8787
.ct-menu__item--level-0 {
88+
border-bottom: solid ct-particle(0.5);
89+
8890
> .ct-link {
8991
position: relative;
90-
padding-block: ct-spacing(2);
92+
padding: ct-spacing(2);
9193
font-weight: 500;
94+
display: block;
95+
text-align: center;
96+
97+
&::after {
98+
right: ct-spacing();
99+
margin-top: -1 * ct-particle(0.25);
100+
top: ct-spacing(2);
101+
}
92102
}
93103

94104
&.ct-menu__item--active-trail > .ct-link::after {
@@ -98,104 +108,136 @@
98108
}
99109
}
100110

101-
$root-drawer: '.ct-navigation';
102-
103-
&#{$root-drawer}--drawer {
104-
#{$root-drawer}__items {
105-
#{$root-drawer}__menu {
111+
@include ct-component-theme($root-nav) using($root-nav, $theme) {
112+
#{$root-nav}__items {
113+
#{$root-nav}__menu {
106114
.ct-menu__item {
107115
// Links - level 0.
108116
&--level-0 {
109-
border-bottom: solid ct-particle(0.5);
117+
border-bottom-color: ct-component-var($root-nav, $theme, menu-item, border-color);
110118

111-
> .ct-link {
112-
display: block;
113-
padding: ct-spacing(2);
114-
text-align: center;
115-
116-
&::after {
117-
right: ct-spacing();
118-
margin-top: -1 * ct-particle(0.25);
119-
top: ct-spacing(2);
120-
}
119+
&:hover {
120+
border-bottom-color: ct-component-var($root-nav, $theme, menu-item, hover, border-color);
121121
}
122-
}
123-
}
124-
}
125-
}
126-
127-
@include ct-component-theme($root-drawer) using($root-drawer, $theme) {
128-
#{$root-drawer}__items {
129-
#{$root-drawer}__menu {
130-
.ct-menu__item {
131-
// Links - level 0.
132-
&--level-0 {
133-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, border-color);
134122

135-
&:hover {
136-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
123+
&:active {
124+
border-bottom-color: ct-component-var($root-nav, $theme, menu-item, active, border-color);
125+
}
137126

138-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, hover, border-color);
127+
&[data-collapsible] {
128+
@if $theme == 'light' {
129+
color: $ct-navigation-light-menu-color;
139130
}
140-
141-
&:active {
142-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
143-
144-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, active, border-color);
131+
@else {
132+
color: $ct-navigation-dark-menu-color;
145133
}
146134

147-
&[data-collapsible] {
135+
border-bottom-color: ct-component-var($root-nav, $theme, menu, border-color);
136+
137+
&:hover {
148138
@if $theme == 'light' {
149-
color: $ct-navigation-light-drawer-color;
139+
color: $ct-navigation-light-menu-hover-color;
150140
}
151141
@else {
152-
color: $ct-navigation-dark-drawer-color;
142+
color: $ct-navigation-dark-menu-hover-color;
153143
}
154144

155-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer, border-color);
145+
border-bottom-color: ct-component-var($root-nav, $theme, menu-item, hover, border-color);
146+
}
156147

157-
&:hover {
158-
@if $theme == 'light' {
159-
color: $ct-navigation-light-drawer-hover-color;
160-
}
161-
@else {
162-
color: $ct-navigation-dark-drawer-hover-color;
163-
}
148+
&:active {
149+
border-bottom-color: ct-component-var($root-nav, $theme, menu-item, active, border-color);
150+
}
151+
}
164152

165-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
153+
&[data-collapsible-collapsed] {
154+
border-bottom-color: ct-component-var($root-nav, $theme, menu-item, border-color);
155+
}
166156

167-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, hover, border-color);
168-
}
157+
&.ct-menu__item--active-trail {
158+
border-bottom-color: ct-component-var($root-nav, $theme, menu, border-color);
159+
}
169160

170-
&:active {
171-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
161+
> .ct-link {
162+
@include ct-component-property($root-nav, $theme, menu, color);
172163

173-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, active, border-color);
174-
}
164+
&:hover {
165+
@include ct-component-property($root-nav, $theme, menu, hover, color);
175166
}
176167

177-
&[data-collapsible-collapsed] {
178-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, border-color);
168+
&[aria-expanded='true'],
169+
&:active {
170+
@include ct-component-property($root-nav, $theme, menu, active, color);
171+
}
172+
}
173+
}
174+
}
175+
}
176+
}
177+
}
178+
179+
$root-drawer: '.ct-navigation';
180+
181+
// &#{$root-drawer}--drawer {
182+
// #{$root-drawer}__items {
183+
// #{$root-drawer}__menu {
184+
// .ct-menu__item {
185+
// // Links - level 0.
186+
// &--level-0 {
187+
// border-bottom: solid ct-particle(0.5);
188+
189+
// > .ct-link {
190+
// display: block;
191+
// text-align: center;
192+
193+
// &::after {
194+
// right: ct-spacing();
195+
// margin-top: -1 * ct-particle(0.25);
196+
// top: ct-spacing(2);
197+
// }
198+
// }
199+
// }
200+
// }
201+
// }
202+
// }
203+
// }
204+
205+
@include ct-component-theme($root-drawer) using($root-drawer, $theme) {
206+
#{$root-drawer}__items {
207+
#{$root-drawer}__menu {
208+
.ct-menu__item {
209+
// Links - level 0.
210+
&--level-0 {
211+
212+
&:hover {
213+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
214+
}
215+
216+
&:active {
217+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
218+
}
219+
220+
&[data-collapsible] {
221+
222+
&:hover {
223+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
179224
}
180225

181-
&.ct-menu__item--active-trail {
182-
border-bottom-color: ct-component-var($root-drawer, $theme, drawer, border-color);
226+
&:active {
227+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
183228
}
229+
}
184230

185-
> .ct-link {
186-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, background-color);
187-
@include ct-component-property($root-drawer, $theme, drawer, color);
231+
> .ct-link {
232+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, background-color);
188233

189-
&:hover {
190-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
191-
@include ct-component-property($root-drawer, $theme, drawer, hover, color);
192-
}
234+
&:hover {
235+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
236+
}
193237

194-
&[aria-expanded='true'],
195-
&:active {
196-
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
197-
@include ct-component-property($root-drawer, $theme, drawer, active, color);
198-
}
238+
&[aria-expanded='true'],
239+
&:active {
240+
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
199241
}
200242
}
201243
}

0 commit comments

Comments
 (0)
Please sign in to comment.