<template>
  <article class="basic">
    <div class="container basic__container">
      <div class="row basic__colors">
        <header class="col-12 basic__header">
          <h2 class="basic__title">Colors</h2>
        </header>
        <section class="basic__colors-primary col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
          <header>
            <h3>Primary colors</h3>
          </header>
          <div class="row">
            <div class="col-12">
              <div class="basic__colors-block basic__colors-block--primary"></div>
              <div class="basic__colors-block basic__colors-block--secondary"></div>
              <div class="basic__colors-block basic__colors-block--tertiary"></div>
              <div class="basic__colors-block basic__colors-block--black-primary"></div>
            </div>
          </div>
        </section>
        <section class="basic__colors-greyscale col-12 col-sm-12 col-md-12 col-lg-7 col-xl-7">
          <header>
            <h3>Greyscale colors</h3>
          </header>
          <div class="row">
            <div class="col-12">
              <div class="basic__colors-block basic__colors-block--grey-primary"></div>
              <div class="basic__colors-block basic__colors-block--grey-secondary"></div>
              <div class="basic__colors-block basic__colors-block--grey-tertiary"></div>
            </div>
          </div>
        </section>
        <section class="basic__colors-secondary col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
          <header>
            <h3>Secondary colors</h3>
          </header>
          <div class="colors row">
            <ul class="colors__list col-12">
              <li class="colors__item colors__item--primary"><b>Blue </b>(Usage: Link text)</li>
              <li class="colors__item colors__item--message-primary"><b>Green </b>(Usage: Success)</li>
              <li class="colors__item colors__item--message-tertiary"><b>Red </b>(Usage: Errors)</li>
              <li class="colors__item colors__item--message-secondary"><b>Orange </b>(Usage: Alerts)</li>
              <li class="colors__item colors__item--black-primary"><b>Black </b>(Usage: Body text)</li>
              <li class="colors__item colors__item--grey-tertiary"><b>Grey </b>(Usage: Body text)</li>
            </ul>
          </div>
        </section>
        <section class="basic__text-example col-12 col-sm-12 col-md-12 col-lg-7 col-xl-7">
          <header>
            <h3>Text example</h3>
          </header>
          <section class="example">
            <header class="example__header">
              <h3>Text heading</h3>
            </header>
            <p class="example__paragraph">
              Eli5 offers more than just lines of code. From designing new business models, automating internal processes, to exploring what blockchain can do for you, our framework of startup methods and agile product development ensures the leanest and most effective innovation possible.
            </p>
          </section>
        </section>
      </div>
      <div class="row basic__typography">
        <header class="col-12 basic__header">
          <h2 class="basic__title">Typography</h2>
        </header>
        <div class="col-12">
          <div class="row headings">
            <section class="headings__heading col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <header><h1>Aa</h1></header>
              <p>Heading 1</p>
            </section>
            <section class="headings__heading col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <header><h2>Aa</h2></header>
              <p>Heading 2</p>
            </section>
            <section class="headings__heading col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <header><h3>Aa</h3></header>
              <p>Heading 3</p>
            </section>
            <section class="headings__heading col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <header><h4>Aa</h4></header>
              <p>Heading 4</p>
            </section>
            <section class="headings__heading col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <header><h5>Aa</h5></header>
              <p>Heading 5</p>
            </section>
          </div>
          <div class="row body">
            <section class="body__text body__text--bb col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <p>Body big bold</p>
            </section>
            <section class="body__text body__text--nb col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <p>Body normal bold</p>
            </section>
            <section class="body__text body__text--sb col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <p>Body small bold</p>
            </section>
            <section class="body__text body__text--br col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <p>Body big regular</p>
            </section>
            <section class="body__text body__text--nr col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <p>Body normal regular</p>
            </section>
            <section class="body__text body__text--sr col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
              <p>Body small regular</p>
            </section>
          </div>
        </div>
      </div>
      <div class="row basic__gridsystem">
        <header class="col-12 basic__header">
          <h2 class="basic__title">Grid system</h2>
        </header>
        <section class="col-12">
          <div class="row in-six">
            <header class="col-12">
              <h4>Grid system - 170px</h4>
            </header>
            <div class="in-six__block col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2"></div>
            <div class="in-six__block col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2"></div>
            <div class="in-six__block col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2"></div>
            <div class="in-six__block col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2"></div>
            <div class="in-six__block col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2"></div>
            <div class="in-six__block col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2"></div>
          </div>
          <div class="row in-four">
            <header class="col-12">
              <h4>Grid system - 270px</h4>
            </header>
            <div class="in-four__block col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="in-four__block col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="in-four__block col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="in-four__block col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
          </div>
          <div class="row in-three">
            <header class="col-12">
              <h4>Grid system - 370px</h4>
            </header>
            <div class="in-three__block col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"></div>
            <div class="in-three__block col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"></div>
            <div class="in-three__block col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"></div>
          </div>
          <div class="row in-two">
            <header class="col-12">
              <h4>Grid system - 370px</h4>
            </header>
            <div class="in-two__block col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"></div>
            <div class="in-two__block col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"></div>
          </div>
        </section>
      </div>
      <div class="row basic__box-styles">
        <header class="col-12 basic__header">
          <h2 class="basic__title">Elevation, Shadows, Borders</h2>
        </header>
        <div class="col-12">
          <div class="row shadows">
            <div class="shadows__block shadows__block--primary col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="shadows__block shadows__block--secondary col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="shadows__block shadows__block--tertiary col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="shadows__block shadows__block--quaternary col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
          </div>
          <div class="row borders">
            <div class="borders__block borders__block--solid-primary col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
            <div class="borders__block borders__block--dashed-primary col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3"></div>
          </div>
        </div>
      </div>
      <div class="row basic__segments">
        <header class="col-12 basic__header">
          <h2 class="basic__title">Segments</h2>
        </header>
        <div class="col-12 basic__segments-box basic__segments-box--boxed">
          <header>
            <h3>Boxed</h3>
          </header>
          <div class="box"></div>
        </div>
        <div class="col-12 basic__segments-box basic__segments-box--boxed-color">
          <header>
            <h3>Boxed (coloured)</h3>
          </header>
          <div class="box"></div>
        </div>
        <div class="col-12 basic__segments-box basic__segments-box--boxed-pattern">
          <header>
            <h3>Boxed (pattern)</h3>
          </header>
          <div class="box"></div>
        </div>
        <div class="col-12 basic__segments-fullwidth basic__segments-fullwidth--boxed">
          <header>
            <h3>Fullwidth</h3>
          </header>
          <div class="full-box"></div>
        </div>
        <div class="col-12 basic__segments-fullwidth basic__segments-fullwidth--boxed-color">
          <header>
            <h3>Fullwidth (coloured)</h3>
          </header>
          <div class="full-box"></div>
        </div>
        <div class="col-12 basic__segments-fullwidth basic__segments-fullwidth--boxed-pattern">
          <header>
            <h3>Fullwidth (pattern)</h3>
          </header>
          <div class="full-box"></div>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'basic-ui',
}
</script>

<style lang="scss" scoped>
.basic {
  &__header {
    margin-bottom: 50px;
    margin-bottom: 5rem;
  }
  &__colors-primary, &__colors-secondary, &__colors-greyscale, &__text-example {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
    > header {
      margin-bottom: 20px;
      margin-bottom: 2rem;
      h3 {
        @include h3(medium, bs, $color-black-primary, tertiary, quaternary);
      }
    }
  }
  &__text-example {
    margin-bottom: 80px;
    margin-bottom: 8rem;
  }
  &__colors-block {
    position: relative;
    display: inline-block;
    width: 70px;
    width: 7rem;
    &:not(:last-child) {
      margin-right: 20px;
    }
    &:after {
      display: block;
      content: '';
      padding-bottom: 100%;
    }
    &--primary {
      &:after {
        background-color: $color-primary;
      }
    }
    &--secondary {
      &:after {
        background-color: $color-secondary;
      }
    }
    &--tertiary {
      &:after {
        background-color: $color-tertiary;
      }
    }
    &--black-primary {
      &:after {
        background-color: $color-black-primary;
      }
    }
    &--grey-primary {
      &:after {
        background-color: $color-grey-primary;
      }
    }
    &--grey-secondary {
      &:after {
        background-color: $color-grey-secondary;
      }
    }
    &--grey-tertiary {
      &:after {
        background-color: $color-grey-tertiary;
      }
    }
  }
  &__colors-secondary {
    .colors {
      &__list {
        list-style: none;
        padding-left: 15px;
        margin-bottom: 0;
      }
      &__item {
        position: relative;
        padding-left: 45px;
        padding-left: 4.5rem;
        @include body-small(medium, bs, $color-grey-tertiary, tertiary, quaternary);
        b {
          font-weight: font-weight(medium);
        }
        &:not(:last-child) {
          margin-bottom: 25px;
          margin-bottom: 2.5rem;
        }
        &:before {
          position: absolute;
          display: block;
          content: '';
          left: 0;
          top: 50%;
          width: 25px;
          width: 2.5rem;
          height: 25px;
          height: 2.5rem;
          transform: translateY(-50%);
        }
        &--primary {
          &:before {
            background-color: $color-primary;
          }
        }
        &--message-primary {
          &:before {
            background-color: $color-message-primary;
          }
        }
        &--message-secondary {
          &:before {
            background-color: $color-message-secondary;
          }
        }
        &--message-tertiary {
          &:before {
            background-color: $color-message-tertiary;
          }
        }
        &--black-primary {
          &:before {
            background-color: $color-black-primary;
          }
        }
        &--grey-tertiary {
          &:before {
            background-color: $color-grey-tertiary;
          }
        }
      }
    }
  }
  &__text-example {
    .example {
      &__header {
        margin-bottom: 15px;
        margin-bottom: 1.5rem;
      }
      &__paragraph {
        @include body-normal;
      }
    }
  }
  &__typography {
    .headings {
      margin-bottom: 60px;
      margin-bottom: 6rem;
      &__heading {
        h1,h2,h3,h4,h5 {
          line-height: line-height(primary);
        }
        p {
          @include body-small(medium);
        }
      }
    }
    .body {
      margin-bottom: 50px;
      margin-bottom: 5rem;
      &__text {
        &--bb {
          p {
            @include body-big(medium);
          }
        }
        &--nb {
          p {
            @include body-normal(medium);
          }
        }
        &--sb {
          p {
            @include body-small(medium);
          }
        }
        &--br {
          p {
            @include body-big(regular);
          }
        }
        &--nr {
          p {
            @include body-normal(regular);
          }
        }
        &--sr {
          p {
            @include body-small(regular);
          }
        }
      }
    }
  }
  &__gridsystem {
    .in-six, .in-four, .in-three, .in-two {
      margin-bottom: 25px;
      margin-bottom: 2.5rem;
      &:last-child {
        margin-bottom: 65px;
        margin-bottom: 6.5rem;
      }
      header {
        margin-bottom: 40px;
        margin-bottom: 4rem;
        h4 {
          @include body-small(medium);
        }
      }
      &__block {
        position: relative;
        @include media-breakpoint-down(sm) {
          &:not(:last-child) {
            margin-bottom: 30px;
            margin-bottom: 3rem;
          }
        }
        &:after {
          display: block;
          content: '';
          padding-bottom: 170px;
          padding-bottom: 17rem;
          background-color: rgba($color-secondary, .5);
        }
      }
    }
  }
  &__box-styles {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
    .shadows {
      position: relative;
      padding-top: 50px;
      padding-top: 5rem;
      padding-bottom: 50px;
      padding-bottom: 5rem;
      margin-bottom: 80px;
      margin-bottom: 8rem;
      &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        width: 100%;
        width: 100vw;
        content: '';
        background-color: $color-grey-quaternary;
      }
      &__block {
        &:after {
          display: block;
          content: '';
          padding-bottom: 170px;
          padding-bottom: 17rem;
          background-color: $white;
        }
        &--primary {
          &:after {
            box-shadow: box-shadow(primary);
          }
        }
        &--secondary {
          &:after {
            box-shadow: box-shadow(secondary);
          }
        }
        &--tertiary {
          &:after {
            box-shadow: box-shadow(quaternary);
          }
        }
        &--quaternary {
          &:after {
            box-shadow: box-shadow(quinary);
          }
        }
      }
    }
    .borders {
      &__block {
        &:after {
          display: block;
          content: '';
          padding-bottom: 170px;
          padding-bottom: 17rem;
          background-color: $white;
          border-radius: border-radius(primary);
        }
        &--solid-primary {
          &:after {
            border: border(solid-primary);
          }
        }
        &--dashed-primary {
          &:after {
            border: border(dashed-primary);
          }
        }
      }
    }
  }
  &__segments {
    .basic__segments-box, .basic__segments-fullwidth {
      &:not(:last-child) {
        margin-bottom: 70px;
        margin-bottom: 7rem;
      }
      header {
        margin-bottom: 20px;
        margin-bottom: 2rem;
        h3 {
          @include body-small(medium);
        }
      }
      .box, .full-box {
        width: 100%;
        height: 300px;
        height: 30rem;
      }
      .full-box {
        position: relative;
        &:after {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          height: 100%;
          width: 100%;
          width: 100vw;
          content: '';
        }
      }
      &--boxed {
        .box {
          background-color: $color-grey-quinary;
        }
        .full-box {
          &:after {
            background-color: $color-grey-quinary;
          }
        }
      }
      &--boxed-color {
        .box {
          background-color: $color-primary;
        }
        .full-box {
          &:after {
            background-color: $color-primary;
          }
        }
      }
      &--boxed-pattern {
        .box {
          background-color: $color-primary;
          background-image: url('/images/pattern.png');
          background-size: contain;
          background-repeat: repeat;
        }
        .full-box {
          &:after {
            background-color: $color-primary;
            background-image: url('/images/pattern.png');
            background-size: contain;
            background-repeat: repeat;
          }
        }
      }
    }
  }
}
</style>
