ildi-wp/dev/scss/components/_global-head.scss
2018-08-10 15:08:34 -05:00

54 lines
931 B
SCSS

.global-head {
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
margin: 0 auto;
width: 83%;
> * {
flex: 0 0 auto;
}
.logo-banner { order: 1; }
.search-form { order: 2; }
.header-menu { order: 3; }
.social-menu { order: 4; }
}
@media screen and (min-width: #{$screen-tablet}) {
.global-head {
width: $container-tablet;
.social-menu { order: 1; }
.search-form { order: 2; }
.logo-banner { order: 3; }
.header-menu { order: 4; }
.social-menu,
.search-form {
flex: 1 0 auto;
width: auto;
}
}
}
@media screen and (min-width: #{$screen-tablet-lg}) {
.global-head {
width: $container-tablet-lg;
}
}
@media screen and (min-width: #{$screen-desktop}) {
.global-head {
width: $container-desktop;
}
}
@media screen and (min-width: #{$screen-desktop-lg}) {
.global-head {
width: $container-desktop-lg;
}
}