Fix #2739 add variables size for layout hero (#2740)

* Add variables size for layout hero

* Add variables size for layout hero

* Change variable tag to Yes on hero documentation

docs/_data/variables/layout/hero.json

@@ -0,0 +1,31 @@
+{
+  "by_name": {
+    "$hero-body-padding": {
+      "name": "$hero-body-padding",
+      "value": "3rem 1.5rem",
+      "type": "size"
+    },
+    "$hero-body-padding-small": {
+      "name": "$hero-body-padding-small",
+      "value": "1.5rem",
+      "type": "size"
+    },
+    "$hero-body-padding-medium": {
+      "name": "$hero-body-padding-medium",
+      "value": "9rem 1.5rem",
+      "type": "size"
+    },
+    "$hero-body-padding-large": {
+      "name": "$hero-body-padding-large",
+      "value": "18rem 1.5rem",
+      "type": "size"
+    }
+  },
+  "list": [
+    "$hero-body-padding",
+    "$hero-body-padding-small",
+    "$hero-body-padding-medium",
+    "$hero-body-padding-large"
+  ],
+  "file_path": "layout/hero.sass"
+} 

docs/documentation/customize/concepts.html

@@ -14,7 +14,7 @@ breadcrumb:
 
 <div class="content">
   <p>
-    Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
+    Bulma is highly customizable thanks to <strong>419 Sass variables</strong> living across <strong>28 files</strong>.
   </p>
 
   <p>

docs/documentation/layout/hero.html

@@ -13,7 +13,7 @@ breadcrumb:
 meta:
   colors: true
   sizes: true
-  variables: false
+  variables: true
 ---
 
 <div class="content">

sass/layout/hero.sass

@@ -1,5 +1,9 @@
-// Main container
+$hero-body-padding: 3rem 1.5rem !default
+$hero-body-padding-small: 1.5rem !default
+$hero-body-padding-medium: 9rem 1.5rem !default
+$hero-body-padding-large: 18rem 1.5rem !default
 
+// Main container
 .hero
   align-items: stretch
   display: flex
@@ -71,18 +75,15 @@
   // Sizes
   &.is-small
     .hero-body
-      padding-bottom: 1.5rem
-      padding-top: 1.5rem
+      padding: $hero-body-padding-small
   &.is-medium
     +tablet
       .hero-body
-        padding-bottom: 9rem
-        padding-top: 9rem
+        padding: $hero-body-padding-medium
   &.is-large
     +tablet
       .hero-body
-        padding-bottom: 18rem
-        padding-top: 18rem
+        padding: $hero-body-padding-large
   &.is-halfheight,
   &.is-fullheight,
   &.is-fullheight-with-navbar
@@ -140,4 +141,4 @@
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 3rem 1.5rem
+  padding: $hero-body-padding