demarches-normaliennes/app/assets/stylesheets/new_design/new_header.scss
2019-03-20 15:23:35 +01:00

238 lines
3.8 KiB
SCSS

@import "colors";
@import "common";
@import "constants";
@import "mixins";
$header-landing-breakpoint: 1040px;
$header-mobile-breakpoint: 550px;
// FIXME: Rename when the header is generalized
.new-header {
background-color: #FFFFFF;
}
.new-header-with-border {
border-bottom: 1px solid $border-grey;
}
.header-inner-content {
@extend .container;
display: flex;
justify-content: space-between;
min-height: 72px;
}
.header-logo {
display: inline-block;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
// Logo large
background-image: image-url("header/logo-ds-wide.svg");
width: 360px;
margin-right: 4 * $default-spacer;
// Logo normal
@media (max-width: $header-landing-breakpoint) {
background-image: image-url("header/logo-ds.svg");
width: 132px;
margin-right: $default-spacer;
}
// Logo narrow
@media (max-width: $header-mobile-breakpoint) {
background-image: image-url("header/logo-ds-narrow.svg");
width: 32px;
margin-right: 0;
}
}
.header-tabs {
li {
@include horizontal-padding($default-padding);
display: inline-block;
}
.tab-link {
display: inline-block;
height: 72px;
line-height: 72px;
font-size: 18px;
color: $black;
&.active,
&:hover {
color: $blue;
border-bottom: 2px solid $blue;
&.contact-link {
position: relative;
border-bottom: none;
.contact-details {
display: block;
}
}
}
}
}
.contact-details {
display: none;
position: absolute;
left: -165px;
background: #FFFFFF;
border: 2px solid $blue;
border-radius: 5px;
padding: 15px;
width: 400px;
color: $black;
z-index: 100;
font-size: initial;
line-height: 1.6;
&::after,
&::before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&::after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #FFFFFF;
border-width: 15px;
margin-left: -15px;
}
&::before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: $blue;
border-width: 18px;
margin-left: -18px;
}
ul {
list-style-type: disc;
}
}
.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;
max-width: 300px;
min-width: 90px;
margin: 0;
}
button {
padding: 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-button {
border: none;
padding: 0;
line-height: 14px;
vertical-align: middle;
&:hover {
background: none;
}
&::after {
display: none;
}
}
.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;
z-index: 20;
&.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;
}
}
}
}