Convert all UI code to CSS logical properties (#8051)

- Rewrite all styles to use logical properties
- Update Stylelint configuration to include logical properties checks

.stylelintrc.js

@@ -22,5 +22,13 @@ module.exports = {
     ],
     // Would be valuable for strict BEM components but is too hard to enforce with legacy code.
     'no-descending-specificity': null,
+    // Override stylelint-config-wagtail’s options to allow all float and clear values for now.
+    'declaration-property-value-allowed-list': {
+      // 'clear': ['both', 'none'],
+      // 'float': ['inline-start', 'inline-end', 'none', 'unset'],
+      'text-align': ['start', 'end', 'center'],
+    },
+    // Disable declaration-strict-value until we are in a position to enforce it.
+    'scale-unlimited/declaration-strict-value': null,
   },
 };

CHANGELOG.txt

@@ -21,6 +21,7 @@ Changelog
  * Remove core usage of jinjalint and migrate to curlylint to resolve dependency incompatibility issues (Thibaud Colas)
  * Switch focus outlines implementation to `:focus-visible` for cross-browser consistency (Paarth Agarwal)
  * Remove most uppercased text styles from admin UI (Paarth Agarwal)
+ * Convert all UI code to CSS logical properties for Right-to-Left (RTL) language support (Thibaud Colas)
  * Fix: When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
  * Fix: When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
  * Fix: When Documents (e.g. PDFs) have been configured to be served inline via `WAGTAILDOCS_CONTENT_TYPES` & `WAGTAILDOCS_INLINE_CONTENT_TYPES` ensure that the filename is correctly set in the `Content-Disposition` header so that saving the files will use the correct filename (John-Scott Atlakson)

client/scss/components/_breadcrumb.scss

@@ -4,7 +4,7 @@
   padding-top: 1.4em;
   font-size: 0.85em;
   line-height: 1.5em;
-  margin-left: 2em;
+  margin-inline-start: 2em;
   background: $color-teal;
 
   li,
@@ -75,11 +75,11 @@
   @include media-breakpoint-up(sm) {
     padding-top: 0;
     background: $color-teal-darker;
-    margin-left: -($desktop-nice-padding);
-    margin-right: -($desktop-nice-padding);
+    margin-inline-start: -($desktop-nice-padding);
+    margin-inline-end: -($desktop-nice-padding);
 
     .home_icon {
-      margin-left: 1.25em;
+      margin-inline-start: 1.25em;
     }
 
     .arrow_right_icon {

client/scss/components/_bulk_actions.scss

@@ -6,7 +6,7 @@
     }
 
     .c-dropdown__button {
-      padding-left: 0.3rem;
+      padding-inline-start: 0.3rem;
     }
 
     .bulk-actions-choices,
@@ -67,15 +67,15 @@
     align-items: center;
     padding: 1.25em;
     border-radius: 4px 4px 0 0;
-    margin-left: 30px;
+    margin-inline-start: 30px;
 
     input[type='checkbox'] {
-      margin-right: 1.25em;
+      margin-inline-end: 1.25em;
     }
 
     .bulk-actions-buttons {
-      border-left: 1px solid $color-grey-2;
-      padding-left: 1.5em;
+      border-inline-start: 1px solid $color-grey-2;
+      padding-inline-start: 1.5em;
 
       .bulk-action-btn {
         max-width: 160px;

client/scss/components/_button-select.scss

@@ -17,5 +17,5 @@
 
 .button-select .button-select__option {
   /* override default margin from horizontally-aligned buttons */
-  margin-left: 0;
+  margin-inline-start: 0;
 }

client/scss/components/_button.scss

@@ -107,13 +107,16 @@
 
   &.bicolor {
     border: 1px solid transparent;
-    padding-left: 3.5em;
+    padding-inline-start: 3.5em;
 
     &:before {
       // iconfont
       font-size: 1rem;
       position: absolute;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0;
+      inset-inline-start: 0;
       top: 0;
       width: 2em;
       line-height: 1.85em;
@@ -121,22 +124,37 @@
       text-align: center;
       background-color: rgba(0, 0, 0, 0.2);
       display: block;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       border-top-left-radius: inherit;
+      border-start-start-radius: inherit;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       border-bottom-left-radius: inherit;
+      border-end-start-radius: inherit;
     }
 
     .icon-wrapper {
       background-color: rgba(0, 0, 0, 0.2);
       display: block;
       position: absolute;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0;
+      inset-inline-start: 0;
       top: 0;
       width: 3em;
       line-height: 1.85em;
       height: 100%;
       text-align: center;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       border-top-left-radius: inherit;
+      border-start-start-radius: inherit;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       border-bottom-left-radius: inherit;
+      border-end-start-radius: inherit;
     }
 
     &.button--icon {
@@ -162,7 +180,7 @@
   }
 
   &.button-small.bicolor {
-    padding-left: 3.5em;
+    padding-inline-start: 3.5em;
 
     .icon-wrapper {
       width: 2em;
@@ -179,7 +197,7 @@
   // + input[type=button],
   + .button {
     // + button {
-    margin-left: 1em;
+    margin-inline-start: 1em;
   }
 
   // A completely unstyled button
@@ -234,7 +252,7 @@
       width: 0;
       visibility: hidden;
       text-align: center;
-      padding-right: 0;
+      padding-inline-end: 0;
     }
 
     em {
@@ -254,14 +272,17 @@
       width: 1em;
       height: 1em;
       opacity: 0.8;
-      padding-right: 0.5em;
+      padding-inline-end: 0.5em;
     }
 
     span.icon-spinner:after {
       // iconfont
       text-align: center;
       position: absolute;
+      // Remove once we drop support for Safari 14.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0;
+      inset-inline-start: 0;
       margin: 0;
       line-height: 1em;
       display: inline-block;
@@ -334,7 +355,7 @@
     height: 3em;
 
     &.bicolor {
-      padding-left: 3.7em;
+      padding-inline-start: 3.7em;
 
       &:before {
         width: 2em;
@@ -345,7 +366,7 @@
 
     &.button-small.bicolor {
       // line-height: 2.2em;
-      padding-left: 3em;
+      padding-inline-start: 3em;
 
       &:before {
         width: 1.8em;
@@ -487,12 +508,15 @@ button.button.bicolor .icon-wrapper {
 
 .bicolor {
   border: 0;
-  padding-left: 3.5em;
+  padding-inline-start: 3.5em;
 
   &:before {
     font-size: 1rem;
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 2em;
     line-height: 1.85em;
@@ -504,7 +528,7 @@ button.button.bicolor .icon-wrapper {
 }
 
 .button-small.bicolor {
-  padding-left: 3.5em;
+  padding-inline-start: 3.5em;
 
   &:before {
     width: 2em;
@@ -550,8 +574,8 @@ button {
   button {
     border-radius: 0;
     float: left;
-    margin-right: 1px;
-    margin-left: 0;
+    margin-inline-end: 1px;
+    margin-inline-start: 0;
 
     &:only-child {
       border-radius: 3px;
@@ -563,7 +587,7 @@ button {
 
     &:last-child {
       border-radius: 0 3px 3px 0;
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
@@ -613,16 +637,19 @@ button {
   .controls {
     position: absolute;
     z-index: 1;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 1em;
+    inset-inline-end: 1em;
     top: 1em;
     color: $color-white;
 
     li {
       float: left;
-      margin-right: 1px;
+      margin-inline-end: 1px;
 
       &:last-child {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
     }
 

client/scss/components/_chooser.scss

@@ -15,7 +15,7 @@ overridden here? hmm.
   input[type='text'] {
     float: left;
     width: 50%;
-    margin-right: 1em;
+    margin-inline-end: 1em;
   }
 
   .chosen {
@@ -30,7 +30,7 @@ overridden here? hmm.
       color: $color-grey-3;
       @include svg-icon(2.5em);
       vertical-align: middle;
-      margin-right: 0.625rem;
+      margin-inline-end: 0.625rem;
     }
 
     // TODO: [icon-font] remove when the Wagtail icon font is removed
@@ -44,7 +44,7 @@ overridden here? hmm.
       color: $color-grey-3;
       line-height: 1em;
       font-size: 2.5em;
-      margin-right: 0.3em;
+      margin-inline-end: 0.3em;
     }
   }
 
@@ -82,7 +82,7 @@ overridden here? hmm.
     .title {
       color: $color-grey-1;
       // display: block;
-      padding-left: 1em;
+      padding-inline-start: 1em;
       display: inline-block;
     }
 
@@ -108,7 +108,7 @@ overridden here? hmm.
 
 .image-chooser {
   .chosen {
-    padding-left: $thumbnail-width;
+    padding-inline-start: $thumbnail-width;
 
     &:before {
       display: inline-block;
@@ -116,8 +116,8 @@ overridden here? hmm.
 
     .preview-image {
       float: left;
-      margin-left: -($thumbnail-width);
-      margin-right: 1em;
+      margin-inline-start: -($thumbnail-width);
+      margin-inline-end: 1em;
       max-width: $thumbnail-width;
 
       // Resize standard Wagtail thumbnail size (165x165) to 130 for space-saving purposes.

client/scss/components/_comments-controls.scss

@@ -2,12 +2,12 @@
   position: relative;
   display: flex;
   justify-content: flex-end;
-  padding-right: 2px;
+  padding-inline-end: 2px;
   height: 42px;
   box-sizing: border-box;
 
   @include media-breakpoint-up(sm) {
-    padding-right: 30px;
+    padding-inline-end: 30px;
     height: 43px;
   }
 }
@@ -37,7 +37,10 @@
 
   &__icon {
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: -12px;
+    inset-inline-start: -12px;
     bottom: 3px;
     width: 52px;
     height: 52px;
@@ -48,7 +51,10 @@
   &__count {
     position: absolute;
     top: -1px;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: -8px;
+    inset-inline-end: -8px;
     width: 19px;
     height: 19px;
     box-sizing: border-box;
@@ -76,7 +82,7 @@
     font-size: 12px;
     color: $color-white;
     font-weight: 400;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -107,6 +113,6 @@
   }
 
   .switch__toggle {
-    margin-left: 15px;
+    margin-inline-start: 15px;
   }
 }

client/scss/components/_comments-notification-dropdown.scss

@@ -57,7 +57,10 @@
     width: 0;
     height: 0;
     z-index: 2;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 18px;
+    inset-inline-end: 18px;
     border-style: solid;
     border-width: 0 8px 8px 8px;
     border-color: transparent transparent $color-text-base transparent;

client/scss/components/_dropdown.legacy.scss

@@ -12,7 +12,7 @@
     width: 100%;
     height: 3em;
     line-height: 3em;
-    text-align: left;
+    text-align: start;
     float: left;
   }
 
@@ -33,7 +33,10 @@
     position: absolute;
     overflow: hidden;
     top: 100%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: -2000px;
+    inset-inline-start: -2000px;
     z-index: 500;
     opacity: 0;
 
@@ -92,17 +95,20 @@
       }
 
       &.icon {
-        padding-right: 5em;
+        padding-inline-end: 5em;
 
         // stylelint-disable-next-line max-nesting-depth
         &:before,
         &:after {
+          // Remove once we drop support for Safari 13.
+          // stylelint-disable-next-line property-disallowed-list
           right: 1em;
+          inset-inline-end: 1em;
         }
       }
 
       &.shortcut {
-        padding-right: 7em;
+        padding-inline-end: 7em;
       }
     }
 
@@ -123,7 +129,10 @@
 
     .kbd {
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 1em;
+      inset-inline-end: 1em;
       font-weight: 600;
       font-size: 0.8em;
       color: rgba(0, 0, 0, 0.3);
@@ -133,7 +142,10 @@
   &.open ul {
     box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
     opacity: 1;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     display: block;
   }
 
@@ -162,9 +174,12 @@
     line-height: 2.8em;
     cursor: pointer;
     height: 100%;
-    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     padding: 0 0.5em;
     text-align: center;
 
@@ -336,6 +351,6 @@
   .button svg.icon {
     // TODO: leave only class when iconfont styles are removed
     @include svg-icon();
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
   }
 }

client/scss/components/_dropdown.scss

@@ -7,8 +7,8 @@
 .c-dropdown__button {
   display: inline-block;
   box-sizing: border-box;
-  padding-left: 0.5rem;
-  padding-right: 0.25rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.25rem;
   // Make this the same as the other buttons
   line-height: 1.85;
   border: solid 1px transparent;
@@ -21,17 +21,17 @@
 
 .c-dropdown--large .c-dropdown__button {
   line-height: 2.9em;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
 
   .icon-site {
-    padding-right: 0.2rem;
+    padding-inline-end: 0.2rem;
   }
 }
 
 .c-dropdown__icon {
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
+  padding-inline-start: 0.4rem;
+  padding-inline-end: 0.4rem;
 }
 
 .c-dropdown__toggle {
@@ -73,7 +73,7 @@
   list-style: none;
   // Override any right alignment that might've been set by a parent element
   // (such as the snippets header)
-  text-align: left;
+  text-align: start;
 }
 
 .c-dropdown__item {

client/scss/components/_footer.scss

@@ -14,7 +14,7 @@
 
     .dropdown li,  // dropdown li
         &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
@@ -23,7 +23,7 @@
     background: $color-grey-1;
     color: $color-white;
     margin-top: 0;
-    margin-right: 0;
+    margin-inline-end: 0;
     transition: transform 1s;
 
     &:first-child {
@@ -36,7 +36,7 @@
     }
 
     li {
-      margin-right: 1em;
+      margin-inline-end: 1em;
     }
   }
 
@@ -47,7 +47,7 @@
 
     .icon {
       font-size: 1.2em;
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     p {
@@ -72,7 +72,7 @@
       input[type='button'],
       button,
       .button {
-        padding-right: 2.6em;
+        padding-inline-end: 2.6em;
       }
     }
   }
@@ -83,13 +83,13 @@
 
   .meta {
     float: right;
-    text-align: right;
+    text-align: end;
     padding: 7px math.div($grid-gutter-width, 2);
     font-size: 0.85em;
 
     p {
       margin: 0;
-      margin-right: $grid-gutter-width;
+      margin-inline-end: $grid-gutter-width;
       white-space: nowrap;
     }
 
@@ -119,7 +119,10 @@
       }
 
       .avatar {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         left: auto;
+        inset-inline-start: auto;
       }
     }
 
@@ -141,8 +144,8 @@
   }
 
   @include media-breakpoint-up(sm) {
-    margin-left: calc(#{$desktop-nice-padding} - 0.75em);
-    margin-right: $desktop-nice-padding;
+    margin-inline-start: calc(#{$desktop-nice-padding} - 0.75em);
+    margin-inline-end: $desktop-nice-padding;
     width: auto;
     position: fixed;
     bottom: 0;
@@ -153,15 +156,15 @@
 
     &__container {
       padding: 0.75em;
-      margin-right: 0;
+      margin-inline-end: 0;
 
       &:not(:first-child) {
-        margin-left: -$border-curvature;
+        margin-inline-start: -$border-curvature;
       }
     }
 
     &__save-warning {
-      margin-right: 50px;
+      margin-inline-end: 50px;
     }
   }
 }

client/scss/components/_forms.scss

@@ -85,7 +85,10 @@
     border-radius: 0 6px 6px 0;
     z-index: 0;
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     top: 1px;
     bottom: 0;
     width: 1.5em;
@@ -107,7 +110,7 @@
 
   // Override default select padding so the chevron will overlap with long option text
   select {
-    padding-right: 5em;
+    padding-inline-end: 5em;
   }
 }
 
@@ -156,7 +159,7 @@ label.required:after {
   color: $color-red;
   font-weight: bold;
   display: inline-block;
-  margin-left: 0.5em;
+  margin-inline-start: 0.5em;
   line-height: 1em;
   font-size: 13px;
 }
@@ -198,11 +201,17 @@ label.required:after {
     }
 
     &:before {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0.3em;
+      inset-inline-start: 0.3em;
     }
 
     &:after {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 0.5em;
+      inset-inline-end: 0.5em;
     }
   }
 
@@ -210,7 +219,7 @@ label.required:after {
   input:not([type='checkbox']),
   input:not([type='submit']),
   input:not([type='button']) {
-    padding-left: 2.5em;
+    padding-inline-start: 2.5em;
   }
 
   // smaller fields required slight repositioning of icons
@@ -223,11 +232,17 @@ label.required:after {
       }
 
       &:before {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         left: 0.5em;
+        inset-inline-start: 0.5em;
       }
 
       &:after {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 0.5em;
+        inset-inline-end: 0.5em;
       }
     }
   }
@@ -347,7 +362,7 @@ li.inline .field {
 // solve gutter issues of inline fields
 ul.inline li:first-child,
 li.inline:first-child {
-  margin-left: math.div(-$grid-gutter-width, 2);
+  margin-inline-start: math.div(-$grid-gutter-width, 2);
 }
 
 // search-bars
@@ -406,7 +421,7 @@ li.inline:first-child {
 
   .field-col {
     float: left;
-    padding-left: 0;
+    padding-inline-start: 0;
 
     // anything less than 4 columns or greater than 6 is impractical
     &.col4 {
@@ -416,7 +431,7 @@ li.inline:first-child {
 
       .field-content {
         @include column(2, $padding, 4);
-        padding-left: 0;
+        padding-inline-start: 0;
       }
     }
 
@@ -427,7 +442,7 @@ li.inline:first-child {
 
       .field-content {
         @include column(4, $padding, 6);
-        padding-left: 0;
+        padding-inline-start: 0;
       }
     }
   }
@@ -453,30 +468,39 @@ li.inline:first-child {
   }
 
   .field-content {
-    padding-right: 45px;
+    padding-inline-end: 45px;
 
     @include media-breakpoint-up(sm) {
-      padding-right: 60px;
+      padding-inline-end: 60px;
     }
   }
 
   .widget-draftail_rich_text_area .field-content {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   .field-comment-control {
     position: absolute;
     display: block;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     height: 100%;
     line-height: 100%;
 
     &--object {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 20px;
+      inset-inline-end: 20px;
 
       @include media-breakpoint-up(lg) {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 350px;
+        inset-inline-end: 350px;
       }
     }
 
@@ -490,10 +514,16 @@ li.inline:first-child {
       border-radius: 3px;
       position: absolute;
       top: 50%;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 0;
+      inset-inline-end: 0;
 
       @include media-breakpoint-up(sm) {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 10px;
+        inset-inline-end: 10px;
       }
 
       // Hide by default, reveal on hover of parent
@@ -501,7 +531,10 @@ li.inline:first-child {
         opacity: 0;
         pointer-events: none;
         transform: translateY(-50%);
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 0;
+        inset-inline-end: 0;
       }
 
       .icon-reversed {
@@ -563,7 +596,10 @@ li.inline:first-child {
 
   .object.model_choice_field {
     .object-help {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 153px;
+      inset-inline-end: 153px;
     }
   }
 }

client/scss/components/_grid.legacy.scss

@@ -27,10 +27,6 @@
 }
 
 @include media-breakpoint-up(sm) {
-  .content-wrapper {
-    border-bottom-right-radius: 5px;
-  }
-
   .content {
     border-top: 0;
     background-color: none;

client/scss/components/_header.scss

@@ -23,14 +23,14 @@ header {
     &.icon:before {
       width: 1em;
       display: none;
-      margin-right: 0.4em;
+      margin-inline-end: 0.4em;
       font-size: 1.5em;
     }
   }
 
   .col {
     float: left;
-    margin-right: 2em;
+    margin-inline-end: 2em;
   }
 
   .left {
@@ -43,7 +43,7 @@ header {
   }
 
   .right {
-    text-align: right;
+    text-align: end;
     float: right;
   }
 
@@ -52,7 +52,10 @@ header {
     color: $nav-search-color;
     position: absolute;
     top: 0.3em;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0.5em;
+    inset-inline-start: 0.5em;
   }
 
   // For case where content below header should merge with it
@@ -61,23 +64,23 @@ header {
   }
 
   &.tab-merged {
-    padding-left: $desktop-nice-padding;
-    padding-right: $desktop-nice-padding;
+    padding-inline-start: $desktop-nice-padding;
+    padding-inline-end: $desktop-nice-padding;
 
     .right:last-child {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
 
     @include media-breakpoint-down(xs) {
       .breadcrumb {
-        padding-left: calc(#{$desktop-nice-padding} - 8px);
+        padding-inline-start: calc(#{$desktop-nice-padding} - 8px);
       }
     }
     @include media-breakpoint-up(sm) {
       .breadcrumb {
-        margin-left: -$desktop-nice-padding;
-        margin-right: -$desktop-nice-padding;
-        padding-left: math.div($desktop-nice-padding, 2);
+        margin-inline-start: -$desktop-nice-padding;
+        margin-inline-end: -$desktop-nice-padding;
+        padding-inline-start: math.div($desktop-nice-padding, 2);
       }
     }
   }
@@ -87,10 +90,10 @@ header {
 
     .breadcrumb {
       margin-bottom: 1rem;
-      padding-left: math.div(
+      padding-inline-start: math.div(
         $desktop-nice-padding,
         2
-      ); // rather than padding-left: revert;
+      ); // rather than padding-inline-start: revert;
     }
   }
 
@@ -100,12 +103,12 @@ header {
 
     @include media-breakpoint-down(xs) {
       // To all hamburger menu to be visible
-      padding-left: 1.6em;
-      padding-right: 1.6em;
+      padding-inline-start: 1.6em;
+      padding-inline-end: 1.6em;
       padding-top: 11px;
 
       .nice-padding {
-        margin-left: -$desktop-nice-padding;
+        margin-inline-start: -$desktop-nice-padding;
       }
     }
   }
@@ -168,11 +171,11 @@ header {
 
     li {
       display: inline;
-      margin-right: 2em;
+      margin-inline-end: 2em;
     }
 
     .avatar.small {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     a {
@@ -195,7 +198,7 @@ header {
 
     .left {
       float: left;
-      margin-right: 0;
+      margin-inline-end: 0;
 
       &:first-child {
         padding-bottom: 0;
@@ -236,11 +239,11 @@ header {
 
 .header-title {
   @include media-breakpoint-down(xs) {
-    padding-left: $mobile-nav-indent;
+    padding-inline-start: $mobile-nav-indent;
   }
 
   &-icon {
     @include svg-icon();
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
   }
 }

client/scss/components/_help-block.scss

@@ -24,13 +24,16 @@
 .help-warning,
 .help-critical {
   border-radius: 3px;
-  padding-left: 3.5em;
+  padding-inline-start: 3.5em;
   position: relative;
 
   .icon {
     @include svg-icon(1.25rem);
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 1.125rem;
+    inset-inline-start: 1.125rem;
     top: 0.8125rem;
   }
 }

client/scss/components/_icons.scss

@@ -29,7 +29,7 @@
 
 // stylelint-disable-next-line no-duplicate-selectors
 .icon:after {
-  text-align: right;
+  text-align: end;
 }
 
 // =============================================================================
@@ -90,7 +90,7 @@ svg.icon-spinner {
   overflow: hidden;
 
   &:before {
-    margin-right: 0;
+    margin-inline-end: 0;
     font-size: 1rem;
     display: inline-block;
     width: 100%;
@@ -161,7 +161,7 @@ svg.icon-spinner {
 
 .icon.locale-error {
   vertical-align: text-top;
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
   width: 1.5em;
   height: 1.5em;
   color: $color-red;

client/scss/components/_indicator.scss

@@ -1,56 +0,0 @@
-@use 'sass:math';
-// =============================================================================
-// Indicator light
-// =============================================================================
-
-// =============================================================================
-// Indicator light
-// =============================================================================
-$c-indicator-size: 0.625em;
-$c-indicator-margin: 0.25rem;
-
-.c-indicator {
-  display: inline-block;
-  border-radius: 50rem;
-  width: $c-indicator-size;
-  height: $c-indicator-size;
-  margin-top: -0.125rem;
-  margin-right: $c-indicator-margin;
-  font-size: 1rem;
-  vertical-align: middle;
-}
-
-// =============================================================================
-// States
-// =============================================================================
-.is-absent .c-indicator {
-  background: $color-state-absent;
-}
-
-.is-live .c-indicator {
-  background: $color-state-live;
-}
-
-.is-draft .c-indicator {
-  background: $color-state-draft;
-}
-
-// This is hipster. But it works.
-.is-live\+draft .c-indicator {
-  background: $color-state-draft;
-  position: relative;
-
-  &:before {
-    content: '';
-    width: math.div($c-indicator-size, 2);
-    height: $c-indicator-size;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-bottom-left-radius: 50rem;
-    border-top-left-radius: 50rem;
-    background: $color-state-live;
-    transform: rotate(45deg);
-    transform-origin: 100% 50%;
-  }
-}

client/scss/components/_listing.scss

@@ -10,7 +10,7 @@ ul.listing {
 
   ul {
     list-style-type: none;
-    padding-left: 0;
+    padding-inline-start: 0;
     // @include unlist();
   }
 
@@ -45,7 +45,7 @@ ul.listing {
 
     th {
       font-size: 0.9em;
-      text-align: left;
+      text-align: start;
       font-weight: normal;
       white-space: nowrap;
     }
@@ -61,14 +61,17 @@ ul.listing {
 
       &.icon:after {
         opacity: 0.5;
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 0;
+        inset-inline-end: 0;
       }
     }
   }
 
   &.full-width td:first-child,
   &.full-width th:first-child {
-    padding-left: 20px;
+    padding-inline-start: 20px;
   }
 
   &.full-width {
@@ -162,12 +165,12 @@ ul.listing {
   }
 
   &.full-width .divider td {
-    padding-left: 20px;
+    padding-inline-start: 20px;
   }
 
   // specific columns
   .bulk {
-    padding-right: 0;
+    padding-inline-end: 0;
 
     label {
       font-size: 1em;
@@ -314,7 +317,7 @@ ul.listing {
       vertical-align: middle;
 
       &::before {
-        margin-right: 2px;
+        margin-inline-end: 2px;
       }
     }
 
@@ -371,7 +374,7 @@ ul.listing {
   }
 
   table .no-results-message {
-    padding-left: 20px;
+    padding-inline-start: 20px;
   }
 
   .unpublished .title-wrapper {
@@ -428,7 +431,7 @@ ul.listing {
   }
 
   .indicator {
-    margin-right: 0;
+    margin-inline-end: 0;
     font-size: 1em;
     opacity: 0.7;
   }
@@ -474,7 +477,10 @@ table.listing {
       font-size: 1em;
       opacity: 1;
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 10%;
+      inset-inline-end: 10%;
       top: 2em;
     }
 
@@ -514,12 +520,12 @@ table.listing {
     height: 35px;
 
     .title {
-      padding-left: 0;
+      padding-inline-start: 0;
     }
   }
 
   tbody .title {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
@@ -583,7 +589,7 @@ table.listing {
   &__icon {
     width: 1em;
     height: 1em;
-    margin-right: 0.2em;
+    margin-inline-end: 0.2em;
     vertical-align: middle;
     position: relative;
     top: -1px;
@@ -629,7 +635,7 @@ table.listing {
             display: inline-block;
             height: 100%;
             vertical-align: middle;
-            margin-right: -0.25em;
+            margin-inline-end: -0.25em;
           }
 
           img {
@@ -707,16 +713,16 @@ table.listing {
     }
 
     table .no-results-message {
-      padding-left: 50px;
+      padding-inline-start: 50px;
     }
 
     &.full-width td:first-child,
     &.full-width th:first-child {
-      padding-left: 25px;
+      padding-inline-start: 25px;
     }
 
     &.full-width .divider td {
-      padding-left: 50px;
+      padding-inline-start: 50px;
     }
   }
 }
@@ -752,7 +758,7 @@ td.ord {
   .handle {
     // Align with the row's title text, and the column's label.
     margin-top: -28px;
-    margin-left: 13px;
+    margin-inline-start: 13px;
   }
 }
 

client/scss/components/_loading-mask.scss

@@ -13,9 +13,15 @@
     &:before {
       content: '';
       top: -5px;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: -5px;
+      inset-inline-start: -5px;
       bottom: -5px;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: -5px;
+      inset-inline-end: -5px;
       z-index: 1;
       background-color: rgba(255, 255, 255, 0.5);
     }
@@ -25,7 +31,10 @@
       display: block;
       width: 1.875rem;
       height: 1.875rem;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: 50%;
+      inset-inline-start: 50%;
       top: 50%;
       animation: spin-wag 0.5s infinite linear;
       mask-image: url('#{$images-root}icons/spinner.svg');

client/scss/components/_logo.scss

@@ -28,7 +28,7 @@
 }
 
 .wagtail-logo-container__mobile {
-  margin-right: 10px;
+  margin-inline-end: 10px;
   background-color: #555;
   border-radius: 50%;
   padding: 5px 7.5px;
@@ -68,7 +68,10 @@
 
   .wagtail-logo {
     display: block;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 100%;
     height: 100%;

client/scss/components/_main-nav.scss

@@ -2,7 +2,7 @@
 
 .nav-wrapper {
   position: relative;
-  margin-left: -$menu-width;
+  margin-inline-start: -$menu-width;
   width: $menu-width;
   float: left;
   display: flex;
@@ -12,7 +12,7 @@
 
   .inner {
     background: $nav-grey-1;
-    border-right: 1px solid transparent; // ensure visible separation in Windows High Contrast mode
+    border-inline-end: 1px solid transparent; // ensure visible separation in Windows High Contrast mode
 
     @include media-breakpoint-up(sm) {
       // On medium, make it possible for the nav links to scroll.
@@ -24,7 +24,7 @@
 
 .nav-toggle.icon {
   position: absolute;
-  padding-left: $mobile-nice-padding;
+  padding-inline-start: $mobile-nice-padding;
   cursor: pointer;
   border: 1px solid transparent; // ensure visible separation in Windows High Contrast mode
   background-color: transparent;
@@ -76,12 +76,12 @@
   .menu-item a {
     position: relative;
     white-space: nowrap;
-    border-left: 3px solid transparent;
+    border-inline-start: 3px solid transparent;
 
     &:before {
       font-size: 1rem;
       vertical-align: -15%;
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     // only really used for spinners and settings menu
@@ -89,7 +89,10 @@
       font-size: 1.5em;
       margin: 0;
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 0.5em;
+      inset-inline-end: 0.5em;
       top: 0.5em;
       margin-top: 0;
     }
@@ -100,21 +103,21 @@
     text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 
     > a {
-      border-left-color: $color-salmon;
+      border-inline-start-color: $color-salmon;
       color: $color-white;
     }
   }
 
   .nav-footer-submenu {
     a {
-      border-left: 3px solid transparent;
+      border-inline-start: 3px solid transparent;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 
       &:before {
         font-size: 1rem;
-        margin-right: 0.5em;
+        margin-inline-end: 0.5em;
         vertical-align: -10%;
       }
     }
@@ -132,7 +135,7 @@
 .icon--menuitem {
   width: 1.25em;
   height: 1.25em;
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
   vertical-align: text-top;
 }
 
@@ -145,7 +148,10 @@
     height: 1.5em;
     position: absolute;
     top: 0.8125em;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0.5em;
+    inset-inline-end: 0.5em;
     @include transition(transform 0.3s ease);
 
     .menu-item.submenu-active & {
@@ -175,11 +181,11 @@
     padding: 0.9em 1.7em 0.9em 4.5em;
 
     &:before {
-      margin-left: -1.5em;
+      margin-inline-start: -1.5em;
     }
 
     .icon--menuitem {
-      margin-left: -1.75em;
+      margin-inline-start: -1.75em;
     }
 
     &:hover {
@@ -244,7 +250,10 @@
     background-color: transparent;
     position: absolute;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 1em;
+    inset-inline-end: 1em;
     bottom: 0;
     padding: 0;
     width: 3em;
@@ -281,7 +290,7 @@ body.explorer-open {
   }
 
   .nav-wrapper {
-    margin-left: -$menu-width-max;
+    margin-inline-start: -$menu-width-max;
     width: $menu-width-max;
   }
 
@@ -294,21 +303,24 @@ body.explorer-open {
   .wrapper,
   body.nav-open .wrapper {
     transform: none;
-    padding-left: $menu-width;
+    padding-inline-start: $menu-width;
 
-    @include transition(padding-left $menu-transition-duration ease);
+    @include transition(padding-inline-start $menu-transition-duration ease);
   }
 
   body.sidebar-collapsed .wrapper {
-    padding-left: $menu-width-slim;
+    padding-inline-start: $menu-width-slim;
   }
 
   .nav-wrapper {
     // height and position necessary to force it to 100% height of screen (with some JS help)
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     height: 100%;
-    margin-left: 0;
+    margin-inline-start: 0;
 
     .inner {
       height: 100%;
@@ -362,7 +374,7 @@ body.explorer-open {
 
       .avatar {
         float: left;
-        margin-right: 0.9em;
+        margin-inline-end: 0.9em;
 
         &:before {
           color: inherit;
@@ -372,7 +384,7 @@ body.explorer-open {
 
       em {
         box-sizing: border-box;
-        padding-right: 1.8em;
+        padding-inline-end: 1.8em;
         margin-top: 1.2em;
         font-style: normal;
         font-weight: 700;
@@ -385,7 +397,10 @@ body.explorer-open {
         &:after {
           font-size: 1.5em;
           position: absolute;
+          // Remove once we drop support for Safari 13.
+          // stylelint-disable-next-line property-disallowed-list
           right: 0.25em;
+          inset-inline-end: 0.25em;
         }
       }
     }
@@ -398,7 +413,10 @@ body.explorer-open {
     width: 0;
     padding: 0;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: $menu-width;
+    inset-inline-start: $menu-width;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -455,7 +473,7 @@ body.explorer-open {
       width: $menu-width;
 
       a {
-        padding-left: 3.5em;
+        padding-inline-start: 3.5em;
       }
     }
   }
@@ -479,7 +497,7 @@ body.explorer-open {
     }
 
     .nav-wrapper {
-      margin-left: 0;
+      margin-inline-start: 0;
       width: $menu-width;
     }
 

client/scss/components/_messages.scss

@@ -6,7 +6,7 @@
   background-color: $color-grey-1;
 
   .buttons {
-    margin-left: 1em;
+    margin-inline-start: 1em;
   }
 
   > ul {
@@ -24,14 +24,14 @@
 
   > ul > li:before {
     @include font-smoothing;
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     font-size: 1.5em;
     vertical-align: middle;
   }
 
   &-icon {
     vertical-align: text-top;
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     width: 1.5em;
     height: 1.5em;
   }
@@ -80,7 +80,7 @@
 
 @include media-breakpoint-up(sm) {
   .messages > ul > li {
-    padding-left: 1.6em;
-    padding-right: 3em;
+    padding-inline-start: 1.6em;
+    padding-inline-end: 3em;
   }
 }

client/scss/components/_modals.scss

@@ -26,17 +26,23 @@ $zindex-modal-background: 500;
   overflow-y: scroll;
   position: fixed;
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 0;
+  inset-inline-end: 0;
   bottom: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0;
+  inset-inline-start: 0;
   z-index: $zindex-modal-background;
 }
 
 // Shell div to position the modal with bottom padding
 .modal-dialog {
   box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   padding: 0;
   z-index: ($zindex-modal-background + 10);
   height: 90%;
@@ -47,7 +53,7 @@ $zindex-modal-background: 500;
     display: inline-block;
     height: 100%;
     vertical-align: middle;
-    margin-right: -0.25em;
+    margin-inline-end: -0.25em;
   }
 }
 
@@ -69,9 +75,15 @@ $zindex-modal-background: 500;
 .modal-backdrop {
   position: fixed;
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 0;
+  inset-inline-end: 0;
   bottom: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0;
+  inset-inline-start: 0;
   z-index: ($zindex-modal-background - 10);
   background-color: $color-black;
 
@@ -91,7 +103,10 @@ $zindex-modal-background: 500;
   width: 50px;
   height: 50px;
   top: 10px;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 10px;
+  inset-inline-end: 10px;
   z-index: 1;
 }
 
@@ -101,22 +116,22 @@ $zindex-modal-background: 500;
   padding-bottom: 2em;
 
   header {
-    padding-left: 2em;
-    padding-right: 100px;
+    padding-inline-start: 2em;
+    padding-inline-end: 100px;
 
     &.tab-merged {
-      padding-left: 1.6em;
+      padding-inline-start: 1.6em;
     }
   }
 
   .header-title {
     // stylelint-disable-next-line declaration-no-important
-    padding-left: 0 !important;
-    margin-left: -36px;
+    padding-inline-start: 0 !important;
+    margin-inline-start: -36px;
   }
 
   .tab-merged .header-title {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 
@@ -127,7 +142,7 @@ $zindex-modal-background: 500;
 
   .modal-body {
     header.tab-merged {
-      padding-left: $desktop-nice-padding;
+      padding-inline-start: $desktop-nice-padding;
     }
   }
 }

client/scss/components/_progressbar.scss

@@ -14,12 +14,12 @@
     border-radius: 1.5em;
     overflow: hidden;
     box-sizing: border-box;
-    text-align: right;
+    text-align: end;
     line-height: 1.2em;
     color: $color-white;
     font-size: 0.85em;
     background-color: $color-teal;
     height: 1.2em;
-    padding-right: 1em;
+    padding-inline-end: 1em;
   }
 }

client/scss/components/_skiplink.scss

@@ -2,7 +2,10 @@
   display: block;
   position: fixed;
   top: -1000rem;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 1rem;
+  inset-inline-start: 1rem;
   z-index: 3000;
 
   &:focus {

client/scss/components/_tabs.scss

@@ -9,11 +9,11 @@
     float: left;
     padding: 0;
     position: relative;
-    margin-right: 2px;
+    margin-inline-end: 2px;
 
     &:first-of-type {
-      padding-left: $desktop-nice-padding;
-      margin-left: 0;
+      padding-inline-start: $desktop-nice-padding;
+      margin-inline-start: 0;
     }
   }
 
@@ -45,7 +45,10 @@
       border-radius: 50px;
       box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: -0.5em;
+      inset-inline-end: -0.5em;
       top: -0.5em;
       z-index: 5;
       min-width: 0.9em;
@@ -74,8 +77,8 @@
 
   li.right {
     float: right;
-    margin-right: 0;
-    margin-left: 2px;
+    margin-inline-end: 0;
+    margin-inline-start: 2px;
   }
 
   li.wide {
@@ -121,13 +124,13 @@
     }
 
     a {
-      padding-left: $mobile-nice-padding;
-      padding-right: $mobile-nice-padding;
+      padding-inline-start: $mobile-nice-padding;
+      padding-inline-end: $mobile-nice-padding;
     }
 
     li.settings a {
-      padding-left: 2em;
-      padding-right: 2em;
+      padding-inline-start: 2em;
+      padding-inline-end: 2em;
     }
   }
 
@@ -136,7 +139,7 @@
     min-width: 0;
 
     &:first-of-type {
-      padding-left: $desktop-nice-padding;
+      padding-inline-start: $desktop-nice-padding;
     }
   }
 }
@@ -144,7 +147,7 @@
 @include media-breakpoint-down(xs) {
   // To allow tabs on the edit page to be editable
   .tab-nav li:first-of-type {
-    padding-left: 1.6em;
+    padding-inline-start: 1.6em;
   }
 
   .tab-nav li {

client/scss/components/_tag.scss

@@ -12,7 +12,7 @@
     content: '';
     display: inline-block;
     background: $color-white;
-    padding-right: 0.5rem;
+    padding-inline-end: 0.5rem;
     width: 16px;
     height: 16px;
     mask-image: url('#{$images-root}icons/tag.svg');
@@ -21,7 +21,7 @@
   }
 
   .taglist & {
-    margin-right: 0.8em;
+    margin-inline-end: 0.8em;
   }
 }
 
@@ -41,7 +41,7 @@ a.tag:hover {
 
     @include media-breakpoint-up(sm) {
       @include column(2);
-      padding-left: 0;
+      padding-inline-start: 0;
     }
 
     font-weight: 700;
@@ -56,7 +56,7 @@ a.tag:hover {
   }
 
   .button.bicolor.icon-cross {
-    padding-left: 2em;
+    padding-inline-start: 2em;
 
     &:before {
       background-color: transparent;

client/scss/components/_tooltips.scss

@@ -49,21 +49,30 @@
 
 .tooltip.top .tooltip-arrow {
   bottom: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 50%;
-  margin-left: -5px;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
   border-top-color: #000;
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-left .tooltip-arrow {
   bottom: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 5px;
+  inset-inline-start: 5px;
   border-top-color: #000;
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-right .tooltip-arrow {
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 5px;
+  inset-inline-end: 5px;
   bottom: 0;
   border-top-color: #000;
   border-width: 5px 5px 0;
@@ -71,38 +80,53 @@
 
 .tooltip.right .tooltip-arrow {
   top: 50%;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0;
+  inset-inline-start: 0;
   margin-top: -5px;
-  border-right-color: #000;
+  border-inline-end-color: #000;
   border-width: 5px 5px 5px 0;
 }
 
 .tooltip.left .tooltip-arrow {
   top: 50%;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 0;
+  inset-inline-end: 0;
   margin-top: -5px;
-  border-left-color: #000;
+  border-inline-start-color: #000;
   border-width: 5px 0 5px 5px;
 }
 
 .tooltip.bottom .tooltip-arrow {
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 50%;
-  margin-left: -5px;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
   border-bottom-color: #000;
   border-width: 0 5px 5px;
 }
 
 .tooltip.bottom-left .tooltip-arrow {
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 5px;
+  inset-inline-start: 5px;
   border-bottom-color: #000;
   border-width: 0 5px 5px;
 }
 
 .tooltip.bottom-right .tooltip-arrow {
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 5px;
+  inset-inline-end: 5px;
   border-bottom-color: #000;
   border-width: 0 5px 5px;
 }

client/scss/components/_workflow-tasks.scss

@@ -14,8 +14,8 @@
     width: $task-width;
     height: $task-height;
     margin: 7px;
-    padding-left: 9px;
-    padding-right: 9px;
+    padding-inline-start: 9px;
+    padding-inline-end: 9px;
   }
 
   &__step {

client/scss/core.scss

@@ -121,7 +121,6 @@ These are classes for components.
 @import 'components/header';
 @import 'components/progressbar';
 @import 'components/main-nav';
-@import 'components/indicator';
 @import 'components/tooltips';
 @import 'components/logo';
 @import 'components/grid.legacy';

client/scss/elements/_elements.scss

@@ -15,7 +15,10 @@ body {
     width: 100%;
     height: 100%;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     z-index: 5;
     opacity: 0;
     visibility: hidden;

client/scss/elements/_forms.scss

@@ -52,7 +52,7 @@ label,
   @include media-breakpoint-up(sm) {
     @include column(2);
     padding-top: 1.2em;
-    padding-left: 0;
+    padding-inline-start: 0;
 
     .radio_select &,
     .multiple_choice_field &,
@@ -156,7 +156,7 @@ input[type='radio'] {
   display: inline-block;
   height: 1.75rem;
   width: 1.75rem;
-  margin-right: 0.625rem;
+  margin-inline-end: 0.625rem;
   position: relative;
   background: $color-white;
   border-radius: 100%;
@@ -168,7 +168,10 @@ input[type='radio']:before {
   text-align: center;
   position: absolute;
   top: 0.1875rem;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0.1875rem;
+  inset-inline-start: 0.1875rem;
   cursor: pointer;
   display: block;
   width: 0.75rem;
@@ -188,7 +191,7 @@ input[type='checkbox'] {
   height: 1.375rem;
   width: 1.375rem;
   position: relative;
-  margin-right: 5px;
+  margin-inline-end: 5px;
   background: $color-white;
   border: 1px solid $color-grey-4;
   vertical-align: bottom;
@@ -198,7 +201,10 @@ input[type='checkbox']:before {
   content: '';
   position: absolute;
   top: 2px;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 2px;
+  inset-inline-start: 2px;
   cursor: pointer;
   display: block;
   line-height: 20px;
@@ -214,7 +220,10 @@ input[type='checkbox']:checked:before {
   width: 1rem;
   height: 1rem;
   top: 2px;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 2px;
+  inset-inline-start: 2px;
 }
 
 input[type='checkbox'][disabled]:before {

client/scss/objects/_avatar.scss

@@ -13,8 +13,14 @@
     position: absolute;
     z-index: 2;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     border: 0;
   }
 

client/scss/overrides/_utilities.dropdowns.scss

@@ -10,7 +10,10 @@
 
 .u-arrow--tl:before {
   bottom: 100%;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 1rem;
+  inset-inline-start: 1rem;
 }
 
 .dropup .u-arrow--tl:before {

client/scss/overrides/_utilities.legacy.scss

@@ -3,22 +3,22 @@
 }
 
 .nice-padding {
-  padding-left: $mobile-nice-padding;
-  padding-right: $mobile-nice-padding;
+  padding-inline-start: $mobile-nice-padding;
+  padding-inline-end: $mobile-nice-padding;
 
   @include media-breakpoint-up(sm) {
-    padding-left: $desktop-nice-padding;
-    padding-right: $desktop-nice-padding;
+    padding-inline-start: $desktop-nice-padding;
+    padding-inline-end: $desktop-nice-padding;
   }
 }
 
 @include media-breakpoint-up(sm) {
   .divider-before {
-    border-left: 1px solid $color-grey-4;
+    border-inline-start: 1px solid $color-grey-4;
   }
 
   .divider-after {
-    border-right: 1px solid $color-grey-4;
+    border-inline-end: 1px solid $color-grey-4;
   }
 }
 

client/scss/overrides/_vendor.datetimepicker.scss

@@ -5,7 +5,7 @@
   background: $color-white;
   border: 1px solid $color-input-focus-border;
   padding: 8px;
-  padding-left: 0;
+  padding-inline-start: 0;
   padding-top: 2px;
   position: absolute;
   z-index: 5;
@@ -20,7 +20,10 @@
 
   iframe {
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 75px;
     height: 210px;
@@ -39,7 +42,7 @@
 
   .xdsoft_datepicker {
     float: left;
-    margin-left: 8px;
+    margin-inline-start: 8px;
   }
 
   .xdsoft_datepicker.active + .xdsoft_timepicker {
@@ -92,7 +95,7 @@
 
   .xdsoft_today_button {
     float: left;
-    margin-left: 5px;
+    margin-inline-start: 5px;
 
     &:before {
       content: map.get($icons, 'home'); // UI-Redesign: to be removed
@@ -111,7 +114,7 @@
     min-width: 70px;
     float: left;
     text-align: center;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     margin-top: 0;
 
     .xdsoft_prev,
@@ -154,8 +157,8 @@
         border-bottom-width: 0;
         height: 2.3em;
         line-height: 2.3em;
-        padding-left: 0.6em;
-        padding-right: 0.6em;
+        padding-inline-start: 0.6em;
+        padding-inline-end: 0.6em;
 
         // stylelint-disable-next-line max-nesting-depth
         &:first-child {
@@ -187,7 +190,10 @@
     > .xdsoft_select {
       border: 1px solid #ccc;
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 0;
+      inset-inline-end: 0;
       top: 30px;
       z-index: 101;
       display: none;
@@ -196,11 +202,17 @@
       overflow-y: hidden;
 
       &.xdsoft_monthselect {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: -7px;
+        inset-inline-end: -7px;
       }
 
       &.xdsoft_yearselect {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 2px;
+        inset-inline-end: 2px;
       }
 
       > div > .xdsoft_option:hover {
@@ -222,7 +234,7 @@
 
   .xdsoft_month {
     width: 90px;
-    text-align: right;
+    text-align: end;
   }
 
   .xdsoft_year {
@@ -237,7 +249,7 @@
     }
 
     td > div {
-      padding-right: 5px;
+      padding-inline-end: 5px;
     }
 
     td,
@@ -246,7 +258,7 @@
       border: 1px solid #ddd;
       color: #666;
       font-size: 12px;
-      text-align: right;
+      text-align: end;
       padding: 5px 7px;
       border-collapse: collapse;
       cursor: pointer;
@@ -321,7 +333,10 @@
 .xdsoft_scrollbar {
   position: absolute;
   width: 7px;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 0;
+  inset-inline-end: 0;
   top: 0;
   bottom: 0;
   cursor: pointer;

client/scss/overrides/_vendor.tagit.scss

@@ -27,7 +27,7 @@
 
 .tagit-close {
   .ui-icon-close {
-    margin-left: 1rem;
+    margin-inline-start: 1rem;
     text-indent: 0;
   }
 

client/scss/settings/_variables.scss

@@ -93,12 +93,6 @@ $color-focus-outline: #ffbf47;
 $color-text-base: color.adjust($color-white, $lightness: -85%);
 $color-text-input: color.adjust($color-white, $lightness: -90%);
 
-// Color states
-$color-state-live: #59b524;
-$color-state-draft: #808080;
-$color-state-absent: #ff8f11;
-$color-state-live-draft: #43b1b0;
-
 // System Colors
 $media-forced-colours: active;
 $system-color-link-text: LinkText;

client/scss/tools/_mixins.general.scss

@@ -25,7 +25,7 @@
 @mixin unlist() {
   margin-top: 0;
   margin-bottom: 0;
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style-type: none;
   font-style: normal;
 
@@ -41,7 +41,7 @@
 @mixin unlistimmediate() {
   margin-top: 0;
   margin-bottom: 0;
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style-type: none;
   font-style: normal;
 
@@ -94,9 +94,9 @@
   text-decoration: none;
   width: 1.3em;
   line-height: 1em;
-  text-align: left;
+  text-align: start;
   vertical-align: middle;
-  margin-right: 0.2em;
+  margin-inline-end: 0.2em;
 }
 
 // Applies given rules on hover, for devices that support hover.

client/scss/tools/_mixins.grid.scss

@@ -8,15 +8,15 @@ $padding: math.div($grid-gutter-width, 2);
   @include clearfix();
   box-sizing: border-box;
   display: block;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: $padding;
-  padding-left: $padding;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  padding-inline-end: $padding;
+  padding-inline-start: $padding;
 }
 
 @mixin row-flush() {
-  margin-left: -$padding;
-  margin-right: -$padding;
+  margin-inline-start: -$padding;
+  margin-inline-end: -$padding;
 }
 
 // Our column container
@@ -25,8 +25,8 @@ $padding: math.div($grid-gutter-width, 2);
   display: inline;
   float: left;
   width: 100% * math.div($x, $grid-columns);
-  padding-right: $padding;
-  padding-left: $padding;
+  padding-inline-end: $padding;
+  padding-inline-start: $padding;
 }
 
 @mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
@@ -36,40 +36,40 @@ $padding: math.div($grid-gutter-width, 2);
 
 // Push adds left padding
 @mixin push($offset: 1, $grid-columns: $grid-columns) {
-  margin-left: 100% * math.div($offset, $grid-columns);
+  margin-inline-start: 100% * math.div($offset, $grid-columns);
 }
 
 @mixin push-padding($offset: 1, $grid-columns: $grid-columns) {
-  padding-left: 100% * math.div($offset, $grid-columns);
+  padding-inline-start: 100% * math.div($offset, $grid-columns);
 }
 
 // Pull adds right padding
 @mixin pull($offset: 1, $grid-columns: $grid-columns) {
-  margin-right: 100% * math.div($offset, $grid-columns);
+  margin-inline-end: 100% * math.div($offset, $grid-columns);
 }
 
 @mixin pull-padding($offset: 1, $grid-columns: $grid-columns) {
-  padding-right: 100% * math.div($offset, $grid-columns);
+  padding-inline-end: 100% * math.div($offset, $grid-columns);
 }
 
 // only used in places where padding not applied to same elements as row or row-flush
 // most of the time this class should be applied directly to the html elements
 @mixin nice-padding {
-  padding-left: $mobile-nice-padding;
-  padding-right: $mobile-nice-padding;
+  padding-inline-start: $mobile-nice-padding;
+  padding-inline-end: $mobile-nice-padding;
 
   @include media-breakpoint-up(sm) {
-    padding-left: $desktop-nice-padding;
-    padding-right: $desktop-nice-padding;
+    padding-inline-start: $desktop-nice-padding;
+    padding-inline-end: $desktop-nice-padding;
   }
 }
 
 @mixin nice-margin {
-  margin-left: $mobile-nice-padding;
-  margin-right: $mobile-nice-padding;
+  margin-inline-start: $mobile-nice-padding;
+  margin-inline-end: $mobile-nice-padding;
 
   @include media-breakpoint-up(sm) {
-    margin-left: $desktop-nice-padding;
-    margin-right: $desktop-nice-padding;
+    margin-inline-start: $desktop-nice-padding;
+    margin-inline-end: $desktop-nice-padding;
   }
 }

client/src/components/CommentApp/components/Comment/style.scss

@@ -4,21 +4,32 @@
   width: calc(100vw - 40px);
   max-width: calc(100vw - 19%);
   display: block;
-  transition: top 0.5s ease 0s, right 0.5s ease 0s, height 0.5s ease 0s;
+  // Remove once we drop support for Safari 13.
+  transition: top 0.5s ease 0s, right 0.5s ease 0s,
+    inset-inline-end 0.5s ease 0s, height 0.5s ease 0s;
   pointer-events: auto;
   box-sizing: border-box;
   padding-bottom: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: -2000px;
+  inset-inline-end: -2000px;
 
   @include media-breakpoint-up(sm) {
     width: calc(100vw - 40px);
     max-width: 400px;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: initial;
+    inset-inline-start: initial;
   }
 
   @include media-breakpoint-up(md) {
     max-width: 200px;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
   }
 
   @include media-breakpoint-up(lg) {
@@ -26,10 +37,16 @@
   }
 
   &--focused {
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 35px;
+    inset-inline-end: 35px;
 
     @include media-breakpoint-up(md) {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 50px;
+      inset-inline-end: 50px;
     }
   }
 
@@ -80,12 +97,12 @@
 
   &__actions &__button,
   &__reply-actions &__button {
-    margin-right: 10px;
+    margin-inline-end: 10px;
     margin-top: 10px;
   }
 
   &__confirm-delete &__button {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     margin-bottom: 10px;
   }
 
@@ -112,7 +129,7 @@
     background-color: $color-red-dark;
     border-radius: 3px;
     padding: 5px;
-    padding-left: 10px;
+    padding-inline-start: 10px;
     height: 26px;
     line-height: 26px;
     vertical-align: middle;
@@ -120,13 +137,13 @@
     button {
       height: 26px;
       float: right;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       color: $color-white;
       background-color: $color-red-very-dark;
       border-color: $color-red-very-dark;
       padding: 2px;
-      padding-left: 10px;
-      padding-right: 10px;
+      padding-inline-start: 10px;
+      padding-inline-end: 10px;
       font-size: 0.65em;
       font-weight: bold;
     }

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -14,7 +14,7 @@
       100% - 110px
     ); // Leave room for actions to the right and avatar to the left
     margin: 0;
-    margin-left: 45px;
+    margin-inline-start: 45px;
     font-size: 11px;
     line-height: 15px;
   }
@@ -25,12 +25,15 @@
 
   &__actions {
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
   }
 
   &__action {
     float: left;
-    margin-left: 5px;
+    margin-inline-start: 5px;
     border-radius: 5px;
     width: 30px;
     height: 30px;
@@ -58,7 +61,10 @@
       svg {
         position: absolute;
         top: 7.5px;
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         left: 7.5px;
+        inset-inline-start: 7.5px;
         width: 15px;
         height: 15px;
       }
@@ -73,7 +79,10 @@
 
       > div {
         position: absolute;
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         right: 0;
+        inset-inline-end: 0;
         top: 35px;
       }
     }
@@ -98,7 +107,7 @@
     position: absolute;
     z-index: 1000;
     list-style: none;
-    text-align: left;
+    text-align: start;
     border-radius: 3px;
 
     &:before {
@@ -108,7 +117,10 @@
       display: block;
       position: absolute;
       bottom: 100%;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 9px;
+      inset-inline-end: 9px;
     }
 
     button {
@@ -119,7 +131,7 @@
       padding: 5px 10px;
       font-size: 13px;
       width: 100px;
-      text-align: left;
+      text-align: start;
 
       &:hover {
         color: #aaa;

client/src/components/CommentApp/components/CommentReply/style.scss

@@ -49,12 +49,12 @@
   }
 
   &__actions &__button {
-    margin-right: 10px;
+    margin-inline-end: 10px;
     margin-top: 10px;
   }
 
   &__confirm-delete &__button {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     margin-bottom: 10px;
   }
 
@@ -81,7 +81,7 @@
     background-color: $color-red-dark;
     border-radius: 3px;
     padding: 5px;
-    padding-left: 10px;
+    padding-inline-start: 10px;
     height: 26px;
     line-height: 26px;
     vertical-align: middle;
@@ -89,13 +89,13 @@
     button {
       height: 26px;
       float: right;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       color: $color-white;
       background-color: $color-red-very-dark;
       border-color: $color-red-very-dark;
       padding: 2px;
-      padding-left: 10px;
-      padding-right: 10px;
+      padding-inline-start: 10px;
+      padding-inline-end: 10px;
       font-size: 0.65em;
       font-weight: bold;
     }

client/src/components/CommentApp/main.scss

@@ -74,7 +74,10 @@ $box-padding: 10px;
   &__notice {
     background-color: $color-amber-1;
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: -$box-padding;
+    inset-inline-start: -$box-padding;
     bottom: 0;
     width: calc(100% + #{$box-padding} * 2);
     padding: 5px 10px;
@@ -84,15 +87,21 @@ $box-padding: 10px;
       color: $color-amber-0;
       width: 14px;
       height: 14px;
-      margin-right: 10px;
+      margin-inline-end: 10px;
       vertical-align: text-bottom;
     }
   }
 
   > :last-child &__notice {
     bottom: -$box-padding;
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-bottom-left-radius: $box-border-radius;
+    border-end-start-radius: $box-border-radius;
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-bottom-right-radius: $box-border-radius;
+    border-end-end-radius: $box-border-radius;
   }
 }
 
@@ -106,8 +115,8 @@ $box-padding: 10px;
   font-size: 12px;
   font-weight: bold;
   height: 25px;
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-inline-start: 5px;
+  padding-inline-end: 5px;
 
   &--primary {
     color: $color-white;
@@ -135,7 +144,10 @@ $box-padding: 10px;
   width: 400px;
   position: absolute;
   top: 30px;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 30px;
+  inset-inline-end: 30px;
   z-index: 50;
   font-family: $font-sans;
   pointer-events: none;

client/src/components/Draftail/Draftail.scss

@@ -90,7 +90,7 @@ $draftail-editor-font-family: $font-sans;
   padding-top: 2em;
   padding-bottom: 2em;
   background-color: $color-fieldset-hover;
-  border-right: 1px solid $color-input-border;
+  border-inline-end: 1px solid $color-input-border;
 
   &--focus {
     background-color: $color-input-focus;
@@ -124,7 +124,7 @@ $draftail-editor-font-family: $font-sans;
 }
 
 .Draftail-block--blockquote {
-  border-left: 0.25em solid $color-grey-3;
+  border-inline-start: 0.25em solid $color-grey-3;
   color: $color-grey-2;
   margin: 1em 0;
   padding: 1em 2em;

client/src/components/Draftail/Tooltip/Tooltip.js

@@ -11,19 +11,25 @@ const getTooltipStyles = (target, direction) => {
   switch (direction) {
     case TOP:
       return {
-        top: top + target.height,
-        left: left + target.width / 2,
+        'top': top + target.height,
+        // Remove once we drop support for Safari 13.
+        'left': left + target.width / 2,
+        'inset-inline-start': left + target.width / 2,
       };
     case LEFT:
       return {
-        top: top + target.height / 2,
-        left: left + target.width,
+        'top': top + target.height / 2,
+        // Remove once we drop support for Safari 13.
+        'left': left + target.width,
+        'inset-inline-start': left + target.width,
       };
     case TOP_LEFT:
     default:
       return {
-        top: top + target.height,
-        left: left,
+        'top': top + target.height,
+        // Remove once we drop support for Safari 13.
+        'left': left,
+        'inset-inline-start': left,
       };
   }
 };

client/src/components/Draftail/Tooltip/Tooltip.scss

@@ -16,21 +16,27 @@ $tooltip-color-no: #f48880;
 
   &::before {
     bottom: 100%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
     border-bottom-color: $tooltip-chrome;
   }
 }
 
 @mixin arrow--left {
-  margin-left: $tooltip-arrow-spacing;
+  margin-inline-start: $tooltip-arrow-spacing;
   transform: translateY(-50%);
 
   &::before {
     top: 50%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 100%;
+    inset-inline-end: 100%;
     transform: translateY(-50%);
-    border-right-color: $tooltip-chrome;
+    border-inline-end-color: $tooltip-chrome;
   }
 }
 
@@ -39,7 +45,10 @@ $tooltip-color-no: #f48880;
 
   &::before {
     bottom: 100%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: $tooltip-arrow-spacing;
+    inset-inline-start: $tooltip-arrow-spacing;
     border-bottom-color: $tooltip-chrome;
   }
 }
@@ -74,7 +83,7 @@ $tooltip-color-no: #f48880;
   &__link {
     @include font-smoothing;
     font-size: 0.875rem;
-    margin-right: $controls-spacing * 4;
+    margin-inline-end: $controls-spacing * 4;
     display: inline-block;
 
     &,

client/src/components/Draftail/Tooltip/__snapshots__/Tooltip.test.js.snap

@@ -6,6 +6,7 @@ exports[`Tooltip #direction left 1`] = `
   role="tooltip"
   style={
     Object {
+      "inset-inline-start": 13,
       "left": 13,
       "top": 601,
     }
@@ -21,6 +22,7 @@ exports[`Tooltip #direction top 1`] = `
   role="tooltip"
   style={
     Object {
+      "inset-inline-start": 7,
       "left": 7,
       "top": 1201,
     }
@@ -36,6 +38,7 @@ exports[`Tooltip #direction top-left 1`] = `
   role="tooltip"
   style={
     Object {
+      "inset-inline-start": 1,
       "left": 1,
       "top": 1201,
     }

client/src/components/Draftail/blocks/MediaBlock.scss

@@ -8,7 +8,10 @@
   &__icon-wrapper {
     position: absolute;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     background: $draftail-editor-chrome;
     color: $draftail-editor-chrome-text;
     line-height: 1;

client/src/components/Draftail/blocks/__snapshots__/MediaBlock.test.js.snap

@@ -27,6 +27,26 @@ exports[`MediaBlock no data 1`] = `
 </button>
 `;
 
+exports[`MediaBlock on click tooltip opens 1`] = `
+<div>
+  <div
+    class="Tooltip Tooltip--top-left"
+    role="tooltip"
+    style="top: 0px; left: 0px; inset-inline-start: 0;"
+  >
+    <div
+      style="max-width: 300px;"
+    >
+      <div
+        id="test"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`MediaBlock renders 1`] = `
 <button
   className="MediaBlock"
@@ -53,23 +73,3 @@ exports[`MediaBlock renders 1`] = `
   />
 </button>
 `;
-
-exports[`MediaBlock on click tooltip opens 1`] = `
-<div>
-  <div
-    class="Tooltip Tooltip--top-left"
-    role="tooltip"
-    style="top: 0px; left: 0px;"
-  >
-    <div
-      style="max-width: 300px;"
-    >
-      <div
-        id="test"
-      >
-        Test
-      </div>
-    </div>
-  </div>
-</div>
-`;

client/src/components/Draftail/decorators/TooltipEntity.scss

@@ -14,7 +14,7 @@ $icon-size: 1em;
   .icon {
     width: $icon-size;
     height: $icon-size;
-    margin-right: 0.2em;
+    margin-inline-end: 0.2em;
     vertical-align: middle;
   }
 }

client/src/components/Explorer/Explorer.scss

@@ -29,7 +29,10 @@ $menu-footer-height: 50px;
     height: 100vh;
     position: fixed;
     z-index: 500;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: $menu-width;
+    inset-inline-start: $menu-width;
   }
 
   *:focus {
@@ -120,14 +123,14 @@ $menu-footer-height: 50px;
 
   .icon {
     color: $c-explorer-secondary;
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
     font-size: 1rem;
   }
 
   .icon--explorer-header {
     width: 1.25em;
     height: 1.25em;
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
     vertical-align: text-top;
     color: $c-explorer-secondary;
   }
@@ -145,10 +148,10 @@ $menu-footer-height: 50px;
     width: calc(30% - #{$margin * 2});
     height: calc(100% - #{$margin * 2});
     margin-top: $margin;
-    margin-right: $margin;
+    margin-inline-end: $margin;
     float: right;
     padding: 0;
-    padding-left: 10px;
+    padding-inline-start: 10px;
 
     background-color: $c-explorer-bg-dark;
     border-radius: 0;
@@ -173,7 +176,10 @@ $menu-footer-height: 50px;
   // Add select arrow back on browsers where native ui has been removed
   &-icon {
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 1rem;
+    inset-inline-end: 1rem;
     top: 1rem;
     width: 1.25rem;
     height: 1.25rem;

client/src/components/Explorer/ExplorerItem.scss

@@ -34,7 +34,7 @@
   width: 2em;
   height: 2em;
   color: $c-explorer-secondary;
-  margin-right: 0.75rem;
+  margin-inline-end: 0.75rem;
 }
 
 .c-explorer__item__title {
@@ -55,7 +55,7 @@
   cursor: pointer;
   color: $c-explorer-secondary;
   border: 0;
-  border-left: solid 1px $c-explorer-bg-dark;
+  border-inline-start: solid 1px $c-explorer-bg-dark;
 
   &:focus {
     background: $c-explorer-bg-active;
@@ -73,7 +73,7 @@
   }
 
   .icon::before {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
@@ -87,7 +87,7 @@
 }
 
 .c-explorer__meta {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
   color: $c-explorer-secondary;
   font-size: 12px;
 }

client/src/components/PageExplorer/PageExplorer.scss

@@ -84,14 +84,14 @@ $explorer-header-horizontal-padding: 10px;
 
   .icon {
     color: $c-page-explorer-secondary;
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
     font-size: 1rem;
   }
 
   .icon--explorer-header {
     width: 1.25em;
     height: 1.25em;
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
     vertical-align: text-top;
     color: $c-page-explorer-secondary;
   }
@@ -103,7 +103,7 @@ $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__header__select {
   $margin: 10px;
-  margin-right: $margin;
+  margin-inline-end: $margin;
 
   > select {
     padding: 5px 30px 5px 10px;
@@ -132,7 +132,10 @@ $explorer-header-horizontal-padding: 10px;
   // Add select arrow back on browsers where native ui has been removed
   &-icon {
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 1rem;
+    inset-inline-end: 1rem;
     top: 1rem;
     width: 1.25rem;
     height: 1.25rem;

client/src/components/PageExplorer/PageExplorerItem.scss

@@ -34,7 +34,7 @@
   width: 2em;
   height: 2em;
   color: $c-page-explorer-secondary;
-  margin-right: 0.75rem;
+  margin-inline-end: 0.75rem;
 }
 
 .c-page-explorer__item__title {
@@ -55,7 +55,7 @@
   cursor: pointer;
   color: $c-page-explorer-secondary;
   border: 0;
-  border-left: solid 1px $c-page-explorer-bg-dark;
+  border-inline-start: solid 1px $c-page-explorer-bg-dark;
 
   &:focus {
     background: $c-page-explorer-bg-active;
@@ -73,7 +73,7 @@
   }
 
   .icon::before {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
@@ -87,7 +87,7 @@
 }
 
 .c-page-explorer__meta {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
   color: $c-page-explorer-secondary;
   font-size: 12px;
 }

client/src/components/Sidebar/Sidebar.scss

@@ -3,7 +3,10 @@
 
   position: absolute;
   top: $sidebar-toggle-spacing;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: $sidebar-toggle-spacing;
+  inset-inline-start: $sidebar-toggle-spacing;
   color: $color-white;
   width: $sidebar-toggle-size;
   height: $sidebar-toggle-size;
@@ -35,7 +38,10 @@
 
 .sidebar {
   position: fixed;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0;
+  inset-inline-start: 0;
   width: $menu-width;
   float: left;
   display: flex;
@@ -46,7 +52,10 @@
 
   @include transition(
     width $menu-transition-duration ease,
-    left $menu-transition-duration ease
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
+    left $menu-transition-duration ease,
+    inset-inline-start $menu-transition-duration ease
   );
 
   @media (forced-colors: $media-forced-colours) {
@@ -59,7 +68,10 @@
 
   // The sidebar can move completely off-screen in mobile mode for extra room
   &--hidden {
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: -$menu-width;
+    inset-inline-start: -$menu-width;
   }
 
   &__inner {

client/src/components/Sidebar/SidebarPanel.scss

@@ -8,18 +8,29 @@
   height: 100vh;
   padding: 0;
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0;
+  inset-inline-start: 0;
   z-index: 400;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 
-  @include transition(left $menu-transition-duration ease);
+  @include transition(
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
+    left $menu-transition-duration ease,
+    inset-inline-start $menu-transition-duration ease
+  );
 
   @include media-breakpoint-up(sm) {
     z-index: var(--z-index);
     width: var(--width);
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: calc(#{$menu-width} - var(--width));
+    inset-inline-start: calc(#{$menu-width} - var(--width));
   }
 
   @media (forced-colors: $media-forced-colours) {
@@ -34,19 +45,31 @@
 
   @include media-breakpoint-up(sm) {
     @at-root .sidebar--slim #{&} {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: calc(#{$menu-width-slim} - var(--width));
+      inset-inline-start: calc(#{$menu-width-slim} - var(--width));
     }
     // Don't apply this to nested submenus though
     @at-root .sidebar--slim .sidebar-panel #{&} {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0;
+      inset-inline-start: 0;
     }
 
     &--open {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: $menu-width;
+      inset-inline-start: $menu-width;
 
       // Don't apply this to nested submenus though
       @at-root .sidebar--slim .sidebar-panel #{&} {
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         left: $menu-width;
+        inset-inline-start: $menu-width;
       }
     }
   }

client/src/components/Sidebar/menu/MenuItem.scss

@@ -14,12 +14,12 @@
     width: 100%;
     box-sizing: border-box;
     white-space: nowrap;
-    border-left: 3px solid transparent;
+    border-inline-start: 3px solid transparent;
 
     -webkit-font-smoothing: auto;
     border: 0;
     background: transparent;
-    text-align: left;
+    text-align: start;
     color: $color-menu-text;
     padding: 11px 20px;
     font-size: 13px;
@@ -39,7 +39,7 @@
     &:before {
       font-size: 1rem;
       vertical-align: -15%;
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     // only really used for spinners and settings menu
@@ -47,7 +47,10 @@
       font-size: 1.5em;
       margin: 0;
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 0.5em;
+      inset-inline-end: 0.5em;
       top: 0.5em;
       margin-top: 0;
     }
@@ -56,7 +59,7 @@
     // This is because SVG icons and legacy icons apply this margin differently,
     // we could remove this override when we remove legacy icons
     .icon {
-      margin-right: 0 !important;
+      margin-inline-end: 0 !important;
     }
   }
 
@@ -76,7 +79,7 @@
     text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 
     > a {
-      border-left-color: $color-salmon;
+      border-inline-start-color: $color-salmon;
       color: $color-white;
     }
   }
@@ -84,7 +87,7 @@
 
 .menuitem-label {
   @include transition(opacity $menu-transition-duration ease);
-  margin-left: 0.5em;
+  margin-inline-start: 0.5em;
 }
 
 .sidebar--slim {

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -3,7 +3,10 @@
   width: 20px;
   height: 20px;
   position: absolute;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   right: 15px;
+  inset-inline-end: 15px;
   top: 0;
   bottom: 0;
   margin: auto 0;

client/src/components/Sidebar/modules/MainMenu.scss

@@ -25,7 +25,7 @@ $avatar-size: 60px;
     width: 1.25em;
     height: 1.25em;
     min-width: 1.25em;
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     vertical-align: text-top;
   }
 
@@ -74,14 +74,14 @@ $avatar-size: 60px;
     max-height: 0;
 
     a {
-      border-left: 3px solid transparent;
+      border-inline-start: 3px solid transparent;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 
       &:before {
         font-size: 1rem;
-        margin-right: 0.5em;
+        margin-inline-end: 0.5em;
         vertical-align: -10%;
       }
     }
@@ -137,13 +137,16 @@ $avatar-size: 60px;
       width: $menu-width - $avatar-size;
       line-height: $icon-size;
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: $avatar-size; // Width of avatar
+      inset-inline-start: $avatar-size; // Width of avatar
       transform: translateX(0);
       transition: transform $menu-transition-duration ease;
     }
 
     &-label {
-      text-align: left;
+      text-align: start;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -168,6 +171,9 @@ $avatar-size: 60px;
   }
 
   &--open &__account-toggle {
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: $avatar-size !important;
+    inset-inline-start: $avatar-size !important;
   }
 }

client/src/components/Sidebar/modules/Search.scss

@@ -21,7 +21,10 @@
   input:not([type='submit']) {
     @include show-focus-outline-inside();
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     top: 0;
     // Need !important to override body.ready class
     transition: background-color $menu-transition-duration ease,
@@ -46,7 +49,10 @@
   &__submit {
     @include show-focus-outline-inside();
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     background-color: transparent;
     border: 0;
     border-radius: 0;
@@ -58,15 +64,15 @@
       width $menu-transition-duration ease;
 
     svg {
-      margin-right: 15px;
-      transition: margin-right $menu-transition-duration ease;
+      margin-inline-end: 15px;
+      transition: margin-inline-end $menu-transition-duration ease;
     }
 
     .sidebar--slim & {
       width: 100%;
 
       svg {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
     }
 

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -73,18 +73,27 @@
   &__icon-wrapper {
     margin: auto;
     position: absolute;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 100px;
     height: 100px;
     background-color: #3a3a3a;
     border-radius: 50%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     transition: left $menu-transition-duration ease,
+      inset-inline-start $menu-transition-duration ease,
       top $menu-transition-duration ease, width $menu-transition-duration ease,
       height $menu-transition-duration ease;
 
     .sidebar--slim & {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: -10px;
+      inset-inline-start: -10px;
       top: 10px;
       width: 80px;
       height: 80px;
@@ -100,20 +109,32 @@
   // Bird icons
   &__icon {
     display: block;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 70%;
     height: 70%;
     position: absolute;
     margin: auto;
     bottom: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     transition: left $menu-transition-duration ease,
+      inset-inline-start $menu-transition-duration ease,
       width $menu-transition-duration ease,
       height $menu-transition-duration ease;
 
     .sidebar--slim & {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: -10px;
+      inset-inline-start: -10px;
       width: 70%;
       height: 70%;
     }

client/src/components/StreamField/scss/components/c-sf-add-panel.scss

@@ -19,8 +19,8 @@
   &__grid {
     display: flex;
     flex-flow: row wrap;
-    margin-left: -$add-panel-gutter;
-    margin-right: -$add-panel-gutter;
+    margin-inline-start: -$add-panel-gutter;
+    margin-inline-end: -$add-panel-gutter;
     margin-bottom: math.div($grid-gutter-width, 2);
 
     &:last-child {

client/src/components/StreamField/scss/components/c-sf-block.scss

@@ -25,13 +25,19 @@
     user-select: none;
     transition: background-color $hover-transition-duration ease-in-out;
     cursor: default;
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-top-left-radius: $border-radius;
+    border-start-start-radius: $border-radius;
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-top-right-radius: $border-radius;
+    border-start-end-radius: $border-radius;
     min-height: 30px;
     background: $header-background;
 
     @media (min-width: $screen-sm-min) {
-      padding-left: $content-padding-horizontal - $header-gutter;
+      padding-inline-start: $content-padding-horizontal - $header-gutter;
     }
 
     &--collapsible {
@@ -97,7 +103,7 @@
       padding: 0;
 
       &:not(:last-of-type) {
-        margin-right: 3px;
+        margin-inline-end: 3px;
       }
 
       &:focus,
@@ -121,7 +127,7 @@
 
   &__type {
     margin: 0 $header-gutter;
-    text-align: right;
+    text-align: end;
     font-size: 12px;
     color: $header-text-color;
     user-select: none;

client/src/components/StreamField/scss/components/c-sf-button.scss

@@ -7,7 +7,7 @@
   font-weight: 600;
   font-size: 12px;
   font-family: $font-sans;
-  text-align: left;
+  text-align: start;
   background: #eee;
   padding: $type-button-padding-vertical $type-button-padding-horizontal;
   border: 1px solid #e6e6e6;
@@ -32,7 +32,7 @@
   &__icon {
     width: 16px;
     height: 16px;
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     vertical-align: text-top;
   }
 }

client/src/components/StreamField/scss/components/c-sf-container.scss

@@ -23,7 +23,7 @@
 
   &--add-in-gutter {
     @media (min-width: $screen-sm-min) {
-      padding-left: $add-button-size;
+      padding-inline-start: $add-button-size;
 
       .c-sf-add-button {
         width: $add-button-size;
@@ -75,7 +75,7 @@
       color: #cd3238;
       font-weight: 700;
       display: inline-block;
-      margin-left: 0.5em;
+      margin-inline-start: 0.5em;
       line-height: 1em;
       font-size: 13px;
     }

docs/releases/2.17.md

@@ -15,6 +15,7 @@ Here are other changes related to the redesign:
 
  * Switch the Wagtail branding font to a system font stack (Steven Steinwand)
  * Remove most uppercased text styles from admin UI (Paarth Agarwal)
+ * Convert all UI code to CSS logical properties for Right-to-Left (RTL) language support (Thibaud Colas)
 
 
 ### Removal of special-purpose field panel types

package-lock.json

@@ -38,7 +38,7 @@
         "@typescript-eslint/eslint-plugin": "^5.8.0",
         "@typescript-eslint/parser": "^5.8.0",
         "@wagtail/eslint-config-wagtail": "^0.4.0",
-        "@wagtail/stylelint-config-wagtail": "^0.3.2",
+        "@wagtail/stylelint-config-wagtail": "^0.4.1",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.3",
         "copy-webpack-plugin": "^10.2.0",
@@ -10124,13 +10124,14 @@
       }
     },
     "node_modules/@wagtail/stylelint-config-wagtail": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@wagtail/stylelint-config-wagtail/-/stylelint-config-wagtail-0.3.2.tgz",
-      "integrity": "sha512-40kFeI/iM9AYZIyDKw120ec3qOT2GSXUmGI0Pj9F2NJi2ctK0rU/GqtAWAAfUlH1y0ZfRwuvrYaRJ4fWAFiWXA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@wagtail/stylelint-config-wagtail/-/stylelint-config-wagtail-0.4.1.tgz",
+      "integrity": "sha512-b0PpwtVtQKTxzZ5N8N26I75mxDd5qoc3AlvEkT9dQD3FqQcUS45/k4p8pIVdNg4YFonh3tckxxILlOQ9dH7Cxg==",
       "dev": true,
       "dependencies": {
         "stylelint-config-prettier-scss": "^0.0.1",
-        "stylelint-config-recommended-scss": "^5.0.2"
+        "stylelint-config-recommended-scss": "^5.0.2",
+        "stylelint-declaration-strict-value": "^1.8.0"
       },
       "peerDependencies": {
         "stylelint": ">=14.1.0"
@@ -13887,6 +13888,15 @@
         "node": "*"
       }
     },
+    "node_modules/css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz",
@@ -13959,6 +13969,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-shorthand-properties": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz",
+      "integrity": "sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==",
+      "dev": true
+    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -13981,6 +13997,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/css-values": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/css-values/-/css-values-0.1.0.tgz",
+      "integrity": "sha1-Eot84QPU3AJ6gUpdWZXFR4HXtMY=",
+      "dev": true,
+      "dependencies": {
+        "css-color-names": "0.0.4",
+        "ends-with": "^0.2.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/css-values/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
     "node_modules/css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -14861,6 +14894,15 @@
         "objectorarray": "^1.0.5"
       }
     },
+    "node_modules/ends-with": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ends-with/-/ends-with-0.2.0.tgz",
+      "integrity": "sha1-L52pjVelDP2kVxzkM5AAUA9Oa4o=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
@@ -25711,6 +25753,15 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/shortcss": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/shortcss/-/shortcss-0.1.3.tgz",
+      "integrity": "sha1-7ip5BNgLf1UCyYQI9KLzE/qt+0g=",
+      "dev": true,
+      "dependencies": {
+        "css-shorthand-properties": "^1.0.0"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -26779,6 +26830,19 @@
         "stylelint": "^14.0.0"
       }
     },
+    "node_modules/stylelint-declaration-strict-value": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/stylelint-declaration-strict-value/-/stylelint-declaration-strict-value-1.8.0.tgz",
+      "integrity": "sha512-0+DbPQMgqomlBG+uycI3PZ1BzjJ7mJA065Lx+iTg9tlmjBD36f3ZaIq1ggRZQitE0w+KcbXGzFt6axR1LIP2hw==",
+      "dev": true,
+      "dependencies": {
+        "css-values": "^0.1.0",
+        "shortcss": "^0.1.3"
+      },
+      "peerDependencies": {
+        "stylelint": ">=7 <=14"
+      }
+    },
     "node_modules/stylelint-scss": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.1.0.tgz",
@@ -37274,13 +37338,14 @@
       "requires": {}
     },
     "@wagtail/stylelint-config-wagtail": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@wagtail/stylelint-config-wagtail/-/stylelint-config-wagtail-0.3.2.tgz",
-      "integrity": "sha512-40kFeI/iM9AYZIyDKw120ec3qOT2GSXUmGI0Pj9F2NJi2ctK0rU/GqtAWAAfUlH1y0ZfRwuvrYaRJ4fWAFiWXA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@wagtail/stylelint-config-wagtail/-/stylelint-config-wagtail-0.4.1.tgz",
+      "integrity": "sha512-b0PpwtVtQKTxzZ5N8N26I75mxDd5qoc3AlvEkT9dQD3FqQcUS45/k4p8pIVdNg4YFonh3tckxxILlOQ9dH7Cxg==",
       "dev": true,
       "requires": {
         "stylelint-config-prettier-scss": "^0.0.1",
-        "stylelint-config-recommended-scss": "^5.0.2"
+        "stylelint-config-recommended-scss": "^5.0.2",
+        "stylelint-declaration-strict-value": "^1.8.0"
       }
     },
     "@webassemblyjs/ast": {
@@ -40306,6 +40371,12 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+      "dev": true
+    },
     "css-declaration-sorter": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz",
@@ -40355,6 +40426,12 @@
         "nth-check": "^2.0.1"
       }
     },
+    "css-shorthand-properties": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz",
+      "integrity": "sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==",
+      "dev": true
+    },
     "css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -40373,6 +40450,25 @@
         }
       }
     },
+    "css-values": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/css-values/-/css-values-0.1.0.tgz",
+      "integrity": "sha1-Eot84QPU3AJ6gUpdWZXFR4HXtMY=",
+      "dev": true,
+      "requires": {
+        "css-color-names": "0.0.4",
+        "ends-with": "^0.2.0",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -41087,6 +41183,12 @@
         "objectorarray": "^1.0.5"
       }
     },
+    "ends-with": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ends-with/-/ends-with-0.2.0.tgz",
+      "integrity": "sha1-L52pjVelDP2kVxzkM5AAUA9Oa4o=",
+      "dev": true
+    },
     "enhanced-resolve": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
@@ -49346,6 +49448,15 @@
       "dev": true,
       "optional": true
     },
+    "shortcss": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/shortcss/-/shortcss-0.1.3.tgz",
+      "integrity": "sha1-7ip5BNgLf1UCyYQI9KLzE/qt+0g=",
+      "dev": true,
+      "requires": {
+        "css-shorthand-properties": "^1.0.0"
+      }
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -50237,6 +50348,16 @@
         "stylelint-scss": "^4.0.0"
       }
     },
+    "stylelint-declaration-strict-value": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/stylelint-declaration-strict-value/-/stylelint-declaration-strict-value-1.8.0.tgz",
+      "integrity": "sha512-0+DbPQMgqomlBG+uycI3PZ1BzjJ7mJA065Lx+iTg9tlmjBD36f3ZaIq1ggRZQitE0w+KcbXGzFt6axR1LIP2hw==",
+      "dev": true,
+      "requires": {
+        "css-values": "^0.1.0",
+        "shortcss": "^0.1.3"
+      }
+    },
     "stylelint-scss": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.1.0.tgz",

package.json

@@ -63,7 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^5.8.0",
     "@typescript-eslint/parser": "^5.8.0",
     "@wagtail/eslint-config-wagtail": "^0.4.0",
-    "@wagtail/stylelint-config-wagtail": "^0.3.2",
+    "@wagtail/stylelint-config-wagtail": "^0.4.1",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.2.0",

wagtail/admin/static_src/wagtailadmin/css/normalize.css

@@ -391,7 +391,7 @@ legend {
   border: 0; /* 1 */
   padding: 0;
   white-space: normal; /* 2 */
-  *margin-left: -7px; /* 3 */
+  *margin-inline-start: -7px; /* 3 */
 }
 
 /**

wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss

@@ -4,7 +4,10 @@
 .page404__bg {
   position: fixed;
   top: 0;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 0;
+  inset-inline-start: 0;
   width: 100vw;
   height: 100vh;
   background-color: $color-teal-darker;
@@ -15,7 +18,10 @@
 .page404__wrapper {
   position: absolute;
   top: 50%;
+  // Remove once we drop support for Safari 13.
+  // stylelint-disable-next-line property-disallowed-list
   left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   justify-content: center;

wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss

@@ -12,7 +12,7 @@ $color-deletion-light: #ffebeb;
     padding: 1em;
 
     dd {
-      margin-left: 40px;
+      margin-inline-start: 40px;
     }
 
     &:first-child {
@@ -47,7 +47,7 @@ $color-deletion-light: #ffebeb;
     &.addition,
     &.deletion {
       padding: 5px;
-      margin-right: 5px;
+      margin-inline-end: 5px;
       border-style: solid;
       border-width: 1px;
     }

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -9,13 +9,16 @@ h1 {
 header {
   .col1 {
     width: 50px;
-    margin-right: 1em;
+    margin-inline-end: 1em;
     padding: 0;
 
     // make way for the nav-menu button on mobile
     @include media-breakpoint-down(xs) {
       position: relative;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: $mobile-nav-indent;
+      inset-inline-start: $mobile-nav-indent;
     }
   }
 
@@ -44,7 +47,7 @@ header {
     @include clearfix();
     @include unlist();
     width: 100%;
-    margin-left: -$padding;
+    margin-inline-start: -$padding;
 
     li {
       @include column(4);
@@ -83,7 +86,7 @@ header {
     li svg.icon {
       width: 1em;
       height: 1em;
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     a {
@@ -121,7 +124,7 @@ header {
 
     h2 {
       display: inline-block;
-      margin-right: 1em;
+      margin-inline-end: 1em;
     }
 
     .fields {
@@ -171,5 +174,5 @@ header {
 }
 
 .task .icon {
-  margin-left: -1.75em; // pull out the icon so it aligns with no-icon text
+  margin-inline-start: -1.75em; // pull out the icon so it aligns with no-icon text
 }

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -16,7 +16,7 @@ html {
 }
 
 body {
-  margin-left: 0;
+  margin-inline-start: 0;
   height: 100%;
 }
 
@@ -25,9 +25,9 @@ body {
 }
 
 .wrapper {
-  padding-left: $mobile-nice-padding;
-  padding-right: $mobile-nice-padding;
-  margin-left: 0;
+  padding-inline-start: $mobile-nice-padding;
+  padding-inline-end: $mobile-nice-padding;
+  margin-inline-start: 0;
   max-width: none;
 }
 
@@ -122,7 +122,10 @@ a.button {
   @include media-breakpoint-up(sm) {
     position: absolute;
     top: 139px;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 5%;
+    inset-inline-end: 5%;
     padding: 0;
   }
 
@@ -173,7 +176,7 @@ a.button {
       display: inline-block;
       height: 100%;
       vertical-align: middle;
-      margin-left: -0.4em;
+      margin-inline-start: -0.4em;
     }
   }
 
@@ -193,14 +196,17 @@ a.button {
         border-radius: 100%;
         width: 1em;
         padding: 0.3em;
+        // Remove once we drop support for Safari 13.
+        // stylelint-disable-next-line property-disallowed-list
         left: $desktop-nice-padding;
+        inset-inline-start: $desktop-nice-padding;
         margin-top: -1.1rem;
         top: 50%;
         font-size: 1.3rem;
       }
 
       input {
-        padding-left: ($desktop-nice-padding + 50px);
+        padding-inline-start: ($desktop-nice-padding + 50px);
       }
     }
   }

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -12,29 +12,29 @@
 
   .breadcrumb {
     margin: -1.2em 0 2em; // sass linter complains about $desktop-nice-padding here because of unit mismatch
-    padding-left: calc(#{$desktop-nice-padding} - 2em);
+    padding-inline-start: calc(#{$desktop-nice-padding} - 2em);
 
     @include media-breakpoint-up(sm) {
       margin-top: -1.8em;
-      margin-left: -$desktop-nice-padding;
-      margin-right: -$desktop-nice-padding;
+      margin-inline-start: -$desktop-nice-padding;
+      margin-inline-end: -$desktop-nice-padding;
     }
   }
 
   .modal .breadcrumb {
     margin: 0;
-    padding-left: 0.5em;
+    padding-inline-start: 0.5em;
     background-color: transparent;
 
     .breadcrumb-item {
-      padding-left: 0;
-      padding-right: 0;
+      padding-inline-start: 0;
+      padding-inline-end: 0;
     }
 
     a {
       color: $color-grey-2;
-      padding-left: 0.5em;
-      padding-right: 0.5em;
+      padding-inline-start: 0.5em;
+      padding-inline-end: 0.5em;
 
       &:hover {
         color: $color-white;
@@ -46,7 +46,7 @@
     }
 
     .home_icon {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     div.c-dropdown__button.u-btn-current {
@@ -76,7 +76,7 @@
   }
 
   .header-title {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   .modal-body .header-title h1 {
@@ -99,7 +99,7 @@
       .icon {
         @include svg-icon(1.25em, text-bottom);
 
-        margin-right: 0.2em;
+        margin-inline-end: 0.2em;
       }
 
       .icon-warning {
@@ -107,11 +107,11 @@
       }
 
       &:first-child .button {
-        margin-left: -0.8em;
+        margin-inline-start: -0.8em;
       }
 
       .avatar {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     }
 
@@ -137,7 +137,7 @@
     }
 
     &--status {
-      padding-right: 0.8em;
+      padding-inline-end: 0.8em;
     }
 
     &--type {
@@ -165,8 +165,8 @@
   }
 
   fieldset {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
 
     .field-row {
       padding-top: 0;
@@ -184,7 +184,7 @@
     opacity: 1;
 
     .icon-help {
-      margin-left: -1.75em;
+      margin-inline-start: -1.75em;
     }
   }
 
@@ -205,8 +205,14 @@
     font-weight: normal;
     position: absolute;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     z-index: 1;
     overflow: hidden;
 
@@ -234,7 +240,10 @@
       font-size: 2em;
       top: 0;
       line-height: 1.8em;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0;
+      inset-inline-start: 0;
       width: $desktop-nice-padding;
       color: $color-white;
       padding: 0;
@@ -249,7 +258,7 @@
       color: $color-red;
       font-weight: bold;
       display: inline-block;
-      margin-left: 0.5em;
+      margin-inline-start: 0.5em;
       line-height: 1em;
       font-size: 13px;
     }
@@ -280,8 +289,8 @@
 
   // cursory styling for streamfield. Main styling in client/src/components/StreamField/StreamField.scss
   &.block_field {
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-inline-start: 20px;
+    padding-inline-end: 20px;
 
     .object-layout_big-part {
       max-width: 100%;
@@ -353,7 +362,10 @@
       position: relative;
       z-index: 2;
       top: 0;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: 0;
+      inset-inline-start: 0;
       width: 3.3em;
       padding: 0;
       margin: 0 0 0 -20px;
@@ -446,7 +458,7 @@ footer .preview {
     padding: 0 1em;
 
     .icon {
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     @include media-breakpoint-down(xs) {
@@ -499,8 +511,8 @@ footer .preview {
       // Override column mixin for column items.
       float: none;
       max-width: 1024px;
-      padding-left: 0;
-      padding-right: 0;
+      padding-inline-start: 0;
+      padding-inline-end: 0;
 
       fieldset {
         width: 100%;
@@ -522,14 +534,14 @@ footer .preview {
 
     .object-help {
       padding-bottom: 40px;
-      margin-left: 10px;
+      margin-inline-start: 10px;
       margin-bottom: 0;
       opacity: 0;
     }
 
     &.block_field {
       .object-help {
-        padding-left: 6.4em;
+        padding-inline-start: 6.4em;
       }
     }
 
@@ -539,7 +551,7 @@ footer .preview {
         display: block;
         // Override column mixin for column items.
         float: none;
-        margin-left: -51px;
+        margin-inline-start: -51px;
         padding: 0;
         padding-top: $object-title-height;
       }
@@ -563,8 +575,8 @@ footer .preview {
 
     .multiple {
       @include column(10);
-      padding-left: 0;
-      padding-right: 0;
+      padding-inline-start: 0;
+      padding-inline-end: 0;
     }
 
     &.empty .add {
@@ -574,17 +586,17 @@ footer .preview {
 
   // Make room for comments on the right when enabled
   .tab-content--comments-enabled .object {
-    padding-right: 27%;
+    padding-inline-end: 27%;
 
     &.full {
-      padding-right: 36%;
+      padding-inline-end: 36%;
     }
 
     @include media-breakpoint-up(lg) {
-      padding-right: 30%;
+      padding-inline-end: 30%;
 
       &.full {
-        padding-right: 36%;
+        padding-inline-end: 36%;
       }
     }
   }
@@ -602,7 +614,7 @@ footer .preview {
 
   .icon {
     @include svg-icon(1.25em);
-    margin-right: 0.25em;
+    margin-inline-end: 0.25em;
   }
 
   &:hover {
@@ -625,14 +637,17 @@ footer .preview {
     color: $color-grey-3;
     position: absolute;
     top: 1.5em;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: calc(0.75em - 1px);
+    inset-inline-start: calc(0.75em - 1px);
     height: 100%;
-    border-left: 2px dotted;
+    border-inline-start: 2px dotted;
   }
 
   .icon {
     fill: $color-grey-3;
-    padding-right: 0.5em;
+    padding-inline-end: 0.5em;
   }
 
   .in_progress {

wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss

@@ -5,8 +5,8 @@
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
-  margin-left: 50px;
-  margin-right: 50px;
+  margin-inline-start: 50px;
+  margin-inline-end: 50px;
 
   &--has-filters {
     grid-template-columns: auto 300px;
@@ -19,7 +19,7 @@
       margin: 0 0.5em 0.5em 0;
 
       + .status-tag {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     }
 
@@ -55,7 +55,7 @@
   &__actions > div {
     float: right;
     display: block;
-    margin-right: 10px;
+    margin-inline-end: 10px;
   }
 
   @include media-breakpoint-down(sm) {

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -132,7 +132,7 @@ $positions: (
   font-family: $font-sans;
   font-size: 14px;
   box-sizing: border-box;
-  padding-left: 0;
+  padding-inline-start: 0;
   text-decoration: none;
 
   .#{$namespace}-userbar.is-active & {
@@ -195,13 +195,25 @@ $positions: (
   }
 
   &:first-child {
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-top-left-radius: $userbar-radius;
+    border-start-start-radius: $userbar-radius;
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-top-right-radius: $userbar-radius;
+    border-start-end-radius: $userbar-radius;
   }
 
   &:last-child {
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-bottom-right-radius: $userbar-radius;
+    border-end-end-radius: $userbar-radius;
+    // Remove once we drop support for Safari 14.
+    // stylelint-disable-next-line property-disallowed-list
     border-bottom-left-radius: $userbar-radius;
+    border-end-start-radius: $userbar-radius;
   }
 
   & + & {
@@ -230,7 +242,7 @@ $positions: (
 
     &-icon {
       @include svg-icon(1.1em, middle);
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
       fill: currentColor;
     }
   }
@@ -242,14 +254,17 @@ $positions: (
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: 14px;
+      inset-inline-start: 14px;
     }
   }
 
   a,
   button {
     font-size: 14px !important;
-    text-align: left;
+    text-align: start;
     padding: 0.8em;
   }
 

wagtail/admin/templates/wagtailadmin/notifications/base.html

@@ -49,13 +49,13 @@
                     }
                     body[yahoo] .force-col {
                         display: block;
-                        padding-right: 0 !important;
-                        padding-left: 0 !important;
+                        padding-inline-end: 0 !important;
+                        padding-inline-start: 0 !important;
                         padding-bottom: 12px !important;
                     }
                     body[yahoo] .force-col-last {
                         display: block;
-                        padding-right: 0 !important;
+                        padding-inline-end: 0 !important;
                         padding-bottom: 0 !important;
                     }
                     body[yahoo] .center {

wagtail/admin/templates/wagtailadmin/pages/add_subpage.html

@@ -20,7 +20,7 @@
                                 <a href="{% url 'wagtailadmin_pages:add' app_label model_name parent_page.id %}{% if next %}?next={{ next }}{% endif %}" class="icon icon-plus-inverse icon-larger">{{ verbose_name }}</a>
                             </div>
 
-                            <small class="col6" style="text-align:right">
+                            <small class="col6" style="text-align:end">
                                 <a href="{% url 'wagtailadmin_pages:type_use' app_label model_name %}" class="nolink">{% blocktrans with page_type=verbose_name %}Pages using {{ page_type }}{% endblocktrans %}</a>
                             </small>
 

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -19,7 +19,7 @@
 
   @include media-breakpoint-up(lg) {
     display: inline-block;
-    margin-left: 0.25em;
+    margin-inline-start: 0.25em;
   }
 }
 
@@ -63,7 +63,7 @@
     font-size: 13px;
     line-height: 31px;
     margin-top: 0;
-    padding-left: 8px;
+    padding-inline-start: 8px;
     border-bottom: 1px solid #e6e6e6;
   }
 
@@ -73,14 +73,14 @@
   }
 
   ul {
-    padding-left: 0;
+    padding-inline-start: 0;
     margin-bottom: 25px;
   }
 
   li {
     list-style-type: none;
     margin: 0 0 4px;
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   a {
@@ -159,21 +159,21 @@ p.no-results {
     padding: 0 1.5% 0 0;
 
     &.col12 {
-      padding-right: 0;
+      padding-inline-end: 0;
 
       tbody td:last-child {
-        padding-right: 50px;
+        padding-inline-end: 50px;
       }
     }
 
     tbody th:first-child {
-      padding-left: 50px;
+      padding-inline-start: 50px;
     }
   }
 
   .pagination {
-    padding-left: 50px;
-    padding-right: 50px;
+    padding-inline-start: 50px;
+    padding-inline-end: 50px;
   }
 
   .pagination.col9 {

wagtail/contrib/redirects/static/wagtailredirects/css/index.css

@@ -9,9 +9,9 @@ header .has-multiple-actions {
 }
 
 header .has-multiple-actions .actionbutton {
-    margin-left: 10px;
+    margin-inline-start: 10px;
 }
 
 header .has-multiple-actions .dropdown {
-    margin-left: 10px;
+    margin-inline-start: 10px;
 }

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -327,7 +327,7 @@
                             <h2><a href="">Something here</a></h2>
                         </div>
 
-                        <small class="col6" style="text-align:right">Something else</small>
+                        <small class="col6" style="text-align:end">Something else</small>
                     </div>
                 </li>
                 <li>
@@ -336,7 +336,7 @@
                             <a href="">Something here</a>
                         </div>
 
-                        <small class="col6" style="text-align:right">Something else</small>
+                        <small class="col6" style="text-align:end">Something else</small>
                     </div>
                 </li>
                 <li>
@@ -345,7 +345,7 @@
                             <a href="">Something here</a>
                         </div>
 
-                        <small class="col6" style="text-align:right">Something else</small>
+                        <small class="col6" style="text-align:end">Something else</small>
                     </div>
                 </li>
             </ul>
@@ -619,33 +619,6 @@
                                         Unpublish
                                     </a>
                                 </li>
-                                <li>
-                                    <hr class="c-dropdown__divider">
-                                </li>
-                                <li class="c-dropdown__item">
-                                    <a href="#" class="u-link is-live">
-                                        <span title="Live" class="c-indicator c-dropdown__indicator"></span>
-                                        Live
-                                    </a>
-                                </li>
-                                <li class="c-dropdown__item">
-                                    <a href="#" class="u-link is-draft">
-                                        <span title="Draft" class="c-indicator c-dropdown__indicator"></span>
-                                        Draft
-                                    </a>
-                                </li>
-                                <li class="c-dropdown__item">
-                                    <a href="#" class="u-link is-live+draft">
-                                        <span title="Live + Draft" class="c-indicator c-dropdown__indicator"></span>
-                                        Live + Draft
-                                    </a>
-                                </li>
-                                <li class="c-dropdown__item">
-                                    <a href="#" class="u-link is-absent">
-                                        <span title="Absent" class="c-indicator c-dropdown__indicator"></span>
-                                        Absent
-                                    </a>
-                                </li>
                             </ul>
                         </nav>
                     </div>

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -24,25 +24,31 @@
     button.prepend-column,
     button.append-column {
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: -0.9rem;
+      inset-inline-start: -0.9rem;
       top: -2rem;
     }
 
     button.delete-column {
       position: absolute;
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       right: 0.625rem;
+      inset-inline-end: 0.625rem;
       top: 0.875rem;
     }
 
     input.column-heading {
-      padding-right: 3rem;
+      padding-inline-end: 3rem;
       font-weight: bold;
     }
   }
 
   td {
     position: relative;
-    border-left: 1px solid $color-grey-2;
+    border-inline-start: 1px solid $color-grey-2;
   }
 
   th:first-child,
@@ -57,13 +63,16 @@
     border-top: 1px dotted $color-grey-2;
 
     button.prepend-row {
+      // Remove once we drop support for Safari 13.
+      // stylelint-disable-next-line property-disallowed-list
       left: -2rem;
+      inset-inline-start: -2rem;
       position: absolute;
       top: -0.9rem;
     }
 
     button.delete-row {
-      margin-left: 0.25rem;
+      margin-inline-start: 0.25rem;
     }
 
     td:not(.control-cell) {
@@ -75,7 +84,10 @@
   ul.add-column-menu {
     position: absolute;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: -0.9rem;
+    inset-inline-start: -0.9rem;
     z-index: 100;
     min-width: 10rem;
     background-color: $color-white;

wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss

@@ -12,7 +12,10 @@
     opacity: 0;
     position: absolute;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     direction: ltr;
     width: auto;
     display: block;
@@ -56,8 +59,8 @@
     box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
     max-width: 100%;
     z-index: 4;
-    margin-left: 20%;
-    margin-right: 20%;
+    margin-inline-start: 20%;
+    margin-inline-end: 20%;
     width: 60%;
   }
 

wagtail/images/static_src/wagtailimages/scss/add-multiple.scss

@@ -14,7 +14,10 @@
     opacity: 0;
     position: absolute;
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     direction: ltr;
     width: auto;
     display: block;
@@ -67,16 +70,28 @@
     box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
     z-index: 4;
     top: 60%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 20%;
+    inset-inline-start: 20%;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 20%;
+    inset-inline-end: 20%;
     width: 60%;
   }
 
   .thumb {
     top: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     bottom: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
     z-index: 1;
     width: 100%;
   }
@@ -84,8 +99,14 @@
   .thumb:before,
   canvas,
   img {
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     left: 0;
+    inset-inline-start: 0;
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
     right: 0;
+    inset-inline-end: 0;
     top: 0;
     bottom: 0;
     margin: auto;

wagtail/project_template/home/static/css/welcome_page.css

@@ -55,7 +55,7 @@ svg:not(:root) {
 
 .logo {
     width: 150px;
-    margin-right: 20px;
+    margin-inline-end: 20px;
 }
 
 .logo a {
@@ -133,7 +133,10 @@ svg:not(:root) {
     padding: 5px;
     border-radius: 100%;
     top: 10px;
+    /* Remove once we drop support for Safari 13. */
+    /* stylelint-disable-next-line property-disallowed-list */
     left: 0;
+    inset-inline-start: 0;
     position: absolute;
 }