library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Explain mixins

Browse Source
This commit is contained in:
Jeremy Thomas 2017-01-04 14:30:52 +01:00
parent e66684c514
commit aaaa9d7902
8 changed files with 92 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/footer.html
View File

@ -14,7 +14,9 @@
<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">

9
docs/_includes/subnav-overview.html
View File

@ -10,15 +10,18 @@
<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>

1
docs/_layouts/default.html
View File

@ -3,5 +3,6 @@
{% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{{ content }}
{% include footer.html %}
</body>
</html>

5
docs/bulma-docs.sass
View File

@ -187,10 +187,15 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
animation-delay: 1.2s
#npm
align-items: center
animation: fadeIn 500ms both
animation-delay: 1.4s
background: none
display: flex
justify-content: center
margin: -10px 0 20px
code
background: $background
border-radius: $radius
color: $primary
display: inline-block

5
docs/css/bulma-docs.css
View File

@ -6525,12 +6525,17 @@ svg {
}
#npm {
align-items: center;
animation: fadeIn 500ms both;
animation-delay: 1.4s;
background: none;
display: flex;
justify-content: center;
margin: -10px 0 20px;
}
#npm code {
background: whitesmoke;
border-radius: 3px;
color: #00d1b2;
display: inline-block;

71
docs/documentation/overview/mixins.html Normal file
View File

@ -0,0 +1,71 @@
---
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>

2
docs/index.html
View File

@ -24,7 +24,7 @@ route: index
</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 %}

12
sass/utilities/mixins.sass
View File

@ -163,18 +163,6 @@
&:#{$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