index.styl

// New styles

// Colors Auth0
@import 'stylus/variable'
// Mixind
@import 'stylus/mixins'
// Normalizer
@import 'stylus/normalize'
// Compense Style docs.css
@import 'stylus/compens'

#tutorial-navigator
  // Add some bootstrap.min.css@3.1.1
  @import 'stylus/bootstrap'
  // Base
  @import 'stylus/base'
  // Code
  @import 'stylus/code'
  // Helppers
  @import 'stylus/helppers'
  // sprite 
  @import 'stylus/sprite'

// styles
#tutorial-navigator
  max-width 845px
  width 100%
  margin 0 auto
  -webkit-font-smoothing: antialiased
  -moz-font-smoothing: antialiased
  font-family: "proxima-nova", "Helvetica Neue", sans-serif
  color grayFont
  .tutorial-body
    text-align center
  h2
    text-align center
    font-weight 400

  .app-type-item
    width 150px 
    display inline-block 
    vertical-align top
    margin 0 10px
    cursor pointer
    .label
      color grayFont
      text-align center
      font-weight 300 
      &::first-word
        font-weight 600
    .grafic 
      border solid 2px grayBorder
    .description
      transition all .3s ease
      opacity 0
      transform translate(0,-5px)
      span
        font-size 12px
        color grayFont !important
        margin 10px 0
    &:hover
      .description
        opacity 1
        transform translate(0,0)
      .grafic
        transition all .3s ease
        // i
        //   filter drop-shadow( 5px 5px 4px rgba(black,.2))
        //   -webkit-filter drop-shadow( 5px 5px 4px rgba(black,.2))
        //   -moz-filter drop-shadow( 5px 5px 4px rgba(black,.2))
  .grafic 
    width 100%
    height 170px
    border solid 1px grayBorder
    border-radius 3px
    text-align center
    &:before
      content ''
      display inline-block
      height 100%
      vertical-align middle
      margin-right -0.25em 
    i
      display inline-block
      vertical-align middle
  .step
    h2
      text-align center
      margin 0 auto 20px
    h3
      text-align center
      margin 20px auto 20px
  .complete 
    text-align center
  // Tutorial Header
  .tutorial-header
    text-align center
    margin-bottom 20px
  .step-circle
    display inline-block 
    vertical-align top
    margin 0 15px
    size(80px,80px)
    background grayBackground
    border-radius 50%
    a
      .mask
        position relative 
        top 3px
        height 80px
        text-align center
        i
          display inline-block
          vertical-align middle
        &.icons
          top 0
          i
            height 60%
            width 60%
            margin 20%
            background-size contain
            background-repeat no-repeat
            background-position 50% 50%
  // Search
  .inputs
    display block
    text-align center
    position relative
    width 640px 
    margin 0 auto 40px
    @extend #tutorial-navigator .clearfix
    // Skyp
    .skip
      background grayBorder
      border none
      border solid 1px grayBorder
      color white
      cursor pointer
      float none 
      font-size 25px 
      outline none
      size(20%,60px)
  // Steps
  .step
    @extend #tutorial-navigator .clearfix
    width 650px
    margin 0 auto
    padding-top 0
    .tutorial-item
      float left
      width 120px
      margin-bottom 10px
      margin-right 10px 
      a
        .grafic
          height 120px 
          width 120px
          border-radius 3px 3px 0 0
          padding 10%
          &:before
            display none
          i 
            height 100%
            width 100%
            filter grayscale(100%)
            -webkit-filter grayscale(100%)
            -moz-filter grayscale(100%)
            background-size contain
            background-repeat no-repeat
            background-position 50% 50%
        .description
          border-radius 0 0 3px 3px
          height 60px
          background grayBorder
          color white 
          display table
          width 100%
          span
            font-size 15px
          .inline-middle
            display table-cell
            text-align center
            vertical-align middle
    h3 
      font-size 22px
      color blueFont
      font-weight 400
    .sprite-close
      right calc(20% + 15px) 
  // Snippet
  .snippet
    text-align left 
    color grayLightFont
    width 640px
    margin 0 auto 30px
    h1
    h2
    h3
    h4
      text-align left
      font-weight 300
      font-size 22px
      margin-bottom 10px
    p 
      font-size 15px
      line-height 20px
      margin-top 0
    a 
      text-decoration none
      color link 
    pre
      width 700px
      margin-left -50px
    blockquote
      margin 0
      padding 1em 
    img
      max-width 100%
  .code-snippets
    h2
      margin 40px auto 30px
  // Snippet Tabs
  .snippet-tabs
    width 100%
    display table
    border-bottom none
    margin-bottom 30px
    .snippet-tab 
      width 50%
      float left 
      &.center
        float none
        display inline-block
      a
        background white
        border none
        border solid 1px grayBorder
        border-radius 0 3px 3px 0
        color grayFont
        display inline-block
        font-size 24px 
        height auto
        padding 10px
        text-align center
        width 100%
        &.active
          color #fff
      &.visible
        a
          border-radius 3px 0 0 3px
  // selected
  .app-type.selected 
    @extend #tutorial-navigator .app-type-item:hover
// Colors UI

// Colors - step-1
#tutorial-navigator
  .app-type.selected .app-type-item,
  .app-type-item:hover
    &.native-mobile
      ui-step-1(yellow)
    &.hybrid
      ui-step-1(green)
    &.spa
      ui-step-1(cyan)
    &.webapp
      ui-step-1(red)
  

// Colors - step-2-3
#tutorial-navigator
  &[data-ui="native-mobile"]
    ui-step(yellow)
  &[data-ui="hybrid"]
    ui-step(green)
  &[data-ui="spa"]
    ui-step(cyan)
  &[data-ui="webapp"]
    ui-step(red)