mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Merge branch 'master' into css-variables-with-fallback
This commit is contained in:
Jeremy Thomas
commit
09b68d9754
299
BACKERS.md
299
BACKERS.md
@ -19,49 +19,6 @@
|
|||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Roman Chvanikoff</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Garry Newman</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/garrynewman" target="_blank" rel="nofollow">
|
|
||||||
@garrynewman
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Bjørn Nese</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Adrian Ocneanu</td>
|
<td>Adrian Ocneanu</td>
|
||||||
|
|
||||||
@ -84,12 +41,12 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Aaron</td>
|
<td>Garry Newman</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
<a href="https://twitter.com/aequasi" target="_blank" rel="nofollow">
|
<a href="https://twitter.com/garrynewman" target="_blank" rel="nofollow">
|
||||||
@aequasi
|
@garrynewman
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
@ -101,50 +58,10 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>wingerdkm1</td>
|
|
||||||
<td colspan="2"><a href="https://github.com/wingerdkm1" target="_blank" rel="nofollow">GitHub</a></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h2 class="title is-5">
|
|
||||||
Documentation sponsors ($500+)
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<table class="table is-bordered">
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Twitter</th>
|
|
||||||
<th>Website</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Tipe</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/tipeio" target="_blank" rel="nofollow">
|
|
||||||
@tipeio
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2 class="title is-5">
|
<h2 class="title is-5">
|
||||||
Homepage sponsors ($100+)
|
Homepage sponsors ($100+)
|
||||||
@ -163,20 +80,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Yiannakis Ttafounas</td>
|
<td>Robert Bolder</td>
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Tooltwist</td>
|
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
@ -202,7 +106,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Robert Bolder</td>
|
<td>Adela Belin</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
@ -210,23 +114,6 @@
|
|||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Phil Alves</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/philalves01" target="_blank" rel="nofollow">
|
|
||||||
@philalves01
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
@ -245,7 +132,33 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>DontPayFull</td>
|
<td>Fintan Costello</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>MonoVM </td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Raj.bet</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
@ -259,8 +172,14 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>patrick136</td>
|
<td>brabusdot</td>
|
||||||
<td colspan="2"><a href="https://github.com/patrick136" target="_blank" rel="nofollow">GitHub</a></td>
|
<td colspan="2"><a href="https://github.com/brabusdot" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Pillarwm</td>
|
||||||
|
<td colspan="2"><a href="https://github.com/Pillarwm" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
@ -270,6 +189,12 @@
|
|||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>patrick136</td>
|
||||||
|
<td colspan="2"><a href="https://github.com/patrick136" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
@ -290,31 +215,10 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Tyler Weeres</td>
|
<td>Jordan Nemrow</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
<a href="https://twitter.com/tweeres04" target="_blank" rel="nofollow">
|
|
||||||
@tweeres04
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Takayuki Yamaguchi</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/takyam" target="_blank" rel="nofollow">
|
|
||||||
@takyam
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
@ -332,49 +236,6 @@
|
|||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Maurice Perry</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Leo Zeba</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/leozeba" target="_blank" rel="nofollow">
|
|
||||||
@leozeba
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Jordan Nemrow</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
@ -393,24 +254,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Florian Breisch</td>
|
<td>Al Romano</td>
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/FlorianBreisch" target="_blank" rel="nofollow">
|
|
||||||
@FlorianBreisch
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>dvkt</td>
|
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
@ -423,7 +267,20 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Dodzidenu Dzakuma</td>
|
<td>xvxx</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Maurice Perry</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
@ -437,8 +294,32 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Gomah</td>
|
<td>mieko</td>
|
||||||
<td colspan="2"><a href="https://github.com/Gomah" target="_blank" rel="nofollow">GitHub</a></td>
|
<td colspan="2"><a href="https://github.com/mieko" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>mmmonica50</td>
|
||||||
|
<td colspan="2"><a href="https://github.com/mmmonica50" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>nafSadh</td>
|
||||||
|
<td colspan="2"><a href="https://github.com/nafSadh" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>linkdd</td>
|
||||||
|
<td colspan="2"><a href="https://github.com/linkdd" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>seansan</td>
|
||||||
|
<td colspan="2"><a href="https://github.com/seansan" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
@ -449,8 +330,8 @@
|
|||||||
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>kuwaitbinary</td>
|
<td>Gomah</td>
|
||||||
<td colspan="2"><a href="https://github.com/kuwaitbinary" target="_blank" rel="nofollow">GitHub</a></td>
|
<td colspan="2"><a href="https://github.com/Gomah" target="_blank" rel="nofollow">GitHub</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
36
CHANGELOG.md
36
CHANGELOG.md
@ -1,5 +1,41 @@
|
|||||||
# Bulma Changelog
|
# Bulma Changelog
|
||||||
|
|
||||||
|
## 0.9.2
|
||||||
|
|
||||||
|
### New features
|
||||||
|
|
||||||
|
* Fix #1583 New `is-ghost` button that behaves / looks like a regular link
|
||||||
|
|
||||||
|
### Bug fixes
|
||||||
|
|
||||||
|
* #3005 Fix `column` offsets in RTL
|
||||||
|
* Fix #3145 Dropdown content is bounded by a parent card
|
||||||
|
* Fix #3089 Sub columns of a variable columns have weird gap
|
||||||
|
* Fix #2937 Add `width: unset` for narrow columns
|
||||||
|
|
||||||
|
### Improvements
|
||||||
|
|
||||||
|
* Fix #3012 Add `$media-*` variables, set to `!default`
|
||||||
|
|
||||||
|
## 0.9.1
|
||||||
|
|
||||||
|
### New features
|
||||||
|
|
||||||
|
* #3047 Flexbox helpers
|
||||||
|
* #3085 Add `is-clickable` helper
|
||||||
|
* #3086 Allow each component to have its own colors and default to global ones
|
||||||
|
* New variables `$navbar-colors`, `$button-colors`, `$notification-colors`, `$progress-colors`, `$table-colors`, `$tag-colors`, `$file-colors`, `$textarea-colors`, `$select-colors`, `$form-colors`, `$label-colors` and `$hero-colors`
|
||||||
|
|
||||||
|
### Improvements
|
||||||
|
|
||||||
|
* #2630 Fixes #2598 -> Add `$card-radius` variable
|
||||||
|
* Add `$card-overflow` variable
|
||||||
|
* #2540 Fixes #2539 -> Fix indeterminate progress styling in IE11
|
||||||
|
* #3057 Make the default text color of `$code` listings more accessible
|
||||||
|
* #3088 Adds not allowed cursor to missing inputs
|
||||||
|
* #3101 Add `$modal-breakpoint` variable for modal breakpoint
|
||||||
|
* #3107 Add `optgroup` to `generic.sass`
|
||||||
|
|
||||||
## 0.9.0
|
## 0.9.0
|
||||||
|
|
||||||
### Deprecation warning
|
### Deprecation warning
|
||||||
|
|||||||
@ -40,7 +40,7 @@ bower install bulma
|
|||||||
After installation, you can import the CSS file into your project using this snippet:
|
After installation, you can import the CSS file into your project using this snippet:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
import 'bulma/css/bulma.css'
|
@import 'bulma/css/bulma.css'
|
||||||
```
|
```
|
||||||
|
|
||||||
### CDN
|
### CDN
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "bulma",
|
"name": "bulma",
|
||||||
"version": "0.9.0",
|
"version": "0.9.1",
|
||||||
"homepage": "https://bulma.io",
|
"homepage": "https://bulma.io",
|
||||||
"authors": ["jgthms <bbxdesign@gmail.com>"],
|
"authors": ["jgthms <bbxdesign@gmail.com>"],
|
||||||
"description": "Modern CSS framework based on Flexbox",
|
"description": "Modern CSS framework based on Flexbox",
|
||||||
|
|||||||
2
bulma.sass
vendored
2
bulma.sass
vendored
@ -1,5 +1,5 @@
|
|||||||
@charset "utf-8"
|
@charset "utf-8"
|
||||||
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
|
/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
|
||||||
@import "sass/utilities/_all"
|
@import "sass/utilities/_all"
|
||||||
@import "sass/base/_all"
|
@import "sass/base/_all"
|
||||||
@import "sass/elements/_all"
|
@import "sass/elements/_all"
|
||||||
|
|||||||
11624
css/bulma-rtl.css
Normal file
11624
css/bulma-rtl.css
Normal file
File diff suppressed because it is too large
Load Diff
1
css/bulma-rtl.css.map
Normal file
1
css/bulma-rtl.css.map
Normal file
File diff suppressed because one or more lines are too long
1
css/bulma-rtl.min.css
vendored
Normal file
1
css/bulma-rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,112 +1,85 @@
|
|||||||
{
|
{
|
||||||
"10": [
|
"10": [
|
||||||
{
|
|
||||||
"name": "Arturas",
|
|
||||||
"twitter": "",
|
|
||||||
"start_timestamp": null,
|
|
||||||
"website_url": "https://paraphrasetools.com/",
|
|
||||||
"website_name": "Paraphrase tools"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "William Hoggarth",
|
|
||||||
"twitter": "",
|
|
||||||
"start_timestamp": null
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "Maurice Perry",
|
"name": "Maurice Perry",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1575826633076
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Dodzidenu Dzakuma",
|
|
||||||
"twitter": "",
|
|
||||||
"start_timestamp": null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "xvxx",
|
"name": "xvxx",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1572311879973
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Florian Breisch",
|
"name": "Al Romano",
|
||||||
"twitter": "FlorianBreisch",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1551649687685
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Jason Seminara",
|
"name": "Jason Seminara",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1532955289949
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Stuart Stanfield",
|
"name": "Stuart Stanfield",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1527579663355
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Takayuki Yamaguchi",
|
|
||||||
"twitter": "takyam",
|
|
||||||
"start_timestamp": null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Jordan Nemrow",
|
"name": "Jordan Nemrow",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1510767260223
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"30": [
|
"30": [
|
||||||
{
|
{
|
||||||
"name": "Garry Newman",
|
"name": "Garry Newman",
|
||||||
"twitter": "garrynewman",
|
"twitter": "garrynewman",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1511186868165
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Adrian Ocneanu",
|
"name": "Adrian Ocneanu",
|
||||||
"twitter": "aocneanu",
|
"twitter": "aocneanu",
|
||||||
"start_timestamp": null,
|
"start_timestamp": 1510731567799,
|
||||||
"website_url": "https://www.earthlink.ro/",
|
"website_url": "https://www.earthlink.ro/",
|
||||||
"website_name": "Earthlink"
|
"website_name": "Earthlink"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"100": [
|
"100": [
|
||||||
{
|
{
|
||||||
"name": "Sanyo Digital",
|
"name": "Raj.bet",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1598967631148
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Iaroslav Baklan",
|
|
||||||
"twitter": "",
|
|
||||||
"start_timestamp": null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "MonoVM ",
|
"name": "MonoVM ",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1588271410706
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Fintan Costello",
|
"name": "Fintan Costello",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1584546730317
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Yiannakis Ttafounas",
|
"name": "Iaroslav Baklan",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1571294038349
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Adela Belin",
|
||||||
|
"twitter": "",
|
||||||
|
"start_timestamp": 1564993835335
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Sparheld International GmbH",
|
"name": "Sparheld International GmbH",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1563870141112
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Robert Bolder",
|
"name": "Robert Bolder",
|
||||||
"twitter": "",
|
"twitter": "",
|
||||||
"start_timestamp": null
|
"start_timestamp": 1546593784071
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "DontPayFull ",
|
|
||||||
"twitter": "",
|
|
||||||
"start_timestamp": null
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"300": [],
|
"300": [],
|
||||||
|
|||||||
@ -1,33 +1,41 @@
|
|||||||
{
|
{
|
||||||
"1": [
|
"1": [
|
||||||
"bastien09",
|
|
||||||
"bekwam",
|
|
||||||
"cosgrove39264",
|
|
||||||
"D3Portillo",
|
|
||||||
"fabiofdsantos",
|
|
||||||
"Heartz66",
|
|
||||||
"KirillOsenkov",
|
|
||||||
"neetso",
|
|
||||||
"RDIL",
|
|
||||||
"rewtraw",
|
|
||||||
"romainnorberg",
|
|
||||||
"scott-joe",
|
"scott-joe",
|
||||||
|
"KirillOsenkov",
|
||||||
|
"romainnorberg",
|
||||||
|
"rewtraw",
|
||||||
|
"bastien09",
|
||||||
|
"neetso",
|
||||||
|
"cosgrove39264",
|
||||||
|
"bekwam",
|
||||||
"smjnab",
|
"smjnab",
|
||||||
"timothymiko"
|
"timothymiko",
|
||||||
|
"mattsly",
|
||||||
|
"fabiofdsantos",
|
||||||
|
"marcop135",
|
||||||
|
"aminah-io",
|
||||||
|
"Carpenter0100",
|
||||||
|
"dangowans",
|
||||||
|
"eddielement"
|
||||||
],
|
],
|
||||||
"10": [
|
"10": [
|
||||||
"Gomah",
|
"Gomah",
|
||||||
"sasmithjr",
|
"sasmithjr",
|
||||||
"kuwaitbinary",
|
|
||||||
"seansan",
|
"seansan",
|
||||||
"dmjio",
|
|
||||||
"yusuf-github",
|
|
||||||
"linkdd",
|
"linkdd",
|
||||||
"nafSadh"
|
"nafSadh",
|
||||||
|
"mmmonica50",
|
||||||
|
"mieko"
|
||||||
],
|
],
|
||||||
"100": [
|
"100": [
|
||||||
"patrick136",
|
"patrick136",
|
||||||
"airtract",
|
"airtract",
|
||||||
"wingerdkm1"
|
"Pillarwm",
|
||||||
|
"brabusdot"
|
||||||
|
],
|
||||||
|
"300": [
|
||||||
|
"wingerdkm1",
|
||||||
|
"stacho",
|
||||||
|
"kevivmatrix"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
|
"fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
|
||||||
"fontawesome5": "https://use.fontawesome.com/releases/v5.3.1/js/all.js",
|
"fontawesome5": "https://use.fontawesome.com/releases/v5.14.0/js/all.js",
|
||||||
"ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
|
"ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
|
||||||
"mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
|
"mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -190,6 +190,7 @@
|
|||||||
},
|
},
|
||||||
"helpers-spacing": {
|
"helpers-spacing": {
|
||||||
"name": "Spacing",
|
"name": "Spacing",
|
||||||
|
"new": true,
|
||||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||||
"color": "grey-dark",
|
"color": "grey-dark",
|
||||||
"icon": "arrows-alt-h",
|
"icon": "arrows-alt-h",
|
||||||
@ -202,6 +203,14 @@
|
|||||||
"icon": "eye",
|
"icon": "eye",
|
||||||
"path": "/documentation/helpers/visibility-helpers"
|
"path": "/documentation/helpers/visibility-helpers"
|
||||||
},
|
},
|
||||||
|
"helpers-flexbox": {
|
||||||
|
"name": "Flexbox",
|
||||||
|
"new": true,
|
||||||
|
"subtitle": "Helpers for all <strong>Flexbox</strong> properties",
|
||||||
|
"color": "primary",
|
||||||
|
"icon": "ellipsis-h",
|
||||||
|
"path": "/documentation/helpers/flexbox-helpers"
|
||||||
|
},
|
||||||
"helpers-other": {
|
"helpers-other": {
|
||||||
"name": "Other",
|
"name": "Other",
|
||||||
"subtitle": "Other useful Bulma helpers",
|
"subtitle": "Other useful Bulma helpers",
|
||||||
@ -372,6 +381,13 @@
|
|||||||
"icon": "cube",
|
"icon": "cube",
|
||||||
"path": "/documentation/elements"
|
"path": "/documentation/elements"
|
||||||
},
|
},
|
||||||
|
"elements-block": {
|
||||||
|
"name": "Block",
|
||||||
|
"subtitle": "Bulma's most basic spacer <strong>block</strong>",
|
||||||
|
"color": "grey",
|
||||||
|
"icon": "arrows-alt-v",
|
||||||
|
"path": "/documentation/elements/block"
|
||||||
|
},
|
||||||
"elements-box": {
|
"elements-box": {
|
||||||
"name": "Box",
|
"name": "Box",
|
||||||
"subtitle": "A white <strong>box</strong> to contain other elements",
|
"subtitle": "A white <strong>box</strong> to contain other elements",
|
||||||
@ -629,11 +645,11 @@
|
|||||||
"categories": {
|
"categories": {
|
||||||
"overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
"overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
||||||
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
|
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
|
||||||
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
|
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-flexbox", "helpers-other"],
|
||||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||||
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
||||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||||
"elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
|
"elements": ["elements-block", "elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
|
||||||
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
|
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -2,11 +2,11 @@
|
|||||||
"title": "Bulma: Free, open source, and modern CSS framework based on Flexbox",
|
"title": "Bulma: Free, open source, and modern CSS framework based on Flexbox",
|
||||||
"description": "Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
|
"description": "Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
|
||||||
"documentation": "/documentation",
|
"documentation": "/documentation",
|
||||||
"download": "https://github.com/jgthms/bulma/releases/download/0.9.0/bulma-0.9.0.zip",
|
"download": "https://github.com/jgthms/bulma/releases/download/0.9.1/bulma-0.9.1.zip",
|
||||||
"release_notes": "https://github.com/jgthms/bulma/releases/tag/0.9.0",
|
"release_notes": "https://github.com/jgthms/bulma/releases/tag/0.9.1",
|
||||||
"github": "https://github.com/jgthms/bulma",
|
"github": "https://github.com/jgthms/bulma",
|
||||||
"twitter": "https://twitter.com/jgthms",
|
"twitter": "https://twitter.com/jgthms",
|
||||||
"version": "0.9.0",
|
"version": "0.9.1",
|
||||||
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
|
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
|
||||||
"book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
|
"book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
|
||||||
"book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
|
"book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
|
||||||
|
|||||||
@ -11,7 +11,8 @@
|
|||||||
"name": "tutlance",
|
"name": "tutlance",
|
||||||
"url": "https://tutlance.com/",
|
"url": "https://tutlance.com/",
|
||||||
"width":"135",
|
"width":"135",
|
||||||
"height":"42"
|
"height":"42",
|
||||||
|
"follow": true
|
||||||
},
|
},
|
||||||
"themeisle": {
|
"themeisle": {
|
||||||
"name": "themeisle",
|
"name": "themeisle",
|
||||||
@ -191,7 +192,8 @@
|
|||||||
"url": "https://www.realtimecommunicationsworld.com/",
|
"url": "https://www.realtimecommunicationsworld.com/",
|
||||||
"title": "Real Time Communications World",
|
"title": "Real Time Communications World",
|
||||||
"width":"120",
|
"width":"120",
|
||||||
"height":"57"
|
"height":"57",
|
||||||
|
"follow": true
|
||||||
},
|
},
|
||||||
"polygon": {
|
"polygon": {
|
||||||
"name": "Polygon.io",
|
"name": "Polygon.io",
|
||||||
@ -234,19 +236,42 @@
|
|||||||
"url": "https://www.coupons4printing.com/",
|
"url": "https://www.coupons4printing.com/",
|
||||||
"title": "Coupons For Printing",
|
"title": "Coupons For Printing",
|
||||||
"width":"60",
|
"width":"60",
|
||||||
"height":"60"
|
"height":"60",
|
||||||
|
"follow": true
|
||||||
},
|
},
|
||||||
"inkoop": {
|
"inkoop": {
|
||||||
"name": "inkoop",
|
"name": "inkoop",
|
||||||
"url": "https://www.inkoop.io/",
|
"url": "https://www.inkoop.io/",
|
||||||
"title": "Inkoop - Website/App development company",
|
"title": "Inkoop - Website/App development company",
|
||||||
"width":"150",
|
"width":"150",
|
||||||
"height":"43"
|
"height":"43",
|
||||||
|
"noopener": true
|
||||||
|
},
|
||||||
|
"vpnreview": {
|
||||||
|
"name": "vpnreview",
|
||||||
|
"url": "https://vpn-review.com/netflix-vpn",
|
||||||
|
"title": "vpn for netflix",
|
||||||
|
"width":"137",
|
||||||
|
"height":"85"
|
||||||
|
},
|
||||||
|
"dfds": {
|
||||||
|
"name": "dfds",
|
||||||
|
"url": "https://www.dietfooddeliveryservice.com/",
|
||||||
|
"title": "Diet Food Delivery Service",
|
||||||
|
"width":"60",
|
||||||
|
"height":"60",
|
||||||
|
"follow": true
|
||||||
|
},
|
||||||
|
"rajbet": {
|
||||||
|
"name": "rajbet",
|
||||||
|
"url": "https://raj.bet/",
|
||||||
|
"title": "Online Casino",
|
||||||
|
"width":"128",
|
||||||
|
"height":"50"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"home": [
|
"home": [
|
||||||
"themeisle"
|
"themeisle"
|
||||||
,"dontpayfull"
|
|
||||||
,"vpsserver"
|
,"vpsserver"
|
||||||
,"sparheld"
|
,"sparheld"
|
||||||
,"bid4papers"
|
,"bid4papers"
|
||||||
@ -263,11 +288,13 @@
|
|||||||
,"monovm"
|
,"monovm"
|
||||||
,"tutlance"
|
,"tutlance"
|
||||||
,"pillarwm"
|
,"pillarwm"
|
||||||
,"sanyodigital"
|
|
||||||
,"coupons4printing"
|
,"coupons4printing"
|
||||||
,"papersowl"
|
,"papersowl"
|
||||||
,"edusson"
|
,"edusson"
|
||||||
,"inkoop"
|
,"inkoop"
|
||||||
|
,"vpnreview"
|
||||||
|
,"dfds"
|
||||||
|
,"rajbet"
|
||||||
],
|
],
|
||||||
"footer": [
|
"footer": [
|
||||||
"polygon"
|
"polygon"
|
||||||
|
|||||||
@ -21,9 +21,14 @@
|
|||||||
},
|
},
|
||||||
"$card-radius": {
|
"$card-radius": {
|
||||||
"name": "$card-radius",
|
"name": "$card-radius",
|
||||||
"value": "0",
|
"value": "0.25rem",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
},
|
},
|
||||||
|
"$card-overflow": {
|
||||||
|
"name": "$card-overflow",
|
||||||
|
"value": "hidden",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
"$card-header-background-color": {
|
"$card-header-background-color": {
|
||||||
"name": "$card-header-background-color",
|
"name": "$card-header-background-color",
|
||||||
"value": "transparent",
|
"value": "transparent",
|
||||||
@ -90,6 +95,8 @@
|
|||||||
"$card-color",
|
"$card-color",
|
||||||
"$card-background-color",
|
"$card-background-color",
|
||||||
"$card-shadow",
|
"$card-shadow",
|
||||||
|
"$card-radius",
|
||||||
|
"$card-overflow",
|
||||||
"$card-header-background-color",
|
"$card-header-background-color",
|
||||||
"$card-header-color",
|
"$card-header-color",
|
||||||
"$card-header-padding",
|
"$card-header-padding",
|
||||||
|
|||||||
@ -116,6 +116,13 @@
|
|||||||
"name": "$modal-card-body-padding",
|
"name": "$modal-card-body-padding",
|
||||||
"value": "20px",
|
"value": "20px",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$modal-breakpoint": {
|
||||||
|
"name": "$modal-breakpoint",
|
||||||
|
"value": "$tablet",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "size",
|
||||||
|
"computed_value": "769px"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
@ -139,7 +146,8 @@
|
|||||||
"$modal-card-foot-radius",
|
"$modal-card-foot-radius",
|
||||||
"$modal-card-foot-border-top",
|
"$modal-card-foot-border-top",
|
||||||
"$modal-card-body-background-color",
|
"$modal-card-body-background-color",
|
||||||
"$modal-card-body-padding"
|
"$modal-card-body-padding",
|
||||||
|
"$modal-breakpoint"
|
||||||
],
|
],
|
||||||
"file_path": "components/modal.sass"
|
"file_path": "components/modal.sass"
|
||||||
}
|
}
|
||||||
@ -227,6 +227,13 @@
|
|||||||
"type": "variable",
|
"type": "variable",
|
||||||
"computed_type": "computed",
|
"computed_type": "computed",
|
||||||
"computed_value": "960px + (2 * $gap)"
|
"computed_value": "960px + (2 * $gap)"
|
||||||
|
},
|
||||||
|
"$navbar-colors": {
|
||||||
|
"name": "$navbar-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
@ -267,7 +274,8 @@
|
|||||||
"$navbar-divider-background-color",
|
"$navbar-divider-background-color",
|
||||||
"$navbar-divider-height",
|
"$navbar-divider-height",
|
||||||
"$navbar-bottom-box-shadow-size",
|
"$navbar-bottom-box-shadow-size",
|
||||||
"$navbar-breakpoint"
|
"$navbar-breakpoint",
|
||||||
|
"$navbar-colors"
|
||||||
],
|
],
|
||||||
"file_path": "components/navbar.sass"
|
"file_path": "components/navbar.sass"
|
||||||
}
|
}
|
||||||
@ -163,6 +163,13 @@
|
|||||||
"type": "variable",
|
"type": "variable",
|
||||||
"computed_type": "color",
|
"computed_type": "color",
|
||||||
"computed_value": "hsl(0, 0%, 86%)"
|
"computed_value": "hsl(0, 0%, 86%)"
|
||||||
|
},
|
||||||
|
"$button-colors": {
|
||||||
|
"name": "$button-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
@ -191,7 +198,8 @@
|
|||||||
"$button-disabled-opacity",
|
"$button-disabled-opacity",
|
||||||
"$button-static-color",
|
"$button-static-color",
|
||||||
"$button-static-background-color",
|
"$button-static-background-color",
|
||||||
"$button-static-border-color"
|
"$button-static-border-color",
|
||||||
|
"$button-colors"
|
||||||
],
|
],
|
||||||
"file_path": "elements/button.sass"
|
"file_path": "elements/button.sass"
|
||||||
}
|
}
|
||||||
@ -4,10 +4,18 @@
|
|||||||
"name": "$container-offset",
|
"name": "$container-offset",
|
||||||
"value": "(2 * $gap)",
|
"value": "(2 * $gap)",
|
||||||
"type": "compound"
|
"type": "compound"
|
||||||
|
},
|
||||||
|
"$container-max-width": {
|
||||||
|
"name": "$container-max-width",
|
||||||
|
"value": "$fullhd",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "computed",
|
||||||
|
"computed_value": "1344px + (2 * $gap)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$container-offset"
|
"$container-offset",
|
||||||
|
"$container-max-width"
|
||||||
],
|
],
|
||||||
"file_path": "elements/container.sass"
|
"file_path": "elements/container.sass"
|
||||||
}
|
}
|
||||||
@ -25,13 +25,33 @@
|
|||||||
"name": "$notification-padding",
|
"name": "$notification-padding",
|
||||||
"value": "1.25rem 2.5rem 1.25rem 1.5rem",
|
"value": "1.25rem 2.5rem 1.25rem 1.5rem",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$notification-padding-ltr": {
|
||||||
|
"name": "$notification-padding-ltr",
|
||||||
|
"value": "1.25rem 2.5rem 1.25rem 1.5rem",
|
||||||
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$notification-padding-rtl": {
|
||||||
|
"name": "$notification-padding-rtl",
|
||||||
|
"value": "1.25rem 1.5rem 1.25rem 2.5rem",
|
||||||
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$notification-colors": {
|
||||||
|
"name": "$notification-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$notification-background-color",
|
"$notification-background-color",
|
||||||
"$notification-code-background-color",
|
"$notification-code-background-color",
|
||||||
"$notification-radius",
|
"$notification-radius",
|
||||||
"$notification-padding"
|
"$notification-padding",
|
||||||
|
"$notification-padding-ltr",
|
||||||
|
"$notification-padding-rtl",
|
||||||
|
"$notification-colors"
|
||||||
],
|
],
|
||||||
"file_path": "elements/notification.sass"
|
"file_path": "elements/notification.sass"
|
||||||
}
|
}
|
||||||
@ -25,13 +25,21 @@
|
|||||||
"name": "$progress-indeterminate-duration",
|
"name": "$progress-indeterminate-duration",
|
||||||
"value": "1.5s",
|
"value": "1.5s",
|
||||||
"type": "string"
|
"type": "string"
|
||||||
|
},
|
||||||
|
"$progress-colors": {
|
||||||
|
"name": "$progress-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$progress-bar-background-color",
|
"$progress-bar-background-color",
|
||||||
"$progress-value-background-color",
|
"$progress-value-background-color",
|
||||||
"$progress-border-radius",
|
"$progress-border-radius",
|
||||||
"$progress-indeterminate-duration"
|
"$progress-indeterminate-duration",
|
||||||
|
"$progress-colors"
|
||||||
],
|
],
|
||||||
"file_path": "elements/progress.sass"
|
"file_path": "elements/progress.sass"
|
||||||
}
|
}
|
||||||
@ -109,6 +109,13 @@
|
|||||||
"type": "variable",
|
"type": "variable",
|
||||||
"computed_type": "color",
|
"computed_type": "color",
|
||||||
"computed_value": "hsl(0, 0%, 96%)"
|
"computed_value": "hsl(0, 0%, 96%)"
|
||||||
|
},
|
||||||
|
"$table-colors": {
|
||||||
|
"name": "$table-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
@ -129,7 +136,8 @@
|
|||||||
"$table-row-active-background-color",
|
"$table-row-active-background-color",
|
||||||
"$table-row-active-color",
|
"$table-row-active-color",
|
||||||
"$table-striped-row-even-background-color",
|
"$table-striped-row-even-background-color",
|
||||||
"$table-striped-row-even-hover-background-color"
|
"$table-striped-row-even-hover-background-color",
|
||||||
|
"$table-colors"
|
||||||
],
|
],
|
||||||
"file_path": "elements/table.sass"
|
"file_path": "elements/table.sass"
|
||||||
}
|
}
|
||||||
@ -25,13 +25,21 @@
|
|||||||
"name": "$tag-delete-margin",
|
"name": "$tag-delete-margin",
|
||||||
"value": "1px",
|
"value": "1px",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$tag-colors": {
|
||||||
|
"name": "$tag-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$tag-background-color",
|
"$tag-background-color",
|
||||||
"$tag-color",
|
"$tag-color",
|
||||||
"$tag-radius",
|
"$tag-radius",
|
||||||
"$tag-delete-margin"
|
"$tag-delete-margin",
|
||||||
|
"$tag-colors"
|
||||||
],
|
],
|
||||||
"file_path": "elements/tag.sass"
|
"file_path": "elements/tag.sass"
|
||||||
}
|
}
|
||||||
@ -63,6 +63,11 @@
|
|||||||
"name": "$file-name-max-width",
|
"name": "$file-name-max-width",
|
||||||
"value": "16em",
|
"value": "16em",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$file-colors": {
|
||||||
|
"name": "$file-colors",
|
||||||
|
"value": "$form-colors",
|
||||||
|
"type": "variable"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
@ -75,7 +80,8 @@
|
|||||||
"$file-name-border-color",
|
"$file-name-border-color",
|
||||||
"$file-name-border-style",
|
"$file-name-border-style",
|
||||||
"$file-name-border-width",
|
"$file-name-border-width",
|
||||||
"$file-name-max-width"
|
"$file-name-max-width",
|
||||||
|
"$file-colors"
|
||||||
],
|
],
|
||||||
"file_path": "form/file.sass"
|
"file_path": "form/file.sass"
|
||||||
}
|
}
|
||||||
@ -14,12 +14,18 @@
|
|||||||
"name": "$textarea-min-height",
|
"name": "$textarea-min-height",
|
||||||
"value": "8em",
|
"value": "8em",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$textarea-colors": {
|
||||||
|
"name": "$textarea-colors",
|
||||||
|
"value": "$form-colors",
|
||||||
|
"type": "variable"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$textarea-padding",
|
"$textarea-padding",
|
||||||
"$textarea-max-height",
|
"$textarea-max-height",
|
||||||
"$textarea-min-height"
|
"$textarea-min-height",
|
||||||
|
"$textarea-colors"
|
||||||
],
|
],
|
||||||
"file_path": "form/input-textarea.sass"
|
"file_path": "form/input-textarea.sass"
|
||||||
}
|
}
|
||||||
13
docs/_data/variables/form/select.json
Normal file
13
docs/_data/variables/form/select.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"by_name": {
|
||||||
|
"$select-colors": {
|
||||||
|
"name": "$select-colors",
|
||||||
|
"value": "$form-colors",
|
||||||
|
"type": "variable"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"list": [
|
||||||
|
"$select-colors"
|
||||||
|
],
|
||||||
|
"file_path": "form/select.sass"
|
||||||
|
}
|
||||||
@ -1,5 +1,12 @@
|
|||||||
{
|
{
|
||||||
"by_name": {
|
"by_name": {
|
||||||
|
"$form-colors": {
|
||||||
|
"name": "$form-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
|
},
|
||||||
"$input-color": {
|
"$input-color": {
|
||||||
"name": "$input-color",
|
"name": "$input-color",
|
||||||
"value": "$text-strong",
|
"value": "$text-strong",
|
||||||
@ -130,6 +137,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
|
"$form-colors",
|
||||||
"$input-color",
|
"$input-color",
|
||||||
"$input-background-color",
|
"$input-background-color",
|
||||||
"$input-border-color",
|
"$input-border-color",
|
||||||
|
|||||||
@ -20,12 +20,18 @@
|
|||||||
"type": "variable",
|
"type": "variable",
|
||||||
"computed_type": "size",
|
"computed_type": "size",
|
||||||
"computed_value": "0.75rem"
|
"computed_value": "0.75rem"
|
||||||
|
},
|
||||||
|
"$label-colors": {
|
||||||
|
"name": "$label-colors",
|
||||||
|
"value": "$form-colors",
|
||||||
|
"type": "variable"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$label-color",
|
"$label-color",
|
||||||
"$label-weight",
|
"$label-weight",
|
||||||
"$help-size"
|
"$help-size",
|
||||||
|
"$label-colors"
|
||||||
],
|
],
|
||||||
"file_path": "form/tools.sass"
|
"file_path": "form/tools.sass"
|
||||||
}
|
}
|
||||||
37
docs/_data/variables/helpers/spacing.json
Normal file
37
docs/_data/variables/helpers/spacing.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"by_name": {
|
||||||
|
"$spacing-shortcuts": {
|
||||||
|
"name": "$spacing-shortcuts",
|
||||||
|
"value": "(\"margin\": \"m\", \"padding\": \"p\")",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"$spacing-directions": {
|
||||||
|
"name": "$spacing-directions",
|
||||||
|
"value": "(\"top\": \"t\", \"right\": \"r\", \"bottom\": \"b\", \"left\": \"l\")",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"$spacing-horizontal": {
|
||||||
|
"name": "$spacing-horizontal",
|
||||||
|
"value": "\"x\"",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"$spacing-vertical": {
|
||||||
|
"name": "$spacing-vertical",
|
||||||
|
"value": "\"y\"",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"$spacing-values": {
|
||||||
|
"name": "$spacing-values",
|
||||||
|
"value": "(\"0\": 0, \"1\": 0.25rem, \"2\": 0.5rem, \"3\": 0.75rem, \"4\": 1rem, \"5\": 1.5rem, \"6\": 3rem)",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"list": [
|
||||||
|
"$spacing-shortcuts",
|
||||||
|
"$spacing-directions",
|
||||||
|
"$spacing-horizontal",
|
||||||
|
"$spacing-vertical",
|
||||||
|
"$spacing-values"
|
||||||
|
],
|
||||||
|
"file_path": "helpers/spacing.sass"
|
||||||
|
}
|
||||||
@ -19,13 +19,21 @@
|
|||||||
"name": "$hero-body-padding-large",
|
"name": "$hero-body-padding-large",
|
||||||
"value": "18rem 1.5rem",
|
"value": "18rem 1.5rem",
|
||||||
"type": "size"
|
"type": "size"
|
||||||
|
},
|
||||||
|
"$hero-colors": {
|
||||||
|
"name": "$hero-colors",
|
||||||
|
"value": "$colors",
|
||||||
|
"type": "variable",
|
||||||
|
"computed_type": "function",
|
||||||
|
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
"$hero-body-padding",
|
"$hero-body-padding",
|
||||||
"$hero-body-padding-small",
|
"$hero-body-padding-small",
|
||||||
"$hero-body-padding-medium",
|
"$hero-body-padding-medium",
|
||||||
"$hero-body-padding-large"
|
"$hero-body-padding-large",
|
||||||
|
"$hero-colors"
|
||||||
],
|
],
|
||||||
"file_path": "layout/hero.sass"
|
"file_path": "layout/hero.sass"
|
||||||
}
|
}
|
||||||
@ -311,10 +311,8 @@
|
|||||||
},
|
},
|
||||||
"$code": {
|
"$code": {
|
||||||
"name": "$code",
|
"name": "$code",
|
||||||
"value": "$red",
|
"value": "darken($red, 15%)",
|
||||||
"type": "variable",
|
"type": "compound"
|
||||||
"computed_type": "color",
|
|
||||||
"computed_value": "hsl(348, 86%, 61%)"
|
|
||||||
},
|
},
|
||||||
"$code-background": {
|
"$code-background": {
|
||||||
"name": "$code-background",
|
"name": "$code-background",
|
||||||
|
|||||||
@ -249,6 +249,11 @@
|
|||||||
"name": "$variable-columns",
|
"name": "$variable-columns",
|
||||||
"value": "true",
|
"value": "true",
|
||||||
"type": "boolean"
|
"type": "boolean"
|
||||||
|
},
|
||||||
|
"$rtl": {
|
||||||
|
"name": "$rtl",
|
||||||
|
"value": "false",
|
||||||
|
"type": "boolean"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"list": [
|
"list": [
|
||||||
@ -301,7 +306,8 @@
|
|||||||
"$radius-large",
|
"$radius-large",
|
||||||
"$radius-rounded",
|
"$radius-rounded",
|
||||||
"$speed",
|
"$speed",
|
||||||
"$variable-columns"
|
"$variable-columns",
|
||||||
|
"$rtl"
|
||||||
],
|
],
|
||||||
"file_path": "utilities/initial-variables.sass"
|
"file_path": "utilities/initial-variables.sass"
|
||||||
}
|
}
|
||||||
@ -13,11 +13,6 @@
|
|||||||
</a>
|
</a>
|
||||||
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
|
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
|
||||||
<strong>{{ category_link.name }}</strong>
|
<strong>{{ category_link.name }}</strong>
|
||||||
{% if category_link.name == 'Helpers' %}
|
|
||||||
<span class="tag bd-mini-tag is-primary">
|
|
||||||
New!
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -27,6 +22,11 @@
|
|||||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||||
<a href="{{ site.url }}{{ link.path }}">
|
<a href="{{ site.url }}{{ link.path }}">
|
||||||
{{ link.name }}
|
{{ link.name }}
|
||||||
|
{% if link.new %}
|
||||||
|
<span class="ml-1 tag bd-mini-tag is-primary">
|
||||||
|
New!
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@ -22,6 +22,7 @@
|
|||||||
icon=link.icon
|
icon=link.icon
|
||||||
name=link.name
|
name=link.name
|
||||||
subtitle=link.subtitle
|
subtitle=link.subtitle
|
||||||
|
new=link.new
|
||||||
%}
|
%}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
16
docs/_includes/elements/flexbox-helper-table.html
Normal file
16
docs/_includes/elements/flexbox-helper-table.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Class</th>
|
||||||
|
<th>Property: Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for value in include.values %}
|
||||||
|
<tr>
|
||||||
|
<td><code>is-{{ include.property }}-{{ value }}</code></td>
|
||||||
|
<td><code>{{ include.property }}: {{ value }}</code></td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
@ -14,6 +14,11 @@
|
|||||||
<span class="bd-link-counter"></span>
|
<span class="bd-link-counter"></span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</figure>
|
</figure>
|
||||||
|
{% if include.new %}
|
||||||
|
<span style="float: right;" class="ml-2 tag is-primary">
|
||||||
|
New!
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
{{ include.name }}
|
{{ include.name }}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="bd-link-subtitle">
|
<p class="bd-link-subtitle">
|
||||||
|
|||||||
@ -10,9 +10,12 @@
|
|||||||
class="bd-sponsor-item"
|
class="bd-sponsor-item"
|
||||||
href="{{ sponsor.url }}"
|
href="{{ sponsor.url }}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
{% unless sponsor.follow %}
|
{% unless sponsor.follow or sponsor.noopener %}
|
||||||
rel="nofollow"
|
rel="nofollow"
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
|
{% if sponsor.noopener %}
|
||||||
|
rel="noopener"
|
||||||
|
{% endif %}
|
||||||
title="{{ sponsor_alt }}"
|
title="{{ sponsor_alt }}"
|
||||||
>
|
>
|
||||||
{% if sponsor.textOnly %}
|
{% if sponsor.textOnly %}
|
||||||
|
|||||||
@ -72,6 +72,11 @@ route: documentation
|
|||||||
<li {% if link_id == current_link_id %}class="is-active"{% endif %}>
|
<li {% if link_id == current_link_id %}class="is-active"{% endif %}>
|
||||||
<a href="{{ site.url }}{{ link.path }}">
|
<a href="{{ site.url }}{{ link.path }}">
|
||||||
{{ link.name }}
|
{{ link.name }}
|
||||||
|
{% if link.new %}
|
||||||
|
<span class="ml-2 tag bd-mini-tag is-primary">
|
||||||
|
New!
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@ -23,7 +23,7 @@ More in the [Changelog](https://github.com/jgthms/bulma/releases/tag/0.8.0).
|
|||||||
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:
|
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:
|
||||||
|
|
||||||
* `findLightColor()` which finds the light version of a color
|
* `findLightColor()` which finds the light version of a color
|
||||||
* `findDarkolor()` which finds the dark version of a color
|
* `findDarkColor()` which finds the dark version of a color
|
||||||
|
|
||||||
The **light** colors are used by the `button` element:
|
The **light** colors are used by the `button` element:
|
||||||
|
|
||||||
|
|||||||
@ -21,7 +21,7 @@ $bd-partner-width: 12rem
|
|||||||
justify-content: space-around
|
justify-content: space-around
|
||||||
justify-content: center
|
justify-content: center
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
max-width: (8 * $bd-partner-width)
|
// max-width: (8 * $bd-partner-width)
|
||||||
|
|
||||||
.bd-partner-sponsor
|
.bd-partner-sponsor
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
@ -120,9 +120,9 @@ $bd-partnrs-4: 1130px
|
|||||||
width: $bd-partner-width
|
width: $bd-partner-width
|
||||||
|
|
||||||
+widescreen
|
+widescreen
|
||||||
.bd-partnrs
|
// .bd-partnrs
|
||||||
.container
|
// .container
|
||||||
max-width: 1536px
|
// max-width: 1536px
|
||||||
.bd-partner
|
.bd-partner
|
||||||
&.bd-is-carbon
|
&.bd-is-carbon
|
||||||
margin-left: 3rem
|
margin-left: 3rem
|
||||||
|
|||||||
@ -34,6 +34,7 @@ breadcrumb:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{% if site.data.backers["500"].size > 0 or site.data.github["500"].size > 0 %}
|
||||||
<h2 class="title is-5">
|
<h2 class="title is-5">
|
||||||
Documentation sponsors ($500+)
|
Documentation sponsors ($500+)
|
||||||
</h2>
|
</h2>
|
||||||
@ -49,6 +50,7 @@ breadcrumb:
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<h2 class="title is-5">
|
<h2 class="title is-5">
|
||||||
Homepage sponsors ($100+)
|
Homepage sponsors ($100+)
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
112
docs/documentation/elements/block.html
Normal file
112
docs/documentation/elements/block.html
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
---
|
||||||
|
title: Block
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: block
|
||||||
|
breadcrumb:
|
||||||
|
- home
|
||||||
|
- documentation
|
||||||
|
- elements
|
||||||
|
- elements-block
|
||||||
|
meta:
|
||||||
|
colors: false
|
||||||
|
sizes: false
|
||||||
|
variables: true
|
||||||
|
---
|
||||||
|
|
||||||
|
{% capture block_example %}
|
||||||
|
<div class="block">
|
||||||
|
This text is within a <strong>block</strong>.
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
This text is within a <strong>third block</strong>. This block has no margin at the bottom.
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture no_block_example %}
|
||||||
|
<div>
|
||||||
|
This text is <em>not</em> within a <strong>block</strong>.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
This text <em>isn't</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
This text is also <em>not</em> within a <strong>block</strong>.
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture block_css %}
|
||||||
|
.block:not(:last-child) {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML elements to have a consistent margin between them:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include elements/snippet.html content=block_example %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but <strong>not the third one.</strong>. That is because Bulma applies a space on all blocks, <strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only appear <strong>between them</strong>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Without using <code>block</code>, the HTML elements would have no space between them:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include elements/snippet.html content=no_block_example %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="One line of CSS" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all siblings, <strong>except the last one</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight css %}{{ block_css }}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
This prevents the last sibling to add unnecessary space at the bottom.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Already used everywhere in Bulma" %}
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. The <code>block</code> CSS properties are <strong>shared</strong> across several Bulma elements and components:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><code>breadcrumb</code></li>
|
||||||
|
<li><code>level</code></li>
|
||||||
|
<li><code>message</code></li>
|
||||||
|
<li><code>pagination</code></li>
|
||||||
|
<li><code>tabs</code></li>
|
||||||
|
<li><code>box</code></li>
|
||||||
|
<li><code>content</code></li>
|
||||||
|
<li><code>notification</code></li>
|
||||||
|
<li><code>other</code></li>
|
||||||
|
<li><code>progress</code></li>
|
||||||
|
<li><code>table</code></li>
|
||||||
|
<li><code>title</code></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This is thanks to the <code>@extend %block</code> Sass placeholder feature.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
As a result, no matter which Bulma elements and components you are using, and no matter their order, they will have a <strong>consistent space</strong> between them.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include elements/variables.html type='element' %}
|
||||||
@ -11,7 +11,7 @@ breadcrumb:
|
|||||||
meta:
|
meta:
|
||||||
colors: false
|
colors: false
|
||||||
sizes: false
|
sizes: false
|
||||||
variables: true
|
variables: false
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture box_example %}
|
{% capture box_example %}
|
||||||
|
|||||||
@ -31,6 +31,7 @@ meta:
|
|||||||
<button class="button is-dark">Dark</button>
|
<button class="button is-dark">Dark</button>
|
||||||
<button class="button is-black">Black</button>
|
<button class="button is-black">Black</button>
|
||||||
<button class="button is-text">Text</button>
|
<button class="button is-text">Text</button>
|
||||||
|
<button class="button is-ghost">Ghost</button>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture button_colors_b_example %}
|
{% capture button_colors_b_example %}
|
||||||
|
|||||||
@ -55,7 +55,7 @@ meta:
|
|||||||
{% capture notification_js_code %}
|
{% capture notification_js_code %}
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
||||||
$notification = $delete.parentNode;
|
var $notification = $delete.parentNode;
|
||||||
|
|
||||||
$delete.addEventListener('click', () => {
|
$delete.addEventListener('click', () => {
|
||||||
$notification.parentNode.removeChild($notification);
|
$notification.parentNode.removeChild($notification);
|
||||||
|
|||||||
@ -370,7 +370,7 @@ meta:
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
Bulma styles the different <strong>states</strong> of the <code>select</code> elment. Each state is available as a pseudo-class and a CSS class:
|
Bulma styles the different <strong>states</strong> of the <code>select</code> element. Each state is available as a pseudo-class and a CSS class:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@ -178,7 +178,7 @@ meta:
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
Bulma styles the different <strong>states</strong> of the <code>textarea</code> elment. Each state is available as a pseudo-class and a CSS class:
|
Bulma styles the different <strong>states</strong> of the <code>textarea</code> element. Each state is available as a pseudo-class and a CSS class:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
133
docs/documentation/helpers/flexbox-helpers.html
Normal file
133
docs/documentation/helpers/flexbox-helpers.html
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
---
|
||||||
|
title: Flexbox helpers
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: helpers
|
||||||
|
doc-subtab: helpers-flexbox
|
||||||
|
breadcrumb:
|
||||||
|
- home
|
||||||
|
- documentation
|
||||||
|
- helpers
|
||||||
|
- helpers-flexbox
|
||||||
|
flex-direction-values:
|
||||||
|
- row
|
||||||
|
- row-reverse
|
||||||
|
- column
|
||||||
|
- column-reverse
|
||||||
|
flex-wrap-values:
|
||||||
|
- nowrap
|
||||||
|
- wrap
|
||||||
|
- wrap-reverse
|
||||||
|
justify-content-values:
|
||||||
|
- flex-start
|
||||||
|
- flex-end
|
||||||
|
- center
|
||||||
|
- space-between
|
||||||
|
- space-around
|
||||||
|
- space-evenly
|
||||||
|
- start
|
||||||
|
- end
|
||||||
|
- left
|
||||||
|
- right
|
||||||
|
align-content-values:
|
||||||
|
- flex-start
|
||||||
|
- flex-end
|
||||||
|
- center
|
||||||
|
- space-between
|
||||||
|
- space-around
|
||||||
|
- space-evenly
|
||||||
|
- stretch
|
||||||
|
- start
|
||||||
|
- end
|
||||||
|
- baseline
|
||||||
|
align-items-values:
|
||||||
|
- stretch
|
||||||
|
- flex-start
|
||||||
|
- flex-end
|
||||||
|
- center
|
||||||
|
- baseline
|
||||||
|
- start
|
||||||
|
- end
|
||||||
|
- self-start
|
||||||
|
- self-end
|
||||||
|
align-self-values:
|
||||||
|
- auto
|
||||||
|
- flex-start
|
||||||
|
- flex-end
|
||||||
|
- center
|
||||||
|
- baseline
|
||||||
|
- stretch
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include elements/new-tag.html version="0.9.1" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
All of the <strong>Flexbox CSS properties</strong> are available as Bulma helpers:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>flex-direction</code></li>
|
||||||
|
<li><code>flex-wrap</code></li>
|
||||||
|
<li><code>justify-content</code></li>
|
||||||
|
<li><code>align-content</code></li>
|
||||||
|
<li><code>align-items</code></li>
|
||||||
|
<li><code>align-self</code></li>
|
||||||
|
<li><code>flex-grow</code></li>
|
||||||
|
<li><code>flex-shrink</code></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Flex direction" %}
|
||||||
|
|
||||||
|
{% include elements/flexbox-helper-table.html property="flex-direction" values=page.flex-direction-values %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Flex wrap" %}
|
||||||
|
|
||||||
|
{% include elements/flexbox-helper-table.html property="flex-wrap" values=page.flex-wrap-values %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Justify content" %}
|
||||||
|
|
||||||
|
{% include elements/flexbox-helper-table.html property="justify-content" values=page.justify-content-values %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Align content" %}
|
||||||
|
|
||||||
|
{% include elements/flexbox-helper-table.html property="align-content" values=page.align-content-values %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Align items" %}
|
||||||
|
|
||||||
|
{% include elements/flexbox-helper-table.html property="align-items" values=page.align-items-values %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Align self" %}
|
||||||
|
|
||||||
|
{% include elements/flexbox-helper-table.html property="align-self" values=page.align-self-values %}
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Flex grow and flex shrink" %}
|
||||||
|
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Class</th>
|
||||||
|
<th>Property: Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">Grow</th>
|
||||||
|
</tr>
|
||||||
|
{% for i in (0..5) %}
|
||||||
|
<tr>
|
||||||
|
<td><code>is-flex-grow-{{ i }}</code></td>
|
||||||
|
<td><code>flex-grow: {{ i }}</code></td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">Shrink</th>
|
||||||
|
</tr>
|
||||||
|
{% for i in (0..5) %}
|
||||||
|
<tr>
|
||||||
|
<td><code>is-flex-shrink-{{ i }}</code></td>
|
||||||
|
<td><code>flex-shrink: {{ i }}</code></td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
@ -48,6 +48,10 @@ breadcrumb:
|
|||||||
<td><code>is-unselectable</code></td>
|
<td><code>is-unselectable</code></td>
|
||||||
<td>Prevents the text from being <strong>selectable</strong></td>
|
<td>Prevents the text from being <strong>selectable</strong></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>is-clickable</code></td>
|
||||||
|
<td>Applies <code>cursor: pointer !important</code> to the element.</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>is-relative</code></td>
|
<td><code>is-relative</code></td>
|
||||||
<td>Applies <code>position: relative</code> to the element.</td>
|
<td>Applies <code>position: relative</code> to the element.</td>
|
||||||
|
|||||||
@ -9,19 +9,23 @@ breadcrumb:
|
|||||||
- documentation
|
- documentation
|
||||||
- layout
|
- layout
|
||||||
- layout-container
|
- layout-container
|
||||||
|
meta:
|
||||||
|
colors: false
|
||||||
|
sizes: true
|
||||||
|
variables: true
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture container_example %}
|
{% capture container_example %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="notification">
|
<div class="notification is-primary">
|
||||||
This container is <strong>centered</strong> on desktop.
|
This container is <strong>centered</strong> on desktop and larger viewports.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture container_fluid_example %}
|
{% capture container_fluid_example %}
|
||||||
<div class="container is-fluid">
|
<div class="container is-fluid">
|
||||||
<div class="notification">
|
<div class="notification is-primary">
|
||||||
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
|
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
|
||||||
viewport size.
|
viewport size.
|
||||||
</div>
|
</div>
|
||||||
@ -30,7 +34,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{% capture container_widescreen_example %}
|
{% capture container_widescreen_example %}
|
||||||
<div class="container is-widescreen">
|
<div class="container is-widescreen">
|
||||||
<div class="notification">
|
<div class="notification is-primary">
|
||||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -38,22 +42,137 @@ breadcrumb:
|
|||||||
|
|
||||||
{% capture container_fullhd_example %}
|
{% capture container_fullhd_example %}
|
||||||
<div class="container is-fullhd">
|
<div class="container is-fullhd">
|
||||||
<div class="notification">
|
<div class="notification is-primary">
|
||||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture container_max_desktop_example %}
|
||||||
|
<div class="container is-max-desktop">
|
||||||
|
<div class="notification is-primary">
|
||||||
|
This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture container_max_widescreen_example %}
|
||||||
|
<div class="container is-max-widescreen">
|
||||||
|
<div class="notification is-primary">
|
||||||
|
This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% assign bp_tablet = site.data.breakpoints.tablet %}
|
||||||
|
{% assign bp_desktop = site.data.breakpoints.desktop %}
|
||||||
|
{% assign bp_widescreen = site.data.breakpoints.widescreen %}
|
||||||
|
{% assign bp_fullhd = site.data.breakpoints.fullhd %}
|
||||||
|
{% assign container_offset = 64 %}
|
||||||
|
|
||||||
|
{% capture thead %}
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="bd-is-empty">
|
||||||
|
</th>
|
||||||
|
{% for breakpoint_hash in site.data.breakpoints %}
|
||||||
|
{% assign breakpoint = breakpoint_hash[1] %}
|
||||||
|
{% if breakpoint.id == 'tablet' %}
|
||||||
|
<th>
|
||||||
|
Below
|
||||||
|
<br>
|
||||||
|
<code>{{ bp_tablet.to }}px</code>
|
||||||
|
</th>
|
||||||
|
{% elsif breakpoint.id != 'mobile' %}
|
||||||
|
<th>
|
||||||
|
{{ breakpoint.name }}
|
||||||
|
<br>
|
||||||
|
{% if breakpoint.id == 'fullhd' %}
|
||||||
|
<code>{{ breakpoint.from }}px</code> and above
|
||||||
|
{% else %}
|
||||||
|
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||||
|
{% endif %}
|
||||||
|
</th>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
|
<p>
|
||||||
|
The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
|
||||||
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>navbar</code></li>
|
<li><code>navbar</code></li>
|
||||||
<li><code>hero</code></li>
|
<li><code>hero</code></li>
|
||||||
<li><code>section</code></li>
|
<li><code>section</code></li>
|
||||||
<li><code>footer</code></li>
|
<li><code>footer</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
{% include elements/anchor.html name="Overview" %}
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{{ thead }}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Class</th>
|
||||||
|
<th colspan="4" class="has-text-centered"><code>max-width</code></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>.container</code></td>
|
||||||
|
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||||
|
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||||
|
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||||
|
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.container.is-widescreen</code></td>
|
||||||
|
<td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||||
|
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||||
|
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.container.is-fullhd</code></td>
|
||||||
|
<td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||||
|
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5">
|
||||||
|
{% include elements/new-tag.html version="0.9.1" %}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.container.is-max-desktop</code></td>
|
||||||
|
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||||
|
<td colspan="3"><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.container.is-max-widescreen</code></td>
|
||||||
|
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||||
|
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||||
|
<td colspan="2"><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
{% include elements/anchor.html name="Default behavior" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
The containers <strong>width</strong> for each <strong>breakpoint</strong> is the result
|
By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will increase its <code>max-width</code> after reaching the <code>$widescreen</code> and <code>$fullhd</code> breakpoints.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result
|
||||||
of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
|
of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
|
||||||
32px</code> but can be modified.
|
32px</code> but can be modified.
|
||||||
</p>
|
</p>
|
||||||
@ -68,7 +187,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{% include layout/main-close.html show_categories=true %}
|
{% include layout/main-close.html show_categories=true %}
|
||||||
|
|
||||||
<div class="bd-example is-fullwidth">
|
<div class="bd-example is-fullwidth py-5">
|
||||||
{{container_example}}
|
{{container_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -76,24 +195,8 @@ breadcrumb:
|
|||||||
|
|
||||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||||
|
|
||||||
{% include elements/anchor.html name="Fluid container" %}
|
<!-- -->
|
||||||
|
{% include elements/anchor.html name="Widescreen or FullHD only" %}
|
||||||
<div class="content">
|
|
||||||
<p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
|
|
||||||
right sides, add the <code>is-fluid</code> modifier:</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% include layout/main-close.html %}
|
|
||||||
|
|
||||||
<div class="bd-example is-fullwidth">
|
|
||||||
{{container_fluid_example}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% include layout/main-open.html %}
|
|
||||||
|
|
||||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
|
||||||
|
|
||||||
{% include elements/anchor.html name="Breakpoint containers" %}
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -103,7 +206,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{% include layout/main-close.html %}
|
{% include layout/main-close.html %}
|
||||||
|
|
||||||
<div class="bd-example is-fullwidth">
|
<div class="bd-example is-fullwidth py-5">
|
||||||
{{container_widescreen_example}}
|
{{container_widescreen_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -113,10 +216,81 @@ breadcrumb:
|
|||||||
|
|
||||||
{% include layout/main-close.html %}
|
{% include layout/main-close.html %}
|
||||||
|
|
||||||
<div class="bd-example is-fullwidth">
|
<div class="bd-example is-fullwidth py-5">
|
||||||
{{ container_fullhd_example }}
|
{{ container_fullhd_example }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include layout/main-open.html %}
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
{% include elements/anchor.html name="Desktop and Widescreen maximum widths" %}
|
||||||
|
|
||||||
|
{% include elements/new-tag.html version="0.9.1" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2 modifiers:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>.container.is-max-desktop</code> will behave like a desktop container
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>.container.is-max-widescreen</code> will behave like a widescreen container
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-close.html %}
|
||||||
|
|
||||||
|
<div class="bd-example is-fullwidth py-5">
|
||||||
|
{{ container_max_desktop_example }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
|
{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
{% include layout/main-close.html %}
|
||||||
|
|
||||||
|
<div class="bd-example is-fullwidth py-5">
|
||||||
|
{{ container_max_widescreen_example }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
|
{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
{% include elements/anchor.html name="Absolute maximum width" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of the <code>$container-max-width</code> Sass variable.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>, <code>$desktop</code>, or any value in <strong>pixels</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
{% include elements/anchor.html name="Fluid container" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
|
||||||
|
right sides, add the <code>is-fluid</code> modifier:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-close.html %}
|
||||||
|
|
||||||
|
<div class="bd-example is-fullwidth py-5">
|
||||||
|
{{container_fluid_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
|
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
{% include elements/variables.html type='element' data=site.data.variables.elements.container %}
|
||||||
|
|||||||
BIN
docs/images/amis/dfds.png
Normal file
BIN
docs/images/amis/dfds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
docs/images/amis/dfds@2x.png
Normal file
BIN
docs/images/amis/dfds@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
docs/images/amis/rajbet.png
Normal file
BIN
docs/images/amis/rajbet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/images/amis/rajbet@2x.png
Normal file
BIN
docs/images/amis/rajbet@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/images/amis/vpnreview.png
Normal file
BIN
docs/images/amis/vpnreview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/images/amis/vpnreview@2x.png
Normal file
BIN
docs/images/amis/vpnreview@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
docs/images/twitter/ale_codes.jpg
Normal file
BIN
docs/images/twitter/ale_codes.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
6
docs/package-lock.json
generated
6
docs/package-lock.json
generated
@ -3341,9 +3341,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lodash": {
|
"lodash": {
|
||||||
"version": "4.17.15",
|
"version": "4.17.20",
|
||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
|
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"log-symbols": {
|
"log-symbols": {
|
||||||
|
|||||||
@ -2346,9 +2346,9 @@ locate-path@^5.0.0:
|
|||||||
p-locate "^4.1.0"
|
p-locate "^4.1.0"
|
||||||
|
|
||||||
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.4, lodash@~4.17.12:
|
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.4, lodash@~4.17.12:
|
||||||
version "4.17.15"
|
version "4.17.20"
|
||||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||||
|
|
||||||
log-symbols@^2.2.0:
|
log-symbols@^2.2.0:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "bulma",
|
"name": "bulma",
|
||||||
"version": "0.9.0",
|
"version": "0.9.1",
|
||||||
"homepage": "https://bulma.io",
|
"homepage": "https://bulma.io",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Jeremy Thomas",
|
"name": "Jeremy Thomas",
|
||||||
|
|||||||
@ -83,6 +83,7 @@ section
|
|||||||
body,
|
body,
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea
|
textarea
|
||||||
font-family: var(--body-family)
|
font-family: var(--body-family)
|
||||||
|
|||||||
@ -3,7 +3,7 @@ $card-background-color: var(--scheme-main, #{$scheme-main}) !default
|
|||||||
$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||||
$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
|
$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
|
||||||
$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
|
$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
|
||||||
$card-radius: 0 !default
|
$card-radius: 0.25rem !default
|
||||||
|
|
||||||
$card-header-background-color: transparent !default
|
$card-header-background-color: transparent !default
|
||||||
$card-header-color: var(--text-strong, #{$text-strong}) !default
|
$card-header-color: var(--text-strong, #{$text-strong}) !default
|
||||||
@ -40,14 +40,22 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
|
|||||||
--card-footer-padding: #{$card-footer-padding}
|
--card-footer-padding: #{$card-footer-padding}
|
||||||
--card-media-margin: #{$card-media-margin}
|
--card-media-margin: #{$card-media-margin}
|
||||||
background-color: var(--card-background-color)
|
background-color: var(--card-background-color)
|
||||||
|
border-radius: var(--card-radius)
|
||||||
box-shadow: var(--card-shadow)
|
box-shadow: var(--card-shadow)
|
||||||
color: var(--card-color)
|
color: var(--card-color)
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
position: relative
|
position: relative
|
||||||
border-radius: var(--card-radius)
|
|
||||||
overflow: hidden
|
%card-item
|
||||||
|
&:first-child
|
||||||
|
border-top-left-radius: $card-radius
|
||||||
|
border-top-right-radius: $card-radius
|
||||||
|
&:last-child
|
||||||
|
border-bottom-left-radius: $card-radius
|
||||||
|
border-bottom-right-radius: $card-radius
|
||||||
|
|
||||||
.card-header
|
.card-header
|
||||||
|
@extend %card-item
|
||||||
background-color: var(--card-header-background-color)
|
background-color: var(--card-header-background-color)
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
box-shadow: var(--card-header-shadow)
|
box-shadow: var(--card-header-shadow)
|
||||||
@ -73,12 +81,22 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
|
|||||||
.card-image
|
.card-image
|
||||||
display: block
|
display: block
|
||||||
position: relative
|
position: relative
|
||||||
|
&:first-child
|
||||||
|
img
|
||||||
|
border-top-left-radius: $card-radius
|
||||||
|
border-top-right-radius: $card-radius
|
||||||
|
&:last-child
|
||||||
|
img
|
||||||
|
border-bottom-left-radius: $card-radius
|
||||||
|
border-bottom-right-radius: $card-radius
|
||||||
|
|
||||||
.card-content
|
.card-content
|
||||||
|
@extend %card-item
|
||||||
background-color: var(--card-content-background-color)
|
background-color: var(--card-content-background-color)
|
||||||
padding: var(--card-content-padding)
|
padding: var(--card-content-padding)
|
||||||
|
|
||||||
.card-footer
|
.card-footer
|
||||||
|
@extend %card-item
|
||||||
background-color: var(--card-footer-background-color)
|
background-color: var(--card-footer-background-color)
|
||||||
border-top: var(--card-footer-border-top)
|
border-top: var(--card-footer-border-top)
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
|
|||||||
@ -1,6 +1,11 @@
|
|||||||
$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
|
$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
|
||||||
$media-spacing: 1rem
|
$media-border-size: 1px !default
|
||||||
$media-spacing-large: 1.5rem
|
$media-spacing: 1rem !default
|
||||||
|
$media-spacing-large: 1.5rem !default
|
||||||
|
$media-content-spacing: 0.75rem !default
|
||||||
|
$media-level-1-spacing: 0.75rem !default
|
||||||
|
$media-level-1-content-spacing: 0.5rem !default
|
||||||
|
$media-level-2-spacing: 0.5rem !default
|
||||||
|
|
||||||
.media
|
.media
|
||||||
--media-border-color: #{$media-border-color}
|
--media-border-color: #{$media-border-color}
|
||||||
@ -10,22 +15,22 @@ $media-spacing-large: 1.5rem
|
|||||||
display: flex
|
display: flex
|
||||||
text-align: inherit
|
text-align: inherit
|
||||||
.content:not(:last-child)
|
.content:not(:last-child)
|
||||||
margin-bottom: 0.75rem
|
margin-bottom: $media-content-spacing
|
||||||
.media
|
.media
|
||||||
border-top: 1px solid var(--media-border-color)
|
border-top: 1px solid var(--media-border-color)
|
||||||
display: flex
|
display: flex
|
||||||
padding-top: 0.75rem
|
padding-top: $media-level-1-spacing
|
||||||
.content:not(:last-child),
|
.content:not(:last-child),
|
||||||
.control:not(:last-child)
|
.control:not(:last-child)
|
||||||
margin-bottom: 0.5rem
|
margin-bottom: $media-level-1-content-spacing
|
||||||
.media
|
.media
|
||||||
padding-top: 0.5rem
|
padding-top: $media-level-2-spacing
|
||||||
& + .media
|
& + .media
|
||||||
margin-top: 0.5rem
|
margin-top: $media-level-2-spacing
|
||||||
& + .media
|
& + .media
|
||||||
border-top: 1px solid var(--media-border-color)
|
border-top: $media-border-size solid $media-border-color
|
||||||
margin-top: var(--media-spacing)
|
margin-top: $media-spacing
|
||||||
padding-top: var(--media-spacing)
|
padding-top: $media-spacing
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-large
|
&.is-large
|
||||||
& + .media
|
& + .media
|
||||||
|
|||||||
@ -28,6 +28,8 @@ $modal-card-foot-border-top: 1px solid $border !default
|
|||||||
$modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
|
$modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
|
||||||
$modal-card-body-padding: 20px !default
|
$modal-card-body-padding: 20px !default
|
||||||
|
|
||||||
|
$modal-breakpoint: $tablet !default
|
||||||
|
|
||||||
.modal
|
.modal
|
||||||
--modal-z: #{$modal-z}
|
--modal-z: #{$modal-z}
|
||||||
--modal-background-background-color: #{$modal-background-background-color}
|
--modal-background-background-color: #{$modal-background-background-color}
|
||||||
@ -76,7 +78,7 @@ $modal-card-body-padding: 20px !default
|
|||||||
position: relative
|
position: relative
|
||||||
width: 100%
|
width: 100%
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
+tablet
|
+from($modal-breakpoint)
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
|
max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
|
||||||
width: var(--modal-content-width)
|
width: var(--modal-content-width)
|
||||||
|
|||||||
@ -25,8 +25,15 @@ $button-text-decoration: underline !default
|
|||||||
$button-text-hover-background-color: $background !default
|
$button-text-hover-background-color: $background !default
|
||||||
$button-text-hover-color: var(--text-strong, #{$text-strong}) !default
|
$button-text-hover-color: var(--text-strong, #{$text-strong}) !default
|
||||||
|
|
||||||
$button-disabled-background-color: var(--scheme-main, #{$scheme-main}) !default
|
$button-ghost-background: none !default
|
||||||
$button-disabled-border-color: var(--border, #{$border}) !default
|
$button-ghost-border-color: transparent !default
|
||||||
|
$button-ghost-color: $link !default
|
||||||
|
$button-ghost-decoration: none !default
|
||||||
|
$button-ghost-hover-color: $link !default
|
||||||
|
$button-ghost-hover-decoration: underline !default
|
||||||
|
|
||||||
|
$button-disabled-background-color: $scheme-main !default
|
||||||
|
$button-disabled-border-color: $border !default
|
||||||
$button-disabled-shadow: none !default
|
$button-disabled-shadow: none !default
|
||||||
$button-disabled-opacity: 0.5 !default
|
$button-disabled-opacity: 0.5 !default
|
||||||
|
|
||||||
@ -146,6 +153,15 @@ $button-colors: $colors !default
|
|||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
|
&.is-ghost
|
||||||
|
background: $button-ghost-background
|
||||||
|
border-color: $button-ghost-border-color
|
||||||
|
color: $button-ghost-color
|
||||||
|
text-decoration: $button-ghost-decoration
|
||||||
|
&:hover,
|
||||||
|
&.is-hovered
|
||||||
|
color: $button-ghost-hover-color
|
||||||
|
text-decoration: $button-ghost-hover-decoration
|
||||||
@each $name, $pair in $button-colors
|
@each $name, $pair in $button-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
$container-offset: (2 * $gap) !default
|
$container-offset: (2 * $gap) !default
|
||||||
|
$container-max-width: $fullhd !default
|
||||||
|
|
||||||
.container
|
.container
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
@ -6,19 +7,21 @@ $container-offset: (2 * $gap) !default
|
|||||||
position: relative
|
position: relative
|
||||||
width: auto
|
width: auto
|
||||||
&.is-fluid
|
&.is-fluid
|
||||||
max-width: none
|
max-width: none !important
|
||||||
padding-left: $gap
|
padding-left: $gap
|
||||||
padding-right: $gap
|
padding-right: $gap
|
||||||
width: 100%
|
width: 100%
|
||||||
+desktop
|
+desktop
|
||||||
max-width: $desktop - $container-offset
|
max-width: $desktop - $container-offset
|
||||||
+until-widescreen
|
+until-widescreen
|
||||||
&.is-widescreen
|
&.is-widescreen:not(.is-max-desktop)
|
||||||
max-width: $widescreen - $container-offset
|
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||||
+until-fullhd
|
+until-fullhd
|
||||||
&.is-fullhd
|
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
|
||||||
max-width: $fullhd - $container-offset
|
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||||
+widescreen
|
+widescreen
|
||||||
max-width: $widescreen - $container-offset
|
&:not(.is-max-desktop)
|
||||||
|
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||||
+fullhd
|
+fullhd
|
||||||
max-width: $fullhd - $container-offset
|
&:not(.is-max-desktop):not(.is-max-widescreen)
|
||||||
|
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||||
|
|||||||
@ -8,6 +8,7 @@ $column-gap: 0.75rem !default
|
|||||||
padding: $column-gap
|
padding: $column-gap
|
||||||
.columns.is-mobile > &.is-narrow
|
.columns.is-mobile > &.is-narrow
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
.columns.is-mobile > &.is-full
|
.columns.is-mobile > &.is-full
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -39,32 +40,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
.columns.is-mobile > &.is-offset-three-quarters
|
.columns.is-mobile > &.is-offset-three-quarters
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
.columns.is-mobile > &.is-offset-two-thirds
|
.columns.is-mobile > &.is-offset-two-thirds
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
.columns.is-mobile > &.is-offset-half
|
.columns.is-mobile > &.is-offset-half
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
.columns.is-mobile > &.is-offset-one-third
|
.columns.is-mobile > &.is-offset-one-third
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
.columns.is-mobile > &.is-offset-one-quarter
|
.columns.is-mobile > &.is-offset-one-quarter
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
.columns.is-mobile > &.is-offset-one-fifth
|
.columns.is-mobile > &.is-offset-one-fifth
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
.columns.is-mobile > &.is-offset-two-fifths
|
.columns.is-mobile > &.is-offset-two-fifths
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
.columns.is-mobile > &.is-offset-three-fifths
|
.columns.is-mobile > &.is-offset-three-fifths
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
.columns.is-mobile > &.is-offset-four-fifths
|
.columns.is-mobile > &.is-offset-four-fifths
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
.columns.is-mobile > &.is-#{$i}
|
.columns.is-mobile > &.is-#{$i}
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
.columns.is-mobile > &.is-offset-#{$i}
|
.columns.is-mobile > &.is-offset-#{$i}
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
+mobile
|
+mobile
|
||||||
&.is-narrow-mobile
|
&.is-narrow-mobile
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-mobile
|
&.is-full-mobile
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -96,33 +98,34 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-mobile
|
&.is-offset-three-quarters-mobile
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-mobile
|
&.is-offset-two-thirds-mobile
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-mobile
|
&.is-offset-half-mobile
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-mobile
|
&.is-offset-one-third-mobile
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-mobile
|
&.is-offset-one-quarter-mobile
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-mobile
|
&.is-offset-one-fifth-mobile
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-mobile
|
&.is-offset-two-fifths-mobile
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-mobile
|
&.is-offset-three-fifths-mobile
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-mobile
|
&.is-offset-four-fifths-mobile
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-mobile
|
&.is-#{$i}-mobile
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
&.is-offset-#{$i}-mobile
|
&.is-offset-#{$i}-mobile
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
+tablet
|
+tablet
|
||||||
&.is-narrow,
|
&.is-narrow,
|
||||||
&.is-narrow-tablet
|
&.is-narrow-tablet
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full,
|
&.is-full,
|
||||||
&.is-full-tablet
|
&.is-full-tablet
|
||||||
flex: none
|
flex: none
|
||||||
@ -165,31 +168,31 @@ $column-gap: 0.75rem !default
|
|||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters,
|
&.is-offset-three-quarters,
|
||||||
&.is-offset-three-quarters-tablet
|
&.is-offset-three-quarters-tablet
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds,
|
&.is-offset-two-thirds,
|
||||||
&.is-offset-two-thirds-tablet
|
&.is-offset-two-thirds-tablet
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half,
|
&.is-offset-half,
|
||||||
&.is-offset-half-tablet
|
&.is-offset-half-tablet
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third,
|
&.is-offset-one-third,
|
||||||
&.is-offset-one-third-tablet
|
&.is-offset-one-third-tablet
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter,
|
&.is-offset-one-quarter,
|
||||||
&.is-offset-one-quarter-tablet
|
&.is-offset-one-quarter-tablet
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth,
|
&.is-offset-one-fifth,
|
||||||
&.is-offset-one-fifth-tablet
|
&.is-offset-one-fifth-tablet
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths,
|
&.is-offset-two-fifths,
|
||||||
&.is-offset-two-fifths-tablet
|
&.is-offset-two-fifths-tablet
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths,
|
&.is-offset-three-fifths,
|
||||||
&.is-offset-three-fifths-tablet
|
&.is-offset-three-fifths-tablet
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths,
|
&.is-offset-four-fifths,
|
||||||
&.is-offset-four-fifths-tablet
|
&.is-offset-four-fifths-tablet
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i},
|
&.is-#{$i},
|
||||||
&.is-#{$i}-tablet
|
&.is-#{$i}-tablet
|
||||||
@ -197,10 +200,11 @@ $column-gap: 0.75rem !default
|
|||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
&.is-offset-#{$i},
|
&.is-offset-#{$i},
|
||||||
&.is-offset-#{$i}-tablet
|
&.is-offset-#{$i}-tablet
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
+touch
|
+touch
|
||||||
&.is-narrow-touch
|
&.is-narrow-touch
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-touch
|
&.is-full-touch
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -232,32 +236,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-touch
|
&.is-offset-three-quarters-touch
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-touch
|
&.is-offset-two-thirds-touch
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-touch
|
&.is-offset-half-touch
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-touch
|
&.is-offset-one-third-touch
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-touch
|
&.is-offset-one-quarter-touch
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-touch
|
&.is-offset-one-fifth-touch
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-touch
|
&.is-offset-two-fifths-touch
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-touch
|
&.is-offset-three-fifths-touch
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-touch
|
&.is-offset-four-fifths-touch
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-touch
|
&.is-#{$i}-touch
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
&.is-offset-#{$i}-touch
|
&.is-offset-#{$i}-touch
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
+desktop
|
+desktop
|
||||||
&.is-narrow-desktop
|
&.is-narrow-desktop
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-desktop
|
&.is-full-desktop
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -289,32 +294,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-desktop
|
&.is-offset-three-quarters-desktop
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-desktop
|
&.is-offset-two-thirds-desktop
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-desktop
|
&.is-offset-half-desktop
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-desktop
|
&.is-offset-one-third-desktop
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-desktop
|
&.is-offset-one-quarter-desktop
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-desktop
|
&.is-offset-one-fifth-desktop
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-desktop
|
&.is-offset-two-fifths-desktop
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-desktop
|
&.is-offset-three-fifths-desktop
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-desktop
|
&.is-offset-four-fifths-desktop
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-desktop
|
&.is-#{$i}-desktop
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
&.is-offset-#{$i}-desktop
|
&.is-offset-#{$i}-desktop
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
+widescreen
|
+widescreen
|
||||||
&.is-narrow-widescreen
|
&.is-narrow-widescreen
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-widescreen
|
&.is-full-widescreen
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -346,32 +352,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-widescreen
|
&.is-offset-three-quarters-widescreen
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-widescreen
|
&.is-offset-two-thirds-widescreen
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-widescreen
|
&.is-offset-half-widescreen
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-widescreen
|
&.is-offset-one-third-widescreen
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-widescreen
|
&.is-offset-one-quarter-widescreen
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-widescreen
|
&.is-offset-one-fifth-widescreen
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-widescreen
|
&.is-offset-two-fifths-widescreen
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-widescreen
|
&.is-offset-three-fifths-widescreen
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-widescreen
|
&.is-offset-four-fifths-widescreen
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-widescreen
|
&.is-#{$i}-widescreen
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
&.is-offset-#{$i}-widescreen
|
&.is-offset-#{$i}-widescreen
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
+fullhd
|
+fullhd
|
||||||
&.is-narrow-fullhd
|
&.is-narrow-fullhd
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-fullhd
|
&.is-full-fullhd
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -403,33 +410,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-fullhd
|
&.is-offset-three-quarters-fullhd
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-fullhd
|
&.is-offset-two-thirds-fullhd
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-fullhd
|
&.is-offset-half-fullhd
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-fullhd
|
&.is-offset-one-third-fullhd
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-fullhd
|
&.is-offset-one-quarter-fullhd
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-fullhd
|
&.is-offset-one-fifth-fullhd
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-fullhd
|
&.is-offset-two-fifths-fullhd
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-fullhd
|
&.is-offset-three-fifths-fullhd
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-fullhd
|
&.is-offset-four-fifths-fullhd
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-fullhd
|
&.is-#{$i}-fullhd
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage($i / 12)
|
||||||
&.is-offset-#{$i}-fullhd
|
&.is-offset-#{$i}-fullhd
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage($i / 12), false)
|
||||||
|
|
||||||
.columns
|
.columns
|
||||||
margin-left: (-$column-gap)
|
+ltr-property("margin", (-$column-gap), false)
|
||||||
margin-right: (-$column-gap)
|
+ltr-property("margin", (-$column-gap))
|
||||||
margin-top: (-$column-gap)
|
margin-top: (-$column-gap)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom: (-$column-gap)
|
margin-bottom: (-$column-gap)
|
||||||
@ -439,8 +446,8 @@ $column-gap: 0.75rem !default
|
|||||||
&.is-centered
|
&.is-centered
|
||||||
justify-content: center
|
justify-content: center
|
||||||
&.is-gapless
|
&.is-gapless
|
||||||
margin-left: 0
|
+ltr-property("margin", 0, false)
|
||||||
margin-right: 0
|
+ltr-property("margin", 0)
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
& > .column
|
& > .column
|
||||||
margin: 0
|
margin: 0
|
||||||
@ -467,9 +474,9 @@ $column-gap: 0.75rem !default
|
|||||||
@if $variable-columns
|
@if $variable-columns
|
||||||
.columns.is-variable
|
.columns.is-variable
|
||||||
--columnGap: 0.75rem
|
--columnGap: 0.75rem
|
||||||
margin-left: calc(-1 * var(--columnGap))
|
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
|
||||||
margin-right: calc(-1 * var(--columnGap))
|
+ltr-property("margin", calc(-1 * var(--columnGap)))
|
||||||
.column
|
> .column
|
||||||
padding-left: var(--columnGap)
|
padding-left: var(--columnGap)
|
||||||
padding-right: var(--columnGap)
|
padding-right: var(--columnGap)
|
||||||
@for $i from 0 through 8
|
@for $i from 0 through 8
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
$flex-directions-values: row, row-reverse, column, column-reverse
|
$flex-direction-values: row, row-reverse, column, column-reverse
|
||||||
@each $value in $flex-directions-values
|
@each $value in $flex-direction-values
|
||||||
.is-flex-direction-#{$value}
|
.is-flex-direction-#{$value}
|
||||||
flex-direction: $value !important
|
flex-direction: $value !important
|
||||||
|
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
.is-clickable
|
.is-clickable
|
||||||
cursor: pointer !important
|
cursor: pointer !important
|
||||||
|
pointer-events: all !important
|
||||||
|
|
||||||
.is-unselectable
|
.is-unselectable
|
||||||
@extend %unselectable
|
@extend %unselectable
|
||||||
|
|||||||
@ -991,9 +991,9 @@ locate-path@^5.0.0:
|
|||||||
p-locate "^4.1.0"
|
p-locate "^4.1.0"
|
||||||
|
|
||||||
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.15, lodash@~4.17.12:
|
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.15, lodash@~4.17.12:
|
||||||
version "4.17.15"
|
version "4.17.20"
|
||||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||||
|
|
||||||
log-symbols@^2.2.0:
|
log-symbols@^2.2.0:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user