From c266e4acb8bd90c0a91879bc5ab386936d666be2 Mon Sep 17 00:00:00 2001 From: David Taylor Date: Tue, 21 Jan 2025 23:42:17 +0000 Subject: [PATCH] FIX: Enforce 'prefix' notation for media-query ranges (#30913) "context" notation is not supported in iOS < 16.4, and we don't have any post-processing on our CSS files which can automatically make that conversion. For now, changing the stylelint config to enforce the more-compatible syntax, and updating all occurences. --- .../stylesheets/common/admin/admin_base.scss | 22 ++++++++-------- .../common/admin/admin_filter.scss | 4 +-- .../common/admin/admin_report.scss | 2 +- .../common/admin/admin_report_counters.scss | 2 +- .../stylesheets/common/admin/customize.scss | 12 ++++----- .../stylesheets/common/admin/dashboard.scss | 6 ++--- .../stylesheets/common/admin/staff_logs.scss | 14 +++++----- .../stylesheets/common/base/activation.scss | 2 +- .../stylesheets/common/base/compose.scss | 4 +-- .../common/base/crawler_layout.scss | 2 +- .../common/base/magnific-popup.scss | 6 ++--- .../stylesheets/common/base/menu-panel.scss | 4 +-- app/assets/stylesheets/common/base/modal.scss | 2 +- .../stylesheets/common/base/not-found.scss | 6 ++--- .../stylesheets/common/base/onebox.scss | 2 +- .../stylesheets/common/base/topic-post.scss | 4 +-- app/assets/stylesheets/common/base/topic.scss | 6 ++--- .../stylesheets/common/base/user-badges.scss | 6 ++--- app/assets/stylesheets/common/base/user.scss | 2 +- .../common/components/topic-map.scss | 4 +-- .../common/login/invite-signup.scss | 2 +- .../stylesheets/common/modal/login-modal.scss | 2 +- .../common/modal/modal-overrides.scss | 2 +- .../stylesheets/common/topic-timeline.scss | 6 ++--- .../stylesheets/desktop/category-list.scss | 6 ++--- .../desktop/login-signup-page.scss | 2 +- .../stylesheets/desktop/topic-post.scss | 2 +- .../mobile/components/user-card.scss | 2 +- app/assets/stylesheets/mobile/modal.scss | 2 +- app/assets/stylesheets/mobile/topic-post.scss | 2 +- app/assets/stylesheets/wizard.scss | 26 +++++++++---------- .../assets/stylesheets/presence.scss | 2 +- stylelint.config.mjs | 1 + 33 files changed, 85 insertions(+), 84 deletions(-) diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index 2424b406654..0695d6870ce 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -90,7 +90,7 @@ $mobile-breakpoint: 700px; position: relative; .nav-stacked { - @media screen and (width <= 700px) { + @media screen and (max-width: 700px) { margin: 0; } } @@ -108,7 +108,7 @@ $mobile-breakpoint: 700px; &.admin-site-settings-category { overflow: hidden; - @media (width <= 500px) { + @media (max-width: 500px) { background-color: var(--primary-very-low); } } @@ -143,7 +143,7 @@ $mobile-breakpoint: 700px; display: none; } - @media screen and (width <= 970px) and (width >= 768px) { + @media screen and (max-width: 970px) and (min-width: 768px) { td, th { padding: 6px 4px; @@ -173,7 +173,7 @@ $mobile-breakpoint: 700px; .admin-contents table.grid { // Table switches to grid for narrow screens - @media screen and (width <= 767px) { + @media screen and (max-width: 767px) { thead { display: none; } @@ -240,7 +240,7 @@ $mobile-breakpoint: 700px; } } - @media screen and (width >= 550px) { + @media screen and (min-width: 550px) { tr { grid-template-columns: repeat(6, 1fr); } @@ -587,7 +587,7 @@ $mobile-breakpoint: 700px; .username { input[type="text"] { min-width: 15em; - @media screen and (width <= 500px) { + @media screen and (max-width: 500px) { box-sizing: border-box; width: 100%; } @@ -608,7 +608,7 @@ $mobile-breakpoint: 700px; .search-logs-filter { margin-left: auto; - @media screen and (width <= 700px) { + @media screen and (max-width: 700px) { flex: 1 1 100%; margin-left: 0; } @@ -788,7 +788,7 @@ $mobile-breakpoint: 700px; // Hide the search checkbox for very small screens // Todo: find somewhere to display it - probably requires switching its order in the html - @media (width <= 550px) { + @media (max-width: 550px) { display: none; } } @@ -840,7 +840,7 @@ $mobile-breakpoint: 700px; z-index: z("base") - 1; width: 250px; } - @media (width <= 500px) { + @media (max-width: 500px) { width: 50%; } @@ -875,7 +875,7 @@ $mobile-breakpoint: 700px; transition: transform 0.3s ease; @include transform(translateX(250px)); } - @media (width <= 500px) { + @media (max-width: 500px) { transition: transform 0.3s ease; @include transform(translateX(50%)); } @@ -945,7 +945,7 @@ section.details { } } -@media all and (width >= 320px) and (width <= 500px) { +@media all and (min-width: 320px) and (max-width: 500px) { .full-width { margin: 0; } diff --git a/app/assets/stylesheets/common/admin/admin_filter.scss b/app/assets/stylesheets/common/admin/admin_filter.scss index a7ab4f12784..c3bf2583c06 100644 --- a/app/assets/stylesheets/common/admin/admin_filter.scss +++ b/app/assets/stylesheets/common/admin/admin_filter.scss @@ -6,14 +6,14 @@ .admin-filter__input-container { min-width: 50%; - @media screen and (width <= 500px) { + @media screen and (max-width: 500px) { width: 100%; } input { min-width: 15em; margin: 0; - @media screen and (width <= 500px) { + @media screen and (max-width: 500px) { box-sizing: border-box; width: 100%; } diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss index ecbf5eddcfc..c949ab8e1b7 100644 --- a/app/assets/stylesheets/common/admin/admin_report.scss +++ b/app/assets/stylesheets/common/admin/admin_report.scss @@ -213,7 +213,7 @@ border-bottom: 1px solid var(--primary-low); padding-bottom: 0.5em; - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { flex-wrap: wrap; } diff --git a/app/assets/stylesheets/common/admin/admin_report_counters.scss b/app/assets/stylesheets/common/admin/admin_report_counters.scss index 6b0565ef230..5b6af22b83c 100644 --- a/app/assets/stylesheets/common/admin/admin_report_counters.scss +++ b/app/assets/stylesheets/common/admin/admin_report_counters.scss @@ -26,7 +26,7 @@ } } - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { &.title .d-icon { display: none; } diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index 29833de8f33..e6ec59fcdb7 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -200,11 +200,11 @@ justify-content: space-between; width: 79.7%; - @media screen and (width <= 700px) { + @media screen and (max-width: 700px) { width: 100%; } - @media screen and (width >= 700px) and (width <= 768px) { + @media screen and (min-width: 700px) and (max-width: 768px) { width: 73%; } @@ -386,10 +386,10 @@ max-height: 60vh; border-bottom-right-radius: var(--d-border-radius); border-bottom-left-radius: var(--d-border-radius); - @media screen and (height <= 1000px) { + @media screen and (max-height: 1000px) { max-height: 50vh; } - @media screen and (height <= 800px) { + @media screen and (max-height: 800px) { max-height: 40vh; } border-right: 1px solid var(--primary-low); @@ -937,7 +937,7 @@ width: calc(100% - 10px); } } - @media screen and (width <= 880px) { + @media screen and (max-width: 880px) { table.grid { thead { display: none; @@ -961,7 +961,7 @@ } } - @media screen and (width <= 580px) { + @media screen and (max-width: 580px) { table.grid { tr td.editing-input { grid-column-start: 1; diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss index 16246bf751a..c5d28c80288 100644 --- a/app/assets/stylesheets/common/admin/dashboard.scss +++ b/app/assets/stylesheets/common/admin/dashboard.scss @@ -109,7 +109,7 @@ border-bottom: 1px solid var(--primary-low); padding-bottom: 0.5em; - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { flex-wrap: wrap; } @@ -197,7 +197,7 @@ } } - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { flex-wrap: wrap; .storage-stats, @@ -547,7 +547,7 @@ .update-header { flex: 1 1 100%; - @media screen and (width <= 650px) { + @media screen and (max-width: 650px) { margin: 0; } diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss index c4efcaa7c81..338993a078e 100644 --- a/app/assets/stylesheets/common/admin/staff_logs.scss +++ b/app/assets/stylesheets/common/admin/staff_logs.scss @@ -9,7 +9,7 @@ .staff-actions { width: 100%; word-wrap: break-word; - @media screen and (width >= 550px) and (width <= 767px) { + @media screen and (min-width: 550px) and (max-width: 767px) { table.staff-logs tr { display: grid; grid-template-rows: auto auto; @@ -169,10 +169,10 @@ .combobox { width: 140px; } - @media screen and (width >= 900px) { + @media screen and (min-width: 900px) { margin-left: auto; } - @media screen and (width <= 899px) { + @media screen and (max-width: 899px) { margin-top: 1em; } } @@ -193,13 +193,13 @@ table.screened-ip-addresses { } } -@media screen and (width >= 550px) { +@media screen and (min-width: 550px) { table.screened-ip-addresses tr { grid-template-columns: repeat(5, 1fr) auto; } } -@media screen and (width <= 549px) { +@media screen and (max-width: 549px) { table.screened-ip-addresses tr { td.actions { grid-row: 3; @@ -382,7 +382,7 @@ table.search-logs-list { td.term { width: 60%; word-wrap: break-word; - @media screen and (width <= 767px) { + @media screen and (max-width: 767px) { width: 100%; } } @@ -391,7 +391,7 @@ table.search-logs-list { td:not(.term) { text-align: center; } - @media screen and (width >= 550px) { + @media screen and (min-width: 550px) { tr { td.term { grid-column-start: 1; diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss index 81b185d7e5d..748c861609b 100644 --- a/app/assets/stylesheets/common/base/activation.scss +++ b/app/assets/stylesheets/common/base/activation.scss @@ -24,7 +24,7 @@ padding: 2rem 3rem; background: var(--secondary); margin: 10vh auto 1em auto; - @media screen and (height <= 700px) { + @media screen and (max-height: 700px) { margin: 1em auto 1em auto; } } diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index f8823cb493b..2bbb6f215b5 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -23,7 +23,7 @@ html.composer-open { max-width: 740px; } - @media screen and (width <= 1200px) { + @media screen and (max-width: 1200px) { min-width: 0; } z-index: z("composer", "content"); @@ -165,7 +165,7 @@ html.composer-open { margin-right: 5px; max-width: 100px; @include ellipsis; - @media screen and (width <= 500px) { + @media screen and (max-width: 500px) { display: none; } } diff --git a/app/assets/stylesheets/common/base/crawler_layout.scss b/app/assets/stylesheets/common/base/crawler_layout.scss index cd085cd5368..c8bb418293e 100644 --- a/app/assets/stylesheets/common/base/crawler_layout.scss +++ b/app/assets/stylesheets/common/base/crawler_layout.scss @@ -138,7 +138,7 @@ body > noscript { width: 20%; } - @media (width <= 850px) { + @media (max-width: 850px) { table-layout: auto; margin: 0; diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss index 5be9c7897eb..697b75196be 100644 --- a/app/assets/stylesheets/common/base/magnific-popup.scss +++ b/app/assets/stylesheets/common/base/magnific-popup.scss @@ -532,8 +532,8 @@ button { } @if $include-mobile-layout-for-image { - @media all and (width <= 800px) and (orientation: landscape), - screen and (height <= 300px) { + @media all and (max-width: 800px) and (orientation: landscape), + screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ @@ -599,7 +599,7 @@ button { } // Scale navigation arrows and reduce padding from sides -@media all and (width <= 900px) { +@media all and (max-width: 900px) { .mfp-arrow { @include transform(scale(0.75)); } diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index dced6e7af23..92139f90522 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -134,7 +134,7 @@ position: relative; border-radius: 0; padding: 0.857em; - @media screen and (height <= 400px) { + @media screen and (max-height: 400px) { // helps with 400% zoom level font-size: var(--font-down-1); padding: 0.5em 0.875em; @@ -150,7 +150,7 @@ right: 6px; top: 6px; font-size: var(--font-down-3); - @media screen and (height <= 400px) { + @media screen and (max-height: 400px) { // helps with 400% zoom level right: 0; top: 0; diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 6e1e21d03f2..55f641e1a50 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -368,7 +368,7 @@ width: calc(100% - 36px); padding: 10px 4px 4px 4px; } - @media screen and (width <= 760px) { + @media screen and (max-width: 760px) { .incoming-email-html-part { width: calc(100% - 10px); } diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss index bbe120d2574..9a9c71edff2 100644 --- a/app/assets/stylesheets/common/base/not-found.scss +++ b/app/assets/stylesheets/common/base/not-found.scss @@ -18,7 +18,7 @@ .page-not-found-topics { display: flex; - @media screen and (width <= 600px) { + @media screen and (max-width: 600px) { flex-wrap: wrap; } } @@ -30,7 +30,7 @@ max-width: 400px; margin-bottom: 40px; padding-right: 20px; - @media screen and (width <= 600px) { + @media screen and (max-width: 600px) { width: 100%; } @@ -44,7 +44,7 @@ flex-wrap: wrap; align-items: baseline; margin-bottom: 15px; - @media screen and (width <= 600px) { + @media screen and (max-width: 600px) { &:nth-of-type(n + 6) { display: none; } diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss index 90e16f1af7f..7179b6f55a3 100644 --- a/app/assets/stylesheets/common/base/onebox.scss +++ b/app/assets/stylesheets/common/base/onebox.scss @@ -154,7 +154,7 @@ aside.onebox { img:not(.avatar, .onebox-avatar-inline) { max-height: 170px; max-width: 20%; - @media all and (width <= 600px) { + @media all and (max-width: 600px) { max-width: 35%; } height: auto; diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 579b6ac5976..689c6c4e5b5 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -689,7 +689,7 @@ aside.quote { .buttons { display: flex; flex-wrap: wrap; - @media screen and (width <= 420px) { + @media screen and (max-width: 420px) { flex-direction: column; align-items: flex-start; @@ -1344,7 +1344,7 @@ span.mention { } } -@media all and (width <= 767px) { +@media all and (max-width: 767px) { .reply-to-tab { span { display: none; diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index a05a9b30b71..8f1750d45f6 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -51,7 +51,7 @@ } // timeline - @media screen and (width >= 925px) { + @media screen and (min-width: 925px) { // at 925px viewport width and above the timeline is visible (see topic-navigation.js) .topic-navigation { grid-area: timeline; @@ -94,7 +94,7 @@ } // progress bar - @media screen and (width <= 924px) { + @media screen and (max-width: 924px) { grid-template-areas: "posts"; grid-template-columns: auto; @@ -193,7 +193,7 @@ .title-wrapper { display: flex; flex-wrap: wrap; - @media screen and (width >= 925px) { + @media screen and (min-width: 925px) { width: 90%; // topic title isn't full-width on wide screens } } diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss index 160cca87184..6edd43d8397 100644 --- a/app/assets/stylesheets/common/base/user-badges.scss +++ b/app/assets/stylesheets/common/base/user-badges.scss @@ -44,7 +44,7 @@ } } -@media all and (width <= 750px) { +@media all and (max-width: 750px) { .show-badge .user-badge-with-posts .badge-user a.post-link { width: auto; } @@ -231,7 +231,7 @@ h3 { margin-bottom: 0.25em; font-size: var(--font-up-1); - @media screen and (width >= 900px) { + @media screen and (min-width: 900px) { font-size: var(--font-up-2); } } @@ -242,7 +242,7 @@ width: 100%; align-self: flex-start; - @media screen and (width >= 767px) { + @media screen and (min-width: 767px) { max-width: calc(var(--d-max-width) / 2); } diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index 81262e20505..22b0708d25d 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -520,7 +520,7 @@ } } - @media all and (width <= 600px) { + @media all and (max-width: 600px) { float: none; width: 100%; } diff --git a/app/assets/stylesheets/common/components/topic-map.scss b/app/assets/stylesheets/common/components/topic-map.scss index 8ae15f055f1..81a34a46cfe 100644 --- a/app/assets/stylesheets/common/components/topic-map.scss +++ b/app/assets/stylesheets/common/components/topic-map.scss @@ -51,7 +51,7 @@ body:not(.archetype-private_message) { &.--op, &.--bottom { - @media screen and (width <= 500px) { + @media screen and (max-width: 500px) { padding-left: 0; } } @@ -253,7 +253,7 @@ body:not(.archetype-private_message) { color: var(--primary-medium); } - @media screen and (width <= 475px) { + @media screen and (max-width: 475px) { display: none; } } diff --git a/app/assets/stylesheets/common/login/invite-signup.scss b/app/assets/stylesheets/common/login/invite-signup.scss index a47613d3bb9..05c1379eac8 100644 --- a/app/assets/stylesheets/common/login/invite-signup.scss +++ b/app/assets/stylesheets/common/login/invite-signup.scss @@ -81,7 +81,7 @@ padding: 2rem 3rem; background: var(--secondary); margin: 0 auto; - @media screen and (width <= 700px) { + @media screen and (max-width: 700px) { margin: 1em auto 1em auto; padding: 1rem; } diff --git a/app/assets/stylesheets/common/modal/login-modal.scss b/app/assets/stylesheets/common/modal/login-modal.scss index a8327428c63..df8c42b22ee 100644 --- a/app/assets/stylesheets/common/modal/login-modal.scss +++ b/app/assets/stylesheets/common/modal/login-modal.scss @@ -166,7 +166,7 @@ } .desktop-view & { - @media screen and (width <= 767px) { + @media screen and (max-width: 767px) { // important to maintain narrow desktop widths // for auth modals in Discourse Hub on iPad .d-modal__header { diff --git a/app/assets/stylesheets/common/modal/modal-overrides.scss b/app/assets/stylesheets/common/modal/modal-overrides.scss index e457b60ee85..0470bf09cf5 100644 --- a/app/assets/stylesheets/common/modal/modal-overrides.scss +++ b/app/assets/stylesheets/common/modal/modal-overrides.scss @@ -343,7 +343,7 @@ } } - @media screen and (width <= 768px) { + @media screen and (max-width: 768px) { .d-modal { &__container { width: 100%; diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss index 5df9a387c06..31006a4c354 100644 --- a/app/assets/stylesheets/common/topic-timeline.scss +++ b/app/assets/stylesheets/common/topic-timeline.scss @@ -20,7 +20,7 @@ transition: max-height 0.4s ease-out; } - @media screen and (height <= 425px) { + @media screen and (max-height: 425px) { max-height: 75vh; } @@ -53,7 +53,7 @@ box-shadow: var(--shadow-composer); padding: 20px 0; z-index: z("fullscreen"); - @media screen and (height <= 425px) { + @media screen and (max-height: 425px) { padding-top: 10px; } @@ -78,7 +78,7 @@ line-height: var(--line-height-large); display: block; @include line-clamp(8); - @media screen and (height <= 425px) { + @media screen and (max-height: 425px) { @include line-clamp(5); } } diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss index 29fa09da778..9dfe1e7f189 100644 --- a/app/assets/stylesheets/desktop/category-list.scss +++ b/app/assets/stylesheets/desktop/category-list.scss @@ -170,13 +170,13 @@ } div.column.categories { - @media all and (width <= 600px) { + @media all and (max-width: 600px) { margin-right: 0; } - @media all and (width >= 600px) { + @media all and (min-width: 600px) { margin-right: 1em; } - @media all and (width >= 700px) { + @media all and (min-width: 700px) { margin-right: 2em; } } diff --git a/app/assets/stylesheets/desktop/login-signup-page.scss b/app/assets/stylesheets/desktop/login-signup-page.scss index dea014563a9..eb7970c1a60 100644 --- a/app/assets/stylesheets/desktop/login-signup-page.scss +++ b/app/assets/stylesheets/desktop/login-signup-page.scss @@ -47,7 +47,7 @@ height: 100%; } - @media screen and (width <= 767px) { + @media screen and (max-width: 767px) { // important to maintain narrow desktop widths // for auth modals in Discourse Hub on iPad .has-alt-auth { diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 67b318b3979..807ae106f72 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -750,7 +750,7 @@ span.highlighted { /* Tablet (portrait) ----------- */ -@media all and (width <= 790px) { +@media all and (max-width: 790px) { .topic-avatar { width: 45px; } diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss index ab4550d4d49..afca6c1201f 100644 --- a/app/assets/stylesheets/mobile/components/user-card.scss +++ b/app/assets/stylesheets/mobile/components/user-card.scss @@ -105,7 +105,7 @@ } .public-user-fields { - @media screen and (height <= 550px) { + @media screen and (max-height: 550px) { max-height: 12vh; } max-height: 40vh; diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss index fa890c3aa5d..915aa00de37 100644 --- a/app/assets/stylesheets/mobile/modal.scss +++ b/app/assets/stylesheets/mobile/modal.scss @@ -82,7 +82,7 @@ html:not(.keyboard-visible.mobile-view) { font-size: var(--font-up-4); } -@media only screen and (device-width <= 568px) { +@media only screen and (max-device-width: 568px) { .flag-modal-body .flag-message { height: 3em; } diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index ac675cf2eb6..2943ec57f38 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -138,7 +138,7 @@ nav.post-controls button.reply .d-icon { .post-admin-menu { bottom: -50px; left: 135px; - @media screen and (width <= 374px) { + @media screen and (max-width: 374px) { left: 50px; } } diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index b42d109400c..bedbe72cdc9 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -57,7 +57,7 @@ body.wizard { @include breakpoint("mobile-extra-large") { height: 50px; } - @media screen and (height <= 900px) { + @media screen and (max-height: 900px) { .desktop-view & { display: none; } @@ -182,7 +182,7 @@ body.wizard { &__field.text-governing-law, &__field.text-city-for-disputes { - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { display: none; } } @@ -202,7 +202,7 @@ body.wizard { box-sizing: border-box; margin-right: 1em; - @media only screen and (width <= 925px) { + @media only screen and (max-width: 925px) { width: 100%; margin-left: auto; margin-right: auto; @@ -215,7 +215,7 @@ body.wizard { border-radius: 0.5em; margin-top: -1em; - @media only screen and (width <= 925px) { + @media only screen and (max-width: 925px) { display: none; } } @@ -312,7 +312,7 @@ body.wizard { &__step-form { flex: 1 0 50%; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { width: 100%; } } @@ -344,7 +344,7 @@ body.wizard { &__step-text { display: inline; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { display: none; } } @@ -549,7 +549,7 @@ body.wizard { margin: 0; } - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { font-size: var(--font-0); } } @@ -558,7 +558,7 @@ body.wizard { color: var(--primary-high); font-size: var(--font-up-1); margin: 0.25em 0 0.5em 3.5em; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { margin-left: 2em; } } @@ -619,7 +619,7 @@ body.wizard { position: relative; vertical-align: middle; transition: background 0.25s; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { height: 20px; width: 35px; } @@ -637,7 +637,7 @@ body.wizard { color: var(--secondary); top: 4px; left: 9px; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { top: 3px; left: 5px; font-size: var(--font-down-3); @@ -652,7 +652,7 @@ body.wizard { top: 4px; left: 4px; transition: left 0.25s; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { height: 12px; width: 12px; } @@ -671,7 +671,7 @@ body.wizard { &__checkbox:checked + .wizard-container__checkbox-slider::before { left: 26px; - @media only screen and (width <= 568px) { + @media only screen and (max-width: 568px) { left: 20px; } } @@ -750,7 +750,7 @@ body.wizard { .wizard-congratulations-wrap { display: flex; gap: 1em; - @media screen and (width <= 750px) { + @media screen and (max-width: 750px) { flex-direction: column-reverse; } } diff --git a/plugins/discourse-presence/assets/stylesheets/presence.scss b/plugins/discourse-presence/assets/stylesheets/presence.scss index b9dfb6f6467..da305830e84 100644 --- a/plugins/discourse-presence/assets/stylesheets/presence.scss +++ b/plugins/discourse-presence/assets/stylesheets/presence.scss @@ -75,7 +75,7 @@ // When topic progress is visible in the posts grid area and is sticky, // adjust positioning so presence is on the same line -@media screen and (width <= 924px) { +@media screen and (max-width: 924px) { body:has(.topic-navigation.with-topic-progress) .topic-above-footer-buttons-outlet.presence { margin-top: -3.2em; diff --git a/stylelint.config.mjs b/stylelint.config.mjs index 6da5f835090..1a6a94c5e54 100644 --- a/stylelint.config.mjs +++ b/stylelint.config.mjs @@ -39,5 +39,6 @@ export default { "scss/comment-no-empty": null, "function-linear-gradient-no-nonstandard-direction": null, "scss/at-mixin-pattern": null, + "media-feature-range-notation": "prefix", }, };