main.styl

.auth0-styleguide
  opacity: 0
  &.loaded
    opacity: 1

  @import '../../lib/vars/index'
  @import '../../lib/mixins/index'
  @import 'inc/playground'


  $aside_width = 250px;

  body
    color: $color-text-light

  p,
  h1, h2, h3, h4, h5, h6
    code
      display: inline-block;

  [data-group]
    // padding-bottom: 100px;
    min-height: 100vh;
    display: none;

    &.active
      display: block;

  // container styleguide
  .container-styleguide
    width 100%
    min-width 320px

  // content styleguide
  .main-content-styleguide
    background-color: #fff;

    +breakpoint("tablet")
      margin-left: $aside_width;

    &.alt
      background-color: #fafafa;

  // aside styleguide
  .aside-styleguide
    overflow-y: auto;
    background-color: #e3e5e7;

    +breakpoint("tablet")
      width: $aside_width;
      position: fixed;
      height:100vh;

    .header
      background-color: #fff;
      overflow: hidden;
      text-align: center;
      position: relative;

      .navbar-toggle
        position: absolute;
        top: 5px;
        right: -5px;
        .icon-bar
          background: #5c666f;

      h1
        margin: 15px 0 14px 0;


      a, img
        display: block;
        margin: 0 auto;

      img
        width: 30px;


    .footer
      background-color: rgba(0, 0, 0, .05);
      padding: 5px 0;
      text-align: center;

      +breakpoint('tablet')
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;

      span
        color: rgba(0, 0, 0, .4);
        font-size: 11px;
        font-weight: $font-weight-bold;
        letter-spacing: 1px;
        line-height: normal;

  #menu.collapse
    +breakpoint("tablet")
      display: block !important;
      height: auto !important;

  .nav-styleguide
    overflow-y: auto

  .nav-styleguide > ul
    color: #5c666f;
    font-size: 11px;
    font-weight: $font-weight-bold;
    letter-spacing: 1px;
    list-style: none;
    line-height: normal;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    z-index: 200;
    position: relative;
    background: #e3e5e7;

    .active
      color: #333 !important;
      background: darken(#e3e5e7, 4%);

    > li
      margin: 0;

      &:first-child
        display: none;

      > a
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        color: inherit;
        display: block;
        padding: 20px 20px 20px 20px;

        > .icon
          margin-right: 10px;
          top: 1px;
          position: relative;
          min-width: 14px;
          display: inline-block


  .nav-styleguide > ul > li > ul
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;

    +breakpoint("tablet")
      display: inherit;

    .active
      background: rgba(255,255,255,0.05);

    li
      background-color: rgba(255, 255, 255, .3);
      margin: 1px 0 0 0;

      &:first-child
        margin-top: 0;

      a
        background-color: rgba(255, 255, 255, .3);
        color: inherit;
        display: block;
        padding: 10px 0 10px 40px;
        text-transform: none;
        letter-spacing: 0;

        .icon
          margin-right: 5px;
          position: relative;
          top: 3px;

  // content styleguide
  .content-styleguide

    section > h2
      margin-top: 0;

    .type-box
      background-color: #e3e5e7;
      margin-bottom: 30px;
      overflow: hidden;

    > section
      padding: $padding-base-vertical*4 $padding-base-horizontal*2
      border-bottom: 1px solid $bg-color-gray;
      +breakpoint("tablet")
        padding: $padding-large-vertical*4 $padding-large-horizontal*3;

    hr
      margin: ($padding-base-vertical * 10) 0;

  // Typography Section
  // -------------------------

  .typography-section
    .font-family
      font-size: 60px;
      font-weight: normal;
      line-height: 82px;
      margin: 40px 0;

  // box
  .type-box-container
    display: flex;
    flex-wrap: wrap;

    +breakpoint("desktop")
      flex-wrap: nowrap;

    .column
      flex-basis: 100%
      margin: 0 15px;
      display: flex;

      .type-box
        flex-basis: 100%;

      +breakpoint("desktop")
        flex-basis: 50%;

  .type-box
    padding: 10px 40px;

    &.box-table
      padding: 20px 40px;

    a
      display: block;
      margin: 20px 0;

    h5
      line-height: 1.8

    .theme-dark &
      background-color: #222228;

      h1, h2, h3, h4, h5,
      .body-2, .body-1
        color: #fff;

      p.caption
        color: $color-text-lighter;

  // typography table
  .box-table
    overflow-x: scroll;
    max-width: 100%;

  .typography-table
    min-width: 600px;
    width: 100%;
    overflow: scroll;

    +breakpoint("desktop")
      min-width: none;

    .variable
      width: 35%;

    .opacity
      width: 5%;
      text-align: right;

    .color
      width: 8%;


    td
      color: $color-text;
      font-size: 13px;
      padding: 15px 0;

    .big
      font-size: 16px;

    .opacity-87
      color: $color-text;

    .opacity-54
      color: $color-text-light;

    .opacity-26
      color: $color-text-lighter;

    .rowspan
      line-height: 20px;
      vertical-align: bottom;



  #splash
    background: $bg-color-black
    padding: 0;

  .splash
    background: $bg-color-black
    height:100vh;
    display: flex;
    align-items: center;
    flex:1;
    padding: 20px;
    +breakpoint("tablet")
      padding-left: 100px;

    .splash-intro

      h1
        font-size: 40px;
        margin: 30px 0;

      p
        font-size: 16px;
        color: $color-text-contrast-light;
        margin-bottom: 50px;

      .lettering-js
        span
          animation-fill-mode: forwards;
          opacity: 0;
          display: inline-block;

      h1.lettering-js
        span
          animation-name: title
          animation-duration: .4s

        for i in (1..100)
          span:nth-child({i})
            animation-delay: .1s * i

      p.lettering-js
        span
          animation-name: tagline
          min-width: 3px;
          animation-duration: .2s

        span:nth-child(1)
          animation-delay: 1.2s

        for i in (2..100)
          span:nth-child({i})
            animation-delay: 1.2s + (i * 0.025)

      @keyframes title
        0%
          -webkit-filter: blur(30px);
          -webkit-transform: scale(2);
          opacity: 0
        100%
          opacity: 1
          -webkit-transform: scale(1);
          -webkit-filter: blur(0);

      @keyframes tagline
        0%
          -webkit-filter: blur(10px);
          opacity: 0
          transform: translate(0,0);

        100%
          transform: scale(1);
          opacity: 1
          -webkit-filter: blur(0);

      .btn
        margin-right: 30px;
        margin-bottom: $padding-large-horizontal;
        display: block
        animation-name: btns
        animation-duration: .4s
        animation-delay: 3.5s
        animation-play-state: running;
        animation-fill-mode: forwards;
        opacity: 0;

        &.btn-default
          background: white;
          animation-delay: 3.6s

        +breakpoint('tablet')
          display: inline-block;

        .btn-icon

          svg, img
            width: 18px;
            position: absolute
            top: 15px;
            left: 16px;
            z-index: 10000;

          &::before
            color: transparent;
          img
            top: 14px;
            width: 24px;
            left: 13px


      @keyframes btns
        from
          transform: scale(.8)
          // -webkit-filter: blur(10px);
          opacity: 0
        to
          transform: scale(1);
          opacity: 1
          -webkit-filter: blur(0);

      .lines
        margin-bottom: $padding-base-horizontal * 2;

        span
          height: 4px;
          background: $color-red;
          display: inline-block;
          width: 47px;
          margin-right: 2px;
          animation-name: lines
          animation-duration: .8s
          animation-play-state: running;
          animation-fill-mode: forwards;
          opacity: 0;
          &.blue
            background-color: $color-blue;
            animation-delay .2s
          &.blue-light
            background-color: $color-blue-light;
            animation-delay .4s
          &.gray
            background-color: $color-gray
            animation-delay .6s

        @keyframes lines
          from
            transform: scale(4)
            -webkit-filter: blur(10px);
            opacity: 0
          to
            transform: scale(1);
            opacity: 1
            -webkit-filter: blur(0);

  .jumbotron
    margin-bottom: 0;

  // typography table box black
  .theme-dark
    .type-box
      background-color: $bg-color-dark;

    .typography-table
      td
        color: $color-text-contrast

      .opacity-100
        color: $color-text-contrast

      .opacity-70
        color: $color-text-contrast-light

      .opacity-30
        color: $color-text-contrast-lighter



  #header-component
    padding: 0;

  .css-mapping.glyphs
    li
      background: $bg-color-gray
      padding: 10px;
      min-width: 220px;
      border-radius: $border-radius-base;
      i
        float: left;

      strong
        display: block;
        height: 20px;