1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/pages/settings/contact-list-tab/index.scss
George Marshall 8fcbebc546
Update design tokens library from 1.5 to 1.6 WIP (#14732)
* Updating account menu icon color

* Updating design-tokens and making appropriate updates to extension styles

* Adding more deprecated tags to colors

* Adding spinner and removing todo comment

* Remove comment

* Updates

* Updating snapshots

* More color and ui updates

* reverting transition change
2022-05-25 08:35:36 -07:00

240 lines
3.8 KiB
SCSS

.address-book-wrapper {
display: flex;
justify-content: space-between;
height: 100%;
}
.address-book {
flex: 0.4 1 100%;
@media screen and (max-width: $break-small) {
flex: 1;
max-width: 100%;
&__container {
min-height: 100%;
}
}
&__header,
&__header--edit {
&__name {
@include H3;
margin-left: 24px;
max-width: 8em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
&__header--edit {
display: flex;
justify-content: space-between;
.button {
@include H6;
justify-content: flex-end;
color: var(--color-error-default);
}
}
&__container {
margin: 0 auto;
min-height: 70%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
&__icon {
margin-bottom: 16px;
display: block;
color: var(--color-icon-muted);
}
&__title {
@include H4;
font-weight: 600;
margin-bottom: 0.5em;
}
&__sub-title {
font-size: small;
margin-bottom: 0.5em;
}
&__link {
background-color: transparent;
color: var(--color-primary-default);
}
&__input {
@include H4;
border: 1px solid var(--color-border-muted);
border-radius: 6px;
color: var(--color-text-muted);
padding: 0.875rem 1rem;
&:focus-within {
border-color: var(--color-primary-default);
}
margin-top: 0.25rem;
&--address {
@include H6;
}
}
&__view-contact {
&__text-area-wrapper {
height: 96px !important;
}
&__text-area {
line-height: initial !important;
}
&__address {
height: 60px !important;
textarea {
padding-top: 10px !important;
}
}
&__group {
display: flex;
flex-flow: column nowrap;
padding: 1.5rem 1.5rem 0 1.5rem;
&__label,
&__label--capitalized {
@include H7;
color: var(--color-text-alternative);
margin-bottom: 0.25rem;
}
&__label--capitalized {
text-transform: capitalize;
}
&__value,
&__static-address {
@include H4;
display: flex;
flex-flow: row nowrap;
color: var(--color-text-muted);
word-break: break-word;
&--address {
@include H6;
}
&--copy-icon {
display: inline-block;
width: 20px;
height: 20px;
padding: 0;
background: none;
padding-left: 0;
margin-left: 10px;
}
}
&__static-address {
@include H6;
&--copy-icon {
cursor: pointer;
&:hover {
color: var(--color-text-default);
}
}
}
.unit-input__input {
max-width: 100%;
width: 100%;
}
}
}
&__edit-contact {
display: flex;
flex-flow: column nowrap;
padding-bottom: 0 !important;
height: 100%;
&__content {
flex: 1 1 auto;
> div {
padding-top: 0;
}
}
.page-container__footer {
border-top: none;
}
}
&__add-contact {
display: flex;
flex-flow: column nowrap;
padding-bottom: 0 !important;
height: 100%;
&__content {
flex: 1 1 auto;
height: 100%;
}
&__error {
@include H7;
left: 8px;
color: var(--color-error-default);
}
}
}
.address-book-add-button {
&__button {
position: absolute;
top: 80px;
right: 16px;
width: auto;
@media screen and (max-width: $break-small) {
top: 8px;
right: 60px;
&--hidden {
display: none;
}
}
}
}
.address-book--hidden {
display: none;
}
.address-book-contact-content {
flex: 0.4 1 100%;
@media screen and (max-width: $break-small) {
flex: 1;
}
}