iolovolio/components/account/account.scss

@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-account {
  padding: 10px 0 40px 0;
  min-height: 100vh;

  .message {
    color: $white;
    background: $brown;
    padding: 10px;
    margin-bottom: 20px;
    @include font-style($font-sans, 'regular', $font-12);
    animation: blinker 2s linear 1;
  }

  .content {

    .title {
      display: block;
      @include font-style($font-serif, 400, $font-32);
      color: $black;
      height: 50px;
    }

    .subtitle {
      display: block;
      @include font-style($font-sans, 700, $font-16);
      color: $gray;
      height: 40px;
    }

    .label {
      display: block;
      @include font-style($font-sans, 700, $font-16);
      color: $gray;
      padding: 15px 0 5px 0;
    }

    .input {
      &.error {
        border: 1px solid $red;
      }
    }

    .submit {
      @include font-style($font-serif, 700, $font-16);
    }


    .orders-head {
      @include font-style($font-sans, 700, $font-16);
      color: $gray;
      padding: 10px 0;
    }

    .order-row {
      @include font-style($font-sans, 700, $font-16);
      color: $black;
      padding: 15px 0;
      border-top: 1px solid $gray;

      .open,
      .close {
        @include font-style($font-sans, 400, $font-16);
        color: $gray;
        cursor: pointer;
        text-decoration: underline;
      }

      .close {
        display: none;
      }

      .order-details {
        display: none;
        @include font-style($font-sans, 400, $font-16);
        padding: 20px 0;

        .detail-row {
          border-bottom: 1px solid $black-alpha;
          padding: 10px 0;

          &:last-of-type {
            border: none;
          }
        }
      }
    }

  }

  .sections {
    padding: 0;
    margin: 0;

    .item {
      display: block;
      padding: 15px 0;
      margin: 0;
      border-bottom: 1px solid $dark-gray;

      .link {
        @include font-style($font-sans, 'regular', $font-16);
        color: $black;
      }

      &.selected {
        .link {
          @include font-style($font-sans, 'bold', $font-16);
          color: $brown;
        }
      }

      &:last-of-type {
        border: none;
      }
    }
  }
}

@keyframes blinker {
  0% { opacity: 1; }
  25% { opacity: .5; }
  50% { opacity: 1; }
  75% { opacity: .5; }
  100% { opacity: 1; }
}