bulma/sass/layout/hero.sass

153 lines
3.4 KiB
Sass
Raw Normal View History

2016-05-07 22:40:06 +00:00
// Components
.hero-video
+overlay
overflow: hidden
video
left: 50%
min-height: 100%
min-width: 100%
position: absolute
top: 50%
transform: translate3d(-50%, -50%, 0)
2016-04-10 15:56:27 +00:00
// Modifiers
&.is-transparent
opacity: 0.3
// Responsiveness
+mobile
display: none
2016-01-24 12:32:11 +00:00
.hero-buttons
2016-12-22 20:33:10 +00:00
margin-top: 1.5rem
2016-04-10 15:56:27 +00:00
// Responsiveness
2016-01-24 12:32:11 +00:00
+mobile
.button
2016-05-07 22:40:06 +00:00
display: flex
2016-01-24 12:32:11 +00:00
&:not(:last-child)
2016-12-22 20:33:10 +00:00
margin-bottom: 0.75rem
2016-01-24 12:32:11 +00:00
+tablet
display: flex
justify-content: center
.button:not(:last-child)
2016-12-22 20:33:10 +00:00
margin-right: 1.5rem
2016-01-24 12:32:11 +00:00
2016-05-07 22:40:06 +00:00
// Containers
.hero-head,
.hero-foot
2016-12-22 20:33:10 +00:00
flex-grow: 0
2016-05-07 22:40:06 +00:00
flex-shrink: 0
.hero-body
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
2016-12-22 20:33:10 +00:00
padding: 3rem 1.5rem
2016-05-07 22:40:06 +00:00
// Responsiveness
2016-12-22 20:33:10 +00:00
+from($widescreen)
2016-05-07 22:40:06 +00:00
padding-left: 0
padding-right: 0
// Main container
2016-01-24 00:03:43 +00:00
.hero
2016-05-07 22:40:06 +00:00
align-items: stretch
2016-06-29 22:59:48 +00:00
background-color: $white
2016-05-07 22:40:06 +00:00
display: flex
flex-direction: column
justify-content: space-between
.nav
2016-01-24 00:03:43 +00:00
background: none
2016-05-08 00:35:43 +00:00
box-shadow: 0 1px 0 rgba($border, 0.3)
2016-01-24 00:03:43 +00:00
.tabs
ul
border-bottom: none
2016-04-10 15:56:27 +00:00
// Colors
2016-01-24 00:03:43 +00:00
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
2016-06-29 22:59:48 +00:00
background-color: $color
2016-01-24 00:03:43 +00:00
color: $color-invert
2017-04-02 12:42:13 +00:00
a:not(.button),
2016-12-23 12:13:50 +00:00
strong
color: inherit
2016-01-24 00:03:43 +00:00
.title
color: $color-invert
.subtitle
2016-09-22 18:48:42 +00:00
color: rgba($color-invert, 0.9)
2017-04-02 12:42:13 +00:00
a:not(.button),
2016-01-24 00:03:43 +00:00
strong
color: $color-invert
2016-05-07 22:40:06 +00:00
.nav
2016-05-08 00:35:43 +00:00
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
.nav-menu
+mobile
2016-06-29 22:59:48 +00:00
background-color: $color
2016-05-07 22:40:06 +00:00
a.nav-item,
.nav-item a:not(.button)
2016-09-22 18:48:42 +00:00
color: rgba($color-invert, 0.7)
2016-01-24 00:03:43 +00:00
&:hover,
&.is-active
2016-03-25 13:38:40 +00:00
color: $color-invert
2016-01-24 00:03:43 +00:00
.tabs
a
color: $color-invert
2016-09-22 18:48:42 +00:00
opacity: 0.9
2016-01-24 00:03:43 +00:00
&:hover
opacity: 1
2016-05-07 22:40:06 +00:00
li
&.is-active a
opacity: 1
&.is-boxed,
&.is-toggle
2016-01-24 00:03:43 +00:00
a
color: $color-invert
&:hover
2016-06-29 22:59:48 +00:00
background-color: rgba($black, 0.1)
2016-01-24 00:03:43 +00:00
li.is-active a
&,
&:hover
2016-06-29 22:59:48 +00:00
background-color: $color-invert
2016-05-08 00:35:43 +00:00
border-color: $color-invert
2016-01-24 00:03:43 +00:00
color: $color
2016-04-10 15:56:27 +00:00
// Modifiers
2016-01-24 00:03:43 +00:00
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
2017-04-02 15:28:18 +00:00
+mobile
.nav-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
2016-04-10 15:56:27 +00:00
// Responsiveness
2016-01-24 00:03:43 +00:00
+mobile
2016-05-07 22:40:06 +00:00
.nav-toggle
2016-01-24 00:03:43 +00:00
span
2016-06-29 22:59:48 +00:00
background-color: $color-invert
2016-01-24 00:03:43 +00:00
&:hover
2016-06-29 22:59:48 +00:00
background-color: rgba($black, 0.1)
2016-01-24 00:03:43 +00:00
&.is-active
span
2016-06-29 22:59:48 +00:00
background-color: $color-invert
2016-05-07 22:40:06 +00:00
.nav-menu
.nav-item
2016-01-24 00:03:43 +00:00
border-top-color: rgba($color-invert, 0.2)
2016-04-10 15:56:27 +00:00
// Sizes
2016-01-24 00:03:43 +00:00
&.is-medium
+tablet
2016-05-07 22:40:06 +00:00
.hero-body
2016-12-22 20:33:10 +00:00
padding-bottom: 9rem
padding-top: 9rem
2016-05-07 22:40:06 +00:00
&.is-large
+tablet
.hero-body
2016-12-22 20:33:10 +00:00
padding-bottom: 18rem
padding-top: 18rem
2016-01-24 12:32:11 +00:00
&.is-fullheight
min-height: 100vh
2016-05-07 22:40:06 +00:00
.hero-body
2016-05-08 00:35:43 +00:00
align-items: center
2016-01-24 12:32:11 +00:00
display: flex
2016-05-08 00:35:43 +00:00
& > .container
2016-07-31 10:45:56 +00:00
flex-grow: 1
2016-09-24 17:56:26 +00:00
flex-shrink: 1