[TASK] Update frontend dependencies

TYPO3GmbH · Nov 17, 2023 · e3ab86d · e3ab86d
1 parent adb6662
commit e3ab86d
Show file tree

Hide file tree

Showing 755 changed files with 2,226 additions and 2,324 deletions.
diff --git a/assets/css/modules/_board.scss b/assets/css/modules/_board.scss
@@ -24,7 +24,7 @@
 }
 .board-column-header {
     width: 100%;
-    padding-bottom: ($grid-gutter-width / 2);
+    padding-bottom: calc(#{$grid-gutter-width} / 2);
 }
 .board-colum-header-headline {
     font-size: 1.25rem;
@@ -34,5 +34,5 @@
     width: 100%;
     flex-grow: 1;
     background-color: #f4f4f4;
-    padding: ($grid-gutter-width / 2);
+    padding: calc(#{$grid-gutter-width} / 2);
 }
diff --git a/assets/css/modules/_card.scss b/assets/css/modules/_card.scss
@@ -10,7 +10,6 @@ $card-link-hover-color: $link-hover-color !default;
 // Card
 //
 .card {
-    color: color-contrast($card-bg);
     overflow: hidden;
     box-shadow: $box-shadow-sm;
     margin-bottom: $spacer * 2;
@@ -189,7 +188,7 @@ $card-link-hover-color: $link-hover-color !default;
 }
 .card-header-bar {
     display: flex;
-    gap: $spacer / 2;
+    gap: calc(#{$spacer} / 2);
     flex-direction: column;
     @include media-breakpoint-up('sm') {
         flex-direction: row;

diff --git a/assets/css/modules/_form.scss b/assets/css/modules/_form.scss
@@ -33,11 +33,11 @@
 .form-inline,
 .form-inline > div {
     display: flex;
-    gap: $spacer / 2;
+    gap: calc(#{$spacer} / 2);
     flex-wrap: wrap;
     .form-group {
         display: flex;
-        gap: $spacer / 4;
+        gap: calc(#{$spacer} / 4);
         align-items: center;
         margin: 0;
     }

diff --git a/assets/css/modules/_icongroup.scss b/assets/css/modules/_icongroup.scss
@@ -1,24 +1,26 @@
-//
-// Icon Group
-//
-
 //
 // Variables
-//
-$icongroup-margin: ($grid-gutter-width / 2) !default;
-$icongroup-icon-size: 32px !default;
-$icongroup-item-width: 50% !default;
+// --------------------------------------------------
+:root {
+    --icongroup-gap: #{$grid-gutter-width};
+    --icongroup-columns: 1;
+    --icongroup-icon-color: #{$primary};
+    --icongroup-icon-size: 40px;
+    --icongroup-icon-gap: calc(var(--icongroup-gap) / 2);
+}
 
 //
 // Component
-//
+// --------------------------------------------------
 .icongroup {
     display: flex;
     flex-wrap: wrap;
-    margin: -$icongroup-margin !important;
+    gap: var(--icongroup-gap);
 }
 
+//
 // Alignment
+// --------------------------------------------------
 .icongroup-align-left {
     justify-content: flex-start;
 }
@@ -29,14 +31,13 @@ $icongroup-item-width: 50% !default;
     justify-content: flex-end;
 }
 
+//
 // Icon Position
+// --------------------------------------------------
 .icongroup-iconposition-left-top {
     .icongroup-item {
         align-items: flex-start;
     }
-    .icongroup-item-icon {
-        margin-top: -($icongroup-icon-size / 8);
-    }
 }
 .icongroup-iconposition-left-center {
     .icongroup-item {
@@ -48,8 +49,6 @@ $icongroup-item-width: 50% !default;
         align-items: flex-start;
     }
     .icongroup-item-icon {
-        margin-left: 1rem;
-        margin-right: 0;
         order: 1;
     }
 }
@@ -58,8 +57,6 @@ $icongroup-item-width: 50% !default;
         align-items: center;
     }
     .icongroup-item-icon {
-        margin-left: 1rem;
-        margin-right: 0;
         order: 1;
     }
 }
@@ -69,7 +66,6 @@ $icongroup-item-width: 50% !default;
         flex-wrap: wrap;
     }
     .icongroup-item-text {
-        margin-top: 1rem;
         width: 100%;
     }
     .icongroup-item-icon {
@@ -78,31 +74,27 @@ $icongroup-item-width: 50% !default;
     }
 }
 .icongroup-iconposition-below {
-    .icongroup-item-text {
-        margin-bottom: 1rem;
-    }
     .icongroup-item-icon {
         order: 1;
     }
 }
 
+//
 // Items
+// --------------------------------------------------
 .icongroup-item {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    margin: $icongroup-margin;
-    width: 100%;
+    width: calc((100% / var(--icongroup-columns)) - (var(--icongroup-gap) * (var(--icongroup-columns) - 1)) / var(--icongroup-columns));
+    gap: var(--icongroup-icon-gap);
 }
 .icongroup-item-icon {
-    color: $primary;
     flex-shrink: 0;
-    width: $icongroup-icon-size;
-    margin-right: 1rem;
-    span {
-        font-size: $icongroup-icon-size;
-        line-height: 1em;
-    }
+    font-size: var(--icongroup-icon-size);
+    color: var(--icongroup-icon-color);
+    width: var(--icongroup-icon-size);
+    height: var(--icongroup-icon-size);
 }
 .icongroup-item-text {
     flex-grow: 1;
@@ -118,33 +110,29 @@ $icongroup-item-width: 50% !default;
     font-size: 1em;
 }
 
+//
 // Columns
+// --------------------------------------------------
 .icongroup-columns-auto {
     .icongroup-item {
         width: auto;
     }
 }
 .icongroup-columns-2 {
-    .icongroup-item {
-        @include media-breakpoint-up('sm') {
-            width: calc(100% / 2 - #{$icongroup-margin} * 2);
-        }
+    @include media-breakpoint-up('sm') {
+        --icongroup-columns: 2;
     }
 }
 .icongroup-columns-3 {
-    .icongroup-item {
-        @include media-breakpoint-up('md') {
-            width: calc(100% / 3 - #{$icongroup-margin} * 2);
-        }
+    @include media-breakpoint-up('md') {
+        --icongroup-columns: 3;
     }
 }
 .icongroup-columns-4 {
-    .icongroup-item {
-        @include media-breakpoint-up('sm') {
-            width: calc(100% / 2 - #{$icongroup-margin} * 2);
-        }
-        @include media-breakpoint-up('xl') {
-            width: calc(100% / 4 - #{$icongroup-margin} * 2);
-        }
+    @include media-breakpoint-up('sm') {
+        --icongroup-columns: 2;
+    }
+    @include media-breakpoint-up('xl') {
+        --icongroup-columns: 4;
     }
 }
diff --git a/assets/css/modules/_listbox.scss b/assets/css/modules/_listbox.scss
@@ -1,18 +1,19 @@
 //
 // Listbox
 //
-$listbox-shadow: $box-shadow-sm;
-$listbox-bg: #ffffff;
-$listbox-border-radius: 2px;
-$listbox-color: color-contrast($card-bg);
-$listbox-margin: $spacer;
-$listbox-padding: 1rem;
 .listbox {
-    border-radius: $listbox-border-radius;
-    color: $listbox-color;
-    background-color: $listbox-bg;
+    --listbox-color: var(--#{$prefix}card-color);
+    --listbox-bg: var(--#{$prefix}card-bg);
+    --listbox-header-color: var(--#{$prefix}card-color);
+    --listbox-header-bg: color-mix(in srgb, var(--listbox-bg), black 2.5);
+    --listbox-shadow: #{$box-shadow-sm};
+    --listbox-padding: 1rem;
+    --listbox-radius: 2px;
+    border-radius: var(--listbox-radius);
+    color: var(--listbox-color);
+    background: var(--listbox-bg);
     overflow: hidden;
-    box-shadow: $listbox-shadow;
+    box-shadow: var(--listbox-shadow);
     display: flex;
     flex-direction: column;
 }
@@ -23,8 +24,9 @@ $listbox-padding: 1rem;
 .listbox-header {
     display: flex;
     justify-content: space-between;
-    padding: ($listbox-padding / 2) $listbox-padding;
-    background-color: darken($card-bg, 2.5%);
+    padding: calc(var(--listbox-padding) / 2) var(--listbox-padding);
+    color: var(--listbox-header-color);
+    background: var(--listbox-header-bg);
     a,
     a:hover {
         font-weight: bold;
@@ -48,12 +50,12 @@ $listbox-padding: 1rem;
 }
 .listbox-entries {
     flex-grow: 1;
-    padding: ($listbox-padding / 2) 0;
+    padding: calc(var(--listbox-padding) / 2) 0;
 }
 .listbox-item {
     display: flex;
     justify-content: space-between;
-    padding: ($listbox-padding / 4) $listbox-padding;
+    padding: calc(var(--listbox-padding) / 4) var(--listbox-padding);
 }
 .listbox-item-name {
     flex-grow: 1;

diff --git a/assets/css/modules/_navbar.scss b/assets/css/modules/_navbar.scss
@@ -18,8 +18,8 @@ $navbar-inner-heights: (
 .navbar-mainnavigation {
     @each $breakpoint in map-keys($navbar-heights) {
         @include media-breakpoint-up($breakpoint) {
-            padding-top: (map-get($navbar-heights, $breakpoint) - map-get($navbar-inner-heights, $breakpoint)) / 2;
-            padding-bottom: (map-get($navbar-heights, $breakpoint) - map-get($navbar-inner-heights, $breakpoint)) / 2;
+            padding-top: calc((map-get($navbar-heights, $breakpoint) - map-get($navbar-inner-heights, $breakpoint)) / 2);
+            padding-bottom: calc((map-get($navbar-heights, $breakpoint) - map-get($navbar-inner-heights, $breakpoint)) / 2);
         }
     }
 }