Add logical properties

diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index 31eedfe9b5092baefa1d4a03aa751659f3506f91..75d6efd800e65bfc83c679d7cfb356123b195b69 100644 (file)
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -137,6 +137,6 @@ table
   th
     vertical-align: top
     &:not([align])
-      text-align: left
+      text-align: inherit
   th
     color: $text-strong

diff --git a/sass/base/minireset.sass b/sass/base/minireset.sass
index c5657ebdd42a330b8b6867a26913471253f189af..aa2b6f3acd27e74d8bd51a9af2d75e930d4d2e22 100644 (file)
--- a/sass/base/minireset.sass
+++ b/sass/base/minireset.sass
@@ -76,4 +76,4 @@ td,
 th
   padding: 0
   &:not([align])
-    text-align: left
+    text-align: inherit

diff --git a/sass/components/breadcrumb.sass b/sass/components/breadcrumb.sass
index 3d7f4eb3c59a1d3f32060db4454d9513f7765863..a3053e1d715fd1793daac54bad0aa26962d2ebba 100644 (file)
--- a/sass/components/breadcrumb.sass
+++ b/sass/components/breadcrumb.sass
@@ -24,7 +24,7 @@ $breadcrumb-item-separator-color: $border-hover !default
     align-items: center
     display: flex
     &:first-child a
-      padding-left: 0
+      padding-inline-start: 0
     &.is-active
       a
         color: $breadcrumb-item-active-color
@@ -41,9 +41,9 @@ $breadcrumb-item-separator-color: $border-hover !default
     justify-content: flex-start
   .icon
     &:first-child
-      margin-right: 0.5em
+      margin-inline-end: 0.5em
     &:last-child
-      margin-left: 0.5em
+      margin-inline-start: 0.5em
   // Alignment
   &.is-centered
     ol,

diff --git a/sass/components/card.sass b/sass/components/card.sass
index 3cdf0008f183576aeae0e839be19ea7c4a043c75..28753eafcfc8efc2c0c055ed9313c193ffe0b9b6 100644 (file)
--- a/sass/components/card.sass
+++ b/sass/components/card.sass
@@ -70,7 +70,7 @@ $card-media-margin: $block-spacing !default
   justify-content: center
   padding: $card-footer-padding
   &:not(:last-child)
-    border-right: $card-footer-border-top
+    border-inline-end: $card-footer-border-top
 
 // Combinations
 

diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass
index d62a6d88efb95eb712c4ad64e8b19757fc5a9fa4..c0c364a122dfd725cf822ea0d5a838fbc54479fe 100644 (file)
--- a/sass/components/dropdown.sass
+++ b/sass/components/dropdown.sass
@@ -38,7 +38,7 @@ $dropdown-divider-background-color: $border-light !default
 
 .dropdown-menu
   display: none
-  left: 0
+  +inset-inline-start(0)
   min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
@@ -62,8 +62,8 @@ $dropdown-divider-background-color: $border-light !default
 
 a.dropdown-item,
 button.dropdown-item
-  padding-right: 3rem
-  text-align: left
+  padding-inline-end: 3rem
+  text-align: inherit
   white-space: nowrap
   width: 100%
   &:hover

diff --git a/sass/components/level.sass b/sass/components/level.sass
index 608f291e758e69267bfe44f502b48ddb421a353b..7058b22a9a2bf8964283358300212f2d9a4bb9b0 100644 (file)
--- a/sass/components/level.sass
+++ b/sass/components/level.sass
@@ -20,7 +20,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: $level-item-spacing
+        margin-inline-end: $level-item-spacing
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -57,7 +57,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     // Responsiveness
     +tablet
       &:not(:last-child)
-        margin-right: $level-item-spacing
+        margin-inline-end: $level-item-spacing
 
 .level-left
   align-items: center

diff --git a/sass/components/media.sass b/sass/components/media.sass
index a9ad114a623b5be924b11091a5cb5f8e8b4f3681..bdd087808814eb2db30347f2325ad9eb38f8aff3 100644 (file)
--- a/sass/components/media.sass
+++ b/sass/components/media.sass
@@ -1,4 +1,6 @@
 $media-border-color: bulmaRgba($border, 0.5) !default
+$media-spacing: 1rem
+$media-spacing-large: 1.5rem
 
 .media
   align-items: flex-start
@@ -19,13 +21,13 @@ $media-border-color: bulmaRgba($border, 0.5) !default
         margin-top: 0.5rem
   & + .media
     border-top: 1px solid $media-border-color
-    margin-top: 1rem
-    padding-top: 1rem
+    margin-top: $media-spacing
+    padding-top: $media-spacing
   // Sizes
   &.is-large
     & + .media
-      margin-top: 1.5rem
-      padding-top: 1.5rem
+      margin-top: $media-spacing-large
+      padding-top: $media-spacing-large
 
 .media-left,
 .media-right
@@ -34,16 +36,16 @@ $media-border-color: bulmaRgba($border, 0.5) !default
   flex-shrink: 0
 
 .media-left
-  margin-right: 1rem
+  margin-inline-end: 1rem
 
 .media-right
-  margin-left: 1rem
+  margin-inline-start: 1rem
 
 .media-content
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
-  text-align: left
+  text-align: inherit
 
 +mobile
   .media-content

diff --git a/sass/components/menu.sass b/sass/components/menu.sass
index 3de7e18db086f0187768e63873bb7caa65d412a3..35b62b0d65389a28439cb6488143a2b2a9ba2160 100644 (file)
--- a/sass/components/menu.sass
+++ b/sass/components/menu.sass
@@ -42,9 +42,9 @@ $menu-label-spacing: 1em !default
       color: $menu-item-active-color
   li
     ul
-      border-left: $menu-list-border-left
+      border-inline-start: $menu-list-border-left
       margin: $menu-nested-list-margin
-      padding-left: $menu-nested-list-padding-left
+      padding-inline-start: $menu-nested-list-padding-left
 
 .menu-label
   color: $menu-label-color

diff --git a/sass/components/message.sass b/sass/components/message.sass
index 89e4cc9a84577df0d0f54ffc9c2403d8d4452449..b79038bc40743b650bc2f364e79996ad43e34e3d 100644 (file)
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -79,7 +79,7 @@ $message-colors: $colors !default
   .delete
     flex-grow: 0
     flex-shrink: 0
-    margin-left: 0.75em
+    margin-inline-start: 0.75em
   & + .message-body
     border-width: $message-header-body-border-width
     border-top-left-radius: 0

diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index 377dfa78f5d7e1ab40aa57b3553c5206b3e6d5ba..069be27ab8e2007ba2659a236430722f6c0d3002 100644 (file)
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -63,7 +63,7 @@ $modal-card-body-padding: 20px !default
   background: none
   height: $modal-close-dimensions
   position: fixed
-  right: $modal-close-right
+  +inset-inline-end($modal-close-right)
   top: $modal-close-top
   width: $modal-close-dimensions
 
@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      margin-right: 0.5em
+      margin-inline-end: 0.5em
 
 .modal-card-body
   +overflow-touch

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index d831a3a48b840a5311605390f5a8d3a77e86e92e..cea9b9dbc11514b0ffda9f4e2622c1b68e0bc104 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -151,7 +151,7 @@ body
 .navbar-burger
   color: $navbar-burger-color
   +hamburger($navbar-height)
-  margin-left: auto
+  margin-inline-start: auto
 
 .navbar-menu
   display: none
@@ -348,10 +348,10 @@ a.navbar-item,
     flex-shrink: 0
   .navbar-start
     justify-content: flex-start
-    margin-right: auto
+    margin-inline-end: auto
   .navbar-end
     justify-content: flex-end
-    margin-left: auto
+    margin-inline-start: auto
   .navbar-dropdown
     background-color: $navbar-dropdown-background-color
     border-bottom-left-radius: $navbar-dropdown-radius
@@ -360,7 +360,7 @@ a.navbar-item,
     box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
-    left: 0
+    +inset-inline-start(0)
     min-width: 100%
     position: absolute
     top: 100%
@@ -397,9 +397,9 @@ a.navbar-item,
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -.75rem
+      margin-inline-start: -.75rem
     .navbar-menu
-      margin-right: -.75rem
+      margin-inline-end: -.75rem
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,

diff --git a/sass/components/panel.sass b/sass/components/panel.sass
index c7b1487724a1c6e94f5a491ae3f07144753a62b4..04319b1094018ff8bd64445e757f01fe5407b7f0 100644 (file)
--- a/sass/components/panel.sass
+++ b/sass/components/panel.sass
@@ -88,7 +88,7 @@ $panel-colors: $colors !default
   justify-content: flex-start
   padding: 0.5em 0.75em
   input[type="checkbox"]
-    margin-right: 0.75em
+    margin-inline-end: 0.75em
   & > .control
     flex-grow: 1
     flex-shrink: 1
@@ -113,7 +113,7 @@ label.panel-block
 .panel-icon
   +fa(14px, 1em)
   color: $panel-icon-color
-  margin-right: 0.75em
+  margin-inline-end: 0.75em
   .fa
     font-size: inherit
     line-height: inherit

diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass
index 8c28c257a5f78264451a87d9ea29a7254daa1fef..4bcf7b3e21d27c1c4580d27cbe31c6aa7ba364bc 100644 (file)
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -78,9 +78,9 @@ $tabs-toggle-link-active-color: $link-invert !default
       padding-left: 0.75em
   .icon
     &:first-child
-      margin-right: 0.5em
+      margin-inline-end: 0.5em
     &:last-child
-      margin-left: 0.5em
+      margin-inline-start: 0.5em
   // Alignment
   &.is-centered
     ul
@@ -92,7 +92,8 @@ $tabs-toggle-link-active-color: $link-invert !default
   &.is-boxed
     a
       border: 1px solid transparent
-      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+      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
@@ -119,11 +120,13 @@ $tabs-toggle-link-active-color: $link-invert !default
         z-index: 2
     li
       & + li
-        margin-left: -#{$tabs-toggle-link-border-width}
+        margin-inline-start: -#{$tabs-toggle-link-border-width}
       &:first-child a
-        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
+        border-start-start-radius: $tabs-toggle-link-radius
+        border-end-start-radius: $tabs-toggle-link-radius
       &:last-child a
-        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
+        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
@@ -135,13 +138,13 @@ $tabs-toggle-link-active-color: $link-invert !default
     &.is-toggle-rounded
       li
         &:first-child a
-          border-bottom-left-radius: $radius-rounded
-          border-top-left-radius: $radius-rounded
-          padding-left: 1.25em
+          border-end-start-radius: $radius-rounded
+          border-start-start-radius: $radius-rounded
+          padding-inline-start: 1.25em
         &:last-child a
-          border-bottom-right-radius: $radius-rounded
-          border-top-right-radius: $radius-rounded
-          padding-right: 1.25em
+          border-end-end-radius: $radius-rounded
+          border-start-end-radius: $radius-rounded
+          padding-inline-end: 1.25em
   // Sizes
   &.is-small
     font-size: $size-small

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 762c53b8590deb8690a9279f28f0e4e706e7ad23..d704167fc820e7608197b29c5d949e070c33a30a 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -71,11 +71,11 @@ $button-static-border-color: $border !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: $button-padding-horizontal / 4
+      margin-inline-start: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-inline-end: $button-padding-horizontal / 4
     &:last-child:not(:first-child)
-      margin-left: $button-padding-horizontal / 4
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-inline-start: $button-padding-horizontal / 4
+      margin-inline-end: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
     &:first-child:last-child
       margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
       margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
@@ -269,7 +269,7 @@ $button-static-border-color: $border !default
   .button
     margin-bottom: 0.5rem
     &:not(:last-child):not(.is-fullwidth)
-      margin-right: 0.5rem
+      margin-inline-end: 0.5rem
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
@@ -287,14 +287,14 @@ $button-static-border-color: $border !default
   &.has-addons
     .button
       &:not(:first-child)
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
+        border-end-start-radius: 0
+        border-start-start-radius: 0
       &:not(:last-child)
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
-        margin-right: -1px
+        border-end-end-radius: 0
+        border-start-end-radius: 0
+        margin-inline-end: -1px
       &:last-child
-        margin-right: 0
+        margin-inline-end: 0
       &:hover,
       &.is-hovered
         z-index: 2

diff --git a/sass/elements/content.sass b/sass/elements/content.sass
index 001419abd892ac4445b8d05a7107b57e27eb7a4c..b25d5b973c26ab0ed7a5ed3269931644b48bae58 100644 (file)
--- a/sass/elements/content.sass
+++ b/sass/elements/content.sass
@@ -67,11 +67,11 @@ $content-table-foot-cell-color: $text-strong !default
     margin-bottom: 1em
   blockquote
     background-color: $content-blockquote-background-color
-    border-left: $content-blockquote-border-left
+    border-inline-start: $content-blockquote-border-left
     padding: $content-blockquote-padding
   ol
     list-style-position: outside
-    margin-left: 2em
+    margin-inline-start: 2em
     margin-top: 1em
     &:not([type])
       list-style-type: decimal
@@ -85,7 +85,7 @@ $content-table-foot-cell-color: $text-strong !default
         list-style-type: upper-roman
   ul
     list-style: disc outside
-    margin-left: 2em
+    margin-inline-start: 2em
     margin-top: 1em
     ul
       list-style-type: circle
@@ -93,7 +93,7 @@ $content-table-foot-cell-color: $text-strong !default
       ul
         list-style-type: square
   dd
-    margin-left: 2em
+    margin-inline-start: 2em
   figure
     margin-left: 2em
     margin-right: 2em
@@ -126,7 +126,7 @@ $content-table-foot-cell-color: $text-strong !default
     th
       color: $content-table-cell-heading-color
       &:not([align])
-        text-align: left
+        text-align: inherit
     thead
       td,
       th

diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass
index 32a0ee132e6019008147ec9f8b44934fbe4c6a44..4ce51591f13a26d2a74ac22aa974d35e4bdf4a69 100644 (file)
--- a/sass/elements/notification.sass
+++ b/sass/elements/notification.sass
@@ -1,13 +1,15 @@
 $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: 1.25rem 1.5rem !default
+$notification-padding-start: 2.5rem !default
 
 .notification
   @extend %block
   background-color: $notification-background-color
   border-radius: $notification-radius
   padding: $notification-padding
+  padding-inline-start: $notification-padding-start
   position: relative
   a:not(.button):not(.dropdown-item)
     color: currentColor
@@ -21,7 +23,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
     background: transparent
   & > .delete
     position: absolute
-    right: 0.5rem
+    +inset-inline-end(0.5rem)
     top: 0.5rem
   .title,
   .subtitle,

diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index 2e6036ad3869f21c3858f2f51ea043c53acaaf13..31a8536cc20993c29d860d754705d07fb093156e 100644 (file)
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -54,7 +54,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
   th
     color: $table-cell-heading-color
     &:not([align])
-      text-align: left
+      text-align: inherit
   tr
     &.is-selected
       background-color: $table-row-active-background-color

diff --git a/sass/form/file.sass b/sass/form/file.sass
index 676c2890cbd6b6cc363ce8be6db00ec819c5887a..0652299615e204379fe74096203f047ec668d40b 100644 (file)
--- a/sass/form/file.sass
+++ b/sass/form/file.sass
@@ -166,7 +166,7 @@ $file-name-max-width: 16em !default
   display: block
   max-width: $file-name-max-width
   overflow: hidden
-  text-align: left
+  text-align: inherit
   text-overflow: ellipsis
 
 .file-icon

diff --git a/sass/form/tools.sass b/sass/form/tools.sass
index ff2f8e208adbdf7dc0be29dafce6ba55d7dd998a..9eaae54ee9d3191973118ef07d552351feaebbf6 100644 (file)
--- a/sass/form/tools.sass
+++ b/sass/form/tools.sass
@@ -38,7 +38,7 @@ $help-size: $size-small !default
     justify-content: flex-start
     .control
       &:not(:last-child)
-        margin-right: -1px
+        margin-inline-end: -1px
       &:not(:first-child):not(:last-child)
         .button,
         .input,
@@ -48,14 +48,22 @@ $help-size: $size-small !default
         .button,
         .input,
         .select select
-          border-bottom-right-radius: 0
-          border-top-right-radius: 0
+          +ltr
+            border-bottom-right-radius: 0
+            border-top-right-radius: 0
+          +rtl
+            border-bottom-left-radius: 0
+            border-top-left-radius: 0
       &:last-child:not(:only-child)
         .button,
         .input,
         .select select
-          border-bottom-left-radius: 0
-          border-top-left-radius: 0
+          +ltr
+            border-bottom-left-radius: 0
+            border-top-left-radius: 0
+          +rtl
+            border-bottom-right-radius: 0
+            border-top-right-radius: 0
       .button,
       .input,
       .select select
@@ -88,7 +96,7 @@ $help-size: $size-small !default
       flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 0.75rem
+        margin-inline-end: 0.75rem
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1
@@ -119,7 +127,7 @@ $help-size: $size-small !default
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
-    margin-right: 1.5rem
+    margin-inline-end: 1.5rem
     text-align: right
     &.is-small
       font-size: $size-small
@@ -148,14 +156,14 @@ $help-size: $size-small !default
       &:not(.is-narrow)
         flex-grow: 1
       &:not(:last-child)
-        margin-right: 0.75rem
+        margin-inline-end: 0.75rem
 
 .control
   box-sizing: border-box
   clear: both
   font-size: $size-normal
   position: relative
-  text-align: left
+  text-align: inherit
   // Modifiers
   &.has-icons-left,
   &.has-icons-right
@@ -194,7 +202,7 @@ $help-size: $size-small !default
     &::after
       @extend %loader
       position: absolute !important
-      right: 0.625em
+      +inset-inline-end(0.625em)
       top: 0.625em
       z-index: 4
     &.is-small:after

diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass
index 03bbc128c7ea4abe23ab3996708312a30ea53581..a1d688b69fd89659190befb6b7e8316fc1f2aa11 100644 (file)
--- a/sass/utilities/initial-variables.sass
+++ b/sass/utilities/initial-variables.sass
@@ -75,3 +75,4 @@ $speed: 86ms !default
 // Flags
 
 $variable-columns: true !default
+$rtl: false !default

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 27d746733c7ef45e373ec1c8c4d4a2ef825ff0f4..75cc1b4585181e8dbfa3efdf3ed91916a20cd3c5 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -128,6 +128,26 @@
     @media screen and (min-width: $fullhd)
       @content
 
+=ltr
+  @if not $rtl
+    @content
+
+=rtl
+  @if $rtl
+    @content
+
+=inset-inline-start($spacing)
+  @if $rtl
+    right: $spacing
+  @else
+    left: $spacing
+
+=inset-inline-end($spacing)
+  @if $rtl
+    left: $spacing
+  @else
+    right: $spacing
+
 // Placeholders
 
 =unselectable