@eeacms/volto-eea-design-system 1.14.0 → 1.16.0

package/theme/themes/eea/extras/tagList.variables

@@ -6,7 +6,7 @@
 @tagsBodyWidth             : 100%;
 @tagsLabelsGap             : 0.5rem;
 @tagsGap                   : 0 1rem;
-@tagsContentGap            : 0.5rem 1rem;
+@tagsContentGap            : 0 1rem;
 
 /* Tags Title */
 @tagsTitleFontColor        : @textColorCSSVar;

package/theme/themes/eea/globals/site.variables

@@ -111,7 +111,7 @@
 @inputPadding           : @inputVerticalPadding @inputHorizontalPadding;
 
 /* Input Text Color */
-@inputColor: @textColor;
+@inputColor: @textColorCSSVar;
 //@inputPlaceholderColor: lighten(@inputColor, 75);
 @inputPlaceholderColor: #B8C6C8;
 @inputPlaceholderFocusColor: lighten(@inputColor, 45);
@@ -257,8 +257,8 @@
 @highlightBackground      : #CCE2FF;
 @highlightColor           : @textColor;
 
-@inputHighlightBackground : rgba(100, 100, 100, 0.4);
-@inputHighlightColor      : @textColor;
+@inputHighlightBackground : rgba(31, 189, 238, 0.5);
+@inputHighlightColor      : @textColorCSSVar;
 
 
 /*-------------------

package/theme/themes/eea/globals/utilities.less

@@ -27,12 +27,21 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   z-index: 0;
 }
 
+/* Layout */
 // Flexbox
 .d-flex { display: flex !important; }
+.flex-row { flex-direction: row !important; }
 .flex-items-start { align-items: flex-start !important; }
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
+// Columns
+each(range(2, 6), {
+  .has--@{value}--columns {
+    columns: @value;
+  }
+});
+
 // Text
 .text-left,
 .has--text--left,

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

@@ -2,6 +2,10 @@
          Theme Overrides
 *******************************/
 
+.accordion .filter {
+  background-color: var(--bg-color, transparent);
+}
+
 .ui.accordion button.title {
   background: transparent;
   width: 100%;
@@ -12,8 +16,18 @@
   margin: @itemsMargin;
   transition: @styledTitleTransition;
 
-  .title,
-  button.title {
+  .basic {
+    color: @titleColorHover !important;
+  }
+
+  .basic:focus,
+  .basic:hover {
+    background-color: transparent !important;
+    box-shadow: none;
+    color: @titleColorHover !important;
+  }
+
+  .title {
     display: flex;
     align-items: center;
     justify-content: @titleJustifyContent;
@@ -23,7 +37,7 @@
       justify-content: flex-start;
     }
 
-    i {
+    .icon {
       flex-shrink: 0;
     }
 
@@ -31,12 +45,12 @@
     &:focus-visible {
       color: @titleColorHover;
 
-      i {
+      .icon {
         color: @iconColorHover;
       }
     }
 
-    i {
+    .icon {
       display: flex;
       width: @iconWidth;
       height: @iconHeight;
@@ -47,10 +61,6 @@
       font-size: @iconFontSize;
       line-height: @iconFontSize;
 
-      &:before {
-        content: @iconInactive;
-        font-size: @iconFontSize;
-      }
     }
   }
 
@@ -59,12 +69,8 @@
     background-color: @activeTitleBackground;
     color: @activeTitleColor;
 
-    i {
+    .icon {
       color: @iconColorActive;
-
-      &:before {
-        content: @iconActive;
-      }
     }
   }
 
@@ -106,7 +112,7 @@
     background-color: transparent;
   }
 
-  .ui.item i {
+  .ui.item .icon {
     font-size: @iconFontSize;
 
     &::before {
@@ -118,45 +124,41 @@
 /*--------------
    Variations
 ---------------*/
-.ui.accordion:not([class*='ary']) .active.title i {
-   color: @tertiaryColor;
-}
 .ui.accordion[class*='ary'] .active.title,
-.ui.accordion[class*='ary'] .active.title i {
-  color: white;
+.ui.accordion[class*='ary'] .filter
+ {
+  --text-color-hover: white;
+  --text-color: white;
 }
 
 /* Primary */
-.ui.accordion.primary .active.title {
-  background-color: @primaryColor;
+.ui.accordion.primary .active.title,
+.ui.accordion.primary .filter {
+  --bg-color: @primaryColorCSSVar;
 }
-.ui.accordion.primary .title:not(.active):hover,
-.ui.accordion.primary .title:not(.active):focus-visible,
-.ui.accordion.primary .title:not(.active):hover i,
-.ui.accordion.primary .title:not(.active):focus-visible i {
-  color: @primaryColorCSSVar;
+.ui.accordion.primary .title:not(.active, .filter):hover,
+.ui.accordion.primary .title:not(.active, .filter):focus-visible {
+  --text-color-hover: @primaryColorCSSVar;
 }
 
 /* Secondary */
-.ui.accordion.secondary .active.title {
-  background-color: @secondaryColor;
+.ui.accordion.secondary .active.title,
+.ui.accordion.secondary .filter {
+  --bg-color: @secondaryColorCSSVar;
 }
-.ui.accordion.secondary .title:not(.active):hover,
-.ui.accordion.secondary .title:not(.active):focus-visible,
-.ui.accordion.secondary .title:not(.active):hover i,
-.ui.accordion.secondary .title:not(.active):focus-visible i {
-  color: @secondaryColorCSSVar;
+.ui.accordion.secondary .title:not(.active, .filter):hover,
+.ui.accordion.secondary .title:not(.active, .filter):focus-visible {
+  --text-color-hover: @secondaryColorCSSVar;
 }
 
 /* Tertiary */
-.ui.accordion.tertiary .active.title {
-  background-color: @tertiaryColor;
+.ui.accordion.tertiary .active.title,
+.ui.accordion.tertiary .filter {
+  --bg-color: @tertiaryColorCSSVar;
 }
-.ui.accordion.tertiary .title:not(.active):hover,
-.ui.accordion.tertiary .title:not(.active):focus-visible,
-.ui.accordion.tertiary .title:not(.active):hover i,
-.ui.accordion.tertiary .title:not(.active):focus-visible i {
-  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) {
@@ -164,4 +166,4 @@
   .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

@@ -17,7 +17,7 @@
 
 /* Icon */
 @iconColor: var(--text-color, @oldSilver);
-@iconColorActive: @white;
+@iconColorActive: inherit;
 @iconOpacity: 1;
 @iconFontSize: 3rem;
 @iconFloat: none;
@@ -33,9 +33,9 @@
 @iconVerticalAlign: baseline;
 @iconTransform: none;
 @iconColorHover: @titleColorHover;
-@iconInactive: "\ea4e"; // Icon of closed accordion
-@iconActive: "\EA78"; // Icon of open accordion
 @iconOrder: 1; // Icon after text of the title
+@filterIconWidth: 3rem;
+@filterIconFontSize: 2rem;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;
@@ -64,7 +64,7 @@
 
 @activeIconTransform: none;
 @activeTitleBackground: var(--bg-color, @white);
-@activeTitleColor: @grey-5;
+@activeTitleColor: var(--text-color, @grey-5);
 @activeTitleBorderBottom: 0;
 
 /*-------------------

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

@@ -81,3 +81,7 @@
 .with-popup {
   cursor: @cursor;
 }
+
+.popup-container .popup {
+  position: initial; // without position initial popper cannot correctly place popup
+}

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

@@ -270,7 +270,7 @@
 
 .card .gradient {
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -359,6 +359,10 @@
   z-index: 1; // make arrows clickable even on events page with right column
 }
 
+.cards-carousel .slider-arrow.slick-disabled {
+  opacity: @carouselArrowDisabledOpacity;
+}
+
 .cards-carousel .prev-arrow {
   right: auto;
   left: @carouselButtonDistance;
@@ -377,6 +381,9 @@
 }
 
 .cards-carousel .slick-dots li button:before {
+  content: none;
+}
+.cards-carousel .slick-dots li .slick-dot-icon:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;
   border: @carouselDotsBorder;
@@ -384,9 +391,16 @@
   opacity: @carouselDotsOpacity;
   width: @mobileCarouselDotsWidth;
   height: @mobileCarouselDotsHeight;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '•';
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.cards-carousel .slick-dots li.slick-active button:before {
+.cards-carousel .slick-dots li.slick-active .slick-dot-icon:before {
   background-color: @carouselDotsActiveBackgroundColor;
   color: transparent;
 }

package/theme/themes/eea/views/card.variables

@@ -345,6 +345,7 @@
 @carouselButtonIconOpacity: 1;
 @carouselButtonDistance: -3.5rem;
 @carouselButtonPaddingTop: 0;
+@carouselArrowDisabledOpacity: 0.25;
 
 /* Dots */
 @carouselDotsFontSize: 0.75rem;

package/.i18n.babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@plone/volto/babel');