Add is-fullheight-with-navbar class for heros (#1954)

* Added is-fullheight-with-navbar class for heros

* Updated CHANGELOG.md

* Updated CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47f615d35d5183b3c05a2f1b5d1f63e00d02cb8b..a20024bcaf9b386a6cc3f97197c082646209fb90 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * #1679 Add breakpoint based column gaps
 * #1905 Fix `modal` for IE11 #1902
 * #1919 New `is-arrowless` class for navbar items
+* #1949 New `is-fullheight-with-navbar` class for heros
 * #1764 New `.is-sr-only` helper
 * #2109 Add and use `$navbar-breakpoint` variable
 * New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`

diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 3406903b3c8452498c8dc356e9fd06acde370bc1..db56b9f89c66c0c02dc68041df8da4e62b9e9590 100644 (file)
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -97,7 +97,8 @@
         padding-bottom: 18rem
         padding-top: 18rem
   &.is-halfheight,
-  &.is-fullheight
+  &.is-fullheight,
+  &.is-fullheight-with-navbar
     .hero-body
       align-items: center
       display: flex
@@ -108,6 +109,8 @@
     min-height: 50vh
   &.is-fullheight
     min-height: 100vh
+  &.is-fullheight-with-navbar
+    min-height: calc(100vh - #{$navbar-height})
 
 // Components