MyCrypto/common/components/ElectronNav/ElectronNav.scss

155 lines
2.9 KiB
SCSS

@import 'common/sass/variables';
@import 'common/sass/mixins';
// Prefer pixels of rem in this file, Electron shouldn't be responsive in the
// same way the content is.
$branding-spacing-top: 12px;
$back-spacing: 10px;
.ElectronNav {
transition: transform 300ms ease;
&.is-panel-open {
transform: translateX(-100%);
}
&-branding {
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: $branding-spacing-top;
background: #FFF;
z-index: 1;
border-bottom: 1px solid $gray-lighter;
.is-osx & {
padding-top: $electron-osx-control-spacing + $branding-spacing-top - 5;
}
&-logo {
margin-left: -1px;
height: 35px;
margin-bottom: 10px;
background-image: url('~assets/images/logo-mycrypto-transparent.svg');
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
&-beta {
text-align: center;
letter-spacing: 4px;
height: 20px;
line-height: 20px;
color: #FFF;
background: $brand-info;
text-transform: uppercase;
font-size: 8px;
opacity: 0.8;
pointer-events: none;
}
}
&-links {
padding: 0;
margin: 0 auto;
}
&-status {
margin: 12px 0;
padding-left: 10px;
}
&-controls {
margin: 10px 0;
padding: 0 10px;
&-btn {
@include reset-button;
display: flex;
align-items: center;
width: 100%;
color: $gray-light;
font-size: 12px;
padding: 6px 0;
&-icon {
font-size: 11px;
margin-left: 4px;
}
&:hover {
color: $link-hover-color;
}
}
}
&-panel {
position: absolute;
top: 0;
left: 100%;
width: 100%;
z-index: $zindex-navbar - 1;
&-back {
@include reset-button;
position: sticky;
top: 0;
display: flex;
align-items: center;
width: 100%;
text-align: left;
padding: $back-spacing 0 8px $back-spacing;
border-bottom: 1px solid $gray-lighter;
color: rgba($text-color, 0.4);
background: #FFF;
.is-osx & {
padding-top: $electron-osx-control-spacing + $back-spacing;
}
&-icon {
font-size: 12px;
margin-right: 4px;
}
&:hover {
color: $link-hover-color;
}
}
}
}
// Styling for common/components/NavigationLink, with custom classname
.ElectronNavLink {
display: block;
margin: 0;
@include ellipsis;
&-link {
display: block;
height: 48px;
line-height: 48px;
padding: 0 0 0 10px;
border-bottom: 1px solid $gray-lighter;
color: $text-color;
font-size: 14px;
font-weight: normal;
&.is-active {
color: $link-color;
background: $gray-lightest;
}
&:hover {
color: $link-hover-color;
}
&-icon {
font-size: 12px;
margin-left: 3px;
opacity: 0.8;
}
}
}