auth0-web-header/src/Item/Item.styl

Auth0's website and landings header

@import '../styles/base'

.item
  +breakpoint("desktop", "max")
    margin-bottom 25px

  +breakpoint("desktop")
    float left

  &.simple-list
    position relative

.link
  color currentColor
  cursor pointer
  padding 15px
  position relative
  text-decoration none

  +breakpoint("desktop", "max")
    font-size 20px
    line-height 1.5
    padding-bottom 15px
    padding-left 0
    padding-top 15px

  +breakpoint("desktop")
    font-size 14px
    padding 20px 15px

  .item-more &
    +breakpoint("desktop", "max")
      display none

  .item.is-dropdown-open &
    color $navbar-default-link-hover-color

.text
  .item.theme-dark &
    +breakpoint("desktop")
      color white
      opacity .7

  .item.is-dropdown-open.theme-dark &
    +breakpoint("desktop")
      opacity 1

.item-caret
  composes text
  display none

  +breakpoint("desktop")
    display inline-block
    font-size 10px
    margin-left 5px

.dropdown-caret
  display inline-block
  height 12px
  left 50%
  margin-top 0
  overflow hidden
  position absolute
  text-align center
  top 37px
  transform translateX(-50%)
  transition margin-top .2s
  width 20px
  z-index 1100

  &:after
    background-color white
    border 1px solid rgba(black, .1)
    content ''
    display inline-block
    height 12px
    opacity 0
    transform rotate(45deg)
    transition visibility 0s .2s, opacity .2s
    visibility hidden
    width 12px

  .item.is-dropdown-open &
    +breakpoint("desktop")
      margin-top 5px

      &:after
        opacity 1
        visibility visible
        transition-delay 0s