@eeacms/volto-eea-design-system 1.17.0 → 1.18.0

package/theme/themes/eea/modules/accordion.overrides

@@ -7,9 +7,9 @@
 }
 
 .ui.accordion button.title {
-  background: transparent;
   width: 100%;
   border: none;
+  background: transparent;
 }
 
 .ui.accordion {
@@ -60,7 +60,18 @@
       color: @iconColor;
       font-size: @iconFontSize;
       line-height: @iconFontSize;
+    }
+
+    &.filter {
+      .icon {
+        margin: @filterIconMargin;
+        color: var(--text-color, @filterTextColor);
+        font-size: @filterIconFontSize;
+      }
 
+      .ui.input input::placeholder {
+        color: var(--text-color, @filterTextColor);
+      }
     }
   }
 
@@ -75,9 +86,9 @@
   }
 
   .content {
+    padding: @contentPadding;
     background: @contentBackground;
     color: @contentColor;
-    padding: @contentPadding;
   }
 }
 
@@ -94,11 +105,12 @@
      Styled
 ---------------*/
 
-.ui.styled.accordion  .title,
-.ui.styled.accordion  .title:hover,
-.ui.styled.accordion  .title:focus-visible {
+.ui.styled.accordion .title,
+.ui.styled.accordion .title:hover,
+.ui.styled.accordion .title:focus-visible {
   background-color: @styledActiveTitleBackground;
 }
+
 .ui.styled.accordion .active.title input {
   color: @styledActiveTitleColor;
 }
@@ -125,8 +137,7 @@
    Variations
 ---------------*/
 .ui.accordion[class*='ary'] .active.title,
-.ui.accordion[class*='ary'] .filter
- {
+.ui.accordion[class*='ary'] .filter {
   --text-color-hover: white;
   --text-color: white;
 }
@@ -136,6 +147,7 @@
 .ui.accordion.primary .filter {
   --bg-color: @primaryColorCSSVar;
 }
+
 .ui.accordion.primary .title:not(.active, .filter):hover,
 .ui.accordion.primary .title:not(.active, .filter):focus-visible {
   --text-color-hover: @primaryColorCSSVar;
@@ -146,6 +158,7 @@
 .ui.accordion.secondary .filter {
   --bg-color: @secondaryColorCSSVar;
 }
+
 .ui.accordion.secondary .title:not(.active, .filter):hover,
 .ui.accordion.secondary .title:not(.active, .filter):focus-visible {
   --text-color-hover: @secondaryColorCSSVar;
@@ -156,14 +169,26 @@
 .ui.accordion.tertiary .filter {
   --bg-color: @tertiaryColorCSSVar;
 }
+
 .ui.accordion.tertiary .title:not(.active, .filter):hover,
 .ui.accordion.tertiary .title:not(.active, .filter):focus-visible {
   --text-color-hover: @tertiaryColorCSSVar;
 }
 
 @media only screen and (max-width: @largestMobileScreen) {
-  .accordion-block h1 * { font-size: @mobileH1; }
-  .accordion-block h2 * { font-size: @mobileH2; }
-  .accordion-block h3 * { font-size: @mobileH3; }
-  .accordion-block h4 * { font-size: @mobileH4; }
+  .accordion-block h1 * {
+    font-size: @mobileH1;
+  }
+
+  .accordion-block h2 * {
+    font-size: @mobileH2;
+  }
+
+  .accordion-block h3 * {
+    font-size: @mobileH3;
+  }
+
+  .accordion-block h4 * {
+    font-size: @mobileH4;
+  }
 }

package/theme/themes/eea/modules/accordion.variables

@@ -36,6 +36,8 @@
 @iconOrder: 1; // Icon after text of the title
 @filterIconWidth: 3rem;
 @filterIconFontSize: 2rem;
+@filterIconMargin: 0 10px;
+@filterTextColor: @grey-4;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;

package/theme/themes/eea/views/item.overrides

@@ -172,6 +172,27 @@
   }
 }
 
+.flex-items-wrapper.items-2-columns .flex-item {
+  width: var(--flex-item-width, 100%);
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+  .flex-items-wrapper.items-2-columns  .flex-item {
+    --flex-item-width: calc(@width / 2 - 1%);
+  }
+
+  .flex-items-wrapper.items-3-columns .flex-item {
+    --flex-item-width: calc(@width / 3);
+  }
+
+  .flex-items-wrapper.items-4-columns .flex-item {
+    --flex-item-width: calc(@width / 4);
+  }
+
+  .flex-items-wrapper.items-5-columns .flex-item {
+    --flex-item-width: calc(@width / 5);
+  }
+}
+
 
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {