diff --git a/.stylelintrc.js b/.stylelintrc.js
index 8a80fe37f2..bce499ad89 100644
--- a/.stylelintrc.js
+++ b/.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,
},
};
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 43a326dd32..eb34f934e7 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/client/scss/components/_breadcrumb.scss b/client/scss/components/_breadcrumb.scss
index fda939ff1b..d133a2a971 100644
--- a/client/scss/components/_breadcrumb.scss
+++ b/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 {
diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss
index a027090e09..9f3790ff41 100644
--- a/client/scss/components/_bulk_actions.scss
+++ b/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;
diff --git a/client/scss/components/_button-select.scss b/client/scss/components/_button-select.scss
index 2a02cbb19f..07b0ac5c22 100644
--- a/client/scss/components/_button-select.scss
+++ b/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;
}
diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index 2532a59885..8f336a316e 100644
--- a/client/scss/components/_button.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_chooser.scss b/client/scss/components/_chooser.scss
index 0a1ed15698..c3ee5a7d22 100644
--- a/client/scss/components/_chooser.scss
+++ b/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.
diff --git a/client/scss/components/_comments-controls.scss b/client/scss/components/_comments-controls.scss
index 6ea314f35f..794a4b2324 100644
--- a/client/scss/components/_comments-controls.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_comments-notification-dropdown.scss b/client/scss/components/_comments-notification-dropdown.scss
index 7ac0e05929..69d6be9e99 100644
--- a/client/scss/components/_comments-notification-dropdown.scss
+++ b/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;
diff --git a/client/scss/components/_dropdown.legacy.scss b/client/scss/components/_dropdown.legacy.scss
index 7874bbf6e2..e445f126a5 100644
--- a/client/scss/components/_dropdown.legacy.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_dropdown.scss b/client/scss/components/_dropdown.scss
index 2742787b1c..0a65c6d9e0 100644
--- a/client/scss/components/_dropdown.scss
+++ b/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 {
diff --git a/client/scss/components/_footer.scss b/client/scss/components/_footer.scss
index 9783c09b00..c2dab35999 100644
--- a/client/scss/components/_footer.scss
+++ b/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;
}
}
}
diff --git a/client/scss/components/_forms.scss b/client/scss/components/_forms.scss
index 444afa7916..4c70f002b6 100644
--- a/client/scss/components/_forms.scss
+++ b/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;
}
}
}
diff --git a/client/scss/components/_grid.legacy.scss b/client/scss/components/_grid.legacy.scss
index d179c994fa..7946a65bf4 100644
--- a/client/scss/components/_grid.legacy.scss
+++ b/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;
diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
index de0a6951b6..e5dd819b48 100644
--- a/client/scss/components/_header.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_help-block.scss b/client/scss/components/_help-block.scss
index 104c4e602a..1a7e6c3cc5 100644
--- a/client/scss/components/_help-block.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_icons.scss b/client/scss/components/_icons.scss
index 9f5332c952..ab875f2511 100644
--- a/client/scss/components/_icons.scss
+++ b/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;
diff --git a/client/scss/components/_indicator.scss b/client/scss/components/_indicator.scss
deleted file mode 100644
index f34886755f..0000000000
--- a/client/scss/components/_indicator.scss
+++ /dev/null
@@ -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%;
- }
-}
diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index c64c0a3202..4e63549a89 100644
--- a/client/scss/components/_listing.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_loading-mask.scss b/client/scss/components/_loading-mask.scss
index 6cf9c21f36..02deaf230b 100644
--- a/client/scss/components/_loading-mask.scss
+++ b/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');
diff --git a/client/scss/components/_logo.scss b/client/scss/components/_logo.scss
index 361e11438e..a56c1eed29 100644
--- a/client/scss/components/_logo.scss
+++ b/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%;
diff --git a/client/scss/components/_main-nav.scss b/client/scss/components/_main-nav.scss
index 9e487f3a27..1ded11f4f6 100644
--- a/client/scss/components/_main-nav.scss
+++ b/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;
}
diff --git a/client/scss/components/_messages.scss b/client/scss/components/_messages.scss
index 503e92e14d..c5458e611e 100644
--- a/client/scss/components/_messages.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_modals.scss b/client/scss/components/_modals.scss
index 36afe1c502..2020ea78e9 100644
--- a/client/scss/components/_modals.scss
+++ b/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;
}
}
}
diff --git a/client/scss/components/_progressbar.scss b/client/scss/components/_progressbar.scss
index 74e1dbfc40..77a5bb0f2a 100644
--- a/client/scss/components/_progressbar.scss
+++ b/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;
}
}
diff --git a/client/scss/components/_skiplink.scss b/client/scss/components/_skiplink.scss
index 0d36b2a4ab..bbdc8d4c6c 100644
--- a/client/scss/components/_skiplink.scss
+++ b/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 {
diff --git a/client/scss/components/_tabs.scss b/client/scss/components/_tabs.scss
index a1fa2a5bff..72700f3eba 100644
--- a/client/scss/components/_tabs.scss
+++ b/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 {
diff --git a/client/scss/components/_tag.scss b/client/scss/components/_tag.scss
index 08415761cb..30aee43214 100644
--- a/client/scss/components/_tag.scss
+++ b/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;
diff --git a/client/scss/components/_tooltips.scss b/client/scss/components/_tooltips.scss
index 27b9959e49..da8cc3d997 100644
--- a/client/scss/components/_tooltips.scss
+++ b/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;
}
diff --git a/client/scss/components/_workflow-tasks.scss b/client/scss/components/_workflow-tasks.scss
index 3df24e1677..d92fca0512 100644
--- a/client/scss/components/_workflow-tasks.scss
+++ b/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 {
diff --git a/client/scss/core.scss b/client/scss/core.scss
index ad0d1dd78b..a7d698574a 100644
--- a/client/scss/core.scss
+++ b/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';
diff --git a/client/scss/elements/_elements.scss b/client/scss/elements/_elements.scss
index 475911d5ba..2aef385b88 100644
--- a/client/scss/elements/_elements.scss
+++ b/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;
diff --git a/client/scss/elements/_forms.scss b/client/scss/elements/_forms.scss
index 2438351320..fb834e1ff2 100644
--- a/client/scss/elements/_forms.scss
+++ b/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 {
diff --git a/client/scss/objects/_avatar.scss b/client/scss/objects/_avatar.scss
index 703b18b36c..9976ac39d6 100644
--- a/client/scss/objects/_avatar.scss
+++ b/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;
}
diff --git a/client/scss/overrides/_utilities.dropdowns.scss b/client/scss/overrides/_utilities.dropdowns.scss
index 65cdf42d51..270c288234 100644
--- a/client/scss/overrides/_utilities.dropdowns.scss
+++ b/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 {
diff --git a/client/scss/overrides/_utilities.legacy.scss b/client/scss/overrides/_utilities.legacy.scss
index a7ce504b84..3fdbb41604 100644
--- a/client/scss/overrides/_utilities.legacy.scss
+++ b/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;
}
}
diff --git a/client/scss/overrides/_vendor.datetimepicker.scss b/client/scss/overrides/_vendor.datetimepicker.scss
index a4473511db..300ede3f68 100644
--- a/client/scss/overrides/_vendor.datetimepicker.scss
+++ b/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;
diff --git a/client/scss/overrides/_vendor.tagit.scss b/client/scss/overrides/_vendor.tagit.scss
index 699bb2b678..bf9d525194 100644
--- a/client/scss/overrides/_vendor.tagit.scss
+++ b/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;
}
diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss
index b4b4d936c2..201a9ca509 100644
--- a/client/scss/settings/_variables.scss
+++ b/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;
diff --git a/client/scss/tools/_mixins.general.scss b/client/scss/tools/_mixins.general.scss
index 0942662ccd..fb9d904d84 100644
--- a/client/scss/tools/_mixins.general.scss
+++ b/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.
diff --git a/client/scss/tools/_mixins.grid.scss b/client/scss/tools/_mixins.grid.scss
index 2c1899e2e2..e3d078dc08 100644
--- a/client/scss/tools/_mixins.grid.scss
+++ b/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;
}
}
diff --git a/client/src/components/CommentApp/components/Comment/style.scss b/client/src/components/CommentApp/components/Comment/style.scss
index 6929eff788..4f6f3e6de1 100644
--- a/client/src/components/CommentApp/components/Comment/style.scss
+++ b/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;
}
diff --git a/client/src/components/CommentApp/components/CommentHeader/style.scss b/client/src/components/CommentApp/components/CommentHeader/style.scss
index f994035702..60abb0b0b9 100644
--- a/client/src/components/CommentApp/components/CommentHeader/style.scss
+++ b/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;
diff --git a/client/src/components/CommentApp/components/CommentReply/style.scss b/client/src/components/CommentApp/components/CommentReply/style.scss
index 7eb7766b1a..e1041b2fd3 100644
--- a/client/src/components/CommentApp/components/CommentReply/style.scss
+++ b/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;
}
diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss
index 555d8b37f4..f34c36951e 100644
--- a/client/src/components/CommentApp/main.scss
+++ b/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;
diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss
index 31663113cc..451dea4e67 100644
--- a/client/src/components/Draftail/Draftail.scss
+++ b/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;
diff --git a/client/src/components/Draftail/Tooltip/Tooltip.js b/client/src/components/Draftail/Tooltip/Tooltip.js
index eacdd3f6e0..bf5e24d94f 100644
--- a/client/src/components/Draftail/Tooltip/Tooltip.js
+++ b/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,
};
}
};
diff --git a/client/src/components/Draftail/Tooltip/Tooltip.scss b/client/src/components/Draftail/Tooltip/Tooltip.scss
index 21ef20607e..76878285ad 100644
--- a/client/src/components/Draftail/Tooltip/Tooltip.scss
+++ b/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;
&,
diff --git a/client/src/components/Draftail/Tooltip/__snapshots__/Tooltip.test.js.snap b/client/src/components/Draftail/Tooltip/__snapshots__/Tooltip.test.js.snap
index bf686cf3bc..06dffacd9c 100644
--- a/client/src/components/Draftail/Tooltip/__snapshots__/Tooltip.test.js.snap
+++ b/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,
}
diff --git a/client/src/components/Draftail/blocks/MediaBlock.scss b/client/src/components/Draftail/blocks/MediaBlock.scss
index 6c14e4d1c6..3fdaf0fb96 100644
--- a/client/src/components/Draftail/blocks/MediaBlock.scss
+++ b/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;
diff --git a/client/src/components/Draftail/blocks/__snapshots__/MediaBlock.test.js.snap b/client/src/components/Draftail/blocks/__snapshots__/MediaBlock.test.js.snap
index a29859a710..f6e977f9d4 100644
--- a/client/src/components/Draftail/blocks/__snapshots__/MediaBlock.test.js.snap
+++ b/client/src/components/Draftail/blocks/__snapshots__/MediaBlock.test.js.snap
@@ -27,6 +27,26 @@ exports[`MediaBlock no data 1`] = `
`;
+exports[`MediaBlock on click tooltip opens 1`] = `
+
+`;
+
exports[`MediaBlock renders 1`] = `
`;
-
-exports[`MediaBlock on click tooltip opens 1`] = `
-
-`;
diff --git a/client/src/components/Draftail/decorators/TooltipEntity.scss b/client/src/components/Draftail/decorators/TooltipEntity.scss
index 0af7d40abf..9cedfc8e60 100644
--- a/client/src/components/Draftail/decorators/TooltipEntity.scss
+++ b/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;
}
}
diff --git a/client/src/components/Explorer/Explorer.scss b/client/src/components/Explorer/Explorer.scss
index 738dc32fbe..3b3895c7e9 100644
--- a/client/src/components/Explorer/Explorer.scss
+++ b/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;
diff --git a/client/src/components/Explorer/ExplorerItem.scss b/client/src/components/Explorer/ExplorerItem.scss
index 9a5c3947ca..afbea1511e 100644
--- a/client/src/components/Explorer/ExplorerItem.scss
+++ b/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;
}
diff --git a/client/src/components/PageExplorer/PageExplorer.scss b/client/src/components/PageExplorer/PageExplorer.scss
index 184ea88954..191faeb976 100644
--- a/client/src/components/PageExplorer/PageExplorer.scss
+++ b/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;
diff --git a/client/src/components/PageExplorer/PageExplorerItem.scss b/client/src/components/PageExplorer/PageExplorerItem.scss
index dfbd575c14..3506ed4709 100644
--- a/client/src/components/PageExplorer/PageExplorerItem.scss
+++ b/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;
}
diff --git a/client/src/components/Sidebar/Sidebar.scss b/client/src/components/Sidebar/Sidebar.scss
index 3bc872e91e..7870f1a548 100644
--- a/client/src/components/Sidebar/Sidebar.scss
+++ b/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 {
diff --git a/client/src/components/Sidebar/SidebarPanel.scss b/client/src/components/Sidebar/SidebarPanel.scss
index 05d5073f06..5036f72338 100644
--- a/client/src/components/Sidebar/SidebarPanel.scss
+++ b/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;
}
}
}
diff --git a/client/src/components/Sidebar/menu/MenuItem.scss b/client/src/components/Sidebar/menu/MenuItem.scss
index 0d2aef05c0..81e2da6bff 100644
--- a/client/src/components/Sidebar/menu/MenuItem.scss
+++ b/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 {
diff --git a/client/src/components/Sidebar/menu/SubMenuItem.scss b/client/src/components/Sidebar/menu/SubMenuItem.scss
index 67eb6f0110..7e3ff26235 100644
--- a/client/src/components/Sidebar/menu/SubMenuItem.scss
+++ b/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;
diff --git a/client/src/components/Sidebar/modules/MainMenu.scss b/client/src/components/Sidebar/modules/MainMenu.scss
index 4c883308ef..c919f45165 100644
--- a/client/src/components/Sidebar/modules/MainMenu.scss
+++ b/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;
}
}
diff --git a/client/src/components/Sidebar/modules/Search.scss b/client/src/components/Sidebar/modules/Search.scss
index 49f7d0326f..2bd187ba64 100644
--- a/client/src/components/Sidebar/modules/Search.scss
+++ b/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;
}
}
diff --git a/client/src/components/Sidebar/modules/WagtailBranding.scss b/client/src/components/Sidebar/modules/WagtailBranding.scss
index 505bbd1457..c9a0a79b94 100644
--- a/client/src/components/Sidebar/modules/WagtailBranding.scss
+++ b/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%;
}
diff --git a/client/src/components/StreamField/scss/components/c-sf-add-panel.scss b/client/src/components/StreamField/scss/components/c-sf-add-panel.scss
index c9342f0d50..35dbcdad72 100644
--- a/client/src/components/StreamField/scss/components/c-sf-add-panel.scss
+++ b/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 {
diff --git a/client/src/components/StreamField/scss/components/c-sf-block.scss b/client/src/components/StreamField/scss/components/c-sf-block.scss
index 8b38babe59..4411e6e5cb 100644
--- a/client/src/components/StreamField/scss/components/c-sf-block.scss
+++ b/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;
diff --git a/client/src/components/StreamField/scss/components/c-sf-button.scss b/client/src/components/StreamField/scss/components/c-sf-button.scss
index e79c10f237..60d580b53e 100644
--- a/client/src/components/StreamField/scss/components/c-sf-button.scss
+++ b/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;
}
}
diff --git a/client/src/components/StreamField/scss/components/c-sf-container.scss b/client/src/components/StreamField/scss/components/c-sf-container.scss
index c78d981e70..4057852d64 100644
--- a/client/src/components/StreamField/scss/components/c-sf-container.scss
+++ b/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;
}
diff --git a/docs/releases/2.17.md b/docs/releases/2.17.md
index a37edbbd12..a06e04a21f 100644
--- a/docs/releases/2.17.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index ed12f107fe..56af8d15df 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0b0c5880b4..285c44a382 100644
--- a/package.json
+++ b/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",
diff --git a/wagtail/admin/static_src/wagtailadmin/css/normalize.css b/wagtail/admin/static_src/wagtailadmin/css/normalize.css
index ddd29bdb87..79eb4fd9f7 100644
--- a/wagtail/admin/static_src/wagtailadmin/css/normalize.css
+++ b/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 */
}
/**
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss
index 56b4e87507..0bfe696b10 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss
+++ b/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;
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss
index 4c303d06bf..a40e036e4c 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss
+++ b/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;
}
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss
index 13ba8b03a8..8a01ec0de9 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss
+++ b/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
}
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss
index e7b1192bc0..bfb7345a45 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss
+++ b/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);
}
}
}
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
index 57c2d9f6ab..38ebfb3647 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
+++ b/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 {
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss
index 97a15d8a37..0d61227e7b 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss
+++ b/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) {
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss b/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss
index e5ea23cf4a..e2e1dba55d 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss
+++ b/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;
}
diff --git a/wagtail/admin/templates/wagtailadmin/notifications/base.html b/wagtail/admin/templates/wagtailadmin/notifications/base.html
index 19c6510d35..7fddb80d25 100644
--- a/wagtail/admin/templates/wagtailadmin/notifications/base.html
+++ b/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 {
diff --git a/wagtail/admin/templates/wagtailadmin/pages/add_subpage.html b/wagtail/admin/templates/wagtailadmin/pages/add_subpage.html
index 0104c929c1..9080237bbd 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/add_subpage.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/add_subpage.html
@@ -20,7 +20,7 @@
{{ verbose_name }}
-
+
{% blocktrans with page_type=verbose_name %}Pages using {{ page_type }}{% endblocktrans %}
diff --git a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss
index c56d2d69ec..43deaa33e3 100644
--- a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss
+++ b/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 {
diff --git a/wagtail/contrib/redirects/static/wagtailredirects/css/index.css b/wagtail/contrib/redirects/static/wagtailredirects/css/index.css
index 63f53c662f..cc85ac7e7b 100644
--- a/wagtail/contrib/redirects/static/wagtailredirects/css/index.css
+++ b/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;
}
diff --git a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
index 9803df0cf8..6cbae98dd8 100644
--- a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
@@ -327,7 +327,7 @@
- Something else
+ Something else
@@ -336,7 +336,7 @@
Something here
- Something else
+ Something else
@@ -345,7 +345,7 @@
Something here
- Something else
+ Something else
@@ -619,33 +619,6 @@
Unpublish
-
-
-
-
-
-
- Live
-
-
-
-
-
- Draft
-
-
-
-
-
- Live + Draft
-
-
-
-
-
- Absent
-
-
diff --git a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss
index f54f9890bb..1672b53e67 100644
--- a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss
+++ b/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;
diff --git a/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss b/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss
index c55d9e1460..ac4d76adab 100644
--- a/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss
+++ b/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%;
}
diff --git a/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss b/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss
index 50c6dbc07f..703eb01695 100644
--- a/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss
+++ b/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;
diff --git a/wagtail/project_template/home/static/css/welcome_page.css b/wagtail/project_template/home/static/css/welcome_page.css
index 2b1687c187..3d7821f691 100644
--- a/wagtail/project_template/home/static/css/welcome_page.css
+++ b/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;
}