mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-21 18:09:02 +01:00
Convert all UI code to CSS logical properties (#8051)
- Rewrite all styles to use logical properties - Update Stylelint configuration to include logical properties checks
This commit is contained in:
Thibaud Colas
GitHub
parent
11e7936562
commit
14280ad7ea
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -17,5 +17,5 @@
|
||||
|
||||
.button-select .button-select__option {
|
||||
/* override default margin from horizontally-aligned buttons */
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,10 +27,6 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.content-wrapper {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 0;
|
||||
background-color: none;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
.tagit-close {
|
||||
.ui-icon-close {
|
||||
margin-left: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
&,
|
||||
|
||||
@ -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,
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -27,6 +27,26 @@ exports[`MediaBlock no data 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`MediaBlock on click tooltip opens 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Tooltip Tooltip--top-left"
|
||||
role="tooltip"
|
||||
style="top: 0px; left: 0px; inset-inline-start: 0;"
|
||||
>
|
||||
<div
|
||||
style="max-width: 300px;"
|
||||
>
|
||||
<div
|
||||
id="test"
|
||||
>
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`MediaBlock renders 1`] = `
|
||||
<button
|
||||
className="MediaBlock"
|
||||
@ -53,23 +73,3 @@ exports[`MediaBlock renders 1`] = `
|
||||
/>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`MediaBlock on click tooltip opens 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Tooltip Tooltip--top-left"
|
||||
role="tooltip"
|
||||
style="top: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
style="max-width: 300px;"
|
||||
>
|
||||
<div
|
||||
id="test"
|
||||
>
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
139
package-lock.json
generated
139
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -391,7 +391,7 @@ legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
*margin-inline-start: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<a href="{% url 'wagtailadmin_pages:add' app_label model_name parent_page.id %}{% if next %}?next={{ next }}{% endif %}" class="icon icon-plus-inverse icon-larger">{{ verbose_name }}</a>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:right">
|
||||
<small class="col6" style="text-align:end">
|
||||
<a href="{% url 'wagtailadmin_pages:type_use' app_label model_name %}" class="nolink">{% blocktrans with page_type=verbose_name %}Pages using {{ page_type }}{% endblocktrans %}</a>
|
||||
</small>
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -327,7 +327,7 @@
|
||||
<h2><a href="">Something here</a></h2>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:right">Something else</small>
|
||||
<small class="col6" style="text-align:end">Something else</small>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -336,7 +336,7 @@
|
||||
<a href="">Something here</a>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:right">Something else</small>
|
||||
<small class="col6" style="text-align:end">Something else</small>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -345,7 +345,7 @@
|
||||
<a href="">Something here</a>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:right">Something else</small>
|
||||
<small class="col6" style="text-align:end">Something else</small>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -619,33 +619,6 @@
|
||||
Unpublish
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="c-dropdown__divider">
|
||||
</li>
|
||||
<li class="c-dropdown__item">
|
||||
<a href="#" class="u-link is-live">
|
||||
<span title="Live" class="c-indicator c-dropdown__indicator"></span>
|
||||
Live
|
||||
</a>
|
||||
</li>
|
||||
<li class="c-dropdown__item">
|
||||
<a href="#" class="u-link is-draft">
|
||||
<span title="Draft" class="c-indicator c-dropdown__indicator"></span>
|
||||
Draft
|
||||
</a>
|
||||
</li>
|
||||
<li class="c-dropdown__item">
|
||||
<a href="#" class="u-link is-live+draft">
|
||||
<span title="Live + Draft" class="c-indicator c-dropdown__indicator"></span>
|
||||
Live + Draft
|
||||
</a>
|
||||
</li>
|
||||
<li class="c-dropdown__item">
|
||||
<a href="#" class="u-link is-absent">
|
||||
<span title="Absent" class="c-indicator c-dropdown__indicator"></span>
|
||||
Absent
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user