MyCrypto/common/components/Header/index.scss

167 lines
2.9 KiB
SCSS

@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;
}
}
@keyframes dropdown-is-flashing {
0%,
100% {
opacity: 0.8;
}
50% {
opacity: 0.7;
}
}
// Header
.Header {
margin-bottom: 2rem;
@media screen and (max-width: $screen-sm) {
margin-bottom: 1rem;
}
&-announcement {
padding: 4px 10px;
line-height: 26px;
font-size: 16px;
text-align: center;
font-weight: 300;
color: #fff;
transition: background-color 80ms ease;
background: $gray-darker;
a {
color: #fff;
text-decoration: underline;
transition: none;
&:hover,
&:focus {
opacity: 0.7;
}
}
// Colors
&.is-primary {
background: $brand-primary;
}
&.is-warning {
background: $brand-warning;
}
&.is-danger {
background: $brand-danger;
}
&.is-success {
background: $brand-success;
}
&.is-info {
background: $brand-info;
border-bottom: 1px solid rgba(#fff, 0.6);
}
}
&-branding {
color: white;
padding: 0;
background: #274e7e;
background-image: url('~assets/images/header-bg.jpg'), linear-gradient(130deg, #37709e, #274e7e);
background-size: cover;
background-position: left;
@include small-query {
text-align: center;
background-position: 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 {
text-align: left;
}
&-logo {
height: 64px;
width: auto;
padding: 8px;
padding-right: 0;
filter: drop-shadow(0 1px 0 rgba(#000, 0.12)) drop-shadow(1px 1px 0 rgba(#000, 0.12));
}
}
&-right {
font-size: 18px;
font-weight: 300;
color: white;
flex: 1 auto;
text-align: right;
padding: 0 0 5px;
@include small-query {
text-align: center;
}
> * {
display: inline-block;
vertical-align: middle;
margin-top: 5px;
}
&-version {
max-width: 395px;
margin-right: 10px;
}
&-online {
margin-right: 6px;
}
&-dropdown {
margin-left: 6px;
@media screen and (max-width: $screen-xs) {
.btn {
padding: 0.3rem 0.5rem;
}
}
&-add {
text-align: center;
padding-top: $space-sm !important;
padding-bottom: $space-sm !important;
}
&.is-flashing {
pointer-events: none;
animation: dropdown-is-flashing 800ms ease infinite;
}
}
}
}
}