[TASK] Streamline media queries and breakpoints

The Bootstrap CSS Framework changed the handling of media queries with version 4.6 but the core never adapted to this. We are now finishing the migration and dropping all `$screen-` variables. All media queries that are bound to bootstrap breakpoints are now using the provided mixins. In addition the unused `.dl-horizontal` was dropped. Resolves: #100588 Releases: main Change-Id: I2d47d62f4d110a290607708ebb496dc23249ee17 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/78630 Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de> Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de> Tested-by: core-ci <typo3@b13.com> Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Benni Mack <benni@typo3.org>
TYPO3 · Apr 14, 2023 · dc548fd · dc548fd
1 parent d913292
commit dc548fd
Show file tree

Hide file tree

Showing 19 changed files with 49 additions and 91 deletions.
diff --git a/Build/Sources/Sass/_legacy.scss b/Build/Sources/Sass/_legacy.scss
@@ -75,7 +75,6 @@
 
 //// Variables
 $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
-$grid-float-breakpoint: $screen-sm-min !default;
 $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
 
 .hidden,

diff --git a/Build/Sources/Sass/adminpanel.scss b/Build/Sources/Sass/adminpanel.scss
@@ -7,8 +7,9 @@
 // Load Variables
 //
 @import "../../node_modules/bootstrap/scss/functions";
-@import "../../node_modules/bootstrap/scss/variables";
 @import "variables/main";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
 
 //
 // Variables
@@ -215,7 +216,7 @@ body.typo3-adminPanel-noscroll {
         .typo3-adminPanel-module-trigger-label {
             display: none;
 
-            @media (min-width: $screen-sm) {
+            @include media-breakpoint-up('md') {
                 display: block;
             }
         }
@@ -305,7 +306,7 @@ body.typo3-adminPanel-noscroll {
         display: none;
         opacity: .5;
 
-        @media (min-width: $screen-sm) {
+        @include media-breakpoint-up('md') {
             display: block;
         }
     }

diff --git a/Build/Sources/Sass/component/_card.scss b/Build/Sources/Sass/component/_card.scss
@@ -255,17 +255,17 @@ a.card:hover {
 }
 
 .card-size-small {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         width: calc(50% - #{$card-spacing*2});
     }
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up('lg') {
         width: calc(25% - #{$card-spacing*2});
     }
 }
 
 .card-size-medium {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         width: calc(50% - #{$card-spacing*2});
     }
 }
@@ -276,11 +276,11 @@ a.card:hover {
 .card-size-fixed-small {
     width: calc(100% - #{$card-spacing*2});
 
-    @media (min-width: $screen-ms-min) {
+    @include media-breakpoint-up('sm') {
         width: calc(50% - #{$card-spacing*2});
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         width: 300px;
     }
 }

diff --git a/Build/Sources/Sass/component/_modal.scss b/Build/Sources/Sass/component/_modal.scss
@@ -115,7 +115,7 @@ $modal-sidebar-button-space: $padding-small-vertical;
     .modal-body {
         padding: 0;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             display: flex;
             flex-direction: row;
         }
@@ -134,11 +134,11 @@ $modal-sidebar-button-space: $padding-small-vertical;
         // event to adjust the image width to the current view port
         width: 100%;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             width: calc(100% - #{$modal-sidebar-sm});
         }
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up('lg') {
             width: calc(100% - #{$modal-sidebar-md});
         }
 
@@ -158,11 +158,11 @@ $modal-sidebar-button-space: $padding-small-vertical;
         -webkit-overflow-scrolling: touch;
         width: 100%;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             width: $modal-sidebar-sm;
         }
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up('lg') {
             width: $modal-sidebar-md;
         }
     }

diff --git a/Build/Sources/Sass/component/_table.scss b/Build/Sources/Sass/component/_table.scss
@@ -133,7 +133,7 @@
     }
 
     .col-word-break {
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             word-wrap: break-word;
             word-break: break-all;
         }

diff --git a/Build/Sources/Sass/cropper/_main.scss b/Build/Sources/Sass/cropper/_main.scss
@@ -196,21 +196,21 @@
         opacity: 0;
     }
 
-    @media (min-width: $screen-sm) {
+    @include media-breakpoint-up('md') {
         &.point-se {
             height: 15px;
             width: 15px;
         }
     }
 
-    @media (min-width: $screen-md) {
+    @include media-breakpoint-up('lg') {
         &.point-se {
             height: 10px;
             width: 10px;
         }
     }
 
-    @media (min-width: $screen-lg) {
+    @include media-breakpoint-up('xl') {
         &.point-se {
             height: 5px;
             width: 5px;

diff --git a/Build/Sources/Sass/cropper/_variables.scss b/Build/Sources/Sass/cropper/_variables.scss
@@ -7,10 +7,3 @@ $color-brand: #69f;
 $color-black: #000;
 $color-white: #fff;
 $color-orange: #ff8700;
-
-// Media queries breakpoints
-// -----------------------------------------------------------------------------
-$screen-xs: 480px; // Extra small screen / phone
-$screen-sm: 768px; // Small screen / tablet
-$screen-md: 992px; // Medium screen / desktop
-$screen-lg: 1200px; // Large screen / wide desktop
diff --git a/Build/Sources/Sass/form.scss b/Build/Sources/Sass/form.scss
@@ -11,6 +11,7 @@
 @import "../../node_modules/bootstrap/scss/functions";
 @import "variables/main";
 @import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
 
 //
 // Variables
@@ -20,7 +21,6 @@ $stage-abstract-element-height: 62px;
 $stage-abstract-element-toolbar-height: 35px;
 $stage-icon-container-width: 40px;
 $stage-validation-list-width: 100px;
-$stage-breakpoint-max: $screen-lg - 1;
 $stage-validation-transition-time-in: .2s;
 $stage-validation-transition-time-out: .3s;
 $navigation-bg: $gray-100;
@@ -901,7 +901,7 @@ $tree-line-height: 20px;
     // Preview
     &.t3-form-stage-viewmode-preview {
         #t3-form-stage-inner-container {
-            @media (max-width: $stage-breakpoint-max) {
+            @include media-breakpoint-down('xl') {
                 width: 600px;
             }
         }

diff --git a/Build/Sources/Sass/module/_extensionmanager.scss b/Build/Sources/Sass/module/_extensionmanager.scss
@@ -105,7 +105,7 @@
         width: 50px;
         display: block;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             width: 64px;
         }
     }
@@ -122,7 +122,7 @@
     margin-bottom: 2em;
     max-width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         float: left;
         margin-right: 3em;
     }

diff --git a/Build/Sources/Sass/module/_scheduler.scss b/Build/Sources/Sass/module/_scheduler.scss
@@ -24,14 +24,14 @@
 }
 
 .task-form .form-group {
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up('lg') {
         width: 50%;
     }
 }
 
 #task_start_col,
 #task_end_col {
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up('lg') {
         width: 25%;
     }
 }
diff --git a/Build/Sources/Sass/scaffold/_scaffold.scss b/Build/Sources/Sass/scaffold/_scaffold.scss
@@ -6,8 +6,6 @@
 //
 // Variables
 //
-$scaffold-breakpoint-max: ($screen-md - 1);
-$scaffold-breakpoint: $screen-md;
 $scaffold-overlay-bg: rgba(0, 0, 0, .65);
 $scaffold-overlay-zindex: $zindex-modal-backdrop;
 $scaffold-bg: #f5f5f5;
@@ -100,7 +98,7 @@ body {
     position: absolute;
     z-index: $scaffold-overlay-zindex + 1;
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         z-index: $scaffold-modulemenu-zindex;
         position: sticky;
     }
@@ -132,7 +130,7 @@ body {
     }
     display: none;
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         overflow: visible;
         background-color: transparent;
         height: $scaffold-topbar-height;
@@ -148,7 +146,7 @@ body {
             background-color: $scaffold-modulemenu-bg;
         }
 
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             .toolbar-item {
                 padding: 4px;
             }
@@ -223,7 +221,7 @@ body {
     .scaffold-content-overlay {
         display: block;
 
-        @media (min-width: $scaffold-breakpoint) {
+        @include media-breakpoint-up('lg') {
             display: none;
         }
     }
@@ -234,7 +232,7 @@ body {
 //
 .scaffold {
     .scaffold-modulemenu {
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             display: none;
         }
     }
@@ -244,7 +242,7 @@ body {
     .scaffold-modulemenu {
         width: $scaffold-modulemenu-expanded-width;
 
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             display: block;
         }
     }

diff --git a/Build/Sources/Sass/scaffold/_toolbar.scss b/Build/Sources/Sass/scaffold/_toolbar.scss
@@ -61,7 +61,7 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
         width: 33.33%;
     }
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         width: auto;
         margin-left: 1px;
     }
@@ -74,13 +74,13 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
         max-height: calc(100vh - #{$toolbar-height} - 1rem);
         overflow-y: auto;
 
-        @media (min-width: $scaffold-breakpoint) {
+        @include media-breakpoint-up('lg') {
             border-top: 0;
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
 
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             position: fixed !important;
             width: 100% !important;
             top: 50% !important;
@@ -133,7 +133,7 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
         background-color: #292929;
     }
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         border: none;
     }
 }
@@ -144,7 +144,7 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
     }
 }
 
-@media (min-width: $scaffold-breakpoint) {
+@include media-breakpoint-up('lg') {
     .toolbar-item-title {
         display: none;
     }

diff --git a/Build/Sources/Sass/scaffold/_topbar.scss b/Build/Sources/Sass/scaffold/_topbar.scss
@@ -65,7 +65,7 @@ $toolbar-item-padding-horizontal: 15px;
     &.topbar-button-modulemenu {
         left: 0;
 
-        @media (min-width: $scaffold-breakpoint) {
+        @include media-breakpoint-up('lg') {
             background-color: $topbar-button-active-bg;
         }
     }
@@ -96,7 +96,7 @@ $toolbar-item-padding-horizontal: 15px;
     display: inline-flex;
 }
 
-@media (min-width: $scaffold-breakpoint) {
+@include media-breakpoint-up('lg') {
     .topbar-button-toolbar,
     .topbar-button-search {
         display: none;
@@ -109,7 +109,7 @@ $toolbar-item-padding-horizontal: 15px;
 .topbar-header {
     padding-left: $topbar-button-width;
 
-    @media (max-width: $scaffold-breakpoint-max) {
+    @include media-breakpoint-down('lg') {
         padding-right: ($topbar-button-width) !important;
     }
 }

diff --git a/Build/Sources/Sass/typo3/_element_cropper.scss b/Build/Sources/Sass/typo3/_element_cropper.scss
@@ -65,7 +65,7 @@
         max-width: 1000px;
         max-height: calc(100vh - 250px);
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up('lg') {
             max-height: 100%;
         }
     }

diff --git a/Build/Sources/Sass/typo3/_login_screen.scss b/Build/Sources/Sass/typo3/_login_screen.scss
@@ -67,7 +67,7 @@ $login-container-padding-horizontal: 2.5em;
     display: block;
     color: #666;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         flex: none;
         position: absolute;
         bottom: 1.5em;
@@ -167,7 +167,7 @@ $login-container-padding-horizontal: 2.5em;
         font-weight: bold;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down('md') {
         margin-bottom: 0;
     }
 

diff --git a/Build/Sources/Sass/typo3/_main_type.scss b/Build/Sources/Sass/typo3/_main_type.scss
@@ -18,17 +18,6 @@
     overflow-wrap: break-word;
 }
 
-//
-// Horizontal description lists
-//
-.dl-horizontal {
-    @media (min-width: $grid-float-breakpoint) {
-        dt {
-            text-align: left;
-        }
-    }
-}
-
 //
 // Anchor states
 //