1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 12:47:14 +01:00
metamask-extension/ui/pages/settings/index.scss
2021-07-13 19:06:12 -07:00

252 lines
4.2 KiB
SCSS

@import 'info-tab/index';
@import 'alerts-tab/alerts-tab';
@import 'networks-tab/index';
@import 'settings-tab/index';
@import 'contact-list-tab/index';
.settings-page {
position: relative;
background: $white;
display: flex;
flex-flow: column nowrap;
&__header {
display: flex;
flex-flow: row nowrap;
padding: 12px 24px;
align-items: center;
flex: 0 0 auto;
&__title {
@include H3;
flex: 1 0 auto;
}
}
&__subheader,
&__subheader--link {
@include H4;
padding: 16px 4px;
border-bottom: 1px solid $alto;
margin-right: 24px;
height: 72px;
align-items: center;
display: flex;
flex-flow: row nowrap;
@media screen and (max-width: 575px) {
display: none;
}
}
&__subheader--link {
cursor: pointer;
margin-right: 4px;
}
&__subheader--link:hover {
cursor: pointer;
color: $primary-blue;
}
&__subheader--break {
margin-inline-start: 4px;
}
&__sub-header {
height: 72px;
border-bottom: 1px solid #d8d8d8;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
@media screen and (max-width: 575px) {
height: 69px;
position: relative;
text-align: center;
}
}
&__sub-header-text {
@include H4;
@media screen and (max-width: 575px) {
@include H5;
width: 100%;
}
}
&__back-button {
display: none;
@media screen and (max-width: 575px) {
display: block;
background-image: url('/images/caret-left-black.svg');
width: 18px;
height: 18px;
opacity: 0.5;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 16px;
cursor: pointer;
[dir='rtl'] & {
transform: rotate(180deg);
}
}
}
&__close-button::after {
content: '\00D7';
font-size: 40px;
color: $dusty-gray;
cursor: pointer;
}
&__content {
display: flex;
flex-flow: row nowrap;
height: 100%;
overflow: auto;
border-top: 1px solid #d8d8d8;
&__tabs {
display: flex;
flex-direction: column;
flex: 1 1 auto;
@media screen and (min-width: 576px) {
flex: 0 0 40%;
max-width: 210px;
padding-top: 8px;
}
.tab-bar__tab {
@media screen and (min-width: 576px) {
padding: 16px 24px 0;
}
}
}
&__modules {
overflow-y: auto;
flex: 1 1 auto;
display: flex;
flex-flow: column;
@media screen and (max-width: 575px) {
display: none;
}
}
}
&__body {
padding: 12px 24px;
@media screen and (min-width: 576px) {
padding: 12px;
}
}
&__content-row {
display: flex;
flex-direction: column;
padding: 10px 0 20px;
}
&__content-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
margin-bottom: 20px;
@media screen and (max-width: 575px) {
height: initial;
padding: 5px 0;
}
&--without-height {
height: initial;
}
&--disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
&__content-label {
text-transform: capitalize;
}
&__content-description {
@include H6;
color: $dusty-gray;
padding-top: 5px;
}
&__content-item-col {
max-width: 300px;
display: flex;
flex-direction: column;
@media screen and (max-width: 575px) {
max-width: 100%;
width: 100%;
}
}
&__copy-icon {
padding-left: 4px;
}
&__button-group {
display: flex;
margin-left: auto;
}
&__address-book-button {
@include H5;
padding: 0;
}
&__address-book-button + &__address-book-button {
margin-left: 1.875rem;
}
&--selected {
.settings-page {
&__content {
&__tabs {
@media screen and (max-width: 575px) {
display: none;
}
}
&__modules {
@media screen and (max-width: 575px) {
display: block;
}
}
}
}
}
.toggle-button {
/*rtl:ignore*/
direction: ltr;
[dir='rtl'] & {
justify-content: flex-end;
}
}
}