ciphermask/ui/app/pages/settings/index.scss

@import 'info-tab/index';

@import 'networks-tab/index';

@import 'settings-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 {
      flex: 1 0 auto;
      font-size: 24px;
    }
  }

  &__subheader {
    padding: 16px 4px;
    font-size: 20px;
    border-bottom: 1px solid $alto;
    margin-right: 24px;

    @media screen and (max-width: 575px) {
      display: none;
    }
  }

  &__sub-header {
    height: 72px;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media screen and (max-width: 575px) {
      height: 69px;
      position: relative;
      text-align: center;
    }
  }

  &__sub-header-text {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 24px;
    color: black;

    @media screen and (max-width: 575px) {
      font-size: 16px;
      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: .5;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-right: 16px;
      cursor: pointer;
    }
  }

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

      @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;
    min-height: 71px;

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

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

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

  &__content-description {
    font-size: 14px;
    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%;
    }
  }

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

        &__modules {
          @media screen and (max-width: 575px) {
            display: block;
          }
        }
      }
    }
  }
}