m_menu

One

Markup
Output
{ } Styles

Expand

Copy

Edit

<div class="l_grid l_grid--twin"> <ul class="m_menu a_list-bare l_beam l_beam--wrap l_beam--spaced"> <li class="m_menu__child m_menu__child--active"><a href="#">One</a></li> <li class="m_menu__child"><a href="#">Two</a></li> <li class="m_menu__child"><a href="#">Three</a></li> <li class="m_menu__child"><a href="#">Four</a></li> <li class="m_menu__child"><a href="#">Five</a></li> </ul> <div class="m_menu--compact m_menu--compact__holder"> <p class="m_menu--compact__current">One</p> <ul class="m_menu a_list-bare"> <li class="m_menu__child m_menu__child--active"><a href="#">One</a></li> <li class="m_menu__child"><a href="#">Two</a></li> <li class="m_menu__child"><a href="#">Three</a></li> <li class="m_menu__child"><a href="#">Four</a></li> <li class="m_menu__child"><a href="#">Five</a></li> </ul> </div> <ul class="m_menu--drop-down l_beam l_beam--wrap l_beam--spaced a_list-bare"> <li class="m_menu__child"> <a href="#">One</a> <ul class="m_menu a_list-bare"> <li class="m_menu__child"><a href="#">1</a></li> <li class="m_menu__child"><a href="#">2</a></li> <li class="m_menu__child"><a href="#">3</a></li> <li class="m_menu__child"><a href="#">4</a></li> </ul> </li> <li class="m_menu__child"> <a href="#">Two</a> <ul class="m_menu a_list-bare"> <li class="m_menu__child"><a href="#">1</a></li> <li class="m_menu__child"><a href="#">2</a></li> <li class="m_menu__child"><a href="#">3</a></li> <li class="m_menu__child"><a href="#">4</a></li> </ul> </li> <li class="m_menu__child"> <a href="#">Three</a> <ul class="m_menu a_list-bare"> <li class="m_menu__child"><a href="#">1</a></li> <li class="m_menu__child"><a href="#">2</a></li> <li class="m_menu__child"><a href="#">3</a></li> <li class="m_menu__child"><a href="#">4</a></li> </ul> </li> <li class="m_menu__child"> <a href="#">Four</a> <ul class="m_menu a_list-bare"> <li class="m_menu__child"><a href="#">1</a></li> <li class="m_menu__child"><a href="#">2</a></li> <li class="m_menu__child"><a href="#">3</a></li> <li class="m_menu__child"><a href="#">4</a></li> </ul> </li> </ul> </div>

Copy

Edit

/* scss/3-molecules/_m_menu.scss */ @mixin menubg { //left: calc(var(--base-unit) * -1); // padding: my-bs(1.5) var(--base-unit); background-color: var(--whiteLC); // box-shadow: 1px 1px .25rem rgba(black,.25); } .m_menu { &__child { &:not(.right > &){ //margin-right: var(--base-unit); } .gap-small &{ margin-right: var(--base-unit--s) } &:last-child { //margin-right: calc(var(--base-unit--s) * -1); } .buttons & { padding: 0 var(--base-unit--ss); height: min-content; background: var(--black); color: var(--white); &--active, &:hover { background: var(--white); color: var(--black); } } &--active { a { @extend a:hover; // text-underline-offset: .15em; font-weight: 500; } } } &--drop-down { > li { position: relative; z-index: 2; &:hover ul { @media screen and (min-width: $medium) { display: block; z-index: -1; } } } ul { display: none; width: 100%; position: absolute; @include menubg(); } } &--compact { position: relative; z-index:2; width: max-content; &__current { font-weight: 400; cursor: pointer; &:after{ content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAyMyAxMyIg ZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMDc1OTk5OSAwLjk1NDkwNUwxM S40MTIgNy42ODg5MUwyMi43NDggMC45NTQ5MDZMMjIuNzQ4IDYuMTI4OTFMMTEuNDEyIDEyLjY4MDlMMC4wNzU5OTk3IDYuMTAyOTFMMC 4wNzU5OTk5IDAuOTU0OTA1WiIgZmlsbD0iIzI3MjcyNyIvPgo8L3N2Zz4K"); display: inline-block; transform: scale(.62); } } &__holder { position: relative; > ul { display: none; position: absolute; z-index: -1; width: max-content; top: 0; height: max-content; padding-top: my-bs(1.5); padding-bottom: my-bs(2); padding-left: var(--base-unit); left: calc(var(--base-unit) * -1); @include menubg(); .m_menu__child--active { display: none; } } } &:hover ul { display: block; } } }

m_logo

Markup
Output
{ } Styles

Expand

m_video

Markup
Output
{ } Styles

Expand

m_hamburger

Markup
Output
{ } Styles

Expand

Copy

Edit

/* scss/4-molecules/_m_hamburger.scss */ .m_hamburger { position: fixed; left: 0; right: 0; top: 0; padding-top: my-bs(1.5); padding-right: var(--base-unit); padding-left: var(--base-unit); z-index: 100; &[open] { background-color: var(--hamburger-background-colour); bottom: 0; } > summary { display: flex; justify-content: flex-end; } &__button { width: 28px; background-color: var(--background-colour); [open] & { background-color: var(--hamburger-background-colour); } } &__icon { &:after, &:before, & div { background-color: var(--black); //border-radius: 3px; content: ''; display: block; height: 2.5px; margin: 7px 0; transition: all .2s ease-in-out; } &:hover:after, &:hover:before, &:hover div { opacity: .5; } .is-active & { &:before { transform: translateY(9.5px) rotate(135deg); } &:after { transform: translateY(-9.5px) rotate(-135deg); } div { transform: scale(0); } } } &__menu { } }

m_thumb