From: Wikiki <wikiki@protonmail.com>
Date: Sun, 10 Sep 2017 15:34:08 +0000 (+0200)
Subject: Feature/typo weight modifier (#1171)
X-Git-Tag: 0.5.2~8
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ac533a21c1c25f25e8264e7a289d0fae191b35c3;p=thirdparty%2Fbulma.git

Feature/typo weight modifier (#1171)

* Update new steps extension image size

* Add text weight modifiers + update doc
---

diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index 79bb9e728..55ad69a75 100644
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -385,5 +385,44 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
+    {% include anchor.html name="Text weight" %}
+
+    <div class="content">
+      <p>
+        You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+      <tr>
+        <th>
+          Class
+        </th>
+        <th>
+          Weight
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td><code>.has-text-weight-light</code></td>
+        <td>Transforms  text weight to <strong>light</strong></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-weight-normal</code></td>
+        <td>Transforms text weight to <strong>normal</strong></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-weight-semibold</code></td>
+        <td>Transforms text weight to <strong>semi-bold</strong></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-weight-bold</code></td>
+        <td>Transforms text weight to <strong>bold</strong></td>
+      </tr>
+      </tbody>
+    </table>
+
   </div>
 </section>
diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass
index cc5e14594..839691f3b 100644
--- a/sass/base/helpers.sass
+++ b/sass/base/helpers.sass
@@ -102,6 +102,15 @@ $alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
   .has-text-#{$name}
     color: $shade !important
 
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
 // Visibility
 
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'