Add $container-offset variable

This commit is contained in:
Jeremy Thomas 2017-07-31 20:22:27 +01:00
parent 915d0b4a15
commit d14a703b5e
5 changed files with 611 additions and 1856 deletions

View File

@ -4,7 +4,8 @@
### New features ### New features
* #280 [File upload element](http://bulma.io/documentation/form/file/) * 🎉 #280 [File upload element](http://bulma.io/documentation/form/file/)
* `$container-offset` variable to determine the `.container` breakpoints
### Issues closed ### Issues closed
@ -16,7 +17,7 @@
### New features ### New features
* [List of tags](http://bulma.io/documentation/elements/tag/#list-of-tags) * 🎉 [List of tags](http://bulma.io/documentation/elements/tag/#list-of-tags)
* New **variable naming system**: `component`-`subcomponent`-`state`-`property` * New **variable naming system**: `component`-`subcomponent`-`state`-`property`
* Improved **customization** thanks to new set of variables * Improved **customization** thanks to new set of variables
* #934 New `.is-shadowless` helper * #934 New `.is-shadowless` helper

View File

@ -9,10 +9,4 @@ icon: "undo"
It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/) It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/)
<figure>
<a href="/versions/">
<img src="/images/blog/bulma-previous-versions.png" alt="Previous versions of Bulma" width="520" height="240">
</a>
</figure>
While only version [0.4.4](http://bulma.io/versions/0.4.4) is accessible now, each **new release** will remain available forever. While only version [0.4.4](http://bulma.io/versions/0.4.4) is accessible now, each **new release** will remain available forever.

View File

@ -69,5 +69,6 @@
top: 0 top: 0
& > a & > a
margin: 0 margin: 0
width: calc(50% - 1rem)
&:not(:nth-child(2)) &:not(:nth-child(2))
margin-left: 2rem margin-left: 2rem

File diff suppressed because one or more lines are too long

View File

@ -1,31 +1,33 @@
.block .block
+block +block
$container-offset: 60px !default
.container .container
margin: 0 auto margin: 0 auto
position: relative position: relative
+desktop +from($desktop + $container-offset)
max-width: $desktop - (2 * $gap) max-width: $desktop - (2 * $gap)
// width: $desktop - (2 * $gap) width: $desktop - (2 * $gap)
&.is-fluid &.is-fluid
margin-left: $gap margin-left: $gap
margin-right: $gap margin-right: $gap
max-width: none max-width: none
// width: auto width: auto
+until($widescreen) +until($widescreen + $container-offset)
&.is-widescreen &.is-widescreen
max-width: $widescreen - (2 * $gap) max-width: $widescreen - (2 * $gap)
// width: auto width: auto
+until($fullhd) +until($fullhd + $container-offset)
&.is-fullhd &.is-fullhd
max-width: $fullhd - (2 * $gap) max-width: $fullhd - (2 * $gap)
// width: auto width: auto
+widescreen +from($widescreen + $container-offset)
max-width: $widescreen - (2 * $gap) max-width: $widescreen - (2 * $gap)
// width: $widescreen - (2 * $gap) width: $widescreen - (2 * $gap)
+fullhd +from($fullhd + $container-offset)
max-width: $fullhd - (2 * $gap) max-width: $fullhd - (2 * $gap)
// width: $fullhd - (2 * $gap) width: $fullhd - (2 * $gap)
.delete .delete
+delete +delete