i-rubik/src/style/components/tab.styl

A Vue.js 2.0+ UI Components Framework

.tabs
  margin-bottom: $spaces.five.y
  
  &-slider
    position: absolute
    top: calc(100% - 4px)
    height: 4px
    with: 100%
  
  &-tab
    color: #fff
    flex: 1
    text-decoration: none
    display: block
    padding: 1rem
    position: relative
    text-align: center
    text-transform: uppercase
    transition: $primary-transition
    
    &:after
      content: ''
      position: absolute
      bottom: 0
      left: 0
      width: 0
      height: 3px
      transition: $primary-transition
      background: $theme.primary
      
    &-active
      &:after
        width: 100%
      
        
  &-nav
    background: $theme.primary
    display: flex
    position: relative
    align-items: center
    flex-wrap: nowrap
    white-space: nowrap
    overflow-x: auto
    
    @media screen and (max-width: $grid-breakpoints.sm)
      flex-wrap: wrap
    
  &-content
    width: 100%
    height: 100%
    position: relative
    overflow: hidden
    
  &-item
    transition: .2s ease-out
    padding: 1rem
    height: 100%
    width: 100%