demarches-normaliennes/app/assets/stylesheets/new_header.scss
2021-02-02 15:26:11 +01:00

242 lines
3.6 KiB
SCSS

@import "colors";
@import "common";
@import "constants";
@import "mixins";
@import "utils";
$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: flex;
flex-wrap: wrap;
align-items: center;
img {
margin-right: 10px;
}
.site-title {
font-size: 24px;
font-weight: bold;
&.small {
@media (min-width: $header-mobile-breakpoint) {
display: none;
}
}
&.big {
@media (max-width: $header-mobile-breakpoint) {
display: none;
}
}
}
}
.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;
}
label.hidden {
@extend .hidden;
}
button {
@extend %outline;
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;
}
}
.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: $dark-grey;
overflow: hidden;
text-overflow: ellipsis;
img {
margin-right: 14px;
}
}
.menu-link {
display: flex;
color: $black;
&:hover {
background: $light-grey;
}
}
}
}