mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +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>
|
||||
|
||||
<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>
|
||||
<td>Adrian Ocneanu</td>
|
||||
|
||||
@ -84,12 +41,12 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Garry Newman</td>
|
||||
|
||||
<td>
|
||||
|
||||
<a href="https://twitter.com/aequasi" target="_blank" rel="nofollow">
|
||||
@aequasi
|
||||
<a href="https://twitter.com/garrynewman" target="_blank" rel="nofollow">
|
||||
@garrynewman
|
||||
</a>
|
||||
|
||||
</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>
|
||||
</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">
|
||||
Homepage sponsors ($100+)
|
||||
@ -163,20 +80,7 @@
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>Yiannakis Ttafounas</td>
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Tooltwist</td>
|
||||
<td>Robert Bolder</td>
|
||||
|
||||
<td>
|
||||
|
||||
@ -202,7 +106,7 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Robert Bolder</td>
|
||||
<td>Adela Belin</td>
|
||||
|
||||
<td>
|
||||
|
||||
@ -210,23 +114,6 @@
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Phil Alves</td>
|
||||
|
||||
<td>
|
||||
|
||||
<a href="https://twitter.com/philalves01" target="_blank" rel="nofollow">
|
||||
@philalves01
|
||||
</a>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -245,7 +132,33 @@
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
@ -259,8 +172,14 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>patrick136</td>
|
||||
<td colspan="2"><a href="https://github.com/patrick136" target="_blank" rel="nofollow">GitHub</a></td>
|
||||
<td>brabusdot</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>
|
||||
|
||||
|
||||
@ -270,6 +189,12 @@
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>patrick136</td>
|
||||
<td colspan="2"><a href="https://github.com/patrick136" target="_blank" rel="nofollow">GitHub</a></td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -290,31 +215,10 @@
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>Tyler Weeres</td>
|
||||
<td>Jordan Nemrow</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>
|
||||
@ -332,49 +236,6 @@
|
||||
|
||||
<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>
|
||||
</tr>
|
||||
|
||||
@ -393,24 +254,7 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Florian Breisch</td>
|
||||
|
||||
<td>
|
||||
|
||||
<a href="https://twitter.com/FlorianBreisch" target="_blank" rel="nofollow">
|
||||
@FlorianBreisch
|
||||
</a>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>dvkt</td>
|
||||
<td>Al Romano</td>
|
||||
|
||||
<td>
|
||||
|
||||
@ -423,7 +267,20 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Dodzidenu Dzakuma</td>
|
||||
<td>xvxx</td>
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Maurice Perry</td>
|
||||
|
||||
<td>
|
||||
|
||||
@ -437,8 +294,32 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>Gomah</td>
|
||||
<td colspan="2"><a href="https://github.com/Gomah" target="_blank" rel="nofollow">GitHub</a></td>
|
||||
<td>mieko</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>
|
||||
|
||||
|
||||
@ -449,8 +330,8 @@
|
||||
|
||||
|
||||
<tr>
|
||||
<td>kuwaitbinary</td>
|
||||
<td colspan="2"><a href="https://github.com/kuwaitbinary" target="_blank" rel="nofollow">GitHub</a></td>
|
||||
<td>Gomah</td>
|
||||
<td colspan="2"><a href="https://github.com/Gomah" target="_blank" rel="nofollow">GitHub</a></td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
36
CHANGELOG.md
36
CHANGELOG.md
@ -1,5 +1,41 @@
|
||||
# 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
|
||||
|
||||
### Deprecation warning
|
||||
|
||||
@ -40,7 +40,7 @@ bower install bulma
|
||||
After installation, you can import the CSS file into your project using this snippet:
|
||||
|
||||
```sh
|
||||
import 'bulma/css/bulma.css'
|
||||
@import 'bulma/css/bulma.css'
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.9.0",
|
||||
"version": "0.9.1",
|
||||
"homepage": "https://bulma.io",
|
||||
"authors": ["jgthms <bbxdesign@gmail.com>"],
|
||||
"description": "Modern CSS framework based on Flexbox",
|
||||
|
||||
2
bulma.sass
vendored
2
bulma.sass
vendored
@ -1,5 +1,5 @@
|
||||
@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/base/_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": [
|
||||
{
|
||||
"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",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Dodzidenu Dzakuma",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1575826633076
|
||||
},
|
||||
{
|
||||
"name": "xvxx",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1572311879973
|
||||
},
|
||||
{
|
||||
"name": "Florian Breisch",
|
||||
"twitter": "FlorianBreisch",
|
||||
"start_timestamp": null
|
||||
"name": "Al Romano",
|
||||
"twitter": "",
|
||||
"start_timestamp": 1551649687685
|
||||
},
|
||||
{
|
||||
"name": "Jason Seminara",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1532955289949
|
||||
},
|
||||
{
|
||||
"name": "Stuart Stanfield",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Takayuki Yamaguchi",
|
||||
"twitter": "takyam",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1527579663355
|
||||
},
|
||||
{
|
||||
"name": "Jordan Nemrow",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1510767260223
|
||||
}
|
||||
],
|
||||
"30": [
|
||||
{
|
||||
"name": "Garry Newman",
|
||||
"twitter": "garrynewman",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1511186868165
|
||||
},
|
||||
{
|
||||
"name": "Adrian Ocneanu",
|
||||
"twitter": "aocneanu",
|
||||
"start_timestamp": null,
|
||||
"start_timestamp": 1510731567799,
|
||||
"website_url": "https://www.earthlink.ro/",
|
||||
"website_name": "Earthlink"
|
||||
}
|
||||
],
|
||||
"100": [
|
||||
{
|
||||
"name": "Sanyo Digital",
|
||||
"name": "Raj.bet",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Iaroslav Baklan",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1598967631148
|
||||
},
|
||||
{
|
||||
"name": "MonoVM ",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1588271410706
|
||||
},
|
||||
{
|
||||
"name": "Fintan Costello",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1584546730317
|
||||
},
|
||||
{
|
||||
"name": "Yiannakis Ttafounas",
|
||||
"name": "Iaroslav Baklan",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1571294038349
|
||||
},
|
||||
{
|
||||
"name": "Adela Belin",
|
||||
"twitter": "",
|
||||
"start_timestamp": 1564993835335
|
||||
},
|
||||
{
|
||||
"name": "Sparheld International GmbH",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1563870141112
|
||||
},
|
||||
{
|
||||
"name": "Robert Bolder",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "DontPayFull ",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"start_timestamp": 1546593784071
|
||||
}
|
||||
],
|
||||
"300": [],
|
||||
|
||||
@ -1,33 +1,41 @@
|
||||
{
|
||||
"1": [
|
||||
"bastien09",
|
||||
"bekwam",
|
||||
"cosgrove39264",
|
||||
"D3Portillo",
|
||||
"fabiofdsantos",
|
||||
"Heartz66",
|
||||
"KirillOsenkov",
|
||||
"neetso",
|
||||
"RDIL",
|
||||
"rewtraw",
|
||||
"romainnorberg",
|
||||
"scott-joe",
|
||||
"KirillOsenkov",
|
||||
"romainnorberg",
|
||||
"rewtraw",
|
||||
"bastien09",
|
||||
"neetso",
|
||||
"cosgrove39264",
|
||||
"bekwam",
|
||||
"smjnab",
|
||||
"timothymiko"
|
||||
"timothymiko",
|
||||
"mattsly",
|
||||
"fabiofdsantos",
|
||||
"marcop135",
|
||||
"aminah-io",
|
||||
"Carpenter0100",
|
||||
"dangowans",
|
||||
"eddielement"
|
||||
],
|
||||
"10": [
|
||||
"Gomah",
|
||||
"sasmithjr",
|
||||
"kuwaitbinary",
|
||||
"seansan",
|
||||
"dmjio",
|
||||
"yusuf-github",
|
||||
"linkdd",
|
||||
"nafSadh"
|
||||
"nafSadh",
|
||||
"mmmonica50",
|
||||
"mieko"
|
||||
],
|
||||
"100": [
|
||||
"patrick136",
|
||||
"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",
|
||||
"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",
|
||||
"mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
|
||||
}
|
||||
|
||||
@ -190,6 +190,7 @@
|
||||
},
|
||||
"helpers-spacing": {
|
||||
"name": "Spacing",
|
||||
"new": true,
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "grey-dark",
|
||||
"icon": "arrows-alt-h",
|
||||
@ -202,6 +203,14 @@
|
||||
"icon": "eye",
|
||||
"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": {
|
||||
"name": "Other",
|
||||
"subtitle": "Other useful Bulma helpers",
|
||||
@ -372,6 +381,13 @@
|
||||
"icon": "cube",
|
||||
"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": {
|
||||
"name": "Box",
|
||||
"subtitle": "A white <strong>box</strong> to contain other elements",
|
||||
@ -629,11 +645,11 @@
|
||||
"categories": {
|
||||
"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"],
|
||||
"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"],
|
||||
"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"],
|
||||
"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"]
|
||||
}
|
||||
}
|
||||
|
||||
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",
|
||||
"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",
|
||||
"download": "https://github.com/jgthms/bulma/releases/download/0.9.0/bulma-0.9.0.zip",
|
||||
"release_notes": "https://github.com/jgthms/bulma/releases/tag/0.9.0",
|
||||
"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.1",
|
||||
"github": "https://github.com/jgthms/bulma",
|
||||
"twitter": "https://twitter.com/jgthms",
|
||||
"version": "0.9.0",
|
||||
"version": "0.9.1",
|
||||
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
|
||||
"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",
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
"name": "tutlance",
|
||||
"url": "https://tutlance.com/",
|
||||
"width":"135",
|
||||
"height":"42"
|
||||
"height":"42",
|
||||
"follow": true
|
||||
},
|
||||
"themeisle": {
|
||||
"name": "themeisle",
|
||||
@ -191,7 +192,8 @@
|
||||
"url": "https://www.realtimecommunicationsworld.com/",
|
||||
"title": "Real Time Communications World",
|
||||
"width":"120",
|
||||
"height":"57"
|
||||
"height":"57",
|
||||
"follow": true
|
||||
},
|
||||
"polygon": {
|
||||
"name": "Polygon.io",
|
||||
@ -234,19 +236,42 @@
|
||||
"url": "https://www.coupons4printing.com/",
|
||||
"title": "Coupons For Printing",
|
||||
"width":"60",
|
||||
"height":"60"
|
||||
"height":"60",
|
||||
"follow": true
|
||||
},
|
||||
"inkoop": {
|
||||
"name": "inkoop",
|
||||
"url": "https://www.inkoop.io/",
|
||||
"title": "Inkoop - Website/App development company",
|
||||
"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": [
|
||||
"themeisle"
|
||||
,"dontpayfull"
|
||||
,"vpsserver"
|
||||
,"sparheld"
|
||||
,"bid4papers"
|
||||
@ -263,11 +288,13 @@
|
||||
,"monovm"
|
||||
,"tutlance"
|
||||
,"pillarwm"
|
||||
,"sanyodigital"
|
||||
,"coupons4printing"
|
||||
,"papersowl"
|
||||
,"edusson"
|
||||
,"inkoop"
|
||||
,"vpnreview"
|
||||
,"dfds"
|
||||
,"rajbet"
|
||||
],
|
||||
"footer": [
|
||||
"polygon"
|
||||
|
||||
@ -21,9 +21,14 @@
|
||||
},
|
||||
"$card-radius": {
|
||||
"name": "$card-radius",
|
||||
"value": "0",
|
||||
"value": "0.25rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$card-overflow": {
|
||||
"name": "$card-overflow",
|
||||
"value": "hidden",
|
||||
"type": "string"
|
||||
},
|
||||
"$card-header-background-color": {
|
||||
"name": "$card-header-background-color",
|
||||
"value": "transparent",
|
||||
@ -90,6 +95,8 @@
|
||||
"$card-color",
|
||||
"$card-background-color",
|
||||
"$card-shadow",
|
||||
"$card-radius",
|
||||
"$card-overflow",
|
||||
"$card-header-background-color",
|
||||
"$card-header-color",
|
||||
"$card-header-padding",
|
||||
@ -103,4 +110,4 @@
|
||||
"$card-media-margin"
|
||||
],
|
||||
"file_path": "components/card.sass"
|
||||
}
|
||||
}
|
||||
@ -116,6 +116,13 @@
|
||||
"name": "$modal-card-body-padding",
|
||||
"value": "20px",
|
||||
"type": "size"
|
||||
},
|
||||
"$modal-breakpoint": {
|
||||
"name": "$modal-breakpoint",
|
||||
"value": "$tablet",
|
||||
"type": "variable",
|
||||
"computed_type": "size",
|
||||
"computed_value": "769px"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -139,7 +146,8 @@
|
||||
"$modal-card-foot-radius",
|
||||
"$modal-card-foot-border-top",
|
||||
"$modal-card-body-background-color",
|
||||
"$modal-card-body-padding"
|
||||
"$modal-card-body-padding",
|
||||
"$modal-breakpoint"
|
||||
],
|
||||
"file_path": "components/modal.sass"
|
||||
}
|
||||
@ -227,6 +227,13 @@
|
||||
"type": "variable",
|
||||
"computed_type": "computed",
|
||||
"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": [
|
||||
@ -267,7 +274,8 @@
|
||||
"$navbar-divider-background-color",
|
||||
"$navbar-divider-height",
|
||||
"$navbar-bottom-box-shadow-size",
|
||||
"$navbar-breakpoint"
|
||||
"$navbar-breakpoint",
|
||||
"$navbar-colors"
|
||||
],
|
||||
"file_path": "components/navbar.sass"
|
||||
}
|
||||
@ -163,6 +163,13 @@
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"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": [
|
||||
@ -191,7 +198,8 @@
|
||||
"$button-disabled-opacity",
|
||||
"$button-static-color",
|
||||
"$button-static-background-color",
|
||||
"$button-static-border-color"
|
||||
"$button-static-border-color",
|
||||
"$button-colors"
|
||||
],
|
||||
"file_path": "elements/button.sass"
|
||||
}
|
||||
@ -4,10 +4,18 @@
|
||||
"name": "$container-offset",
|
||||
"value": "(2 * $gap)",
|
||||
"type": "compound"
|
||||
},
|
||||
"$container-max-width": {
|
||||
"name": "$container-max-width",
|
||||
"value": "$fullhd",
|
||||
"type": "variable",
|
||||
"computed_type": "computed",
|
||||
"computed_value": "1344px + (2 * $gap)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$container-offset"
|
||||
"$container-offset",
|
||||
"$container-max-width"
|
||||
],
|
||||
"file_path": "elements/container.sass"
|
||||
}
|
||||
@ -25,13 +25,33 @@
|
||||
"name": "$notification-padding",
|
||||
"value": "1.25rem 2.5rem 1.25rem 1.5rem",
|
||||
"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": [
|
||||
"$notification-background-color",
|
||||
"$notification-code-background-color",
|
||||
"$notification-radius",
|
||||
"$notification-padding"
|
||||
"$notification-padding",
|
||||
"$notification-padding-ltr",
|
||||
"$notification-padding-rtl",
|
||||
"$notification-colors"
|
||||
],
|
||||
"file_path": "elements/notification.sass"
|
||||
}
|
||||
@ -25,13 +25,21 @@
|
||||
"name": "$progress-indeterminate-duration",
|
||||
"value": "1.5s",
|
||||
"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": [
|
||||
"$progress-bar-background-color",
|
||||
"$progress-value-background-color",
|
||||
"$progress-border-radius",
|
||||
"$progress-indeterminate-duration"
|
||||
"$progress-indeterminate-duration",
|
||||
"$progress-colors"
|
||||
],
|
||||
"file_path": "elements/progress.sass"
|
||||
}
|
||||
@ -109,6 +109,13 @@
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"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": [
|
||||
@ -129,7 +136,8 @@
|
||||
"$table-row-active-background-color",
|
||||
"$table-row-active-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"
|
||||
}
|
||||
@ -25,13 +25,21 @@
|
||||
"name": "$tag-delete-margin",
|
||||
"value": "1px",
|
||||
"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": [
|
||||
"$tag-background-color",
|
||||
"$tag-color",
|
||||
"$tag-radius",
|
||||
"$tag-delete-margin"
|
||||
"$tag-delete-margin",
|
||||
"$tag-colors"
|
||||
],
|
||||
"file_path": "elements/tag.sass"
|
||||
}
|
||||
@ -63,6 +63,11 @@
|
||||
"name": "$file-name-max-width",
|
||||
"value": "16em",
|
||||
"type": "size"
|
||||
},
|
||||
"$file-colors": {
|
||||
"name": "$file-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -75,7 +80,8 @@
|
||||
"$file-name-border-color",
|
||||
"$file-name-border-style",
|
||||
"$file-name-border-width",
|
||||
"$file-name-max-width"
|
||||
"$file-name-max-width",
|
||||
"$file-colors"
|
||||
],
|
||||
"file_path": "form/file.sass"
|
||||
}
|
||||
@ -14,12 +14,18 @@
|
||||
"name": "$textarea-min-height",
|
||||
"value": "8em",
|
||||
"type": "size"
|
||||
},
|
||||
"$textarea-colors": {
|
||||
"name": "$textarea-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$textarea-padding",
|
||||
"$textarea-max-height",
|
||||
"$textarea-min-height"
|
||||
"$textarea-min-height",
|
||||
"$textarea-colors"
|
||||
],
|
||||
"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": {
|
||||
"$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": {
|
||||
"name": "$input-color",
|
||||
"value": "$text-strong",
|
||||
@ -130,6 +137,7 @@
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$form-colors",
|
||||
"$input-color",
|
||||
"$input-background-color",
|
||||
"$input-border-color",
|
||||
|
||||
@ -20,12 +20,18 @@
|
||||
"type": "variable",
|
||||
"computed_type": "size",
|
||||
"computed_value": "0.75rem"
|
||||
},
|
||||
"$label-colors": {
|
||||
"name": "$label-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$label-color",
|
||||
"$label-weight",
|
||||
"$help-size"
|
||||
"$help-size",
|
||||
"$label-colors"
|
||||
],
|
||||
"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",
|
||||
"value": "18rem 1.5rem",
|
||||
"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": [
|
||||
"$hero-body-padding",
|
||||
"$hero-body-padding-small",
|
||||
"$hero-body-padding-medium",
|
||||
"$hero-body-padding-large"
|
||||
"$hero-body-padding-large",
|
||||
"$hero-colors"
|
||||
],
|
||||
"file_path": "layout/hero.sass"
|
||||
}
|
||||
@ -311,10 +311,8 @@
|
||||
},
|
||||
"$code": {
|
||||
"name": "$code",
|
||||
"value": "$red",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(348, 86%, 61%)"
|
||||
"value": "darken($red, 15%)",
|
||||
"type": "compound"
|
||||
},
|
||||
"$code-background": {
|
||||
"name": "$code-background",
|
||||
|
||||
@ -249,6 +249,11 @@
|
||||
"name": "$variable-columns",
|
||||
"value": "true",
|
||||
"type": "boolean"
|
||||
},
|
||||
"$rtl": {
|
||||
"name": "$rtl",
|
||||
"value": "false",
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -301,7 +306,8 @@
|
||||
"$radius-large",
|
||||
"$radius-rounded",
|
||||
"$speed",
|
||||
"$variable-columns"
|
||||
"$variable-columns",
|
||||
"$rtl"
|
||||
],
|
||||
"file_path": "utilities/initial-variables.sass"
|
||||
}
|
||||
@ -13,11 +13,6 @@
|
||||
</a>
|
||||
<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>
|
||||
{% if category_link.name == 'Helpers' %}
|
||||
<span class="tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
@ -27,6 +22,11 @@
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
{% if link.new %}
|
||||
<span class="ml-1 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
icon=link.icon
|
||||
name=link.name
|
||||
subtitle=link.subtitle
|
||||
new=link.new
|
||||
%}
|
||||
{% endfor %}
|
||||
</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>
|
||||
{% endif %}
|
||||
</figure>
|
||||
{% if include.new %}
|
||||
<span style="float: right;" class="ml-2 tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
{{ include.name }}
|
||||
</h2>
|
||||
<p class="bd-link-subtitle">
|
||||
|
||||
@ -10,9 +10,12 @@
|
||||
class="bd-sponsor-item"
|
||||
href="{{ sponsor.url }}"
|
||||
target="_blank"
|
||||
{% unless sponsor.follow %}
|
||||
{% unless sponsor.follow or sponsor.noopener %}
|
||||
rel="nofollow"
|
||||
{% endunless %}
|
||||
{% if sponsor.noopener %}
|
||||
rel="noopener"
|
||||
{% endif %}
|
||||
title="{{ sponsor_alt }}"
|
||||
>
|
||||
{% if sponsor.textOnly %}
|
||||
|
||||
@ -72,6 +72,11 @@ route: documentation
|
||||
<li {% if link_id == current_link_id %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
{% if link.new %}
|
||||
<span class="ml-2 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% 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:
|
||||
|
||||
* `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:
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ $bd-partner-width: 12rem
|
||||
justify-content: space-around
|
||||
justify-content: center
|
||||
margin: 0 auto
|
||||
max-width: (8 * $bd-partner-width)
|
||||
// max-width: (8 * $bd-partner-width)
|
||||
|
||||
.bd-partner-sponsor
|
||||
align-items: stretch
|
||||
@ -120,9 +120,9 @@ $bd-partnrs-4: 1130px
|
||||
width: $bd-partner-width
|
||||
|
||||
+widescreen
|
||||
.bd-partnrs
|
||||
.container
|
||||
max-width: 1536px
|
||||
// .bd-partnrs
|
||||
// .container
|
||||
// max-width: 1536px
|
||||
.bd-partner
|
||||
&.bd-is-carbon
|
||||
margin-left: 3rem
|
||||
|
||||
@ -34,6 +34,7 @@ breadcrumb:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if site.data.backers["500"].size > 0 or site.data.github["500"].size > 0 %}
|
||||
<h2 class="title is-5">
|
||||
Documentation sponsors ($500+)
|
||||
</h2>
|
||||
@ -49,6 +50,7 @@ breadcrumb:
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="title is-5">
|
||||
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:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture box_example %}
|
||||
|
||||
@ -31,6 +31,7 @@ meta:
|
||||
<button class="button is-dark">Dark</button>
|
||||
<button class="button is-black">Black</button>
|
||||
<button class="button is-text">Text</button>
|
||||
<button class="button is-ghost">Ghost</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors_b_example %}
|
||||
|
||||
@ -55,7 +55,7 @@ meta:
|
||||
{% capture notification_js_code %}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
||||
$notification = $delete.parentNode;
|
||||
var $notification = $delete.parentNode;
|
||||
|
||||
$delete.addEventListener('click', () => {
|
||||
$notification.parentNode.removeChild($notification);
|
||||
|
||||
@ -370,7 +370,7 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
@ -178,7 +178,7 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
<ul>
|
||||
<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>Prevents the text from being <strong>selectable</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-clickable</code></td>
|
||||
<td>Applies <code>cursor: pointer !important</code> to the element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-relative</code></td>
|
||||
<td>Applies <code>position: relative</code> to the element.</td>
|
||||
|
||||
@ -9,19 +9,23 @@ breadcrumb:
|
||||
- documentation
|
||||
- layout
|
||||
- layout-container
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture container_example %}
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
This container is <strong>centered</strong> on desktop.
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>centered</strong> on desktop and larger viewports.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_fluid_example %}
|
||||
<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
|
||||
viewport size.
|
||||
</div>
|
||||
@ -30,7 +34,7 @@ breadcrumb:
|
||||
|
||||
{% capture container_widescreen_example %}
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
@ -38,22 +42,137 @@ breadcrumb:
|
||||
|
||||
{% capture container_fullhd_example %}
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
{% 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">
|
||||
<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>
|
||||
<li><code>navbar</code></li>
|
||||
<li><code>hero</code></li>
|
||||
<li><code>section</code></li>
|
||||
<li><code>footer</code></li>
|
||||
</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>
|
||||
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>
|
||||
32px</code> but can be modified.
|
||||
</p>
|
||||
@ -68,7 +187,7 @@ breadcrumb:
|
||||
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
@ -76,24 +195,8 @@ breadcrumb:
|
||||
|
||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||
|
||||
{% 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">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Breakpoint containers" %}
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Widescreen or FullHD only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -103,7 +206,7 @@ breadcrumb:
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
|
||||
@ -113,10 +216,81 @@ breadcrumb:
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{ container_fullhd_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% 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": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
|
||||
"dev": true
|
||||
},
|
||||
"log-symbols": {
|
||||
|
||||
@ -2346,9 +2346,9 @@ locate-path@^5.0.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:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
version "4.17.20"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||
|
||||
log-symbols@^2.2.0:
|
||||
version "2.2.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.9.0",
|
||||
"version": "0.9.1",
|
||||
"homepage": "https://bulma.io",
|
||||
"author": {
|
||||
"name": "Jeremy Thomas",
|
||||
|
||||
@ -83,6 +83,7 @@ section
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
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-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-radius: 0 !default
|
||||
$card-radius: 0.25rem !default
|
||||
|
||||
$card-header-background-color: transparent !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-media-margin: #{$card-media-margin}
|
||||
background-color: var(--card-background-color)
|
||||
border-radius: var(--card-radius)
|
||||
box-shadow: var(--card-shadow)
|
||||
color: var(--card-color)
|
||||
max-width: 100%
|
||||
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
|
||||
@extend %card-item
|
||||
background-color: var(--card-header-background-color)
|
||||
align-items: stretch
|
||||
box-shadow: var(--card-header-shadow)
|
||||
@ -73,12 +81,22 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
|
||||
.card-image
|
||||
display: block
|
||||
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
|
||||
@extend %card-item
|
||||
background-color: var(--card-content-background-color)
|
||||
padding: var(--card-content-padding)
|
||||
|
||||
.card-footer
|
||||
@extend %card-item
|
||||
background-color: var(--card-footer-background-color)
|
||||
border-top: var(--card-footer-border-top)
|
||||
align-items: stretch
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
|
||||
$media-spacing: 1rem
|
||||
$media-spacing-large: 1.5rem
|
||||
$media-border-size: 1px !default
|
||||
$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-border-color: #{$media-border-color}
|
||||
@ -10,22 +15,22 @@ $media-spacing-large: 1.5rem
|
||||
display: flex
|
||||
text-align: inherit
|
||||
.content:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
margin-bottom: $media-content-spacing
|
||||
.media
|
||||
border-top: 1px solid var(--media-border-color)
|
||||
display: flex
|
||||
padding-top: 0.75rem
|
||||
padding-top: $media-level-1-spacing
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
margin-bottom: $media-level-1-content-spacing
|
||||
.media
|
||||
padding-top: 0.5rem
|
||||
padding-top: $media-level-2-spacing
|
||||
& + .media
|
||||
margin-top: 0.5rem
|
||||
margin-top: $media-level-2-spacing
|
||||
& + .media
|
||||
border-top: 1px solid var(--media-border-color)
|
||||
margin-top: var(--media-spacing)
|
||||
padding-top: var(--media-spacing)
|
||||
border-top: $media-border-size solid $media-border-color
|
||||
margin-top: $media-spacing
|
||||
padding-top: $media-spacing
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .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-padding: 20px !default
|
||||
|
||||
$modal-breakpoint: $tablet !default
|
||||
|
||||
.modal
|
||||
--modal-z: #{$modal-z}
|
||||
--modal-background-background-color: #{$modal-background-background-color}
|
||||
@ -76,7 +78,7 @@ $modal-card-body-padding: 20px !default
|
||||
position: relative
|
||||
width: 100%
|
||||
// Responsiveness
|
||||
+tablet
|
||||
+from($modal-breakpoint)
|
||||
margin: 0 auto
|
||||
max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
|
||||
width: var(--modal-content-width)
|
||||
|
||||
@ -25,8 +25,15 @@ $button-text-decoration: underline !default
|
||||
$button-text-hover-background-color: $background !default
|
||||
$button-text-hover-color: var(--text-strong, #{$text-strong}) !default
|
||||
|
||||
$button-disabled-background-color: var(--scheme-main, #{$scheme-main}) !default
|
||||
$button-disabled-border-color: var(--border, #{$border}) !default
|
||||
$button-ghost-background: none !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-opacity: 0.5 !default
|
||||
|
||||
@ -146,6 +153,15 @@ $button-colors: $colors !default
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
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
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
$container-offset: (2 * $gap) !default
|
||||
$container-max-width: $fullhd !default
|
||||
|
||||
.container
|
||||
flex-grow: 1
|
||||
@ -6,19 +7,21 @@ $container-offset: (2 * $gap) !default
|
||||
position: relative
|
||||
width: auto
|
||||
&.is-fluid
|
||||
max-width: none
|
||||
max-width: none !important
|
||||
padding-left: $gap
|
||||
padding-right: $gap
|
||||
width: 100%
|
||||
+desktop
|
||||
max-width: $desktop - $container-offset
|
||||
+until-widescreen
|
||||
&.is-widescreen
|
||||
max-width: $widescreen - $container-offset
|
||||
&.is-widescreen:not(.is-max-desktop)
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||
+until-fullhd
|
||||
&.is-fullhd
|
||||
max-width: $fullhd - $container-offset
|
||||
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||
+widescreen
|
||||
max-width: $widescreen - $container-offset
|
||||
&:not(.is-max-desktop)
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||
+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
|
||||
.columns.is-mobile > &.is-narrow
|
||||
flex: none
|
||||
width: unset
|
||||
.columns.is-mobile > &.is-full
|
||||
flex: none
|
||||
width: 100%
|
||||
@ -39,32 +40,33 @@ $column-gap: 0.75rem !default
|
||||
flex: none
|
||||
width: 80%
|
||||
.columns.is-mobile > &.is-offset-three-quarters
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
.columns.is-mobile > &.is-offset-two-thirds
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
.columns.is-mobile > &.is-offset-half
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
.columns.is-mobile > &.is-offset-one-third
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
.columns.is-mobile > &.is-offset-one-quarter
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
.columns.is-mobile > &.is-offset-one-fifth
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
.columns.is-mobile > &.is-offset-two-fifths
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
.columns.is-mobile > &.is-offset-three-fifths
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
.columns.is-mobile > &.is-offset-four-fifths
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
.columns.is-mobile > &.is-#{$i}
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
.columns.is-mobile > &.is-offset-#{$i}
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
+mobile
|
||||
&.is-narrow-mobile
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-mobile
|
||||
flex: none
|
||||
width: 100%
|
||||
@ -96,33 +98,34 @@ $column-gap: 0.75rem !default
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-mobile
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-mobile
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-mobile
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-mobile
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-mobile
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-mobile
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-mobile
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-mobile
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-mobile
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-mobile
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-mobile
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
+tablet
|
||||
&.is-narrow,
|
||||
&.is-narrow-tablet
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full,
|
||||
&.is-full-tablet
|
||||
flex: none
|
||||
@ -165,31 +168,31 @@ $column-gap: 0.75rem !default
|
||||
width: 80%
|
||||
&.is-offset-three-quarters,
|
||||
&.is-offset-three-quarters-tablet
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds,
|
||||
&.is-offset-two-thirds-tablet
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half,
|
||||
&.is-offset-half-tablet
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third,
|
||||
&.is-offset-one-third-tablet
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter,
|
||||
&.is-offset-one-quarter-tablet
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth,
|
||||
&.is-offset-one-fifth-tablet
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths,
|
||||
&.is-offset-two-fifths-tablet
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths,
|
||||
&.is-offset-three-fifths-tablet
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths,
|
||||
&.is-offset-four-fifths-tablet
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i},
|
||||
&.is-#{$i}-tablet
|
||||
@ -197,10 +200,11 @@ $column-gap: 0.75rem !default
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i},
|
||||
&.is-offset-#{$i}-tablet
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
+touch
|
||||
&.is-narrow-touch
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-touch
|
||||
flex: none
|
||||
width: 100%
|
||||
@ -232,32 +236,33 @@ $column-gap: 0.75rem !default
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-touch
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-touch
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-touch
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-touch
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-touch
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-touch
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-touch
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-touch
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-touch
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-touch
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-touch
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
+desktop
|
||||
&.is-narrow-desktop
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-desktop
|
||||
flex: none
|
||||
width: 100%
|
||||
@ -289,32 +294,33 @@ $column-gap: 0.75rem !default
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-desktop
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-desktop
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-desktop
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-desktop
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-desktop
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-desktop
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-desktop
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-desktop
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-desktop
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-desktop
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-desktop
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
+widescreen
|
||||
&.is-narrow-widescreen
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-widescreen
|
||||
flex: none
|
||||
width: 100%
|
||||
@ -346,32 +352,33 @@ $column-gap: 0.75rem !default
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-widescreen
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-widescreen
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-widescreen
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-widescreen
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-widescreen
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-widescreen
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-widescreen
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-widescreen
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-widescreen
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-widescreen
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-widescreen
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
+fullhd
|
||||
&.is-narrow-fullhd
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-fullhd
|
||||
flex: none
|
||||
width: 100%
|
||||
@ -403,33 +410,33 @@ $column-gap: 0.75rem !default
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-fullhd
|
||||
margin-left: 75%
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-fullhd
|
||||
margin-left: 66.6666%
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-fullhd
|
||||
margin-left: 50%
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-fullhd
|
||||
margin-left: 33.3333%
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-fullhd
|
||||
margin-left: 25%
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-fullhd
|
||||
margin-left: 20%
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-fullhd
|
||||
margin-left: 40%
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-fullhd
|
||||
margin-left: 60%
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-fullhd
|
||||
margin-left: 80%
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-fullhd
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-fullhd
|
||||
margin-left: percentage($i / 12)
|
||||
+ltr-property("margin", percentage($i / 12), false)
|
||||
|
||||
.columns
|
||||
margin-left: (-$column-gap)
|
||||
margin-right: (-$column-gap)
|
||||
+ltr-property("margin", (-$column-gap), false)
|
||||
+ltr-property("margin", (-$column-gap))
|
||||
margin-top: (-$column-gap)
|
||||
&:last-child
|
||||
margin-bottom: (-$column-gap)
|
||||
@ -439,8 +446,8 @@ $column-gap: 0.75rem !default
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-gapless
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
+ltr-property("margin", 0, false)
|
||||
+ltr-property("margin", 0)
|
||||
margin-top: 0
|
||||
& > .column
|
||||
margin: 0
|
||||
@ -467,9 +474,9 @@ $column-gap: 0.75rem !default
|
||||
@if $variable-columns
|
||||
.columns.is-variable
|
||||
--columnGap: 0.75rem
|
||||
margin-left: calc(-1 * var(--columnGap))
|
||||
margin-right: calc(-1 * var(--columnGap))
|
||||
.column
|
||||
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
|
||||
+ltr-property("margin", calc(-1 * var(--columnGap)))
|
||||
> .column
|
||||
padding-left: var(--columnGap)
|
||||
padding-right: var(--columnGap)
|
||||
@for $i from 0 through 8
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
$flex-directions-values: row, row-reverse, column, column-reverse
|
||||
@each $value in $flex-directions-values
|
||||
$flex-direction-values: row, row-reverse, column, column-reverse
|
||||
@each $value in $flex-direction-values
|
||||
.is-flex-direction-#{$value}
|
||||
flex-direction: $value !important
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
.is-clickable
|
||||
cursor: pointer !important
|
||||
pointer-events: all !important
|
||||
|
||||
.is-unselectable
|
||||
@extend %unselectable
|
||||
|
||||
@ -991,9 +991,9 @@ locate-path@^5.0.0:
|
||||
p-locate "^4.1.0"
|
||||
|
||||
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.15, lodash@~4.17.12:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
version "4.17.20"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||
|
||||
log-symbols@^2.2.0:
|
||||
version "2.2.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user