MyCrypto/common/components/Header/index.scss

110 lines
1.9 KiB
SCSS
Raw Normal View History

@import "common/sass/variables";
@import "common/sass/mixins";
$small-size: 900px;
@mixin small-query {
@media screen and (max-width: $small-size) {
@content;
}
}
@mixin big-query {
@media screen and (min-width: $small-size + 1) {
@content;
}
}
// Header
.Header {
&-branding {
color: white;
padding: 0;
@include bg-gradient;
@include small-query {
text-align: center;
}
&-inner {
display: flex;
align-items: center;
@include small-query {
flex-direction: column;
padding-left: $cont-padding;
padding-right: $cont-padding;
}
}
&-title {
@include big-query {
flex-basis: 245px;
}
&-logo {
max-width: 1000px;
padding: 5px 0;
min-width: 220px;
}
&-tagline {
font-size: 18px;
font-weight: 200;
color: white;
flex: 1 auto;
text-align: right;
padding: 5px 0;
@include small-query {
text-align: center;
}
> * {
display: inline;
vertical-align: middle;
}
}
}
a {
color: white;
cursor: pointer;
font-weight: 400;
transition: 250ms all ease;
&:hover,
&:active {
opacity: .8;
color: white;
text-decoration: none;
transition: 250ms all ease;
}
}
// TODO - Move to dropdown component?
.dropdown {
margin-left: 15px;
padding: 0;
text-align: right;
white-space: nowrap;
.dropdown-menu {
right: -10px;
left: auto;
min-width: auto;
left: auto;
& > li > a {
font-size: 15px;
padding: 5px 30px 5px 15px;
position: relative;
&.active {
text-decoration: none;
color: $brand-primary;
background-color: $gray-lightest;
}
}
}
}
}
}