Source: ui.hero.styl

  1. @import "variables"
  3. /**
  4.  * The hero image and carousels.
  5.  * @component .hero
  6.  * @example <div class="ui hero">
  7.  *     <!-- content -->
  8.  * </div>
  9.  */
  10. .hero
  11.     &--inner
  12.         container-max()
  13.         clear-left()
  14.         position relative
  16.         @media (min-width: screen-sm)
  17.             min-height 200px
  19.     .multiple
  20.         margin 0
  21.         padding 0
  22.         list-style-type none
  24.     .single
  25.         position relative
  27.     &--presentation
  28.         position absolute
  29.         top 50%
  30.         left 40px
  31.         width "calc(100% - %s)" % 80px
  32.         transform translateY(-50%)
  34.         h1, h2
  35.             hlmt-rounded()
  36.             font-size 3rem
  37.             color #fff
  38.             text-shadow -1px -1px 5px rgba(0, 0, 0, 0.5), -1px 1px 5px rgba(0, 0, 0, 0.5), 1px -1px 5px rgba(0, 0, 0, 0.5), 1px 1px 5px rgba(0, 0, 0, 0.5)
  40.             @media (min-width: screen-sm)
  41.                 font-size 6rem
  44.     /**
  45.      * Allow banner to be displayed as a carousel.
  46.      * @type {variation}
  47.      * @name .as-carousel
  48.      * @memberOf .hero
  49.      * @example <div class="ui hero as-carousel">
  50.      *     <!-- content -->
  51.      * </div>
  52.      */
  53.     &.as-carousel
  54.         .multiple
  55.             display none
  57.         .owl-controls
  58.             position absolute
  59.             left 5px
  60.             bottom 5px
  61.             @media (min-width: screen-sm)
  62.                 left 17px
  63.                 bottom 17px
  65.         .owl-page
  66.             &.active
  67.                 background-image url('./images/leaf-empty.png')
  68.             margin 3px
  69.             height 12px
  70.             width 12px
  72.             @media (min-width: screen-sm)
  73.                 height 26px
  74.                 width 26px
  76.             display inline-block
  77.             background-size 100%
  78.             background-image url('./images/icon-leaf.png')
  79.             background-repeat no-repeat
  80.             background-position center center