mirror of
https://github.com/jgthms/bulma
synced 2026-03-16 02:34:28 -07:00
Add pagination sizes, Fix variables docs
This commit is contained in:
Jeremy Thomas
@@ -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">…</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">…</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">…</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">…</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">…</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">…</span></li>
|
||||
<li><a class="pagination-link">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example">
|
||||
{{pagination_large_example}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user