Skip to content

Commit

Permalink
refactor(megaMenu): update margins for menu items
Browse files Browse the repository at this point in the history
  • Loading branch information
@tarantilis
tarantilis committed Feb 25, 2022
1 parent 06cc3b6 commit 230e476
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 50 deletions.
4 changes: 2 additions & 2 deletions src/ui/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ class Header extends Component {
</Header.BurgerAction>
)}
<div
className="eea-header-search-action"
className="search-action"
onClick={this.searchOnClick}
role="none"
>
Expand Down Expand Up @@ -354,7 +354,7 @@ Header.Main = Main;

const BurgerAction = (props) => (
<div
className={`eea-header-burger-action ${props.className}`}
className={`burger-action ${props.className}`}
role="none"
onClick={props.onClick}
>
Expand Down
81 changes: 39 additions & 42 deletions theme/themes/eea/extras/header.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
Header
*******************************/


.eea.header {
background: @white;

Expand Down Expand Up @@ -259,26 +258,28 @@
/***************************************
Header Actions - Burger and Search Icons
***************************************/
.eea-header-burger-action {
.burger-action {
display: flex;
width: @mobileActionsBoxWidth;
height: @mobileMainSectionHeight;
align-items: center;
justify-content: center;
cursor: pointer;
width: @mobileActionsBoxWidth;
height: @mobileMainSectionHeight;
background-color: @mediumPersianBlue;
}

.eea-header-burger-action.desktop {
.burger-action.desktop {
display: none;
}

.eea-header-burger-action.mobile {
.burger-action.mobile {
display: flex;
flex-direction: column;
cursor: pointer;
}

.eea-header-search-action {
.search-action {
cursor: pointer;
display: flex;
width: @mobileActionsBoxWidth;
height: @mobileMainSectionHeight;
Expand All @@ -288,7 +289,7 @@ Header Actions - Burger and Search Icons

}

.eea-header-burger-action,.eea-header-search-action,.eea-header-burger-action.mobile {
.burger-action,.search-action,.burger-action.mobile {
img {
width: 60%;
}
Expand Down Expand Up @@ -358,13 +359,13 @@ Header Actions - Burger and Search Icons
display: none;
}

.eea-header-burger-action.mobile {
.burger-action.mobile {
display: flex;
}

/* Action Boxes */
.eea-header-burger-action.mobile,
.eea-header-search-action {
.burger-action.mobile,
.search-action {
width: @tabletActionsBoxWidth;
height: @tabletMainSectionHeight;
}
Expand Down Expand Up @@ -409,17 +410,17 @@ Header Actions - Burger and Search Icons
}
}

.eea-header-burger-action.mobile {
.burger-action.mobile {
display: none;
}

.eea-header-burger-action.desktop {
.burger-action.desktop {
display: flex;
width: @computerActionsBoxWidth;
height: @computerMainSectionHeight;
}

.eea-header-search-action {
.search-action {
width: @computerActionsBoxWidth;
height: @computerMainSectionHeight;
}
Expand All @@ -431,9 +432,6 @@ Header Actions - Burger and Search Icons
}
}




/************************
MEGA MENU
************************/
Expand Down Expand Up @@ -479,16 +477,15 @@ Header Actions - Burger and Search Icons
}

nav ul li {
margin: 0px;
display: inline-block;
font-size: @mobileMegaMenuFontSize;
}

nav a {
color: @mobileMegaMenuColor;
display: flex;
color: @mobileMegaMenuColor;
padding: @megaMenuLinkPadding;
line-height: @mobileMegaMenuLineHeight;
line-height: @megaMenuLineHeight;
word-break: @megaMenuWordBreak;
}

Expand All @@ -514,12 +511,6 @@ Header Actions - Burger and Search Icons
left: 0;
}

// li > a:after {
// content: "\f054";
// font-family: 'Icons';
// font-size: @megaMenuIconAfterFontSize;
// }

li > a:only-child:after {
content: "";
}
Expand All @@ -542,25 +533,29 @@ Header Actions - Burger and Search Icons
display: block;
padding: @toggleMenuFirstPadding;
color: @mobileMegaMenuColor;
line-height: @mobileMegaMenuLineHeight;
line-height: @megaMenuLineHeight;
}

[id^=drop]:checked + ul {
display: block;
}

nav ul li {
display: block;
width: 100%;
}
nav ul li {
display: block;
width: 100%;
}

nav .menu > li > .toggle,
nav .menu > li > a {
padding: @mobileToggleMenuFirstPadding;
}
nav ul ul .toggle,
nav ul ul a {
padding: @toggleMenuSecondPadding;
padding: @mobileToggleMenuSecondPadding;
}

nav ul ul ul a {
padding: @toggleMenuThirdPadding;
padding: @mobileToggleMenuThirdPadding;
}


Expand Down Expand Up @@ -604,20 +599,20 @@ Header Actions - Burger and Search Icons
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
align-items: @megaMenuLiAlignItems;
margin-bottom: @tabletMegaMenuMarginBottom;

&.hasSubMenu:after {
content: '\f054';
content: @megaMenuAfterIcon;
font-family: 'Icons';
font-size: @tabletMegaMenuIconAfterFontSize;
color: @white;
}
a {
display: flex;
justify-content: space-between;
align-items: baseline;
align-items: @megaMenuLiAlignItems ;
max-width: 100%;
line-height: @tabletMegaMenuLineHeight;
padding-left: 2rem;
}
}
Expand All @@ -631,10 +626,11 @@ Header Actions - Burger and Search Icons
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
align-items: @megaMenuLiAlignItems;
margin-bottom: @tabletMegaMenuMarginBottom;

&.hasSubMenu:after {
content: '\f054';
content: @megaMenuAfterIcon;
font-family: 'Icons';
font-size: @tabletMegaMenuIconAfterFontSize;
color: @megaMenuIconAfterColor;
Expand All @@ -650,6 +646,7 @@ Header Actions - Burger and Search Icons
width: 100%;
min-height: 50vh;
li {
margin-bottom: @tabletMegaMenuMarginBottom;
> a {
max-width: 100%;
}
Expand All @@ -669,22 +666,22 @@ Header Actions - Burger and Search Icons
.menu {
> li {
font-size: @computerMegaMenuFirstFontSize;
margin-bottom: 2rem;
margin-bottom: @computerMegaMenuMarginBottom;
&.hasSubMenu:after {
font-size: @computerMegaMenuIconAfterFontSize;
}
}
}
.sub.second li {
font-size: @computerMegaMenuSecondFontSize;
margin-bottom: 1.7rem;
margin-bottom: @computerMegaMenuMarginBottom;;
&.hasSubMenu:after {
font-size: @computerMegaMenuIconAfterFontSize;
}
}
.sub.third li {
font-size: @computerMegaMenuThirdFontSize;
margin-bottom: 1.5rem;
margin-bottom: @computerMegaMenuMarginBottom;;
}
}
}
Expand Down
19 changes: 13 additions & 6 deletions theme/themes/eea/extras/header.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,21 +110,28 @@
@megaMenuLinkPadding : 0 1.25rem;
@megaMenuWordBreak : break-word;
@toggleMenuFirstPadding : 0;
@toggleMenuSecondPadding : 0 1.25rem;
@toggleMenuThirdPadding : 0 2.5rem;
@mobileToggleMenuFirstPadding : 0.5rem 0;
@mobileToggleMenuSecondPadding : 0.5rem 1.25rem;
@mobileToggleMenuThirdPadding : 0.5rem 2.5rem;

@megaMenuLiAlignItems : center;

@mobileMegaMenuMarginBottom : 0.5rem;
@tabletMegaMenuMarginBottom : 1rem;
@computerMegaMenuMarginBottom : 2rem;

// Font sizes and line heights
@mobileMegaMenuFontSize : 1.125rem;
@tabletMegaMenuFontSize : @h1;
@computerMegaMenuMarginBottom : 1rem;

@computerMegaMenuFirstFontSize : 3rem;
@computerMegaMenuSecondFontSize : 2.5rem;
@computerMegaMenuThirdFontSize : 2.25rem;

@mobileMegaMenuLineHeight : 2.5rem;
@tabletMegaMenuLineHeight : 3rem;
//@computerMegaMenuLineHeight : 4.5rem;
@megaMenuLineHeight : 1.2;

// Icon
@megaMenuAfterIcon : '\f054';
@megaMenuIconAfterColor : @white;
@tabletMegaMenuIconAfterFontSize : 1rem;
@computerMegaMenuIconAfterFontSize: 1.875rem;
Expand Down

0 comments on commit 230e476

Please sign in to comment.