From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Tue, 14 Mar 2017 22:38:45 +0000 (+0000)
Subject: Add spaced title
X-Git-Tag: 0.4.0~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1dc6ef2c7600b43d2e1fc8f449aa5f6ca5c6b846;p=thirdparty%2Fbulma.git

Add spaced title
---

diff --git a/docs/_includes/bsa.html b/docs/_includes/bsa.html
index 4c8794d6a..313eecf47 100644
--- a/docs/_includes/bsa.html
+++ b/docs/_includes/bsa.html
@@ -5,7 +5,7 @@
     <div class="columns is-vcentered">
       <div class="column is-4">
         <p class="title">Bulma <strong>Partners</strong></p>
-        <p class="subtitle">Keeping the project alive!</p>
+        <p class="subtitle">Check out their products!</p>
       </div>
 
       <div class="column is-8">
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2f29f5717..582b2108d 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2540,8 +2540,8 @@ input[type="submit"].button {
   margin-top: -0.75rem;
 }
 
-.title + .subtitle {
-  margin-top: -1.25rem;
+.title:not(.is-spaced) + .subtitle {
+  margin-top: -1.5rem;
 }
 
 .title.is-1 {
@@ -2579,7 +2579,7 @@ input[type="submit"].button {
   color: #363636;
 }
 
-.subtitle + .title {
+.subtitle:not(.is-spaced) + .title {
   margin-top: -1.5rem;
 }
 
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index bd07d2cea..a39c15966 100644
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -27,7 +27,8 @@ doc-subtab: form
         <li><code>.button</code></li>
         <li><code>.help</code></li>
       </ul>
-      <p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
+      <p>Each of them should be wrapped in a <code>.control</code> container.<br>
+      When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
     </div>
 
 {% capture form_example %}
diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
index 18dbd3f7b..ec40a9a3e 100644
--- a/docs/documentation/elements/title.html
+++ b/docs/documentation/elements/title.html
@@ -12,7 +12,9 @@ doc-subtab: title
     <h2 class="subtitle">
       Simple <strong>headings</strong> to add depth to your page
     </h2>
+
     <hr>
+
     <div class="columns">
       <div class="column">
         <p>There are <strong>2 types</strong> of heading:</p>
@@ -28,7 +30,9 @@ doc-subtab: title
 {% endhighlight %}
       </div>
     </div>
+
     <hr>
+
     <div class="columns">
       <div class="column">
         <p>There are <strong>6 sizes</strong> available:</p>
@@ -52,6 +56,7 @@ doc-subtab: title
 {% endhighlight %}
       </div>
     </div>
+
     <div class="columns">
       <div class="column"></div>
       <div class="column">
@@ -73,7 +78,9 @@ doc-subtab: title
 {% endhighlight %}
       </div>
     </div>
+
     <hr>
+
     <div class="columns">
       <div class="column">
         <div class="content">
@@ -105,6 +112,45 @@ doc-subtab: title
 
 <p class="title is-3">Title 3</p>
 <p class="subtitle is-5">Subtitle 5</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            <span class="tag is-success">New!</span>
+          </p>
+          <p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="block">
+          <p class="title is-1 is-spaced">Title 1</p>
+          <p class="subtitle is-3">Subtitle 3</p>
+        </div>
+        <div class="block">
+          <p class="title is-2 is-spaced">Title 2</p>
+          <p class="subtitle is-4">Subtitle 4</p>
+        </div>
+        <div class="block">
+          <p class="title is-3 is-spaced">Title 3</p>
+          <p class="subtitle is-5">Subtitle 5</p>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<p class="title is-1 is-spaced">Title 1</p>
+<p class="subtitle is-3">Subtitle 3</p>
+
+<p class="title is-2 is-spaced">Title 2</p>
+<p class="subtitle is-4">Subtitle 4</p>
+
+<p class="title is-3 is-spaced">Title 3</p>
+<p class="subtitle is-5">Subtitle 5</p>
 {% endhighlight %}
       </div>
     </div>
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index 82e3b8eb1..0440570c8 100644
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -36,7 +36,7 @@ doc-subtab: responsiveness
         <li><code>tablet</code>: from <code>769px</code></li>
         <li><code>desktop</code>: from <code>1000px</code></li>
         <li><code>widescreen</code>: from <code>1192px</code></li>
-        <li><code>fullhd</code>: from <code>1384px</code></li>
+        <li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1384px</code></li>
       </ul>
       <p>Bulma uses 9 responsive mixins:</p>
       <ul>
@@ -73,6 +73,7 @@ doc-subtab: responsiveness
           from <code>1192px</code> and until <code>1383px</code>
         </li>
         <li>
+          <span class="tag is-success">New!</span>
           <code>=fullhd</code><br>
           from <code>1384px</code>
         </li>
diff --git a/sass/elements/title.sass b/sass/elements/title.sass
index 7414a6b73..52c051ef1 100644
--- a/sass/elements/title.sass
+++ b/sass/elements/title.sass
@@ -29,8 +29,8 @@ $subtitle-weight:   $weight-light !default
     color: inherit
   & + .highlight
     margin-top: -0.75rem
-  & + .subtitle
-    margin-top: -1.25rem
+  &:not(.is-spaced) + .subtitle
+    margin-top: -1.5rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
@@ -44,7 +44,7 @@ $subtitle-weight:   $weight-light !default
   line-height: 1.25
   strong
     color: $subtitle-strong
-  & + .title
+  &:not(.is-spaced) + .title
     margin-top: -1.5rem
   // Colors
   @each $size in $sizes