1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/account-menu/index.scss
2022-11-17 12:53:51 -08:00

292 lines
5.0 KiB
SCSS

.account-menu {
position: absolute;
z-index: 100;
top: 58px;
width: 320px;
border-radius: 4px;
background: var(--color-background-default);
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
min-width: 150px;
color: var(--color-text-default);
@include screen-sm-max {
right: 16px;
}
@include screen-sm-min {
right: calc((100vw - 85vw) / 2);
}
@include screen-md-min {
right: calc((100vw - 80vw) / 2);
}
@include screen-lg-min {
right: calc((100vw - 65vw) / 2);
}
&__item {
padding: 18px;
display: flex;
flex-flow: row wrap;
align-items: center;
position: relative;
z-index: 201;
border: 0;
background: none;
width: 100%;
@include screen-sm-max {
padding: 0 14px;
height: 40px;
}
&--clickable {
cursor: pointer;
&:hover {
background-color: var(--color-background-default-hover);
}
&:active {
background-color: var(--color-background-default-hover);
}
}
&__icon {
margin-right: 8px;
display: flex;
color: var(--color-icon-alternative);
i {
text-align: center;
width: 24px;
}
}
&__text {
@include H6;
@include screen-md-min {
@include Paragraph;
}
color: var(--color-text-default);
}
&__subtext {
@include H7;
padding: 5px 0 0 30px;
}
}
&__divider {
background-color: var(--color-border-muted);
width: 100%;
height: 1px;
}
&__close-area {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
&__icon {
margin-left: 1rem;
cursor: pointer;
&--disabled {
cursor: initial;
}
}
&__header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
& &__lock-button {
@include H7;
padding: 0.25rem 0.5rem;
min-width: 59px;
width: auto;
}
&__accounts-container {
display: flex;
position: relative;
flex-direction: column;
z-index: 200;
}
&__accounts {
overflow-y: auto;
position: relative;
max-height: 256px;
scrollbar-width: auto;
@include screen-sm-max {
max-height: 240px;
}
// If window is smaller than extension popover height
// reduce scrollable accounts window height
@media screen and (max-height: 600px) {
max-height: 130px;
}
.keyring-label {
@include H9;
z-index: 1;
border-radius: 10px;
padding: 4px;
text-align: center;
height: 15px;
margin-top: 5px;
margin-right: 10px;
background-color: var(--color-background-alternative);
border: 1px solid var(--color-border-default);
color: var(--color-text-default);
font-weight: normal;
letter-spacing: 0.5px;
display: flex;
align-items: center;
}
}
&__notifications {
position: relative;
&__count {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: 0;
bottom: 0;
min-width: 12px;
min-height: 12px;
font-size: 8px;
border-radius: 50%;
background-color: var(--color-primary-default);
color: var(--color-primary-inverse);
}
}
&__no-accounts {
@include H6;
padding: 16px 14px;
}
&__account {
display: flex;
flex-flow: row nowrap;
padding: 16px 14px;
flex: 0 0 auto;
background: none;
border: 0;
width: 100%;
@include screen-sm-max {
padding: 12px 14px;
}
.remove-account-icon {
width: 15px;
margin-left: 10px;
height: 15px;
}
&:hover {
.remove-account-icon::after {
content: '\00D7';
font-size: 25px;
color: var(--color-text-default);
cursor: pointer;
position: absolute;
margin-top: -5px;
}
}
}
&__account-info {
flex: 1 0 auto;
display: flex;
flex-flow: column nowrap;
}
&__check-mark {
margin-right: 8px;
flex: 0 0 auto;
min-width: 24px;
}
.identicon {
margin: 0 12px 0 0;
flex: 0 0 auto;
}
&__name {
@include H6;
@include screen-md-min {
@include Paragraph;
}
color: var(--color-text-default);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 200px;
text-align: start;
}
&__balance {
@include H6;
color: var(--color-text-alternative);
}
&__action {
@include Paragraph;
cursor: pointer;
}
&__scroll-button {
position: absolute;
bottom: 12px;
right: 12px;
height: 28px;
width: 28px;
border-radius: 14px;
border: 1px solid var(--color-border-default);
background: var(--color-background-alternative);
color: var(--color-icon-default);
z-index: 201;
cursor: pointer;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
&:hover {
opacity: 1;
}
}
&__icon-list {
display: flex;
}
}