<div class="control is-grouped">
<div class="control has-icon is-expanded">
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
- <i class="fa fa-envelope"></i>
+ <span class="icon is-small">
+ <i class="fa fa-envelope"></i>
+ </span>
</div>
<div class="control">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
Modular
</a>
- <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
- Variables
- </a>
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
Responsiveness
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
Functions
</a>
+ <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
+ Variables
+ </a>
+ <a class="nav-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
+ Mixins
+ </a>
</div>
</div>
</nav>
--- /dev/null
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: mixins
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Mixins</h1>
+ <h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
+
+ <hr>
+
+<table class="table is-bordered">
+<tr>
+ <td><code>=arrow($color)</code></td>
+ <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+</tr>
+<tr>
+ <td><code>=block</code></td>
+ <td>Defines a margin-bottom of 1.5rem, expect when the element is the last child. Used for almost all block elements.</td>
+</tr>
+<tr>
+ <td><code>=clearfix</code></td>
+ <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+</tr>
+<tr>
+ <td><code>=center($size)</code></td>
+ <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+</tr>
+<tr>
+ <td><code>=delete</code></td>
+ <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+</tr>
+<tr>
+ <td><code>=fa($size, $dimensions)</code></td>
+ <td>Sets the style of a Font Awesome icon container.</td>
+</tr>
+<tr>
+ <td><code>=hamburger($dimensions)</code></td>
+ <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+</tr>
+<tr>
+ <td><code>=loader</code></td>
+ <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+</tr>
+<tr>
+ <td><code>=overflow-touch</code></td>
+ <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+</tr>
+<tr>
+ <td><code>=overlay($offset: 0)</code></td>
+ <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+</tr>
+<tr>
+ <td><code>=placeholder</code></td>
+ <td>Sets the styles of an input placeholder.</td>
+</tr>
+<tr>
+ <td><code>=unselectable</code></td>
+ <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+</tr>
+</table>
+
+ <div class="content">
+ <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+ </div>
+ </div>
+</section>
</h2>
<pre id="npm"><code>npm install bulma</code></pre>
<div id="ghbtns" class="block">
- <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
+ <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
</div>
{% include carbon.html %}
&:#{$placeholder}-placeholder
@content
-=replace($background, $width, $height)
- background-color: $background
- background-position: center center
- background-repeat: no-repeat
- background-size: $width $height
- display: block
- height: $height
- outline: none
- overflow: hidden
- text-indent: -290486px
- width: $width
-
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
projects / thirdparty / bulma.git / commitdiff
