mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add pagination sizes, Fix variables docs
This commit is contained in:
Jeremy Thomas
parent
f725e9b3a0
commit
dc672fd8df
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user