Skip to content

Commit

Permalink
Add Menu button in new header variant (#3478)
Browse files Browse the repository at this point in the history 
Co-authored-by: rmccar <[email protected]>
Co-authored-by: Andrew <[email protected]>
  • Loading branch information
@SriHV @rmccar @admilne
3 people authored Feb 10, 2025
1 parent 9720413 commit adf4138
Show file tree
Hide file tree
Showing 9 changed files with 444 additions and 26 deletions.
10 changes: 10 additions & 0 deletions __snapshots__/layout/_template.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,11 @@ exports[`base page template matches the favicons block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -471,9 +473,11 @@ exports[`base page template matches the footer block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -844,6 +848,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</div>


</div>
</div>

Expand Down Expand Up @@ -885,6 +890,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</nav>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -1999,9 +2005,11 @@ exports[`base page template matches the meta block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -2224,9 +2232,11 @@ exports[`base page template matches the social block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down
4 changes: 2 additions & 2 deletions ...nce/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 79 additions & 1 deletion src/components/button/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,8 @@ $button-shadow-size: 3px;
}

&--mobile[aria-expanded='true'],
&--text-link[aria-expanded='true'] {
&--text-link[aria-expanded='true'],
&--menu[aria-expanded='true'] {
.ons-icon {
transform: rotate(270deg);
}
Expand Down Expand Up @@ -551,6 +552,83 @@ $button-shadow-size: 3px;
}
}
}

&--menu {
align-items: center;
display: flex;
padding: 1.5rem;
border-bottom: 4px solid rgb(0 0 0 / 0%);
.ons-icon {
transform: rotate(90deg);
}
}

&--menu & {
&__inner {
background: rgb(0 0 0 / 0%);
box-shadow: none;
color: var(--ons-color-text-link);
padding: 0;
.ons-icon {
fill: var(--ons-color-text-link);
height: 1rem;
margin-top: 0;
width: 1rem;
}
}
}

&--menu:focus {
background-color: var(--ons-color-focus);
border-color: var(--ons-color-black);
}

&--menu:hover {
border-color: var(--ons-color-text-link-hover);
}

&--menu:focus & {
&__inner {
box-shadow: none;
}
}

&--menu:focus:hover:not(:active, .active) {
.ons-btn__inner {
background: none;
}
}

&--menu:active,
&--menu[aria-expanded='true'] {
background-color: var(--ons-color-branded-tint);
border-color: var(--ons-color-text-link-hover);
}

&--menu:hover &,
&--menu:active &,
&--menu.active & {
&__inner {
background: none;
color: var(--ons-color-text-link-hover);
.ons-icon {
fill: var(--ons-color-text-link-hover);
}
}
}

&--menu:active &,
&--menu:active:focus &,
&--menu.active &,
&--menu.active:focus & {
&__inner {
background: none;
color: var(--ons-color-text-link-hover);
.ons-icon {
fill: var(--ons-color-text-link-hover);
}
}
}
}

.ons-search__btn {
Expand Down
42 changes: 42 additions & 0 deletions src/components/header/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,48 @@
}
}

&--basic & {
&__grid-top {
padding: 0;
}
}

&-nav-menu {
background-color: var(--ons-color-branded-tint);
width: 100%;

&__key-list {
border-bottom: 1px solid var(--ons-color-ocean-blue);
margin-bottom: 1.25rem;
padding-bottom: 1rem;
padding-left: 0;
row-gap: 1rem;
}

&__link,
&__heading,
&__text,
&__description {
line-height: 1.714 !important;
}

&__groupItem-list:not(:last-of-type) {
margin-bottom: 2rem !important;
}

.ons-grid {
margin-left: 0;
}

.ons-grid__col {
padding-left: 0;
padding-bottom: 1rem;
@include mq(m) {
padding-bottom: 0;
}
}
}

.ons-btn {
top: 0 !important;
}
Expand Down
Loading

0 comments on commit adf4138

Please sign in to comment.