1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/ui/account-list/index.scss
Frederik Bolding 0d961a655e
Fix permission site origin overflow (#13868)
* Fix permission site origin overflow

* Standardize connect flow a bit

* Another standardization change

* Fix another chip width issue

* Standardize snap install

* Fix lint

* Fix overflow after rebase
2022-03-10 18:03:32 +01:00

142 lines
2.4 KiB
SCSS

.choose-account-list {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
overflow-y: auto;
&__header--one-item,
&__header--multiple-items {
display: flex;
flex: 0;
margin-top: 36px;
width: 100%;
padding-inline-start: 15px;
padding-inline-end: 17px;
}
&__header--one-item {
justify-content: flex-end;
}
&__header--multiple-items {
justify-content: space-between;
}
&__select-all {
display: flex;
margin-inline-start: 16px;
align-items: center;
}
&__header-check-box {
margin-right: 16px;
}
&__wrapper {
display: flex;
overflow: hidden;
width: 100%;
}
&__list {
flex: 2 1 0;
width: 100%;
max-height: max-content;
border: 1px solid var(--color-border-muted);
box-sizing: border-box;
border-radius: 8px;
margin-top: 8px;
overflow-y: auto;
}
&__account {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid var(--color-border-muted);
justify-content: space-between;
&:last-of-type {
border-bottom: none;
}
&:hover {
background: var(--color-background-alternative);
cursor: pointer;
}
&__info {
display: flex;
flex-direction: column;
margin-inline-start: 16px;
min-width: 0;
}
&__label {
@include H6;
color: var(--color-text-default);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&__balance {
@include H7;
color: var(--color-text-default);
}
&__last-connected {
@include H8;
display: flex;
flex-direction: column;
align-items: flex-end;
color: var(--color-primary-default);
}
}
&__account-info-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 0;
}
&__list-check-box {
margin-inline-end: 16px;
i {
font-size: 0.8rem;
}
}
.fa-info-circle {
color: var(--color-icon-muted);
cursor: pointer;
margin-inline-start: 8px;
font-size: 0.9rem;
}
.fa-info-circle:hover {
color: var(--color-icon-default);
}
&__text,
&__text-blue,
&__text-grey {
@include H6;
}
&__text-blue {
color: var(--color-primary-default);
cursor: pointer;
}
&__text-grey {
color: var(--color-text-default);
}
}