From f7e9c3caf356e27f03ba85c34851536effcea3fa Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Tue, 10 Sep 2024 20:07:15 +0200
Subject: [PATCH] [TASK] Move card-container to container queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Resolves: #104880
Releases: main
Change-Id: Ibd6cf85648d6c6642281d9a879d8a314c8bbc097
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/85990
Tested-by: Frank Nägler <frank.naegler@typo3.com>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Frank Nägler <frank.naegler@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
---
Build/Sources/Sass/_minimal.scss | 1 +
Build/Sources/Sass/component/_card.scss | 27 ++++++++++----
Build/Sources/Sass/mixins/_container.scss | 20 ++++++++++
.../backend/Resources/Public/Css/backend.css | 37 +++++++++++++------
4 files changed, 67 insertions(+), 18 deletions(-)
create mode 100644 Build/Sources/Sass/mixins/_container.scss
diff --git a/Build/Sources/Sass/_minimal.scss b/Build/Sources/Sass/_minimal.scss
index 1551ccae5340..3e82801dfdaa 100644
--- a/Build/Sources/Sass/_minimal.scss
+++ b/Build/Sources/Sass/_minimal.scss
@@ -22,6 +22,7 @@
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";
@import "mixins/collection";
+@import "mixins/container";
@import "../../node_modules/bootstrap/scss/utilities";
// Layout & components
diff --git a/Build/Sources/Sass/component/_card.scss b/Build/Sources/Sass/component/_card.scss
index 4c2aee3efe6e..3ba0eb82948a 100644
--- a/Build/Sources/Sass/component/_card.scss
+++ b/Build/Sources/Sass/component/_card.scss
@@ -232,6 +232,7 @@
}
.card-container {
+ container-type: inline-size;
display: flex;
flex-wrap: wrap;
gap: var(--typo3-card-grid-gap) 0;
@@ -255,18 +256,26 @@
width: calc(100% - var(--typo3-card-grid-gap));
}
-.card-size-small {
- @include media-breakpoint-up('md') {
+//
+// Small
+//
+@include container-breakpoint-up('md') {
+ .card-size-small {
width: calc(50% - var(--typo3-card-grid-gap));
}
+}
- @include media-breakpoint-up('lg') {
+@include container-breakpoint-up('lg') {
+ .card-size-small {
width: calc(25% - var(--typo3-card-grid-gap));
}
}
-.card-size-medium {
- @include media-breakpoint-up('md') {
+//
+// Medium
+//
+@include container-breakpoint-up('md') {
+ .card-size-medium {
width: calc(50% - var(--typo3-card-grid-gap));
}
}
@@ -276,12 +285,16 @@
//
.card-size-fixed-small {
width: calc(100% - var(--typo3-card-grid-gap));
+}
- @include media-breakpoint-up('sm') {
+@include container-breakpoint-up('sm') {
+ .card-size-fixed-small {
width: calc(50% - var(--typo3-card-grid-gap));
}
+}
- @include media-breakpoint-up('md') {
+@include container-breakpoint-up('md') {
+ .card-size-fixed-small {
width: 300px;
}
}
diff --git a/Build/Sources/Sass/mixins/_container.scss b/Build/Sources/Sass/mixins/_container.scss
new file mode 100644
index 000000000000..7149bc5e8005
--- /dev/null
+++ b/Build/Sources/Sass/mixins/_container.scss
@@ -0,0 +1,20 @@
+//
+// Container
+// =========
+//
+@mixin container-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+
+ @if $min {
+ /* clean-css ignore:start */
+ @container (min-width: #{$min}) {
+ @content;
+ }
+
+ /* clean-css ignore:end */
+ }
+
+ @else {
+ @content;
+ }
+}
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 131c9007986a..2582be0ec549 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3459,24 +3459,39 @@ typo3-backend-form-selecttree-toolbar{display:block}
.card{--typo3-card-color:var(--typo3-text-color-base);--typo3-card-color-subtle:var(--typo3-text-color-variant);--typo3-card-bg:var(--typo3-surface-container-low);--typo3-card-border-radius:var(--typo3-component-border-radius);--typo3-card-border-color:color-mix(in srgb, var(--typo3-card-bg), var(--typo3-card-color) 15%);color:var(--typo3-card-color);background:var(--typo3-card-bg);border:1px solid var(--typo3-card-border-color);border-radius:var(--typo3-card-border-radius);box-shadow:var(--typo3-component-box-shadow);position:relative;display:flex;flex-direction:column;overflow:hidden;margin-bottom:var(--typo3-spacing);transition:all .2s ease-in-out;transition-property:box-shadow,border,transform}
.card .table-fit{box-shadow:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;margin-bottom:0}
.card .table-fit:not(:first-child){margin-top:var(--typo3-card-padding)}
-.card-container{display:flex;flex-wrap:wrap;gap:var(--typo3-card-grid-gap) 0;margin-left:calc(var(--typo3-card-grid-gap)/ 2 * -1);margin-right:calc(var(--typo3-card-grid-gap)/ 2 * -1);margin-bottom:var(--typo3-spacing)}
+.card-container{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--typo3-card-grid-gap) 0;margin-left:calc(var(--typo3-card-grid-gap)/ 2 * -1);margin-right:calc(var(--typo3-card-grid-gap)/ 2 * -1);margin-bottom:var(--typo3-spacing)}
.card-container .card{margin-left:calc(var(--typo3-card-grid-gap)/ 2);margin-right:calc(var(--typo3-card-grid-gap)/ 2);margin-bottom:0}
.card-size-large,.card-size-medium,.card-size-small{width:calc(100% - var(--typo3-card-grid-gap))}
-@media (min-width:768px){
-.card-size-small{width:calc(50% - var(--typo3-card-grid-gap))}
+
+@container (min-width: 768px) {
+ .card-size-small {
+ width: calc(50% - var(--typo3-card-grid-gap));
+ }
}
-@media (min-width:992px){
-.card-size-small{width:calc(25% - var(--typo3-card-grid-gap))}
+
+@container (min-width: 992px) {
+ .card-size-small {
+ width: calc(25% - var(--typo3-card-grid-gap));
+ }
}
-@media (min-width:768px){
-.card-size-medium{width:calc(50% - var(--typo3-card-grid-gap))}
+
+@container (min-width: 768px) {
+ .card-size-medium {
+ width: calc(50% - var(--typo3-card-grid-gap));
+ }
}
.card-size-fixed-small{width:calc(100% - var(--typo3-card-grid-gap))}
-@media (min-width:576px){
-.card-size-fixed-small{width:calc(50% - var(--typo3-card-grid-gap))}
+
+@container (min-width: 576px) {
+ .card-size-fixed-small {
+ width: calc(50% - var(--typo3-card-grid-gap));
+ }
}
-@media (min-width:768px){
-.card-size-fixed-small{width:300px}
+
+@container (min-width: 768px) {
+ .card-size-fixed-small {
+ width: 300px;
+ }
}
.card-body,.card-footer,.card-header,.card-image{padding:var(--typo3-card-padding) var(--typo3-card-padding) 0 var(--typo3-card-padding)}
.card-body:last-child,.card-footer:last-child,.card-header:last-child,.card-image:last-child{padding-bottom:var(--typo3-card-padding)}
--
GitLab