mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-27 12:56:01 +01:00
e067379f48
The beta build currently has a couple of UI elements (the horizontal logo and the app header) set to "dark mode", even though nothing else in our UI supports dark mode yet. These styles have been removed. We should make the entire UI support dark mode all at once at a later date. Also the horizontal logo used for beta was named incorrectly; the dark and non-dark logos were swapped. They have been switched back so that the logo that ends with `-dark` is for dark mode.
108 lines
1.9 KiB
SCSS
108 lines
1.9 KiB
SCSS
.app-header {
|
|
align-items: center;
|
|
background: $Grey-000;
|
|
position: relative;
|
|
z-index: $header-z-index;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
|
|
@media screen and (max-width: $break-small) {
|
|
padding: 1rem;
|
|
z-index: $mobile-header-z-index;
|
|
}
|
|
|
|
@media screen and (min-width: $break-large) {
|
|
height: 75px;
|
|
justify-content: center;
|
|
|
|
&--back-drop {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 32px;
|
|
background: $Grey-000;
|
|
bottom: -32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__metafox-logo {
|
|
&--icon {
|
|
height: 32px;
|
|
|
|
@media screen and (min-width: $break-large) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--horizontal {
|
|
@media screen and (max-width: $break-small) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__contents {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
width: 100%;
|
|
|
|
@media screen and (max-width: $break-small) {
|
|
height: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: $break-large) {
|
|
width: 85vw;
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
width: 80vw;
|
|
}
|
|
|
|
@media screen and (min-width: 1281px) {
|
|
width: 62vw;
|
|
}
|
|
}
|
|
|
|
&__logo-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
margin-right: 1rem;
|
|
|
|
&--clickable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&__account-menu-container {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&__network-component-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
width: 0;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&__network-down-arrow {
|
|
background-image: url(/images/icons/caret-down.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
}
|