Skip to content

Instantly share code, notes, and snippets.

@machal

machal/header.less

Created Jun 6, 2016
Embed
What would you like to do?
header.less before refactor
.header {
padding-bottom: 10px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
&__logo {
width: 100%;
padding: 10px;
}
&__middle {
width: 100%;
margin: 10px 0;
order: 2;
}
&__cart {
width: 38px;
}
&__top {
display: none;
}
&__mobile {
width: 80%;
width: calc(~"100% - 38px");
text-align: right;
}
}
@media @query-lg {
.header {
padding-bottom: 20px;
&__top {
order: -1;
display: flex;
align-items: center;
width: 100%;
margin-bottom: 10px;
&__left {
flex: 1;
}
&__right {
flex: 1;
}
}
&__logo {
flex: 1;
order: 1;
width: auto;
padding-right: 20px;
}
&__middle {
order: 2;
width: 280px;
margin: 0;
}
&__cart {
padding-left: 20px;
flex: 1;
order: 3;
text-align: right;
}
&__mobile {
display: none;
}
}
}
@media @query-vl {
.header {
&__middle {
width: 440px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.