diff --git a/Build/Sources/Sass/_minimal.scss b/Build/Sources/Sass/_minimal.scss index 1551ccae5340d6fe82eaef4274019a8793f01c62..3e82801dfdaa297e324535d9861b7ee1f5e64459 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 4c2aee3efe6e5e2226cc673ef3259fc93f633f58..3ba0eb82948a997a7db598385e1516079bd1a565 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 0000000000000000000000000000000000000000..7149bc5e8005db613e411b2d097cb4b8fbf8c57c --- /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 131c9007986a5f4969a6ac5083765314afbf4e8d..2582be0ec5495b63a2057c69475e195d58cc6ec2 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)}