demarches-normaliennes/app/assets/stylesheets/new_design/new_header.scss
2017-09-06 11:11:10 +02:00

138 lines
2 KiB
SCSS

@import "colors";
@import "common";
@import "constants";
@import "mixins";
// FIXME: Rename when the header is generalized
.new-header {
height: 72px;
background-color: #FFFFFF;
}
.new-header-with-border {
border-bottom: 1px solid $border-grey;
}
.header-inner-content {
@extend .container;
display: flex;
justify-content: space-between;
height: 100%;
}
.header-logo {
display: inline-block;
margin-right: 4 * $default-spacer;
}
.header-left-menu {
li {
display: inline-block;
}
a {
@include vertical-padding(23px);
font-size: 18px;
color: $black;
&.active {
color: $blue;
border-bottom: 2px solid $blue;
}
}
}
.header-right-content {
display: flex;
align-items: center;
> li {
@include horizontal-padding(8px);
&:last-child {
padding-right: 0;
}
}
}
.header-search {
position: relative;
.form input[type=text] {
padding: 9px;
padding-right: 42px;
float: right;
width: 300px;
}
button {
padding: 6px 9px;
border: none;
background: none;
cursor: pointer;
position: absolute;
right: 0;
&:hover {
opacity: 0.8;
}
}
}
.header-menu-opener {
position: relative;
img {
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
}
.header-menu {
display: none;
position: absolute;
right: 0;
top: 34px;
font-size: 14px;
background: #FFFFFF;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1px solid $border-grey;
min-width: 270px;
max-width: 340px;
&.open {
display: block;
}
li {
border-bottom: 1px solid $border-grey;
&:last-child {
border-bottom: none;
}
.menu-item {
align-items: center;
padding: 14px;
color: $grey;
overflow: hidden;
text-overflow: ellipsis;
img {
margin-right: 14px;
}
}
.menu-link {
display: flex;
color: $black;
&:hover {
background: $light-grey;
}
}
}
}