diff --git a/.stylelintrc.js b/.stylelintrc.js index 3e5849ca18..724ed605db 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -22,12 +22,6 @@ 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'], - }, // Refined ordering to align with media mixin usage - see https://github.com/wagtail/stylelint-config-wagtail/issues/37 'order/order': [ 'dollar-variables', diff --git a/client/scss/components/_dropdown.legacy.scss b/client/scss/components/_dropdown.legacy.scss index cb3d22577f..d9140be1f4 100644 --- a/client/scss/components/_dropdown.legacy.scss +++ b/client/scss/components/_dropdown.legacy.scss @@ -13,7 +13,7 @@ height: 3em; line-height: 3em; text-align: start; - float: left; + float: inline-start; } .action-secondary { diff --git a/client/scss/components/_footer.scss b/client/scss/components/_footer.scss index be29cc4f6e..917c4b6a1b 100644 --- a/client/scss/components/_footer.scss +++ b/client/scss/components/_footer.scss @@ -13,7 +13,7 @@ } li { - float: left; + float: inline-start; .dropdown li, // dropdown li &:last-child { @@ -84,7 +84,7 @@ } .meta { - float: right; + float: inline-end; text-align: end; padding: 7px math.div($grid-gutter-width, 2); font-size: 0.85em; diff --git a/client/scss/components/_grid.legacy.scss b/client/scss/components/_grid.legacy.scss index 29d254ebf9..9c952ad289 100644 --- a/client/scss/components/_grid.legacy.scss +++ b/client/scss/components/_grid.legacy.scss @@ -32,7 +32,7 @@ scroll-behavior: smooth; width: 100%; height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action - float: left; + float: inline-start; position: relative; border-bottom: 1px solid theme('colors.border-furniture'); } diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss index 169b3c94ae..bf1bf975fd 100644 --- a/client/scss/components/_header.scss +++ b/client/scss/components/_header.scss @@ -57,12 +57,12 @@ } .col { - float: left; + float: inline-start; margin-inline-end: 2em; } .left { - float: left; + float: inline-start; display: flex; align-items: center; flex-wrap: wrap; @@ -72,7 +72,7 @@ display: flex; gap: theme('spacing[2.5]'); text-align: end; - float: right; + float: inline-end; } // For case where content below header should merge with it @@ -132,12 +132,12 @@ } .left { - float: left; + float: inline-start; margin-inline-end: 0; &:first-child { padding-bottom: 0; - float: left; + float: inline-start; } } @@ -146,7 +146,7 @@ .right, .left { - float: right; + float: inline-end; } } diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index c58eb723ea..5c923047a3 100644 --- a/client/scss/components/_listing.scss +++ b/client/scss/components/_listing.scss @@ -231,7 +231,7 @@ ul.listing { } .actions { - float: right; + float: inline-end; font-size: 0.8rem; margin: 0; @@ -240,7 +240,7 @@ ul.listing { } > li { - float: left; + float: inline-start; padding: 0 0.5em 0 0; vertical-align: middle; } @@ -277,7 +277,7 @@ ul.listing { } .moderate-actions form { - float: left; + float: inline-start; margin: 0 1em 1em 0; } @@ -461,11 +461,11 @@ table.listing { } .prev { - float: left; + float: inline-start; } .next { - float: right; + float: inline-end; } } @@ -484,7 +484,7 @@ table.listing { } .filter-title { - float: left; + float: inline-start; font-size: 0.95em; padding: 1em; margin: 0 1em 0 0; @@ -498,7 +498,7 @@ table.listing { li { padding: 0.8em; - float: left; + float: inline-start; } &__icon { @@ -532,7 +532,7 @@ table.listing { border: 0; .bulk-action-checkbox { - float: left; + float: inline-start; margin: -0.5em 0.5em 0.5em -0.75em; } diff --git a/client/scss/layouts/_report.scss b/client/scss/layouts/_report.scss index cbe732fc62..0f77d86938 100644 --- a/client/scss/layouts/_report.scss +++ b/client/scss/layouts/_report.scss @@ -18,7 +18,7 @@ } &__actions > div { - float: right; + float: inline-end; display: block; margin-inline-end: theme('spacing.3'); } diff --git a/client/scss/overrides/_vendor.datetimepicker.scss b/client/scss/overrides/_vendor.datetimepicker.scss index 1d0850ec12..d2bcf15530 100644 --- a/client/scss/overrides/_vendor.datetimepicker.scss +++ b/client/scss/overrides/_vendor.datetimepicker.scss @@ -41,7 +41,7 @@ } .xdsoft_datepicker { - float: left; + float: inline-start; margin-inline-start: 8px; } @@ -90,7 +90,7 @@ } .xdsoft_prev { - float: left; + float: inline-start; &:before { mask-image: url('#{$images-root}icons/arrow-left.svg'); @@ -98,7 +98,7 @@ } .xdsoft_today_button { - float: left; + float: inline-start; margin-inline-start: 5px; &:before { @@ -107,7 +107,7 @@ } .xdsoft_next { - float: right; + float: inline-end; &:before { mask-image: url('#{$images-root}icons/arrow-right.svg'); @@ -116,7 +116,7 @@ .xdsoft_timepicker { min-width: 70px; - float: left; + float: inline-start; text-align: center; margin-inline-start: 8px; margin-top: 0; @@ -176,7 +176,7 @@ line-height: 20px; font-weight: bold; background-color: theme('colors.surface-page'); - float: left; + float: inline-start; width: 182px; text-align: center; cursor: pointer; diff --git a/client/scss/tools/_mixins.grid.scss b/client/scss/tools/_mixins.grid.scss index 5b82804d08..193d34f2ee 100644 --- a/client/scss/tools/_mixins.grid.scss +++ b/client/scss/tools/_mixins.grid.scss @@ -21,7 +21,7 @@ $padding: math.div($grid-gutter-width, 2); // Our column container @mixin column($x, $padding: $padding, $grid-columns: $grid-columns) { display: inline; - float: left; + float: inline-start; width: 100% * math.div($x, $grid-columns); padding-inline-end: $padding; padding-inline-start: $padding; diff --git a/client/src/components/CommentApp/components/Comment/style.scss b/client/src/components/CommentApp/components/Comment/style.scss index 3f82141ecb..6cdba53bfb 100644 --- a/client/src/components/CommentApp/components/Comment/style.scss +++ b/client/src/components/CommentApp/components/Comment/style.scss @@ -82,7 +82,7 @@ margin-top: 10px; button { - float: right; + float: inline-end; } &::after { @@ -104,7 +104,7 @@ button { height: 26px; - float: right; + float: inline-end; margin-inline-start: 5px; color: theme('colors.white.DEFAULT'); background-color: theme('colors.critical.200'); diff --git a/client/src/components/CommentApp/components/CommentHeader/style.scss b/client/src/components/CommentApp/components/CommentHeader/style.scss index 161699a81e..7f1d84824b 100644 --- a/client/src/components/CommentApp/components/CommentHeader/style.scss +++ b/client/src/components/CommentApp/components/CommentHeader/style.scss @@ -32,7 +32,7 @@ } &__action { - float: left; + float: inline-start; margin-inline-start: 5px; border-radius: 5px; width: 30px; diff --git a/client/src/components/CommentApp/components/CommentReply/style.scss b/client/src/components/CommentApp/components/CommentReply/style.scss index 0331821ab6..31e3e3bca2 100644 --- a/client/src/components/CommentApp/components/CommentReply/style.scss +++ b/client/src/components/CommentApp/components/CommentReply/style.scss @@ -67,7 +67,7 @@ margin-top: 10px; button { - float: right; + float: inline-end; } &::after { @@ -89,7 +89,7 @@ button { height: 26px; - float: right; + float: inline-end; margin-inline-start: 5px; color: theme('colors.white.DEFAULT'); background-color: theme('colors.critical.200'); diff --git a/client/src/includes/initStimulus.test.js b/client/src/includes/initStimulus.test.js index f005a276f0..69ecbfb879 100644 --- a/client/src/includes/initStimulus.test.js +++ b/client/src/includes/initStimulus.test.js @@ -13,7 +13,7 @@ class WordCountController extends Controller { const output = document.createElement('output'); output.setAttribute('name', 'word-count'); output.setAttribute('for', this.element.id); - output.style.float = 'right'; + output.style.float = 'inline-end'; this.element.insertAdjacentElement('beforebegin', output); this.output = output; this.updateCount(); diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 9781657a50..4a3c47f88c 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -184,7 +184,7 @@ module.exports = { ], corePlugins: { ...vanillaRTL.disabledCorePlugins, - // Disable float and clear which have poor RTL support. + // Disable float and clear. Use Flexbox or Grid instead. float: false, clear: false, // Disable text-transform so we don’t rely on uppercasing text. diff --git a/docs/getting_started/tutorial.md b/docs/getting_started/tutorial.md index fde39c2ee6..be73a7e791 100644 --- a/docs/getting_started/tutorial.md +++ b/docs/getting_started/tutorial.md @@ -622,7 +622,7 @@ Edit your blog page template `blog_page.html` to include the images section: {% for item in page.gallery_images.all %} -
+
{% image item.image fill-320x240 %}

{{ item.caption }}

@@ -793,7 +793,7 @@ Finally, migrate your database by running `python manage.py makemigrations` and {{ page.body|richtext }} {% for item in page.gallery_images.all %} -
+
{% image item.image fill-320x240 %}

{{ item.caption }}

diff --git a/wagtail/admin/templates/wagtailadmin/notifications/base.html b/wagtail/admin/templates/wagtailadmin/notifications/base.html index 7be41b3523..14d8beb136 100644 --- a/wagtail/admin/templates/wagtailadmin/notifications/base.html +++ b/wagtail/admin/templates/wagtailadmin/notifications/base.html @@ -72,14 +72,14 @@ } body[yahoo] .img { width: 130px !important; - float:left; + float: inline-start; } body[yahoo] .img img { width:100% !important; } body[yahoo] .text { width: 150px !important; - float:right; + float: inline-end; } {% endblock %}