1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/home/index.scss
2022-08-04 09:03:02 -05:00

225 lines
3.8 KiB
SCSS

.home {
&__container {
display: flex;
min-height: 100%;
}
&__main-view {
flex: 1 1 66.5%;
background: var(--color-background-default);
min-width: 0;
display: flex;
flex-direction: column;
}
&__balance-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex: 0 0 auto;
}
// TODO: fix style import order so this isn't required to override specificity of `tab` class
&__main-view &__tabs {
border: none;
box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
}
&__main-view &__tab {
@include H6;
flex-grow: 1;
color: var(--color-icon-default);
font-weight: 500;
}
&__main-view &__tab--active {
color: var(--color-primary-default);
}
&__main-view &__tab button {
padding: 16px 8px;
}
&__connect-status-text {
display: flex;
flex-direction: column;
@include H6;
padding-left: 24px;
padding-right: 24px;
color: var(--color-text-default);
div {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
}
&__connected-status-popover {
width: 329px;
margin-top: -15px;
.popover-header {
padding-bottom: 20px;
&__title {
padding-bottom: 0;
}
}
.popover-content {
overflow-y: auto;
}
.popover-arrow {
top: -6px;
left: 24px;
}
.popover-footer {
@include H6;
border-top: 0;
justify-content: space-between;
align-items: center;
padding-top: 20px;
& :only-child {
margin: 0;
}
button {
height: 39px;
width: 133px;
border-radius: 39px;
padding: 0;
}
a,
a:hover {
color: var(--color-primary-alternative);
cursor: pointer;
}
}
}
&__connected-status-popover-bg {
height: 55px;
width: 120px;
border-radius: 34px;
position: absolute;
top: 73px;
opacity: 1;
box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
background: none;
}
&__connected-status-popover-bg-container {
height: 100%;
width: 100%;
}
&__support {
padding: 10px 0 20px 0;
text-align: center;
a {
color: var(--color-primary-default);
}
}
&__new-network-notification {
margin-bottom: 50px;
}
&__new-network-notification {
display: flex;
flex-direction: row;
align-items: center;
&-icon {
margin-right: 8px;
padding-top: 8px;
color: var(--color-success-default);
}
&-close {
color: var(--color-icon-default);
background: none;
margin-left: 20px;
}
}
&__error-message {
left: 8px;
}
&__new-nft-notification {
margin-bottom: 24px;
margin-right: 8px;
&-icon {
margin-right: 10px;
padding-top: 6px;
color: var(--color-success-default);
}
&-close {
color: var(--color-icon-default);
background: none;
margin-left: 44px;
}
}
&__new-tokens-imported-notification {
margin-bottom: 4px;
margin-inline-start: 8px;
padding: 8px;
@include screen-sm-min {
margin-bottom: 50px;
margin-inline-end: 8px;
left: 70%;
}
&-title,
&-message {
text-align: start;
}
&-icon {
@include H3;
margin-inline-end: 12px;
padding-top: 12px;
color: var(--color-success-default);
}
&-close {
color: var(--color-icon-default);
background: none;
margin-inline-start: 32px;
}
}
&__new-network-added {
border-radius: 10px;
text-align: center;
&__check-circle {
color: var(--color-success-default);
margin-top: 20px;
}
&__switch-to-button {
margin-bottom: 16px;
}
}
}