Fix #861

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Issues closed
 
+* Fix #861 Box in hero as text and background white
 * Fix #852 charset and version number
 * Fix #856 JavaScript `nav-burger` example
 * Fix #821 Notification strong color

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "homepage": "http://bulma.io",
   "authors": [
     "jgthms <bbxdesign@gmail.com>"

docs/_sass/example.sass

@@ -45,8 +45,10 @@
   code
     padding: 1.25em 1.5em
 
-#navbarJsExample .highlight pre
-  max-height: none
+.highlight-full,
+#navbarJsExample
+  .highlight pre
+    max-height: none
 
 $structure: $danger
 $structure-invert: $danger-invert

docs/documentation/components/card.html

@@ -4,53 +4,6 @@ doc-tab: components
 doc-subtab: card
 ---
 
-{% include subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Card</h1>
-    <h2 class="subtitle">An all-around flexible and composable component</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
-      <ul>
-        <li>
-          <code>card</code>: the main container
-          <ul>
-            <li>
-              <code>card-header</code>: a horizontal bar with a shadow
-              <ul>
-                <li>
-                  <code>card-header-title</code>: a left-aligned bold text
-                </li>
-                <li>
-                  <code>card-header-icon</code>: a placeholder for an icon
-                </li>
-              </ul>
-            </li>
-            <li>
-              <code>card-image</code>: a fullwidth container for a reponsive image
-            </li>
-            <li>
-              <code>card-content</code>: a multi-purpose container for <em>any</em> other element
-            </li>
-            <li>
-              <code>card-footer</code>: a horizontal list of controls
-              <ul>
-                <li>
-                  <code>card-footer-item</code>: a repeatable list item
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-
-    <hr>
-
 {% capture card_example %}
 <div class="card">
   <div class="card-image">
@@ -81,18 +34,6 @@ doc-subtab: card
   </div>
 </div>
 {% endcapture %}
-<div class="columns">
-  <div class="column is-one-third">
-{{card_example}}
-  </div>
-  <div class="column">
-{% highlight html %}
-{{card_example}}
-{% endhighlight %}
-  </div>
-</div>
-
-    <hr>
 
 {% capture card_header_example %}
 <div class="card">
@@ -121,18 +62,6 @@ doc-subtab: card
   </footer>
 </div>
 {% endcapture %}
-<div class="columns">
-  <div class="column is-one-third">
-{{card_header_example}}
-  </div>
-  <div class="column">
-{% highlight html %}
-{{card_header_example}}
-{% endhighlight %}
-  </div>
-</div>
-
-    <hr>
 
 {% capture card_title_example %}
 <div class="card">
@@ -158,16 +87,84 @@ doc-subtab: card
   </footer>
 </div>
 {% endcapture %}
-<div class="columns">
-  <div class="column is-one-third">
-{{card_title_example}}
-  </div>
-  <div class="column">
-{% highlight html %}
-{{card_title_example}}
-{% endhighlight %}
-  </div>
-</div>
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Card</h1>
+    <h2 class="subtitle">An all-around flexible and composable component</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
+      <ul>
+        <li>
+          <code>card</code>: the main container
+          <ul>
+            <li>
+              <code>card-header</code>: a horizontal bar with a shadow
+              <ul>
+                <li>
+                  <code>card-header-title</code>: a left-aligned bold text
+                </li>
+                <li>
+                  <code>card-header-icon</code>: a placeholder for an icon
+                </li>
+              </ul>
+            </li>
+            <li>
+              <code>card-image</code>: a fullwidth container for a reponsive image
+            </li>
+            <li>
+              <code>card-content</code>: a multi-purpose container for <em>any</em> other element
+            </li>
+            <li>
+              <code>card-footer</code>: a horizontal list of controls
+              <ul>
+                <li>
+                  <code>card-footer-item</code>: a repeatable list item
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        {{card_example}}
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{card_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        {{card_header_example}}
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{card_header_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        {{card_title_example}}
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{card_title_example}}{% endhighlight %}
+      </div>
+    </div>
 
   </div>
 </section>

docs/documentation/elements/box.html

@@ -6,26 +6,6 @@ doc-subtab: box
 
 {% include subnav-elements.html %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Box</h1>
-    <h2 class="subtitle">
-      A white <strong>box</strong> to contain other elements
-    </h2>
-
-    <hr>
-
-    <div class="columns">
-      <div class="column is-4">
-        <div class="content">
-          <p>
-            The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
-            <br>
-            For example, you can include a media object:
-          </p>
-        </div>
-      </div>
-
 {% capture box_example %}
 <div class="box">
   <article class="media">
@@ -60,14 +40,32 @@ doc-subtab: box
 </div>
 {% endcapture %}
 
+<section class="section">
+  <div class="container">
+    <h1 class="title">Box</h1>
+    <h2 class="subtitle">
+      A white <strong>box</strong> to contain other elements
+    </h2>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-4">
+        <div class="content">
+          <p>
+            The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
+            <br>
+            For example, you can include a media object:
+          </p>
+        </div>
+      </div>
+
       <div class="column is-8">
         {{box_example}}
       </div>
     </div>
 
-{% highlight html %}
-{{box_example}}
-{% endhighlight %}
+    {% highlight html %}{{box_example}}{% endhighlight %}
 
   </div>
 </section>

sass/components/card.sass

@@ -1,14 +1,31 @@
+$card: $text !default
+$card-background: $white !default
+$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$card-header: $text-strong !default
+$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-weight: $weight-bold !default
+
+$card-footer-border: $border !default
+
+.card
+  background-color: $card-background
+  box-shadow: $card-shadow
+  color: $card
+  max-width: 100%
+  position: relative
+
 .card-header
   align-items: stretch
-  box-shadow: 0 1px 2px rgba($black, 0.1)
+  box-shadow: $card-header-shadow
   display: flex
 
 .card-header-title
   align-items: center
-  color: $text-strong
+  color: $card-header
   display: flex
   flex-grow: 1
-  font-weight: $weight-bold
+  font-weight: $card-header-weight
   padding: 0.75rem
 
 .card-header-icon
@@ -26,7 +43,7 @@
   padding: 1.5rem
 
 .card-footer
-  border-top: 1px solid $border
+  border-top: 1px solid $card-footer-border
   align-items: stretch
   display: flex
 
@@ -39,13 +56,10 @@
   justify-content: center
   padding: 0.75rem
   &:not(:last-child)
-    border-right: 1px solid $border
+    border-right: 1px solid $card-footer-border
+
+// Combinations
 
 .card
-  background-color: $white
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  color: $text
-  max-width: 100%
-  position: relative
   .media:not(:last-child)
     margin-bottom: 0.75rem

sass/elements/box.sass

@@ -1,14 +1,23 @@
+$box: $text !default
+$box-background: $white !default
+$box-radius: $radius-large !default
+$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+
 .box
   +block
-  background-color: $white
-  border-radius: $radius-large
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  background-color: $box-background
+  border-radius: $box-radius
+  box-shadow: $box-shadow
+  color: $box
   display: block
   padding: 1.25rem
 
 a.box
   &:hover,
   &:focus
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+    box-shadow: $box-link-hover-shadow
   &:active
-    box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+    box-shadow: $box-link-active-shadow