node_modules/bulma/sass/layout/hero.sass

   1 // Main container
   2
   3 .hero
   4   align-items: stretch
   5   display: flex
   6   flex-direction: column
   7   justify-content: space-between
   8   .navbar
   9     background: none
  10   .tabs
  11     ul
  12       border-bottom: none
  13   // Colors
  14   @each $name, $pair in $colors
  15     $color: nth($pair, 1)
  16     $color-invert: nth($pair, 2)
  17     &.is-#{$name}
  18       background-color: $color
  19       color: $color-invert
  20       a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
  21       strong
  22         color: inherit
  23       .title
  24         color: $color-invert
  25       .subtitle
  26         color: rgba($color-invert, 0.9)
  27         a:not(.button),
  28         strong
  29           color: $color-invert
  30       .navbar-menu
  31         +touch
  32           background-color: $color
  33       .navbar-item,
  34       .navbar-link
  35         color: rgba($color-invert, 0.7)
  36       a.navbar-item,
  37       .navbar-link
  38         &:hover,
  39         &.is-active
  40           background-color: darken($color, 5%)
  41           color: $color-invert
  42       .tabs
  43         a
  44           color: $color-invert
  45           opacity: 0.9
  46           &:hover
  47             opacity: 1
  48         li
  49           &.is-active a
  50             opacity: 1
  51         &.is-boxed,
  52         &.is-toggle
  53           a
  54             color: $color-invert
  55             &:hover
  56               background-color: rgba($scheme-invert, 0.1)
  57           li.is-active a
  58             &,
  59             &:hover
  60               background-color: $color-invert
  61               border-color: $color-invert
  62               color: $color
  63       // Modifiers
  64       &.is-bold
  65         $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
  66         $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
  67         background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
  68         +mobile
  69           .navbar-menu
  70             background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
  71   // Sizes
  72   &.is-small
  73     .hero-body
  74       padding-bottom: 1.5rem
  75       padding-top: 1.5rem
  76   &.is-medium
  77     +tablet
  78       .hero-body
  79         padding-bottom: 9rem
  80         padding-top: 9rem
  81   &.is-large
  82     +tablet
  83       .hero-body
  84         padding-bottom: 18rem
  85         padding-top: 18rem
  86   &.is-halfheight,
  87   &.is-fullheight,
  88   &.is-fullheight-with-navbar
  89     .hero-body
  90       align-items: center
  91       display: flex
  92       & > .container
  93         flex-grow: 1
  94         flex-shrink: 1
  95   &.is-halfheight
  96     min-height: 50vh
  97   &.is-fullheight
  98     min-height: 100vh
  99
 100 // Components
 101
 102 .hero-video
 103   @extend %overlay
 104   overflow: hidden
 105   video
 106     left: 50%
 107     min-height: 100%
 108     min-width: 100%
 109     position: absolute
 110     top: 50%
 111     transform: translate3d(-50%, -50%, 0)
 112   // Modifiers
 113   &.is-transparent
 114     opacity: 0.3
 115   // Responsiveness
 116   +mobile
 117     display: none
 118
 119 .hero-buttons
 120   margin-top: 1.5rem
 121   // Responsiveness
 122   +mobile
 123     .button
 124       display: flex
 125       &:not(:last-child)
 126         margin-bottom: 0.75rem
 127   +tablet
 128     display: flex
 129     justify-content: center
 130     .button:not(:last-child)
 131       margin-right: 1.5rem
 132
 133 // Containers
 134
 135 .hero-head,
 136 .hero-foot
 137   flex-grow: 0
 138   flex-shrink: 0
 139
 140 .hero-body
 141   flex-grow: 1
 142   flex-shrink: 0
 143   padding: 3rem 1.5rem