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

Auth0's website and landings header

@import '../styles/base'

// Common styles for all variations
.baseHighlight
  position relative
  padding-top 5px
  padding-bottom 5px

  +breakpoint("desktop", "max")
    padding-left 10px
    padding-right 10px

  +breakpoint("desktop")
    height 100%
    float left

  .content
    display block
    width 100%
    margin-top 20px
    text-decoration none

  .title
    font-size 18px
    font-weight 500
    line-height 1.5em
    color $color-text !important
    margin-top 0
    margin-bottom 5px

  .text
    margin-bottom 0
    color $color-text
    font-size 14px
    line-height 1.75

  .link
    display block
    margin-top 10px
    line-height 2
    color $link-color
    text-decoration none
    font-size 13px

    a.content
      cursor pointer

    .content:hover &
      color $link-hover-color

      &:after
        transform translateX(3px)

    &:after
      content ''
      display inline-block
      width 0
      height 0
      margin-left 10px
      border-top 4px solid transparent
      border-right 4px solid transparent
      border-bottom 4px solid transparent
      border-left 4px solid currentColor
      transition transform 0.2s

.highlight
  composes baseHighlight

  padding-left 20px
  padding-right 20px

  +breakpoint("desktop", "max")
    display none

  +breakpoint("desktop")
    width 410px
    border-left 1px solid rgba(black, 0.1)//$bg-color-gray

  .content
    position relative
    padding-left 110px

    > img
      position absolute
      top 0px
      left 0px
      width 90px
      height 90px
      border-radius 50%
      object-fit contain

.moreHighlight
  composes baseHighlight
  border-left 0

  .content > img
    width 64px
    height 64px
    border-radius 50%
    background-color $bg-color-gray

  +breakpoint("desktop", "max")
    text-align center
    padding 0

    .section-title
      text-align left

  +breakpoint("desktop")
    width 280px
    padding-left 12px
    padding-right 20px
    padding-bottom 20px

    .content
      width 100%
      text-align center

  .title
    font-size 14px
    margin-top 10px

  .time
    color $color-text
    font-size 12px

.section-title
  padding-bottom 10px
  margin 12px 0 10px 0
  font-size 13px
  font-weight 500
  color #000 !important
  border-bottom 1px solid $bg-color-gray

  +breakpoint("desktop", "max")
    margin-top 20px