+
{{ container_fullhd_example }}
{% 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" %}
+
+
+
+ Sometimes, you might want a narrow container on larger viewports. That's why Bulma provides 2 modifiers:
+
+
+ -
+
.container.is-max-desktop will behave like a desktop container
+
+ -
+
.container.is-max-widescreen will behave like a widescreen container
+
+
+
+
+{% include layout/main-close.html %}
+
+
+ {{ container_max_desktop_example }}
+
+
+{% include layout/main-open.html %}
+
+{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
+
+{% include layout/main-close.html %}
+
+
+ {{ container_max_widescreen_example }}
+
+
+{% include layout/main-open.html %}
+
+{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
+
+
+{% include elements/anchor.html name="Absolute maximum width" %}
+
+
+
+ If you want to change the maximum width of all containers, you can do so by updating the values of the $container-max-width Sass variable.
+
+
+ By default, the $fullhd breakpoint value is used to calculate the absolute maximum width of the container. Simply change it to a smaller value like $widescreen, $desktop, or any value in pixels.
+
+
+
+
+{% include elements/anchor.html name="Fluid container" %}
+
+
+
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 is-fluid modifier:
+
+
+{% include layout/main-close.html %}
+
+
+ {{container_fluid_example}}
+
+
+{% include layout/main-open.html %}
+
+{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
+
+{% include elements/variables.html type='element' data=site.data.variables.elements.container %}
diff --git a/docs/images/amis/dfds.png b/docs/images/amis/dfds.png
new file mode 100644
index 00000000..c989be30
Binary files /dev/null and b/docs/images/amis/dfds.png differ
diff --git a/docs/images/amis/dfds@2x.png b/docs/images/amis/dfds@2x.png
new file mode 100644
index 00000000..3bf68e7f
Binary files /dev/null and b/docs/images/amis/dfds@2x.png differ
diff --git a/docs/images/amis/rajbet.png b/docs/images/amis/rajbet.png
new file mode 100644
index 00000000..e4289e7a
Binary files /dev/null and b/docs/images/amis/rajbet.png differ
diff --git a/docs/images/amis/rajbet@2x.png b/docs/images/amis/rajbet@2x.png
new file mode 100644
index 00000000..507373b7
Binary files /dev/null and b/docs/images/amis/rajbet@2x.png differ
diff --git a/docs/images/amis/vpnreview.png b/docs/images/amis/vpnreview.png
new file mode 100644
index 00000000..b30397ac
Binary files /dev/null and b/docs/images/amis/vpnreview.png differ
diff --git a/docs/images/amis/vpnreview@2x.png b/docs/images/amis/vpnreview@2x.png
new file mode 100644
index 00000000..7c9c9a2a
Binary files /dev/null and b/docs/images/amis/vpnreview@2x.png differ
diff --git a/docs/images/twitter/ale_codes.jpg b/docs/images/twitter/ale_codes.jpg
new file mode 100644
index 00000000..f8df79e6
Binary files /dev/null and b/docs/images/twitter/ale_codes.jpg differ
diff --git a/docs/package-lock.json b/docs/package-lock.json
index cab9d1d0..81f91ede 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -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": {
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 0521f7fc..dbbf3a66 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -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"
diff --git a/package.json b/package.json
index 0659fec3..376e1d45 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "bulma",
- "version": "0.9.0",
+ "version": "0.9.1",
"homepage": "https://bulma.io",
"author": {
"name": "Jeremy Thomas",
diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index 9e498614..6bb31120 100644
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -83,6 +83,7 @@ section
body,
button,
input,
+optgroup,
select,
textarea
font-family: var(--body-family)
diff --git a/sass/components/card.sass b/sass/components/card.sass
index 99a5aaee..233a64ef 100644
--- a/sass/components/card.sass
+++ b/sass/components/card.sass
@@ -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
diff --git a/sass/components/media.sass b/sass/components/media.sass
index 1fa249cc..15cd1d51 100644
--- a/sass/components/media.sass
+++ b/sass/components/media.sass
@@ -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
diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index 64306242..84ea8b57 100644
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -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)
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index c65edda1..34bb76e4 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -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)
diff --git a/sass/elements/container.sass b/sass/elements/container.sass
index d88eb94a..e7c00f3e 100644
--- a/sass/elements/container.sass
+++ b/sass/elements/container.sass
@@ -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
diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 34a83533..af365864 100644
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -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
diff --git a/sass/helpers/flexbox.sass b/sass/helpers/flexbox.sass
index 5dee0787..2538a2db 100644
--- a/sass/helpers/flexbox.sass
+++ b/sass/helpers/flexbox.sass
@@ -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
diff --git a/sass/helpers/other.sass b/sass/helpers/other.sass
index e8bb93de..cb7c4cd6 100644
--- a/sass/helpers/other.sass
+++ b/sass/helpers/other.sass
@@ -6,6 +6,7 @@
.is-clickable
cursor: pointer !important
+ pointer-events: all !important
.is-unselectable
@extend %unselectable
diff --git a/yarn.lock b/yarn.lock
index dd364719..d2aea352 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"