Add pagination sizes, Fix variables docs

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * **Default font-size is 16px**
 * **New `.field` element ; `.control` repurposed**
+* **New `.pagination` sizes**
 
 * Remove monospace named fonts
 * Remove icon spacing logic

docs/_includes/footer.html

@@ -44,22 +44,15 @@
 <footer class="footer">
   <div class="container">
     <div class="columns">
-      <div class="column is-one-third">
+      <div class="column is-3">
         <div id="about" class="content">
-          <div>
-            <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
-            <div class="twitter-container">
-              <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
-            </div>
+          <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
+          <div class="twitter-container">
+            <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
           </div>
-          <small>
-            Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
-            <br>
-            Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
-          </small>
         </div>
       </div>
-      <div class="column">
+      <div class="column is-5">
         <div id="share" class="content">
           <div>
             <strong>Support</strong> and share the love!
@@ -68,17 +61,17 @@
             <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
 
             <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
-          </div>
 
-          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-            <input type="hidden" name="cmd" value="_s-xclick">
-            <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
-            <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-rect-paypaldonate-60px.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
-            <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
-          </form>
+            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+              <input type="hidden" name="cmd" value="_s-xclick">
+              <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
+              <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-rect-paypaldonate-60px.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
+              <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
+            </form>
+          </div>
         </div>
       </div>
-      <div class="column">
+      <div class="column is-4">
         <div id="sister">
           <p>
             More <strong>helpful</strong> tools:
@@ -98,6 +91,14 @@
         </div>
       </div>
     </div>
+
+    <p id="tsp">
+      <small>
+        Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+        <br>
+        Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
+      </small>
+    </p>
   </div>
 </footer>
 

docs/css/bulma-docs.css

@@ -3633,6 +3633,22 @@ a.nav-item.is-tab.is-active {
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
+.pagination {
+  font-size: 1rem;
+}
+
+.pagination.is-small {
+  font-size: 0.75rem;
+}
+
+.pagination.is-medium {
+  font-size: 1.25rem;
+}
+
+.pagination.is-large {
+  font-size: 1.5rem;
+}
+
 .pagination,
 .pagination-list {
   align-items: center;
@@ -3667,7 +3683,7 @@ a.nav-item.is-tab.is-active {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-size: 0.875rem;
+  font-size: 1em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   justify-content: center;
@@ -6449,15 +6465,21 @@ html.route-index #carbon {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  margin-top: 5px;
   justify-content: flex-start;
 }
 
-#social a {
+#social > iframe,
+#social > a,
+#social > form {
   display: inline-block;
   font-size: 11px;
   height: 30px;
   line-height: 30px;
+  margin-top: 5px;
+}
+
+#social .twitter-share-button {
+  margin-right: 10px;
 }
 
 #newsletter .input {
@@ -6467,6 +6489,7 @@ html.route-index #carbon {
 
 #sister ul {
   display: flex;
+  flex-wrap: wrap;
 }
 
 #sister li {
@@ -6479,16 +6502,22 @@ html.route-index #carbon {
   height: 30px;
 }
 
+#tsp small {
+  display: block;
+}
+
 #images tr td:nth-child(2) {
   width: 320px;
 }
 
 .color {
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
   display: inline-block;
   float: left;
-  height: 18px;
-  margin-right: 5px;
-  width: 18px;
+  height: 24px;
+  margin-right: 8px;
+  width: 24px;
 }
 
 .example,
@@ -6496,7 +6525,7 @@ html.route-index #carbon {
   border: 1px solid #ffdd57;
   border-top-right-radius: 3px;
   color: rgba(0, 0, 0, 0.7);
-  padding: 1.25rem 1.5rem;
+  padding: 1.5rem;
   position: relative;
 }
 

docs/documentation/components/pagination.html

@@ -154,5 +154,73 @@ doc-subtab: pagination
 {{pagination_right_example}}
 {% endhighlight %}
 
+    <hr>
+
+    <h2 class="title">Sizes <span class="tag is-success">New!</span></h2>
+    <p class="content">
+      The pagination comes in <strong>3 additional sizes</strong>.<br>
+      You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
+    </p>
+
+{% capture pagination_small_example %}
+<nav class="pagination is-small">
+  <a class="pagination-previous">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li><a class="pagination-link">1</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link">45</a></li>
+    <li><a class="pagination-link is-current">46</a></li>
+    <li><a class="pagination-link">47</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link">86</a></li>
+  </ul>
+</nav>
+{% endcapture %}
+
+    <div class="example">
+      {{pagination_small_example}}
+    </div>
+
+{% capture pagination_medium_example %}
+<nav class="pagination is-medium">
+  <a class="pagination-previous">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li><a class="pagination-link">1</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link">45</a></li>
+    <li><a class="pagination-link is-current">46</a></li>
+    <li><a class="pagination-link">47</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link">86</a></li>
+  </ul>
+</nav>
+{% endcapture %}
+
+    <div class="example">
+      {{pagination_medium_example}}
+    </div>
+
+{% capture pagination_large_example %}
+<nav class="pagination is-large">
+  <a class="pagination-previous">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li><a class="pagination-link">1</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link">45</a></li>
+    <li><a class="pagination-link is-current">46</a></li>
+    <li><a class="pagination-link">47</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link">86</a></li>
+  </ul>
+</nav>
+{% endcapture %}
+
+    <div class="example">
+      {{pagination_large_example}}
+    </div>
+
   </div>
 </section>

docs/documentation/overview/variables.html

@@ -19,9 +19,8 @@ doc-subtab: variables
         <li>
           <strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
           <ul>
-            <li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
-            <li><strong>font families</strong>: <code>$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace</code></li>
-            <li><strong>font sizes</strong>: <code>$size-1: 3.5rem</code></li>
+            <li><strong>colors</strong>: <code>$blue: hsl(217, 71%,  53%)</code></li>
+            <li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
             <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
           </ul>
         </li>
@@ -40,7 +39,7 @@ doc-subtab: variables
         <li>
           <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
           <ul>
-            <li><code>$background: $white-ter</code>: the main background color</li>
+            <li><code>$body-background: $white</code>: the main background color</li>
             <li><code>$link: $primary</code>: the links use the primary color</li>
             <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
           </ul>
@@ -194,19 +193,19 @@ doc-subtab: variables
       <tr><th colspan="2">Typography</th></tr>
       <tr>
         <td><code>$family-sans-serif</code></td>
-        <td>-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif</td>
+        <td>-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",<br>"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",<br>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td>
       </tr>
       <tr>
         <td><code>$family-monospace</code></td>
-        <td>"Inconsolata", "Consolas", "Monaco", monospace</td>
+        <td>monospace</td>
       </tr>
       <tr>
         <td><code>$size-1</code></td>
-        <td>3.5rem</td>
+        <td>3rem</td>
       </tr>
       <tr>
         <td><code>$size-2</code></td>
-        <td>2.75rem</td>
+        <td>2.5rem</td>
       </tr>
       <tr>
         <td><code>$size-3</code></td>
@@ -222,7 +221,7 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-6</code></td>
-        <td>14px</td>
+        <td>1rem</td>
       </tr>
       <tr>
         <td><code>$size-7</code></td>
@@ -245,6 +244,16 @@ doc-subtab: variables
         <td>700</td>
       </tr>
 
+      <tr><th colspan="2">Body</th></tr>
+      <tr>
+        <td><code>$body-background</code></td>
+        <td><code>$white</code></td>
+      </tr>
+      <tr>
+        <td><code>$body-size</code></td>
+        <td><code>16px</code></td>
+      </tr>
+
       <tr><th colspan="2">Breakpoints</th></tr>
       <tr>
         <td><code>$tablet</code></td>
@@ -276,31 +285,31 @@ doc-subtab: variables
       <tr><th colspan="2">2. Primary colors</th></tr>
       <tr>
         <td><code>$primary</code></td>
-        <td>$turquoise</td>
+        <td><code>$turquoise</code></td>
       </tr>
       <tr>
         <td><code>$info</code></td>
-        <td>$blue</td>
+        <td><code>$blue</code></td>
       </tr>
       <tr>
         <td><code>$success</code></td>
-        <td>$green</td>
+        <td><code>$green</code></td>
       </tr>
       <tr>
         <td><code>$warning</code></td>
-        <td>$yellow</td>
+        <td><code>$yellow</code></td>
       </tr>
       <tr>
         <td><code>$danger</code></td>
-        <td>$red</td>
+        <td><code>$red</code></td>
       </tr>
       <tr>
         <td><code>$light</code></td>
-        <td>$white-ter</td>
+        <td><code>$white-ter</code></td>
       </tr>
       <tr>
         <td><code>$dark</code></td>
-        <td>$grey-darker</td>
+        <td><code>$grey-darker</code></td>
       </tr>
 
       <tr><th colspan="2">3. Generated variables</th></tr>
@@ -308,178 +317,174 @@ doc-subtab: variables
       <tr><th colspan="2">Invert colors</th></tr>
       <tr>
         <td><code>$primary-invert</code></td>
-        <td>findColorInvert($primary)</td>
+        <td><code>findColorInvert($primary)</code></td>
       </tr>
       <tr>
         <td><code>$info-invert</code></td>
-        <td>findColorInvert($info)</td>
+        <td><code>findColorInvert($info)</code></td>
       </tr>
       <tr>
         <td><code>$success-invert</code></td>
-        <td>findColorInvert($success)</td>
+        <td><code>findColorInvert($success)</code></td>
       </tr>
       <tr>
         <td><code>$warning-invert</code></td>
-        <td>findColorInvert($warning)</td>
+        <td><code>findColorInvert($warning)</code></td>
       </tr>
       <tr>
         <td><code>$danger-invert</code></td>
-        <td>findColorInvert($danger)</td>
+        <td><code>findColorInvert($danger)</code></td>
       </tr>
       <tr>
         <td><code>$light-invert</code></td>
-        <td>$dark</td>
+        <td><code>$dark</code></td>
       </tr>
       <tr>
         <td><code>$dark-invert</code></td>
-        <td>$light</td>
+        <td><code>$light</code></td>
       </tr>
 
       <tr><th colspan="2">General colors</th></tr>
       <tr>
         <td><code>$body-background</code></td>
-        <td>$grey-lighter</td>
+        <td><code>$grey-lighter</code></td>
       </tr>
       <tr>
         <td><code>$background</code></td>
-        <td>$grey-lighter</td>
+        <td><code>$grey-lighter</code></td>
       </tr>
       <tr>
         <td><code>$border</code></td>
-        <td>$grey-light</td>
+        <td><code>$grey-light</code></td>
       </tr>
       <tr>
         <td><code>$border-hover</code></td>
-        <td>$grey</td>
+        <td><code>$grey</code></td>
       </tr>
 
       <tr><th colspan="2">Text colors</th></tr>
       <tr>
         <td><code>$text</code></td>
-        <td>$grey-dark</td>
+        <td><code>$grey-dark</code></td>
       </tr>
       <tr>
         <td><code>$text-invert</code></td>
-        <td>findColorInvert($text)</td>
+        <td><code>findColorInvert($text)</code></td>
       </tr>
       <tr>
         <td><code>$text-light</code></td>
-        <td>$grey</td>
+        <td><code>$grey</code></td>
       </tr>
       <tr>
         <td><code>$text-strong</code></td>
-        <td>$grey-darker</td>
+        <td><code>$grey-darker</code></td>
       </tr>
 
       <tr><th colspan="2">Code colors</th></tr>
       <tr>
         <td><code>$code</code></td>
-        <td>$red</td>
+        <td><code>$red</code></td>
       </tr>
       <tr>
         <td><code>$code-background</code></td>
-        <td>$background</td>
+        <td><code>$background</code></td>
       </tr>
       <tr>
         <td><code>$pre</code></td>
-        <td>$text</td>
+        <td><code>$text</code></td>
       </tr>
       <tr>
         <td><code>$pre-background</code></td>
-        <td>$background</td>
+        <td><code>$background</code></td>
       </tr>
 
       <tr><th colspan="2">Link colors</th></tr>
       <tr>
         <td><code>$link</code></td>
-        <td>$primary</td>
+        <td><code>$primary</code></td>
       </tr>
       <tr>
         <td><code>$link-invert</code></td>
-        <td>$primary-invert</td>
+        <td><code>$primary-invert</code></td>
       </tr>
       <tr>
         <td><code>$link-visited</code></td>
-        <td>$purple</td>
+        <td><code>$purple</code></td>
       </tr>
       <tr>
         <td><code>$link-hover</code></td>
-        <td>$grey-darker</td>
+        <td><code>$grey-darker</code></td>
       </tr>
       <tr>
         <td><code>$link-hover-border</code></td>
-        <td>$grey-darker</td>
+        <td><code>$grey-darker</code></td>
       </tr>
       <tr>
         <td><code>$link-focus</code></td>
-        <td>$grey-darker</td>
+        <td><code>$grey-darker</code></td>
       </tr>
       <tr>
         <td><code>$link-focus-border</code></td>
-        <td>$primary</td>
+        <td><code>$primary</code></td>
       </tr>
       <tr>
         <td><code>$link-active</code></td>
-        <td>$grey-darker</td>
+        <td><code>$grey-darker</code></td>
       </tr>
       <tr>
         <td><code>$link-active-border</code></td>
-        <td>$grey-dark</td>
+        <td><code>$grey-dark</code></td>
       </tr>
 
       <tr><th colspan="2">Typography</th></tr>
       <tr>
         <td><code>$family-primary</code></td>
-        <td>$family-sans-serif</td>
+        <td><code>$family-sans-serif</code></td>
       </tr>
       <tr>
         <td><code>$family-code</code></td>
-        <td>$family-monospace</td>
+        <td><code>$family-monospace</code></td>
       </tr>
       <tr>
         <td><code>$size-small</code></td>
-        <td>$size-7</td>
+        <td><code>$size-7</code></td>
       </tr>
       <tr>
         <td><code>$size-normal</code></td>
-        <td>1rem</td>
+        <td><code>$size-6</code></td>
       </tr>
       <tr>
         <td><code>$size-medium</code></td>
-        <td>$size-5</td>
+        <td><code>$size-5</code></td>
       </tr>
       <tr>
         <td><code>$size-large</code></td>
-        <td>$size-4</td>
+        <td><code>$size-4</code></td>
       </tr>
 
       <tr><th colspan="2">4. Lists and maps</th></tr>
       <tr>
         <td><code>$colors</code>
         <td>
-          (white: ($white, $black),
-          <br>
-          black: ($black, $white),
-          <br>
-          light: ($light, $light-invert),
-          <br>
-          dark: ($dark, $dark-invert),
-          <br>
-          primary: ($primary, $primary-invert),
-          <br>
-          info: ($info, $info-invert),
-          <br>
-          success: ($success, $success-invert),
-          <br>
-          warning: ($warning, $warning-invert),
-          <br>
-          danger: ($danger, $danger-invert))
+          <pre>
+(
+  white: ($white, $black),
+  black: ($black, $white),
+  light: ($light, $light-invert),
+  dark: ($dark, $dark-invert),
+  primary: ($primary, $primary-invert),
+  info: ($info, $info-invert),
+  success: ($success, $success-invert),
+  warning: ($warning, $warning-invert),
+  danger: ($danger, $danger-invert)
+)
+          </pre>
         </td>
       </tr>
 
       <tr>
         <td><code>$sizes</code></td>
-        <td>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</td>
+        <td><code>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></td>
       </tr>
     </table>
   </div>

docs/sass/example.sass

@@ -3,7 +3,7 @@
   border: 1px solid $warning
   border-top-right-radius: $radius
   color: $warning-invert
-  padding: 1.25rem 1.5rem
+  padding: 1.5rem
   position: relative
   &:not(:first-child)
     margin-top: 2rem

docs/sass/footer.sass

@@ -23,13 +23,17 @@
   align-items: center
   display: flex
   flex-wrap: wrap
-  margin-top: 5px
   justify-content: flex-start
-  a
+  > iframe,
+  > a,
+  > form
     display: inline-block
     font-size: 11px
     height: 30px
     line-height: 30px
+    margin-top: 5px
+  .twitter-share-button
+    margin-right: 10px
 
 #newsletter
   .input
@@ -39,9 +43,14 @@
 #sister
   ul
     display: flex
+    flex-wrap: wrap
   li
     display: flex
     height: 30px
     margin: 5px 1rem 0 0
   img
     height: 30px
+
+#tsp
+  small
+    display: block

docs/sass/specific.sass

@@ -4,8 +4,10 @@
       width: 320px
 
 .color
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(black, 0.5)
   display: inline-block
   float: left
-  height: 18px
-  margin-right: 5px
-  width: 18px
+  height: 24px
+  margin-right: 8px
+  width: 24px

sass/components/pagination.sass

@@ -23,6 +23,16 @@ $pagination-ellipsis: $grey-light !default
 
 $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
+.pagination
+  font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+
 .pagination,
 .pagination-list
   align-items: center
@@ -36,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-ellipsis
   +control
   +unselectable
-  font-size: 0.875rem
+  font-size: 1em
   padding-left: 0.5em
   padding-right: 0.5em
   justify-content: center