Merge branch 'release/0.7.1'

CHANGELOG.md

@@ -4,6 +4,13 @@ Changelog
 [Unreleased]
 ------------
 
+[0.7.1] - 2018-04-20
+--------------------
+
+> Target commit:
+> [6d831a7c96e3f1737b7fbdbdcd2e985964995553](https://github.com/jgthms/bulma/commit/6d831a7c96e3f1737b7fbdbdcd2e985964995553)
+> (Tag: [0.7.1](https://github.com/jgthms/bulma/releases/tag/0.7.1))
+
 [0.7.0-patch.1] - 2018-04-18
 ----------------------------
 
@@ -52,7 +59,8 @@ Changelog
 [stylus-operator-exponent]: http://stylus-lang.com/docs/operators.html#exponent-
 [stylus-bifs-luminosity]: http://stylus-lang.com/docs/bifs.html#luminositycolor
 
-[Unreleased]: https://github.com/shirohana/bulma.stylus/compare/v0.7.0-patch.1...dev
+[Unreleased]: https://github.com/shirohana/bulma.stylus/compare/v0.7.1...dev
+[0.7.1]: https://github.com/shirohana/bulma.stylus/releases/tag/v0.7.1
 [0.7.0-patch.1]: https://github.com/shirohana/bulma.stylus/releases/tag/v0.7.0-patch.1
 [0.7.0]: https://github.com/shirohana/bulma.stylus/releases/tag/v0.7.0
 [0.6.2]: https://github.com/shirohana/bulma.stylus/releases/tag/v0.6.2

docs/_includes/components/categories.html

@@ -30,4 +30,6 @@
   {% endfor %}
 </nav>
 
-{% include global/fortyfour.html %}
+{% unless page.hide_fortyfour %}
+  {% include global/fortyfour.html %}
+{% endunless %}

docs/_includes/footer/main.html

@@ -11,7 +11,6 @@
         {% include footer/share.html %}
       </div>
     </div>
-    {% include footer/support.html %}
     {% include footer/boxes.html %}
     {% include footer/links.html %}
   </div>

docs/_includes/global/footer.html

@@ -2,6 +2,8 @@
 
 {% include book/book-banner.html %}
 
+{% include footer/support.html %}
+
 {% include global/newsletter.html %}
 
 {% include footer/main.html %}

docs/_includes/global/navbar.html

@@ -1,4 +1,4 @@
-<nav id="navbar" class="navbar is-spaced">
+<nav id="navbar" class="navbar has-shadow is-spaced">
   <div class="container">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">

docs/_sass/footer.sass

@@ -38,8 +38,8 @@
 
 .bd-footer-support
   @extend %bd-footer-box
-  margin-bottom: 3rem
-  margin-top: 3rem
+  // background-color: $white-bis
+  // box-shadow: none
   padding: 3rem
   .bd-footer-title
     margin-bottom: 1.5rem
@@ -49,7 +49,10 @@
 
 .bd-footer-donation
   flex: none
-  width: 240px
+
++tablet
+  .bd-footer-donation
+    width: 240px
 
 .bd-footer-donation-title
   color: $grey-light
@@ -70,6 +73,7 @@
 $star-figure-height: 156px
 
 .bd-footer-stars
+  margin-top: 2.5rem
   +tablet
     align-items: stretch
     display: flex

docs/_sass/global.sass

@@ -9,6 +9,7 @@ svg
   img
     border-radius: $radius
     display: block
+    max-height: none !important
   &:hover
     &::after
       +overlay

docs/bulma-docs.sass

@@ -24,8 +24,6 @@ $main-spacing: 3rem
 $intro-width: 1080px
 $sidebar-width: 14rem
 
-$navbar-item-img-max-height: none
-
 @import "./_sass/utilities/_all"
 
 %center

docs/documentation/components/navbar.html

@@ -530,12 +530,6 @@
 </nav>
 {% endcapture %}
 
-<div class="message is-success">
-  <div class="message-body">
-    <p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
-  </div>
-</div>
-
 <div class="content">
   <p>
     The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:

docs/documentation/components/tabs.html

@@ -70,7 +70,7 @@
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -134,7 +134,7 @@
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -165,7 +165,7 @@
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -252,7 +252,7 @@
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -283,7 +283,7 @@
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -314,7 +314,7 @@
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -345,7 +345,7 @@
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
+        <span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -360,8 +360,6 @@
 
 {% include elements/snippet.html content=tabs_example horizontal=true %}
 
-{% include elements/snippet.html content=tabs_example horizontal=true more=true %}
-
 {% include elements/anchor.html name="Alignment" %}
 
 <div class="content">
@@ -382,8 +380,6 @@
 
 {% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
 
-{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
-
 {% include elements/anchor.html name="Sizes" %}
 <div class="content">
   <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>

docs/documentation/layout/hero.html

@@ -2,15 +2,42 @@
 title: Hero
 layout: documentation
 hide_categories: true
+hide_fortyfour: true
 doc-tab: layout
 doc-subtab: hero
 breadcrumb:
 - home
 - documentation
 - layout
 - layout-hero
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
+<div class="content">
+  <p>
+    The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally cover the full height of the page as well.
+  </p>
+  <p>
+    The basic requirement of this component are:
+  </p>
+  <ul>
+    <li>
+      <code>hero</code> as the main container
+      <ul>
+        <li>
+          <code>hero-body</code> as a direct child, in which you can put all your content
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <p>
+    For the <a href="#full-height-hero">full height hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
+  </p>
+</div>
+
 {% include layout/main-close.html show_categories=true %}
 
 <section class="section is-fullwidth">
@@ -48,7 +75,7 @@ <h2 class="subtitle">
 
 <section class="section">
   <div class="container">
-    <h3 class="title">Colors</h3>
+    {% include elements/anchor.html name="Colors" %}
     <h4 class="subtitle">
         As with buttons, you can choose one of the <strong>7 different colors</strong>:
     </h4>
@@ -179,10 +206,7 @@ <h2 class="subtitle">
 
 <section class="section">
   <div class="container">
-    <h3 class="title">
-      Gradients
-      <span class="tag is-warning">Experimental</span>
-    </h3>
+    {% include elements/anchor.html name="Gradients" %}
     <h4 class="subtitle">
       By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
     </h4>
@@ -306,7 +330,7 @@ <h2 class="subtitle">
 
 <section class="section">
   <div class="container">
-    <h3 class="title">Sizes</h3>
+    {% include elements/anchor.html name="Sizes" %}
     <h4 class="subtitle">
       You can have even more imposing banners by using one of <strong>3 different sizes</strong>
     </h4>
@@ -407,7 +431,7 @@ <h2 class="subtitle">
 
 <section class="section">
   <div class="container">
-    <h3 class="title">Full height hero</h3>
+    {% include elements/anchor.html name="Full height hero" %}
     <h4 class="subtitle">And vertically centered</h4>
     <div class="content">
       <p>You can split the hero in <strong>3 vertical parts</strong>:</p>
@@ -654,3 +678,5 @@ <h2 class="subtitle">
 </section>
 
 {% include layout/main-open.html %}
+
+{% include elements/variables.html type='component' %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shirohana/bulma-stylus",
-  "version": "0.7.0-patch.1",
+  "version": "0.7.1",
   "homepage": "https://bulma.io",
   "author": "Hana Shiro <shirohana0608@gmail.com>",
   "description": "Pure Stylus implementation of Bulma.css with a little changes",

stylus/components/navbar.styl

@@ -40,6 +40,8 @@ $navbar-dropdown-item-active-background-color ?= $background
 $navbar-divider-background-color ?= $background
 $navbar-divider-height           ?= r(2)
 
+$navbar-bottom-box-shadow-size ?= 0 (-2) 0 0
+
 navbar-fixed()
   left: 0
   position: fixed
@@ -48,9 +50,9 @@ navbar-fixed()
 
 .navbar
   background-color: $navbar-background-color
-  box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
   min-height: $navbar-height
   position: relative
+  z-index: $navbar-z
   for $name, $pair in $colors
     $color = $pair[0]
     $color-invert = $pair[1]
@@ -100,14 +102,14 @@ navbar-fixed()
     min-height: $navbar-height
     width: 100%
   &.has-shadow
-    box-shadow: 0 r(2) r(3) rgba($black, 0.1)
+    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
   &.is-fixed-bottom
   &.is-fixed-top
     navbar-fixed()
   &.is-fixed-bottom
     bottom: 0
     &.has-shadow
-      box-shadow: 0 r(-2) r(3) rgba($black, 0.1)
+      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
   &.is-fixed-top
     top: 0