app/assets/stylesheets/components/header.scss
& {
line-height: $header-h;
background-color: rgba(0, 0, 0, .8);
color: #fff;
padding: 0 20px;
position: fixed;
width: 100%;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.logo {
background: image_url('bar_logo_white.png') center center no-repeat;
background-size: contain;
$size: 17px;
height: $size;
width: $size * 1361px /125px;
}
.account-home {
font-size: 2rem;
font-weight: 600;
}
.split {
content: '';
@extend .dib-middle;
height: 20px;
width: 1px;
margin: 0 20px;
background-color: #fff;
}
.hover-link {
transition: all .3s;
}
.hover-link:hover {
opacity: .8;
}
.dropdown-side {
position: relative;
height: $header-h;
display: flex;
align-items: center;
.dropdown {
position: absolute;
top: $header-h;
right: 0;
line-height: 35px;
font-size: 1.6rem;
color: #000;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transition: all .3s;
opacity: 0;
transform: translateY(10px);
transform-origin: bottom;
visibility: hidden;
&::after {
position: absolute;
top: -6px;
right: 10px;
content: '';
height: 0;
border-style: solid;
border-width: 0 7px 7px 7px;
border-color: transparent transparent #ffffff transparent;
}
a {
text-align: center;
display: block;
padding: 5px 10px;
min-width: 120px;
transition: all .3s;
background-color: #fff;
&:hover {
background-color: #efefef;
}
}
a:not(:last-child) {
border: 1px solid #efefef;
}
}
&.active .dropdown {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
@include mediaMin($mobile-w) {
&:hover .dropdown {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
}
}
@include mediaMax($mobile-w) {
.logo {
display: none;
}
.account-home {
font-size: 1.7rem;
}
.split {
display: none;
height: 15px;
}
}