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';
@import 'flask/snaps-list-tab/index';
@import 'flask/view-snap/index';

.settings-page {
  position: relative;
  background: var(--color-background-default);
  display: flex;
  flex-flow: column nowrap;

  &__header {
    padding: 8px 24px 8px 24px;
    position: relative;

    @media screen and (max-width: $break-small) {
      background: var(--color-background-alternative);
    }

    &__title-container {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      flex: 0 0 auto;

      &__close-button {
        margin-left: auto;
      }

      &__close-button::after {
        content: '\00D7';
        font-size: 40px;
        color: var(--color-icon-default);
        cursor: pointer;
      }

      &__title {
        @include H3;

        flex: 1 0 auto;

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

    &__search {
      @media screen and (max-width: $break-small) {
        position: relative;
      }

      @media screen and (min-width: $break-large) {
        position: absolute;
        right: 57px;
        top: 10px;
        width: 300px;
      }

      @media screen and (min-width: $break-midpoint) {
        width: 400px;
      }

      &__list {
        background: var(--color-background-default);
        box-sizing: border-box;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
        border-radius: 6px;
        position: absolute;
        width: 100%;
        z-index: 10;

        > div {
          &:hover {
            background: var(--color-background-alternative);
          }
        }

        &__item {
          transition: 200ms ease-in-out;
          display: grid;
          align-items: center;
          padding: 16px;
          border-top: 1px solid var(--color-border-muted);
          cursor: pointer;
          grid-template-columns: 16px max-content 24px auto;
          gap: 8px;

          &__icon {
            background: var(--color-background-alternative);
            height: 15px;
            width: 15px;
            margin-right: 16px;
          }

          &__request,
          &__tab,
          &__section,
          &__no-matching {
            @include H6;

            color: var(--color-icon-default);
          }

          &__section-multiple-lines {
            @media screen and (max-width: $break-small) {
              margin-left: 10px;
            }
          }

          &__caret {
            [dir='rtl'] & {
              transform: rotate(180deg);
            }
          }

          &__link {
            @include H6;

            display: inline;
            color: var(--color-primary-default);
            margin-left: 3px;
          }
        }
      }
    }
  }

  &__subheader,
  &__subheader--link {
    @include H4;

    padding: 16px 4px;
    border-bottom: 1px solid var(--color-border-muted);
    margin-right: 24px;
    height: 72px;
    align-items: center;
    display: flex;
    flex-flow: row nowrap;

    @media screen and (max-width: $break-small) {
      display: none;
    }
  }

  &__subheader--link {
    cursor: pointer;
    margin-right: 4px;
  }

  &__subheader--link:hover {
    cursor: pointer;
    color: var(--color-primary-default);
  }

  &__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: $break-small) {
      height: 69px;
      position: relative;
      text-align: center;
    }
  }

  &__sub-header-text {
    @include H4;

    @media screen and (max-width: $break-small) {
      @include H5;

      width: 100%;
    }
  }

  &__back-button {
    display: none;

    @media screen and (max-width: $break-small) {
      display: block;
      margin-right: 8px;
      cursor: pointer;

      [dir='rtl'] & {
        margin: 0 0 0 8px;
        transform: rotate(180deg);
      }
    }
  }

  &__content {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    overflow: auto;
    border-top: 1px solid var(--color-border-muted);

    &__tabs {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;

      @media screen and (min-width: $break-large) {
        flex: 0 0 40%;
        max-width: 197px;
        padding-top: 13px;
      }

      .tab-bar__tab {
        @media screen and (min-width: $break-large) {
          max-height: 50px;
        }
      }
    }

    &__modules {
      overflow-y: auto;
      flex: 1 1 auto;
      display: flex;
      flex-flow: column;

      @media screen and (max-width: $break-small) {
        display: none;
      }
    }
  }

  &__body {
    padding: 12px 24px;

    @media screen and (min-width: $break-large) {
      padding: 12px;
    }
  }

  &__content-row {
    display: flex;
    flex-direction: column;
    padding: 10px 0 20px;

    &--parent {
      padding: 10px 0 10px;
    }

    &--dependent {
      margin-left: 48px;
      padding: 0 0 20px;
    }
  }

  &__content-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    @media screen and (max-width: $break-small) {
      height: initial;
      padding: 5px 0;
    }

    &--without-height {
      height: initial;
    }

    &--disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    & .dialog {
      margin-top: 10px;
    }

    &__identicon {
      display: flex;
      flex-direction: row;
      align-items: baseline;

      &__item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        &__icon {
          &--active {
            height: 40px;
            width: 40px;
            border-radius: 40px;
            border: 2px solid var(--color-primary-default);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    &__description {
      @include H6;

      margin-top: 8px;
      margin-bottom: 12px;
      color: var(--color-icon-default);
    }
  }

  &__content-label {
    text-transform: capitalize;
  }

  &__content-description {
    @include H6;

    color: var(--color-icon-default);
    padding-top: 5px;

    a {
      color: var(--color-primary-default);
    }
  }

  &__content-item-col {
    max-width: 300px;
    display: flex;
    flex-direction: column;

    @media screen and (max-width: $break-small) {
      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;
  }

  &__inline-link {
    @include H6;

    display: initial;
    padding: 0;
  }

  &--selected {
    .settings-page {
      &__content {
        &__tabs {
          @media screen and (max-width: $break-small) {
            display: none;
          }
        }

        &__modules {
          @media screen and (max-width: $break-small) {
            display: block;
          }
        }
      }
    }
  }

  .toggle-button {
    /*rtl:ignore*/
    direction: ltr;

    [dir='rtl'] & {
      justify-content: flex-end;
    }
  }
}