From dc548fdbb6668da214a7d6782e805e01d97522d5 Mon Sep 17 00:00:00 2001 From: Benjamin Kott Date: Fri, 14 Apr 2023 13:06:08 +0200 Subject: [PATCH] [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 Tested-by: Anja Leichsenring Tested-by: core-ci Tested-by: Benni Mack Reviewed-by: Benni Mack --- Build/Sources/Sass/_legacy.scss | 1 - Build/Sources/Sass/adminpanel.scss | 7 ++++--- Build/Sources/Sass/component/_card.scss | 10 +++++----- Build/Sources/Sass/component/_modal.scss | 10 +++++----- Build/Sources/Sass/component/_table.scss | 2 +- Build/Sources/Sass/cropper/_main.scss | 6 +++--- Build/Sources/Sass/cropper/_variables.scss | 7 ------- Build/Sources/Sass/form.scss | 4 ++-- .../Sass/module/_extensionmanager.scss | 4 ++-- Build/Sources/Sass/module/_scheduler.scss | 4 ++-- Build/Sources/Sass/scaffold/_scaffold.scss | 14 ++++++-------- Build/Sources/Sass/scaffold/_toolbar.scss | 10 +++++----- Build/Sources/Sass/scaffold/_topbar.scss | 6 +++--- .../Sources/Sass/typo3/_element_cropper.scss | 2 +- Build/Sources/Sass/typo3/_login_screen.scss | 4 ++-- Build/Sources/Sass/typo3/_main_type.scss | 11 ----------- Build/Sources/Sass/variables/_main.scss | 19 ------------------- .../backend/Resources/Public/Css/backend.css | 17 +++++++---------- .../sysext/form/Resources/Public/Css/form.css | 2 +- 19 files changed, 49 insertions(+), 91 deletions(-) diff --git a/Build/Sources/Sass/_legacy.scss b/Build/Sources/Sass/_legacy.scss index 445d2be04fd9..9f9ca32d7760 100644 --- 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 index b136299e84e1..04bbe5ae282a 100644 --- 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 index 67d4e16e475b..714204727104 100644 --- 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 index b560af4c2fce..89883e4c2c66 100644 --- 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 index 138fae2ebc4d..52775a95e2ca 100644 --- 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 index 60050128bfbb..afdec3d554e4 100644 --- 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 index d26fce9ccaca..fd350ac35460 100644 --- 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 index 639925ea0580..c50634808866 100644 --- 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 index 8a781910cc1c..42e311ef0360 100644 --- 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 index 298ea47555db..fe136e96deb2 100644 --- 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 index f8a7b201f355..e28ccc7bd274 100644 --- 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 index 43fd5b4f4957..0ee309017660 100644 --- 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 index b529b8ee03ab..a95afd57364c 100644 --- 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 index 7a107ae44e86..e068f150214d 100644 --- 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 index 83ae4b2bea64..4b12837f5b53 100644 --- 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 index 871c48f897ae..9a06b4cd8326 100644 --- 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 // diff --git a/Build/Sources/Sass/variables/_main.scss b/Build/Sources/Sass/variables/_main.scss index dfcd22c7979c..61b287357113 100644 --- a/Build/Sources/Sass/variables/_main.scss +++ b/Build/Sources/Sass/variables/_main.scss @@ -92,25 +92,6 @@ $line-height-base: 1.5; // Paragraphs $paragraph-margin-bottom: .5rem; -// Screen Dimensions -$screen-xs: 480px; -$screen-xs-min: $screen-xs; -$screen-phone: $screen-xs-min; -$screen-ms: 624px; -$screen-ms-min: $screen-ms; -$screen-sm: 768px; -$screen-sm-min: $screen-sm; -$screen-tablet: $screen-sm-min; -$screen-md: 992px; -$screen-md-min: $screen-md; -$screen-desktop: $screen-md-min; -$screen-lg: 1200px; -$screen-lg-min: $screen-lg; -$screen-lg-desktop: $screen-lg-min; -$screen-xs-max: ($screen-sm-min - 1); -$screen-sm-max: ($screen-md-min - 1); -$screen-md-max: ($screen-lg-min - 1); - // Components $padding-base-vertical: 6px; $padding-base-horizontal: 6px; diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css index a671cc66a2f7..870a9561beb8 100644 --- a/typo3/sysext/backend/Resources/Public/Css/backend.css +++ b/typo3/sysext/backend/Resources/Public/Css/backend.css @@ -2453,7 +2453,7 @@ body.with-overflow{overflow:auto} .scaffold-toolbar{overflow:visible;background-color:transparent;height:45px;left:auto;bottom:auto;display:block} } .scaffold-toolbar-expanded .scaffold-toolbar .toolbar{background-color:#292929} -@media (max-width:991px){ +@media (max-width:991.98px){ .scaffold-toolbar-expanded .scaffold-toolbar{min-height:calc(100vh - 45px);padding:8px;flex:1 0 100%;display:block} .scaffold-toolbar-expanded .scaffold-toolbar .toolbar-item{padding:4px} } @@ -2468,11 +2468,11 @@ body.with-overflow{overflow:auto} @media (min-width:992px){ .scaffold-modulemenu-expanded .scaffold-content-overlay{display:none} } -@media (max-width:991px){ +@media (max-width:991.98px){ .scaffold .scaffold-modulemenu{display:none} } .scaffold-modulemenu-expanded .scaffold-modulemenu{width:240px} -@media (max-width:991px){ +@media (max-width:991.98px){ .scaffold-modulemenu-expanded .scaffold-modulemenu{display:block} } .scaffold-content-navigation-drag{display:none;flex:0 0 auto;width:1px;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:3;background-color:#c8c8c8;transition:background-color .2s ease-in-out,border .2s ease-in-out} @@ -2508,7 +2508,7 @@ typo3-backend-navigation-switcher{display:flex} .topbar-button-search,.topbar-button-toolbar{display:none} } .topbar-header{padding-left:40px} -@media (max-width:991px){ +@media (max-width:991.98px){ .topbar-header{padding-right:40px!important} } .topbar-header-site{overflow:hidden;position:relative;max-width:100%;height:45px;line-height:45px;padding-left:1em;padding-right:1em;white-space:nowrap} @@ -2544,7 +2544,7 @@ typo3-backend-navigation-switcher{display:flex} @media (min-width:992px){ .toolbar-item .dropdown-menu{border-top:0;border-top-left-radius:0;border-top-right-radius:0} } -@media (max-width:991px){ +@media (max-width:991.98px){ .toolbar-item .dropdown-menu{position:fixed!important;width:100%!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-height:calc(100vh - 2rem)} } .toolbar-item-avatar{margin-right:2px;display:inline-block;vertical-align:middle} @@ -3419,7 +3419,7 @@ a.card:hover{text-decoration:none;border:1px solid #b3b3b3;transform:translate(0 .card-size-medium{width:calc(50% - 20px)} } .card-size-fixed-small{width:calc(100% - 20px)} -@media (min-width:624px){ +@media (min-width:576px){ .card-size-fixed-small{width:calc(50% - 20px)} } @media (min-width:768px){ @@ -3794,9 +3794,6 @@ span.dragIcon{display:inline-block;height:16px} .text-normal{font-weight:400} .text-pre-wrap{white-space:pre-wrap} .text-wrap-allowed{word-break:break-all;overflow-wrap:break-word} -@media (min-width:768px){ -.dl-horizontal dt{text-align:left} -} a.disabled{color:#d7d7d7;pointer-events:none;opacity:.4} .media-new-content-element-wizard .media-left input{margin-left:2px} .history-block{border-left:5px solid #a9a9a9;border-bottom:1px dotted #a9a9a9} @@ -3823,7 +3820,7 @@ a.disabled{color:#d7d7d7;pointer-events:none;opacity:.4} .card-login .card-body{padding:1.75em 2.5em 2.5em} .card-login .card-footer{padding:1.5em 2.5em;border-top:3px solid #f80;border-bottom-left-radius:2px;border-bottom-right-radius:2px} .card-login a{font-weight:700} -@media (max-width:767px){ +@media (max-width:767.98px){ .card-login{margin-bottom:0} } .card-login.card-mfa .card-heading .h2,.card-login.card-mfa .card-heading h2{margin:.75rem 0} diff --git a/typo3/sysext/form/Resources/Public/Css/form.css b/typo3/sysext/form/Resources/Public/Css/form.css index 66e3cf427d75..2664f8ef329a 100644 --- a/typo3/sysext/form/Resources/Public/Css/form.css +++ b/typo3/sysext/form/Resources/Public/Css/form.css @@ -161,7 +161,7 @@ #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn{background-color:#fff;border-color:#fff} #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn.active,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn:focus,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn:hover{background-color:#ebf3fb} #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn .icon svg path{fill:#0078e6} -@media (max-width:1199px){ +@media (max-width:1199.98px){ #t3-form-stage-container.t3-form-stage-viewmode-preview #t3-form-stage-inner-container{width:600px} } #t3-form-stage-container.t3-form-stage-viewmode-preview input[type=date],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=password],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=text],#t3-form-stage-container.t3-form-stage-viewmode-preview select,#t3-form-stage-container.t3-form-stage-viewmode-preview textarea{color:#000;background-color:#e5e5e5}