Merge pull request #2983 from jgthms/rtl-support

RTL support

bulma-rtl.sass

@@ -0,0 +1,3 @@
+@charset "utf-8"
+$rtl: true
+@import "bulma"

css/bulma.css

@@ -308,7 +308,7 @@ th {
 
 td:not([align]),
 th:not([align]) {
-  text-align: left;
+  text-align: inherit;
 }
 
 html {
@@ -441,7 +441,7 @@ table th {
 
 table td:not([align]),
 table th:not([align]) {
-  text-align: left;
+  text-align: inherit;
 }
 
 table th {
@@ -3172,7 +3172,7 @@ fieldset[disabled] .button {
 }
 
 .content table th:not([align]) {
-  text-align: left;
+  text-align: inherit;
 }
 
 .content table thead td,
@@ -3369,8 +3369,8 @@ fieldset[disabled] .button {
 .notification {
   background-color: whitesmoke;
   border-radius: 4px;
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
 }
 
 .notification a:not(.button):not(.dropdown-item) {
@@ -3392,8 +3392,8 @@ fieldset[disabled] .button {
 }
 
 .notification > .delete {
-  position: absolute;
   right: 0.5rem;
+  position: absolute;
   top: 0.5rem;
 }
 
@@ -3828,12 +3828,17 @@ fieldset[disabled] .button {
   color: currentColor;
 }
 
+.table td.is-vcentered,
+.table th.is-vcentered {
+  vertical-align: middle;
+}
+
 .table th {
   color: #363636;
 }
 
 .table th:not([align]) {
-  text-align: left;
+  text-align: inherit;
 }
 
 .table tr.is-selected {
@@ -3981,13 +3986,13 @@ fieldset[disabled] .button {
 
 .tags.has-addons .tag:not(:first-child) {
   margin-left: 0;
-  border-bottom-left-radius: 0;
   border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .tags.has-addons .tag:not(:last-child) {
-  border-bottom-right-radius: 0;
   border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .tag:not(body) {
@@ -5240,7 +5245,7 @@ fieldset[disabled] .select select:hover {
   display: block;
   max-width: 16em;
   overflow: hidden;
-  text-align: left;
+  text-align: inherit;
   text-overflow: ellipsis;
 }
 
@@ -5523,7 +5528,7 @@ fieldset[disabled] .select select:hover {
   clear: both;
   font-size: 1rem;
   position: relative;
-  text-align: left;
+  text-align: inherit;
 }
 
 .control.has-icons-left .input:focus ~ .icon,
@@ -5811,7 +5816,7 @@ fieldset[disabled] .select select:hover {
 a.dropdown-item,
 button.dropdown-item {
   padding-right: 3rem;
-  text-align: left;
+  text-align: inherit;
   white-space: nowrap;
   width: 100%;
 }
@@ -5990,7 +5995,7 @@ a.list-item {
 .media {
   align-items: flex-start;
   display: flex;
-  text-align: left;
+  text-align: inherit;
 }
 
 .media .content:not(:last-child) {
@@ -6046,7 +6051,7 @@ a.list-item {
   flex-basis: auto;
   flex-grow: 1;
   flex-shrink: 1;
-  text-align: left;
+  text-align: inherit;
 }
 
 @media screen and (max-width: 768px) {
@@ -7439,11 +7444,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   }
   .navbar > .container .navbar-brand,
   .container > .navbar .navbar-brand {
-    margin-left: -.75rem;
+    margin-left: -0.75rem;
   }
   .navbar > .container .navbar-menu,
   .container > .navbar .navbar-menu {
-    margin-right: -.75rem;
+    margin-right: -0.75rem;
   }
   .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop {
     left: 0;
@@ -8018,11 +8023,13 @@ label.panel-block:hover {
 }
 
 .tabs.is-toggle li:first-child a {
-  border-radius: 4px 0 0 4px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .tabs.is-toggle li:last-child a {
-  border-radius: 0 4px 4px 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .tabs.is-toggle li.is-active a {

docs/_data/expo.json

@@ -391,16 +391,7 @@
   "lists": {
     "home": ["getbedtimestories", "divjoy", "counternetwork", "Gustav"],
     "expo": [
-      "romes",
-      "vinetos",
-      "infinitysearch",
-      "pentos",
-      "vivohostel",
-      "oneprofile",
-      "formalfounder",
-      "klimchuk",
-      "pagespeed",
-      "rydesignsstuff",
+
       "divjoy",
       "spike",
       "ftwcoin",

docs/css/bulma-docs.css

@@ -14560,6 +14560,23 @@ svg {
   position: relative;
 }
 
+.bd-partner-sponsor.is-text .bd-sponsor-item {
+  display: inline;
+}
+
+.bd-partner-sponsor.is-text .bd-sponsor-item:before {
+  display: none;
+}
+
+.bd-sponsor-item {
+  flex-grow: 1;
+  position: relative;
+}
+
+.bd-sponsor-item img {
+  position: relative;
+}
+
 .bd-partnrs {
   background-color: #fafafa;
 }

package.json

@@ -34,12 +34,16 @@
     "rimraf": "^3.0.2"
   },
   "scripts": {
-    "build": "npm run build-clean && npm run build-sass && npm run build-autoprefix && npm run build-cleancss",
+    "build": "npm run build-sass && npm run build-autoprefix && npm run build-cleancss",
     "build-autoprefix": "postcss --use autoprefixer --map false --output css/bulma.css css/bulma.css",
     "build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css",
-    "build-clean": "rimraf css",
     "build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
-    "deploy": "npm run build",
+    "clean": "rimraf css",
+    "rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss",
+    "rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css",
+    "rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
+    "rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
+    "deploy": "npm run clean && npm run build && npm run rtl",
     "start": "npm run build-sass -- --watch"
   },
   "files": [

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

sass/base/minireset.sass

@@ -76,4 +76,4 @@ td,
 th
   padding: 0
   &:not([align])
-    text-align: left
+    text-align: inherit

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
+      +ltr-property("padding", 0, false)
     &.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
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
     ol,

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
+    +ltr-property("border", $card-footer-border-top)
 
 // Combinations
 

sass/components/dropdown.sass

@@ -38,7 +38,7 @@ $dropdown-divider-background-color: $border-light !default
 
 .dropdown-menu
   display: none
-  left: 0
+  +ltr-position(0, false)
   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
+  +ltr-property("padding", 3rem)
+  text-align: inherit
   white-space: nowrap
   width: 100%
   &:hover

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
+        +ltr-property("margin", $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
+        +ltr-property("margin", $level-item-spacing)
 
 .level-left
   align-items: center

sass/components/media.sass

@@ -1,9 +1,11 @@
 $media-border-color: bulmaRgba($border, 0.5) !default
+$media-spacing: 1rem
+$media-spacing-large: 1.5rem
 
 .media
   align-items: flex-start
   display: flex
-  text-align: left
+  text-align: inherit
   .content:not(:last-child)
     margin-bottom: 0.75rem
   .media
@@ -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
+  +ltr-property("margin", $media-spacing)
 
 .media-right
-  margin-left: 1rem
+  +ltr-property("margin", $media-spacing, false)
 
 .media-content
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
-  text-align: left
+  text-align: inherit
 
 +mobile
   .media-content

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
+      +ltr-property("border", $menu-list-border-left, false)
       margin: $menu-nested-list-margin
-      padding-left: $menu-nested-list-padding-left
+      +ltr-property("padding", $menu-nested-list-padding-left, false)
 
 .menu-label
   color: $menu-label-color

sass/components/message.sass

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

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
+  +ltr-position($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
+      +ltr-property("margin", 0.5em)
 
 .modal-card-body
   +overflow-touch

sass/components/navbar.sass

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

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
+    +ltr-property("margin", 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
+  +ltr-property("margin", 0.75em)
   .fa
     font-size: inherit
     line-height: inherit

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
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
     ul
@@ -92,7 +92,10 @@ $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
+      +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
       &:hover
         background-color: $tabs-boxed-link-hover-background-color
         border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -119,13 +122,21 @@ $tabs-toggle-link-active-color: $link-invert !default
         z-index: 2
     li
       & + li
-        margin-left: -#{$tabs-toggle-link-border-width}
+        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
       &:first-child a
-        border-top-left-radius: $tabs-toggle-link-radius
-        border-bottom-left-radius: $tabs-toggle-link-radius
+        +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
       &:last-child a
-        border-bottom-right-radius: $tabs-toggle-link-radius
-        border-top-right-radius: $tabs-toggle-link-radius
+        +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
       &.is-active
         a
           background-color: $tabs-toggle-link-active-background-color
@@ -137,13 +148,23 @@ $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
+          +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
         &:last-child a
-          border-bottom-right-radius: $radius-rounded
-          border-top-right-radius: $radius-rounded
-          padding-right: 1.25em
+          +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
   // Sizes
   &.is-small
     font-size: $size-small

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
+      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", $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})
+      +ltr-property("margin", $button-padding-horizontal / 4, false)
+      +ltr-property("margin", 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
+      +ltr-property("margin", 0.5rem)
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
@@ -292,9 +292,9 @@ $button-static-border-color: $border !default
       &:not(:last-child)
         border-bottom-right-radius: 0
         border-top-right-radius: 0
-        margin-right: -1px
+        +ltr-property("margin", -1px)
       &:last-child
-        margin-right: 0
+        +ltr-property("margin", 0)
       &:hover,
       &.is-hovered
         z-index: 2

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
+    +ltr-property("border", $content-blockquote-border-left, false)
     padding: $content-blockquote-padding
   ol
     list-style-position: outside
-    margin-left: 2em
+    +ltr-property("margin", 2em, false)
     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
+    +ltr-property("margin", 2em, false)
     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
+    +ltr-property("margin", 2em, false)
   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

sass/elements/notification.sass

@@ -2,13 +2,18 @@ $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
   @extend %block
   background-color: $notification-background-color
   border-radius: $notification-radius
-  padding: $notification-padding
   position: relative
+  +ltr
+    padding: $notification-padding-ltr
+  +rtl
+    padding: $notification-padding-rtl
   a:not(.button):not(.dropdown-item)
     color: currentColor
     text-decoration: underline
@@ -20,8 +25,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
   pre code
     background: transparent
   & > .delete
+    +ltr-position(0.5rem)
     position: absolute
-    right: 0.5rem
     top: 0.5rem
   .title,
   .subtitle,

sass/elements/table.sass

@@ -56,7 +56,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

sass/elements/tag.sass

@@ -11,7 +11,7 @@ $tag-delete-margin: 1px !default
   .tag
     margin-bottom: 0.5rem
     &:not(:last-child)
-      margin-right: 0.5rem
+      +ltr-property("margin", 0.5rem)
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
@@ -37,14 +37,22 @@ $tag-delete-margin: 1px !default
         margin-right: 0
   &.has-addons
     .tag
-      margin-right: 0
+      +ltr-property("margin", 0)
       &:not(:first-child)
-        margin-left: 0
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
+        +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
       &:not(:last-child)
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
+        +ltr
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
+        +rtl
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
 
 .tag:not(body)
   align-items: center
@@ -60,8 +68,8 @@ $tag-delete-margin: 1px !default
   padding-right: 0.75em
   white-space: nowrap
   .delete
-    margin-left: 0.25rem
-    margin-right: -0.375rem
+    +ltr-property("margin", 0.25rem, false)
+    +ltr-property("margin", -0.375rem)
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -85,17 +93,17 @@ $tag-delete-margin: 1px !default
     font-size: $size-medium
   .icon
     &:first-child:not(:last-child)
-      margin-left: -0.375em
-      margin-right: 0.1875em
+      +ltr-property("margin", -0.375em, false)
+      +ltr-property("margin", 0.1875em)
     &:last-child:not(:first-child)
-      margin-left: 0.1875em
-      margin-right: -0.375em
+      +ltr-property("margin", 0.1875em, false)
+      +ltr-property("margin", -0.375em)
     &:first-child:last-child
-      margin-left: -0.375em
-      margin-right: -0.375em
+      +ltr-property("margin", -0.375em, false)
+      +ltr-property("margin", -0.375em)
   // Modifiers
   &.is-delete
-    margin-left: $tag-delete-margin
+    +ltr-property("margin", $tag-delete-margin, false)
     padding: 0
     position: relative
     width: 2em

sass/form/checkbox-radio.sass

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

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
@@ -174,7 +174,7 @@ $file-name-max-width: 16em !default
   display: flex
   height: 1em
   justify-content: center
-  margin-right: 0.5em
+  +ltr-property("margin", 0.5em)
   width: 1em
   .fa
     font-size: 14px

sass/form/select.sass

@@ -9,12 +9,12 @@
     &::after
       @extend %arrow
       border-color: $input-arrow
-      right: 1.125em
+      +ltr-position(1.125em)
       z-index: 4
   &.is-rounded
     select
       border-radius: $radius-rounded
-      padding-left: 1em
+      +ltr-property("padding", 1em, false)
   select
     @extend %input
     cursor: pointer
@@ -28,7 +28,7 @@
     fieldset[disabled] &:hover
       border-color: $input-disabled-border-color
     &:not([multiple])
-      padding-right: 2.5em
+      +ltr-property("padding", 2.5em)
     &[multiple]
       height: auto
       padding: 0
@@ -74,7 +74,7 @@
       @extend %loader
       margin-top: 0
       position: absolute
-      right: 0.625em
+      +ltr-position(0.625em)
       top: 0.625em
       transform: none
     &.is-small:after

sass/form/tools.sass

@@ -38,7 +38,7 @@ $help-size: $size-small !default
     justify-content: flex-start
     .control
       &:not(:last-child)
-        margin-right: -1px
+        +ltr-property("margin", -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
+        +ltr-property("margin", 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
+    +ltr-property("margin", 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
+        +ltr-property("margin", 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
+      +ltr-position(0.625em)
       top: 0.625em
       z-index: 4
     &.is-small:after

sass/layout/hero.sass

@@ -130,7 +130,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
     display: flex
     justify-content: center
     .button:not(:last-child)
-      margin-right: 1.5rem
+      +ltr-property("margin", 1.5rem)
 
 // Containers
 

sass/utilities/initial-variables.sass

@@ -75,3 +75,4 @@ $speed: 86ms !default
 // Flags
 
 $variable-columns: true !default
+$rtl: false !default

sass/utilities/mixins.sass

@@ -128,6 +128,30 @@
     @media screen and (min-width: $fullhd)
       @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