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

feat: improve rtl support

Browse Source
This commit is contained in:
Sacha STAFYNIAK 2023-04-30 22:02:28 +02:00
parent 3958430d1b
commit dbe1e5746e
23 changed files with 169 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sass/components/breadcrumb.sass
View File

@ -26,7 +26,7 @@ $breadcrumb-item-separator-color: $border-hover !default
align-items: center
display: flex
&:first-child a
+ltr-property("padding", 0, false)
padding-inline-start: 0
&.is-active
a
color: $breadcrumb-item-active-color
@ -43,9 +43,9 @@ $breadcrumb-item-separator-color: $border-hover !default
justify-content: flex-start
.icon
&:first-child
+ltr-property("margin", 0.5em)
margin-inline-end: 0.5em
&:last-child
+ltr-property("margin", 0.5em, false)
margin-inline-start: 0.5em
// Alignment
&.is-centered
ol,

2
sass/components/card.sass
View File

@ -94,7 +94,7 @@ $card-media-margin: $block-spacing !default
justify-content: center
padding: $card-footer-padding
&:not(:last-child)
+ltr-property("border", $card-footer-border-top)
border-inline-end-width: $card-footer-border-top
// Combinations

4
sass/components/dropdown.sass
View File

@ -40,7 +40,7 @@ $dropdown-divider-background-color: $border-light !default
.dropdown-menu
display: none
+ltr-position(0, false)
inset-inline-start: 0
min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset
position: absolute
@ -64,7 +64,7 @@ $dropdown-divider-background-color: $border-light !default
a.dropdown-item,
button.dropdown-item
+ltr-property("padding", 3rem)
padding-inline-end: 3rem
text-align: inherit
white-space: nowrap
width: 100%

4
sass/components/level.sass
View File

@ -22,7 +22,7 @@ $level-item-spacing: ($block-spacing * 0.5) !default
.level-item
&:not(:last-child)
margin-bottom: 0
+ltr-property("margin", $level-item-spacing)
margin-inline-end: $level-item-spacing
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
@ -59,7 +59,7 @@ $level-item-spacing: ($block-spacing * 0.5) !default
// Responsiveness
+tablet
&:not(:last-child)
+ltr-property("margin", $level-item-spacing)
margin-inline-end: $level-item-spacing
.level-left
align-items: center

4
sass/components/media.sass
View File

@ -43,10 +43,10 @@ $media-level-2-spacing: 0.5rem !default
flex-shrink: 0
.media-left
+ltr-property("margin", $media-spacing)
margin-inline-end: $media-spacing
.media-right
+ltr-property("margin", $media-spacing, false)
margin-inline-start: $media-spacing
.media-content
flex-basis: auto

4
sass/components/menu.sass
View File

@ -44,9 +44,9 @@ $menu-label-spacing: 1em !default
color: $menu-item-active-color
li
ul
+ltr-property("border", $menu-list-border-left, false)
border-inline-start-width: $menu-list-border-left
margin: $menu-nested-list-margin
+ltr-property("padding", $menu-nested-list-padding-left, false)
padding-inline-start: $menu-nested-list-padding-left
.menu-label
color: $menu-label-color

2
sass/components/message.sass
View File

@ -81,7 +81,7 @@ $message-colors: $colors !default
.delete
flex-grow: 0
flex-shrink: 0
+ltr-property("margin", 0.75em, false)
margin-inline-start: 0.75em
& + .message-body
border-width: $message-header-body-border-width
border-top-left-radius: 0

4
sass/components/modal.sass
View File

@ -67,7 +67,7 @@ $modal-breakpoint: $tablet !default
background: none
height: $modal-close-dimensions
position: fixed
+ltr-position($modal-close-right)
inset-inline-end: $modal-close-right
top: $modal-close-top
width: $modal-close-dimensions
@ -106,7 +106,7 @@ $modal-breakpoint: $tablet !default
border-top: $modal-card-foot-border-top
.button
&:not(:last-child)
+ltr-property("margin", 0.5em)
margin-inline-end: 0.5em
.modal-card-body
+overflow-touch

18
sass/components/navbar.sass
View File

@ -156,7 +156,7 @@ body
@extend %reset
color: $navbar-burger-color
+hamburger($navbar-height)
+ltr-property("margin", auto, false)
margin-inline-start: auto
.navbar-menu
display: none
@ -214,12 +214,12 @@ a.navbar-item,
flex-shrink: 1
.navbar-link:not(.is-arrowless)
+ltr-property("padding", 2.5em)
padding-inline-end: 2.5em
&::after
@extend %arrow
border-color: $navbar-dropdown-arrow
margin-top: -0.375em
+ltr-position(1.125em)
inset-inline-end: 1.125em
.navbar-dropdown
font-size: 0.875rem
@ -352,10 +352,10 @@ a.navbar-item,
flex-shrink: 0
.navbar-start
justify-content: flex-start
+ltr-property("margin", auto)
margin-inline-end: auto
.navbar-end
justify-content: flex-end
+ltr-property("margin", auto, false)
margin-inline-start: auto
.navbar-dropdown
background-color: $navbar-dropdown-background-color
border-bottom-left-radius: $navbar-dropdown-radius
@ -364,7 +364,7 @@ a.navbar-item,
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
+ltr-position(0, false)
inset-inline-start: 0
min-width: 100%
position: absolute
top: 100%
@ -373,7 +373,7 @@ a.navbar-item,
padding: 0.375rem 1rem
white-space: nowrap
a.navbar-item
+ltr-property("padding", 3rem)
padding-inline-end: 3rem
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
@ -401,9 +401,9 @@ a.navbar-item,
.navbar > .container,
.container > .navbar
.navbar-brand
+ltr-property("margin", -.75rem, false)
margin-inline-start: -.75rem
.navbar-menu
+ltr-property("margin", -.75rem)
margin-inline-end: -.75rem
// Fixed navbar
.navbar
&.is-fixed-bottom-desktop,

4
sass/components/panel.sass
View File

@ -90,7 +90,7 @@ $panel-colors: $colors !default
justify-content: flex-start
padding: 0.5em 0.75em
input[type="checkbox"]
+ltr-property("margin", 0.75em)
margin-inline-end: 0.75em
& > .control
flex-grow: 1
flex-shrink: 1
@ -115,7 +115,7 @@ label.panel-block
.panel-icon
+fa(14px, 1em)
color: $panel-icon-color
+ltr-property("margin", 0.75em)
margin-inline-end: 0.75em
.fa
font-size: inherit
line-height: inherit

50
sass/components/tabs.sass
View File

@ -80,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
padding-left: 0.75em
.icon
&:first-child
+ltr-property("margin", 0.5em)
margin-inline-end: 0.5em
&:last-child
+ltr-property("margin", 0.5em, false)
margin-inline-start: 0.5em
// Alignment
&.is-centered
ul
@ -94,10 +94,8 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-boxed
a
border: 1px solid transparent
+ltr
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+rtl
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
border-start-start-radius: $tabs-boxed-link-radius
border-start-end-radius: $tabs-boxed-link-radius
&:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@ -124,21 +122,13 @@ $tabs-toggle-link-active-color: $link-invert !default
z-index: 2
li
& + li
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
margin-inline-start: -#{$tabs-toggle-link-border-width}
&:first-child a
+ltr
border-top-left-radius: $tabs-toggle-link-radius
border-bottom-left-radius: $tabs-toggle-link-radius
+rtl
border-top-right-radius: $tabs-toggle-link-radius
border-bottom-right-radius: $tabs-toggle-link-radius
border-start-start-radius: $tabs-toggle-link-radius
border-end-start-radius: $tabs-toggle-link-radius
&:last-child a
+ltr
border-top-right-radius: $tabs-toggle-link-radius
border-bottom-right-radius: $tabs-toggle-link-radius
+rtl
border-top-left-radius: $tabs-toggle-link-radius
border-bottom-left-radius: $tabs-toggle-link-radius
border-start-end-radius: $tabs-toggle-link-radius
border-end-end-radius: $tabs-toggle-link-radius
&.is-active
a
background-color: $tabs-toggle-link-active-background-color
@ -150,23 +140,13 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-toggle-rounded
li
&:first-child a
+ltr
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
+rtl
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
border-end-start-radius: $radius-rounded
border-start-start-radius: $radius-rounded
padding-start: 1.25em
&:last-child a
+ltr
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
+rtl
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
border-end-end-radius: $radius-rounded
border-start-end-radius: $radius-rounded
padding-end: 1.25em
// Sizes
&.is-small
font-size: $size-small

14
sass/elements/button.sass
View File

@ -85,11 +85,11 @@ $button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": (
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+ltr-property("margin", $button-padding-horizontal * 0.25)
margin-inline-start: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
margin-inline-end: $button-padding-horizontal * 0.25
&:last-child:not(:first-child)
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
margin-inline-start: $button-padding-horizontal * 0.25
margin-inline-end: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
&:first-child:last-child
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
@ -292,7 +292,7 @@ $button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": (
.button
margin-bottom: 0.5rem
&:not(:last-child):not(.is-fullwidth)
+ltr-property("margin", 0.5rem)
margin-inline-end: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
@ -315,9 +315,9 @@ $button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": (
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
+ltr-property("margin", -1px)
margin-inline-end: -1px
&:last-child
+ltr-property("margin", 0)
margin-inline-end: 0
&:hover,
&.is-hovered
z-index: 2

8
sass/elements/content.sass
View File

@ -72,11 +72,11 @@ $content-table-foot-cell-color: $text-strong !default
margin-bottom: 1em
blockquote
background-color: $content-blockquote-background-color
+ltr-property("border", $content-blockquote-border-left, false)
border-inline-start-width: $content-blockquote-border-left
padding: $content-blockquote-padding
ol
list-style-position: outside
+ltr-property("margin", 2em, false)
margin-inline-start: 2em
margin-top: 1em
&:not([type])
list-style-type: decimal
@ -90,7 +90,7 @@ $content-table-foot-cell-color: $text-strong !default
list-style-type: upper-roman
ul
list-style: disc outside
+ltr-property("margin", 2em, false)
margin-inline-start: 2em
margin-top: 1em
ul
list-style-type: circle
@ -98,7 +98,7 @@ $content-table-foot-cell-color: $text-strong !default
ul
list-style-type: square
dd
+ltr-property("margin", 2em, false)
margin-inline-start: 2em
figure
margin-left: 2em
margin-right: 2em

10
sass/elements/icon.sass
View File

@ -32,15 +32,9 @@ $icon-text-spacing: 0.25em !default
flex-grow: 0
flex-shrink: 0
&:not(:last-child)
+ltr
margin-right: $icon-text-spacing
+rtl
margin-left: $icon-text-spacing
margin-end: $icon-text-spacing
&:not(:first-child)
+ltr
margin-left: $icon-text-spacing
+rtl
margin-right: $icon-text-spacing
margin-start: $icon-text-spacing
div.icon-text
display: flex

15
sass/elements/notification.sass
View File

@ -3,9 +3,8 @@
$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
$notification-padding: 1.25rem !default
$notification-padding-end: 2.5rem !default
$notification-colors: $colors !default
@ -14,10 +13,10 @@ $notification-colors: $colors !default
background-color: $notification-background-color
border-radius: $notification-radius
position: relative
+ltr
padding: $notification-padding-ltr
+rtl
padding: $notification-padding-rtl
padding-top: $notification-padding
padding-bottom: $notification-padding
padding-inline-start: $notification-padding
padding-inline-end: $notification-padding-end
a:not(.button):not(.dropdown-item)
color: currentColor
text-decoration: underline
@ -29,7 +28,7 @@ $notification-colors: $colors !default
pre code
background: transparent
& > .delete
+ltr-position(0.5rem)
inset-inline-end: 0.5rem
position: absolute
top: 0.5rem
.title,

40
sass/elements/tag.sass
View File

@ -15,7 +15,7 @@ $tag-colors: $colors !default
.tag
margin-bottom: 0.5rem
&:not(:last-child)
+ltr-property("margin", 0.5rem)
margin-inline-end: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
@ -41,22 +41,14 @@ $tag-colors: $colors !default
margin-right: 0
&.has-addons
.tag
+ltr-property("margin", 0)
margin-inline-end: 0
&:not(:first-child)
+ltr-property("margin", 0, false)
+ltr
border-top-left-radius: 0
border-bottom-left-radius: 0
+rtl
border-top-right-radius: 0
border-bottom-right-radius: 0
margin-inline-start: 0
border-start-start-radius: 0
border-end-start-radius: 0
&:not(:last-child)
+ltr
border-top-right-radius: 0
border-bottom-right-radius: 0
+rtl
border-top-left-radius: 0
border-bottom-left-radius: 0
border-start-end-radius: 0
border-end-end-radius: 0
.tag:not(body)
align-items: center
@ -72,8 +64,8 @@ $tag-colors: $colors !default
padding-right: 0.75em
white-space: nowrap
.delete
+ltr-property("margin", 0.25rem, false)
+ltr-property("margin", -0.375rem)
margin-inline-start: 0.25rem
margin-inline-end: -0.375rem
// Colors
@each $name, $pair in $tag-colors
$color: nth($pair, 1)
@ -97,17 +89,17 @@ $tag-colors: $colors !default
font-size: $size-medium
.icon
&:first-child:not(:last-child)
+ltr-property("margin", -0.375em, false)
+ltr-property("margin", 0.1875em)
margin-inline-start: -0.375em
margin-inline-end: 0.1875em
&:last-child:not(:first-child)
+ltr-property("margin", 0.1875em, false)
+ltr-property("margin", -0.375em)
margin-inline-start: 0.1875em
margin-inline-end: -0.375em
&:first-child:last-child
+ltr-property("margin", -0.375em, false)
+ltr-property("margin", -0.375em)
margin-inline-start: -0.375em
margin-inline-end: -0.375em
// Modifiers
&.is-delete
+ltr-property("margin", $tag-delete-margin, false)
margin-inline-start: $tag-delete-margin
padding: 0
position: relative
width: 2em

2
sass/form/checkbox-radio.sass
View File

@ -19,4 +19,4 @@
.radio
@extend %checkbox-radio
& + .radio
+ltr-property("margin", 0.5em, false)
margin-inline-start: 0.5em

2
sass/form/file.sass
View File

@ -178,7 +178,7 @@ $file-colors: $form-colors !default
display: flex
height: 1em
justify-content: center
+ltr-property("margin", 0.5em)
margin-inline-end: 0.5em
width: 1em
.fa
font-size: 14px

8
sass/form/select.sass
View File

@ -11,12 +11,12 @@ $select-colors: $form-colors !default
&::after
@extend %arrow
border-color: $input-arrow
+ltr-position(1.125em)
inset-inline-end: 1.125em
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
+ltr-property("padding", 1em, false)
padding-inline-start: 1em
select
@extend %input
cursor: pointer
@ -30,7 +30,7 @@ $select-colors: $form-colors !default
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
+ltr-property("padding", 2.5em)
padding-inline-end: 2.5em
&[multiple]
height: auto
padding: 0
@ -77,7 +77,7 @@ $select-colors: $form-colors !default
@extend %loader
margin-top: 0
position: absolute
+ltr-position(0.625em)
inset-inline-end: 0.625em
top: 0.625em
transform: none
&.is-small:after

26
sass/form/tools.sass
View File

@ -40,7 +40,7 @@ $label-colors: $form-colors !default
justify-content: flex-start
.control
&:not(:last-child)
+ltr-property("margin", -1px)
margin-inline-end: -1px
&:not(:first-child):not(:last-child)
.button,
.input,
@ -50,22 +50,14 @@ $label-colors: $form-colors !default
.button,
.input,
.select select
+ltr
border-bottom-right-radius: 0
border-top-right-radius: 0
+rtl
border-bottom-left-radius: 0
border-top-left-radius: 0
border-end-end-radius: 0
border-start-end-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-left-radius: 0
border-top-left-radius: 0
+rtl
border-bottom-right-radius: 0
border-top-right-radius: 0
border-end-start-radius: 0
border-start-start-radius: 0
.button,
.input,
.select select
@ -98,7 +90,7 @@ $label-colors: $form-colors !default
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
+ltr-property("margin", 0.75rem)
margin-inline-end: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
@ -129,7 +121,7 @@ $label-colors: $form-colors !default
flex-basis: 0
flex-grow: 1
flex-shrink: 0
+ltr-property("margin", 1.5rem)
margin-inline-end: 1.5rem
text-align: right
&.is-small
font-size: $size-small
@ -158,7 +150,7 @@ $label-colors: $form-colors !default
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
+ltr-property("margin", 0.75rem)
margin-inline-end: 0.75rem
.control
box-sizing: border-box
@ -204,7 +196,7 @@ $label-colors: $form-colors !default
&::after
@extend %loader
position: absolute !important
+ltr-position(0.625em)
inset-inline-end: 0.625em
top: 0.625em
z-index: 4
&.is-small:after

152
sass/grid/columns.sass
View File

@ -42,29 +42,29 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
.columns.is-mobile > &.is-offset-three-quarters
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
.columns.is-mobile > &.is-offset-two-thirds
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
.columns.is-mobile > &.is-offset-half
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
.columns.is-mobile > &.is-offset-one-third
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
.columns.is-mobile > &.is-offset-one-quarter
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
.columns.is-mobile > &.is-offset-one-fifth
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
.columns.is-mobile > &.is-offset-two-fifths
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
.columns.is-mobile > &.is-offset-three-fifths
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
.columns.is-mobile > &.is-offset-four-fifths
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage(divide($i, 12))
.columns.is-mobile > &.is-offset-#{$i}
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
+mobile
&.is-narrow-mobile
flex: none
@ -100,29 +100,29 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-mobile
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
&.is-offset-two-thirds-mobile
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
&.is-offset-half-mobile
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
&.is-offset-one-third-mobile
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
&.is-offset-one-quarter-mobile
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
&.is-offset-one-fifth-mobile
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
&.is-offset-two-fifths-mobile
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
&.is-offset-three-fifths-mobile
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
&.is-offset-four-fifths-mobile
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
&.is-#{$i}-mobile
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-mobile
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
+tablet
&.is-narrow,
&.is-narrow-tablet
@ -170,31 +170,31 @@ $column-gap: 0.75rem !default
width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
&.is-offset-half,
&.is-offset-half-tablet
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
&.is-offset-one-third,
&.is-offset-one-third-tablet
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
&.is-#{$i},
&.is-#{$i}-tablet
@ -202,7 +202,7 @@ $column-gap: 0.75rem !default
width: percentage(divide($i, 12))
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
+touch
&.is-narrow-touch
flex: none
@ -238,29 +238,29 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-touch
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
&.is-offset-two-thirds-touch
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
&.is-offset-half-touch
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
&.is-offset-one-third-touch
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
&.is-offset-one-quarter-touch
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
&.is-offset-one-fifth-touch
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
&.is-offset-two-fifths-touch
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
&.is-offset-three-fifths-touch
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
&.is-offset-four-fifths-touch
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
&.is-#{$i}-touch
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-touch
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
+desktop
&.is-narrow-desktop
flex: none
@ -296,29 +296,29 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-desktop
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
&.is-offset-two-thirds-desktop
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
&.is-offset-half-desktop
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
&.is-offset-one-third-desktop
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
&.is-offset-one-quarter-desktop
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
&.is-offset-one-fifth-desktop
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
&.is-offset-two-fifths-desktop
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
&.is-offset-three-fifths-desktop
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
&.is-offset-four-fifths-desktop
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
&.is-#{$i}-desktop
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-desktop
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
+widescreen
&.is-narrow-widescreen
flex: none
@ -354,29 +354,29 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-widescreen
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
&.is-offset-two-thirds-widescreen
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
&.is-offset-half-widescreen
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
&.is-offset-one-third-widescreen
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
&.is-offset-one-quarter-widescreen
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
&.is-offset-one-fifth-widescreen
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
&.is-offset-two-fifths-widescreen
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
&.is-offset-three-fifths-widescreen
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
&.is-offset-four-fifths-widescreen
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-widescreen
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
+fullhd
&.is-narrow-fullhd
flex: none
@ -412,33 +412,33 @@ $column-gap: 0.75rem !default
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
+ltr-property("margin", 75%, false)
margin-inline-start: 75%
&.is-offset-two-thirds-fullhd
+ltr-property("margin", 66.6666%, false)
margin-inline-start: 66.6666%
&.is-offset-half-fullhd
+ltr-property("margin", 50%, false)
margin-inline-start: 50%
&.is-offset-one-third-fullhd
+ltr-property("margin", 33.3333%, false)
margin-inline-start: 33.3333%
&.is-offset-one-quarter-fullhd
+ltr-property("margin", 25%, false)
margin-inline-start: 25%
&.is-offset-one-fifth-fullhd
+ltr-property("margin", 20%, false)
margin-inline-start: 20%
&.is-offset-two-fifths-fullhd
+ltr-property("margin", 40%, false)
margin-inline-start: 40%
&.is-offset-three-fifths-fullhd
+ltr-property("margin", 60%, false)
margin-inline-start: 60%
&.is-offset-four-fifths-fullhd
+ltr-property("margin", 80%, false)
margin-inline-start: 80%
@for $i from 0 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-fullhd
+ltr-property("margin", percentage(divide($i, 12)), false)
margin-inline-start: percentage(divide($i, 12))
.columns
+ltr-property("margin", (-$column-gap), false)
+ltr-property("margin", (-$column-gap))
margin-inline-start: (-$column-gap)
margin-inline-end: (-$column-gap)
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
@ -448,8 +448,8 @@ $column-gap: 0.75rem !default
&.is-centered
justify-content: center
&.is-gapless
+ltr-property("margin", 0, false)
+ltr-property("margin", 0)
margin-inline-start: 0
margin-inline-end: 0
margin-top: 0
& > .column
margin: 0
@ -476,8 +476,8 @@ $column-gap: 0.75rem !default
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
+ltr-property("margin", calc(-1 * var(--columnGap)))
margin-inline-start: calc(-1 * var(--columnGap))
margin-inline-end: calc(-1 * var(--columnGap))
> .column
padding-left: var(--columnGap)
padding-right: var(--columnGap)

2
sass/layout/hero.sass
View File

@ -136,7 +136,7 @@ $hero-colors: $colors !default
display: flex
justify-content: center
.button:not(:last-child)
+ltr-property("margin", 1.5rem)
margin-inline-end: 1.5rem
// Containers

24
sass/utilities/mixins.sass
View File

@ -164,30 +164,6 @@
+until($until)
@content
=ltr
@if not $rtl
@content
=rtl
@if $rtl
@content
=ltr-property($property, $spacing, $right: true)
$normal: if($right, "right", "left")
$opposite: if($right, "left", "right")
@if $rtl
#{$property}-#{$opposite}: $spacing
@else
#{$property}-#{$normal}: $spacing
=ltr-position($spacing, $right: true)
$normal: if($right, "right", "left")
$opposite: if($right, "left", "right")
@if $rtl
#{$opposite}: $spacing
@else
#{$normal}: $spacing
// Placeholders
=unselectable