metamask-extension/ui/pages/settings/index.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;

      @media screen and (max-width: 575px) {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 250px;
      }
    }
  }

  &__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;
    }
  }
}