mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 03:36:18 +02:00
095eeab881
The tabs on the Home page have been updated to match the new home screen designs. A new `activeClassName` prop was added to the `Tab` component to allow applying different styles to the active tab state. I ran into specificity problems when overriding the default `Tab` styles because the import order of our CSS is bizarre and wrong. For now I've used a crude workaround, but we can fix this properly later by changing the import order to place styles likely to be overridden first.
114 lines
2.0 KiB
SCSS
114 lines
2.0 KiB
SCSS
.home {
|
|
&__container {
|
|
display: flex;
|
|
min-height: 100%;
|
|
}
|
|
|
|
&__main-view {
|
|
flex: 1 1 66.5%;
|
|
background: $white;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__balance-wrapper {
|
|
@media screen and (max-width: $break-small) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
@media screen and (min-width: $break-large) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin: 2.3em 2.37em .8em;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
// TODO: fix style import order so this isn't required to override specificity of `tab` class
|
|
&__main-view &__tab {
|
|
flex-grow: 1;
|
|
color: $Grey-500;
|
|
padding: 16px 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 130%;
|
|
}
|
|
|
|
&__main-view &__tab--active {
|
|
color: $Blue-500;
|
|
}
|
|
|
|
&__connect-status-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@extend %content-text;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
|
|
div {
|
|
&:last-child {
|
|
margin-top: 26px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__connected-status-popover {
|
|
width: 329px;
|
|
height: 295px;
|
|
margin-top: -12px;
|
|
|
|
.popover-header {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.popover-content {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.popover-arrow {
|
|
top: -6px;
|
|
left: 24px;
|
|
}
|
|
|
|
.popover-footer {
|
|
justify-content: flex-end;
|
|
|
|
& :only-child {
|
|
margin: 0;
|
|
}
|
|
|
|
button {
|
|
height: 39px;
|
|
width: 133px;
|
|
border-radius: 39px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__connected-status-popover-bg {
|
|
height: 34px;
|
|
width: 110px;
|
|
border-radius: 34px;
|
|
position: absolute;
|
|
top: 82px;
|
|
left: 12px;
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2);
|
|
background: none;
|
|
}
|
|
|
|
&__connected-status-popover-bg-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|