@eeacms/volto-eea-design-system 0.3.1 → 0.4.0

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

@@ -57,6 +57,7 @@
 
 @primaryColor         : @darkCerulean;
 @secondaryColor       : @pineGreen;
+@tertiaryColor        : @deepBlue;
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
@@ -71,12 +72,12 @@
 @headerLineHeight : 1.25;
 @headerFontWeight : 700;
 
-@h1 : unit((48 / 16), rem);
-@h2 : unit((40 / 16), rem);
-@h3 : unit((36 / 16), rem);
-@h4 : unit((24 / 16), rem);
-@h5 : unit((20 / 16), rem);
-@h6 : unit((18 / 16), rem);
+@h1 : unit((48 / @fontSize), rem);
+@h2 : unit((40 / @fontSize), rem);
+@h3 : unit((36 / @fontSize), rem);
+@h4 : unit((24 / @fontSize), rem);
+@h5 : unit((20 / @fontSize), rem);
+@h6 : unit((18 / @fontSize), rem);
 
 /*--------------
    Form Input
@@ -750,6 +751,15 @@
 @62px : unit( (62 / @emSize), rem);
 @63px : unit( (63 / @emSize), rem);
 @64px : unit( (64 / @emSize), rem);
+// extra sizes
+@68px : unit( (68 / @emSize), em);
+@72px : unit( (72 / @emSize), em);
+@76px : unit( (76 / @emSize), em);
+@80px : unit( (80 / @emSize), rem);
+@96px : unit( (96 / @emSize), rem);
+@112px : unit( (112 / @emSize), rem);
+@128px : unit( (128 / @emSize), rem);
+@140px : unit( (140 / @emSize), rem);
 
 @relative1px  : unit( (1 / @emSize), em);
 @relative2px  : unit( (2 / @emSize), em);
@@ -815,6 +825,15 @@
 @relative62px : unit( (62 / @emSize), em);
 @relative63px : unit( (63 / @emSize), em);
 @relative64px : unit( (64 / @emSize), em);
+// extra sizes
+@relative68px : unit( (68 / @emSize), em);
+@relative72px : unit( (72 / @emSize), em);
+@relative76px : unit( (76 / @emSize), em);
+@relative80px : unit( (80 / @emSize), em);
+@relative96px : unit( (96 / @emSize), em);
+@relative112px : unit( (112 / @emSize), em);
+@relative128px : unit( (128 / @emSize), em);
+@relative140px : unit( (140 / @emSize), em);
 
 /* Columns */
 @oneMobile     : (1 / @mobileColumns * 100%);

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

@@ -0,0 +1,31 @@
+// Color utilities
+.color-fg-primary { color: @primaryColor !important; }
+.color-fg-secondary { color: @secondaryColor !important; }
+.color-fg-tertiary { color: @tertiaryColor !important; }
+.color-fg-white { color: @white !important; }
+
+.color-bg-primary { background-color: @primaryColor !important; }
+.color-bg-secondary { background-color: @secondaryColor !important; }
+.color-bg-tertiary { background-color: @tertiaryColor !important; }
+.color-bg-grey { background-color: #F9F9F9 !important; }
+
+// Display utilities
+.d-flex { display: flex !important; }
+.flex-items-start { align-items: flex-start !important; }
+.flex-items-end { align-items: flex-end !important; }
+.flex-items-center { align-items: center !important; }
+
+// Align text utilities
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important;}
+.text-right { text-align: right !important; }
+
+//Quotes utilities
+.quoted::before {
+  content: "\ec51";
+  font-family: 'remixicon' !important;
+}
+.quoted::after {
+  content: "\ec52";
+  font-family: 'remixicon' !important;
+}

package/theme/themes/eea/tokens/borders.less

@@ -0,0 +1,14 @@
+@border-size-0: 0px;
+@border-size-1: 1px;
+@border-size-2: 2px;
+@border-size-3: 3px;
+@border-size-4: 5px;
+@border-size-5: 10px;
+@radius-0: 0px;
+@radius-1: 2px;
+@radius-2: 5px;
+@radius-3: 1rem;
+@radius-4: 2rem;
+@radius-5: 4rem;
+@radius-6: 8rem;
+@radius-round: 1e5px;

package/theme/themes/eea/tokens/colors.less

@@ -0,0 +1,63 @@
+@brown-0: #FFF6EC;
+@brown-1: #FFEDD8;
+@brown-2: #E7BC91;
+@brown-3: #BC8A5F;
+@brown-4: #8B5E34;
+@brown-5: #603808;
+@brown-6: #3D2201;
+
+@purple-0: #EFEBF2;
+@purple-1: #DFD6E7;
+@purple-2: #BEADCE;
+@purple-3: #9E84B6;
+@purple-4: #7D5B9D;
+@purple-5: #5C3285;
+@purple-6: #3C096C;
+
+@red-0: #FBEEF8;
+@red-1: #F6DDF0;
+@red-2: #E7B2C0;
+@red-3: #D78890;
+@red-4: #C65B59;
+@red-5: #B83230;
+@red-6: #5C1918;
+
+@green-0: #C8FFF8;
+@green-1: #85FFF1;
+@green-2: #00F5D8;
+@green-3: #00CCB4;
+@green-4: #00A390;
+@green-5: #007B6C;
+@green-6: #005248;
+
+@yellow-0: #FEF6CD;
+@yellow-1: #FBEC9B;
+@yellow-2: #FAD936;
+@yellow-3: #FAC50D;
+@yellow-4: #FDAF20;
+@yellow-5: #FF9933;
+@yellow-6: #E56B38;
+
+@blue-0: #A0D7FF;
+@blue-1: #47B3FF;
+@blue-2: #0A99FF;
+@blue-3: #0083E0;
+@blue-4: #006BB8;
+@blue-5: #004B7F;
+@blue-6: #003052;
+
+@blue-grey-0: #DAE8F4;
+@blue-grey-1: #ACCAE5;
+@blue-grey-2: #8EA6C2;
+@blue-grey-3: #6989A5;
+@blue-grey-4: #4C677F;
+@blue-grey-5: #3D5265;
+@blue-grey-6: #2E3E4C;
+
+@grey-0: #FFFFFF;
+@grey-1: #F9F9F9;
+@grey-2: #E6E7E8;
+@grey-3: #BCBEC0;
+@grey-4: #808285;
+@grey-5: #323232;
+@grey-6: #000000;

package/theme/themes/eea/tokens/fonts.less

@@ -22,8 +22,8 @@
 @font-letterspacing-5: .500em;
 @font-letterspacing-6: .750em;
 @font-letterspacing-7: 1em;
-@font-size-00: .5rem;
-@font-size-0: .75rem;
+@font-size-00: .75rem;
+@font-size-0: .875rem;
 @font-size-1: 1rem;
 @font-size-2: 1.1rem;
 @font-size-3: 1.25rem;

package/theme/themes/eea/tokens/shadows.less

@@ -0,0 +1,41 @@
+@shadow-color: 220, 3%, 15%;
+@shadow-strength: 1%;
+
+@shadow-0: none;
+@shadow-1: 0 1px 2px -1px hsla(@shadow-color, calc(@shadow-strength + 9%));
+@shadow-2: 
+  0 3px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 7px 14px -5px hsla(@shadow-color, calc(@shadow-strength + 5%));
+@shadow-3: 
+  0 -1px 3px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 2px -5px hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 2px 5px -5px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 4px 12px -5px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 12px 15px -5px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@shadow-4: 
+  0 -2px 5px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 2px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 9px 9px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));
+@shadow-5: 
+  0 -1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 2px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 10px 10px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 20px 20px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 40px 40px -2px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@shadow-6: 
+  0 -1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 3px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 7px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 12px 10px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 22px 18px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 41px 33px -2px hsla(@shadow-color, calc(@shadow-strength + 6%)),
+  0 100px 80px -2px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@inner-shadow-0: inset 0 0 0 1px hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-1: inset 0 1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-2: inset 0 1px 4px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-3: inset 0 2px 8px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-4: inset 0 2px 14px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));

package/theme/themes/eea/tokens/shapes.less

@@ -0,0 +1,6 @@
+// Blob
+@radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
+@radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
+@radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
+@radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
+@radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;

package/theme/themes/eea/tokens/sizes.less

@@ -1,17 +1,106 @@
-@size-000: -.5rem;
-@size-00: -.25rem;
-@size-1: .25rem;
-@size-2: .5rem;
-@size-3: 1rem;
-@size-4: 1.25rem;
-@size-5: 1.5rem;
-@size-6: 1.75rem;
-@size-7: 2rem;
-@size-8: 3rem;
-@size-9: 4rem;
-@size-10: 5rem;
-@size-11: 7.5rem;
-@size-12: 10rem;
-@size-13: 15rem;
-@size-14: 20rem;
-@size-15: 30rem;
+@spacer: 4px;
+
+@space-025: @spacer * 0.25; //1px;
+@space-05:  @spacer * 0.5;  //2px;
+@space-1:   @spacer * 1;    //4px;
+@space-2:   @spacer * 2;    //8px;
+@space-3:   @spacer * 3;    //12px;
+@space-3-5: @spacer * 3.5;  //14px;
+@space-4:   @spacer * 4;    //16px;
+@space-5:   @spacer * 5;    //20px;
+@space-6:   @spacer * 6;    //24px;
+@space-7:   @spacer * 7;    //28px;
+@space-7-5: @spacer * 7.5;  //30px;
+@space-8:   @spacer * 8;    //32px;
+@space-9:   @spacer * 9;    //36px;
+@space-10:  @spacer * 10;   //40px;
+@space-11:  @spacer * 11;   //44px;
+@space-12:  @spacer * 12;   //48px;
+@space-13:  @spacer * 13;   //52px;
+@space-14:  @spacer * 14;   //56px;
+@space-15:  @spacer * 15;   //60px;
+@space-16:  @spacer * 16;   //64px;
+@space-17:  @spacer * 17;   //68px;
+@space-18:  @spacer * 18;   //72px;
+@space-19:  @spacer * 19;   //76px;
+@space-20:  @spacer * 20;   //80px;
+
+// space sizing, add missing values if needed
+@space-24: @spacer * 24; //96px;
+
+@space-28: @spacer * 28; //112px;
+
+@space-32: @spacer * 32; //128px;
+
+@space-35: @spacer * 35; //140px;
+
+@rem-space-025: @1px;
+@rem-space-050: @2px;
+@rem-space-1: @4px;
+@rem-space-2: @8px;
+@rem-space-3: @12px;
+@rem-space-3-5: @14px;
+@rem-space-4: @16px;
+@rem-space-5: @20px;
+@rem-space-6: @24px;
+@rem-space-7: @28px;
+@rem-space-7-50: @30px;
+@rem-space-8: @32px;
+@rem-space-9: @36px;
+@rem-space-10: @40px;
+@rem-space-11: @44px;
+@rem-space-12: @48px;
+@rem-space-13: @52px;
+@rem-space-14: @56px;
+@rem-space-15: @60px;
+@rem-space-16: @64px;
+@rem-space-17: @68px;
+@rem-space-18: @72px;
+@rem-space-19: @76px;
+@rem-space-20: @80px;
+
+@em-space-025: @relative1px;
+@em-space-050: @relative2px;
+@em-space-1: @relative4px;
+@em-space-2: @relative8px;
+@em-space-3: @relative12px;
+@em-space-3-50: @relative14px;
+@em-space-4: @relative16px;
+@em-space-5: @relative20px;
+@em-space-6: @relative24px;
+@em-space-7: @relative28px;
+@em-space-7-50: @relative30px;
+@em-space-8: @relative32px;
+@em-space-9: @relative36px;
+@em-space-10: @relative40px;
+@em-space-11: @relative44px;
+@em-space-12: @relative48px;
+@em-space-13: @relative52px;
+@em-space-14: @relative56px;
+@em-space-15: @relative60px;
+@em-space-16: @relative64px;
+@em-space-17: @relative68px;
+@em-space-18: @relative72px;
+@em-space-19: @relative76px;
+@em-space-20: @relative80px;
+
+// Size scale
+// Used for buttons, inputs, labels, avatars etc.
+@size: @space-4;
+
+@size-025: @size * 0.25;          // 4px
+@size-050: @size * 0.5;           // 8px
+@size-1:   @size;                 // 16px
+@size-2:   @size-1  +  @space-1;  // 20px
+@size-3:   @size-2  +  @space-1;  // 24px
+@size-4:   @size-3  +  @space-1;  // 28px
+@size-5:   @size-4  +  @space-1;  // 32px
+@size-6:   @size-5  +  @space-2;  // 40px
+@size-7:   @size-6  +  @space-2;  // 48px
+@size-8:   @size-7  +  @space-4;  // 64px
+@size-9:   @size-8  +  @space-4;  // 80px
+@size-10:  @size-9  +  @space-10; // 120px
+@size-11:  @size-10 +  @space-10; // 160px
+@size-12:  @size-11 +  @space-20; // 240px
+@size-13:  @size-12 +  @space-20; // 320px
+@size-14:  @size-13 +  @size-11;  // 480px

package/theme/themes/eea/tokens/tokens.less

@@ -1,2 +1,7 @@
+@import 'borders';
+@import 'colors';
 @import 'fonts';
+@import 'shadows';
+@import 'shapes';
 @import 'sizes';
+@import 'z-index';

package/theme/themes/eea/tokens/z-index.less

@@ -0,0 +1,12 @@
+@z-index-000: -100;
+@z-index-00: -2;
+@z-index-0: -1;
+@z-index-1: 1;
+@z-index-2: 2;
+@z-index-3: 3;
+@z-index-4: 4;
+@z-index-5: 10;
+@z-index-6: 100;
+@z-index-7: 200;
+@z-index-8: 1000;
+@z-index-important: 9999;

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

@@ -288,3 +288,111 @@
     margin: 0;
   }
 }
+
+/*******************************
+        Carousel
+*******************************/
+
+.cards-carousel {
+  position: relative;
+
+  .ui.button.icon.slider-arrow {
+    padding: @carouselButtonPadding;
+    display: none;
+
+    .active, &:focus, &:hover {
+      background: transparent;
+    }
+
+    .icon {
+      color: @carouselButtonIconColor;
+      font-size: @carouselButtonIconFontSize;
+    }
+  }
+
+  .slick-arrow {
+    display: block !important;
+  }
+
+  .slick-prev,
+  .slick-next {
+    display: none !important;
+  }
+
+  .slick-list {
+    margin: 0 -0.75em !important;
+  }
+  
+  .slick-track {
+    display: flex;
+  }
+
+  .slick-slide {
+    display: flex;
+    height: auto;
+    flex: 1;
+    flex-direction: column;
+    padding: 15px 0.75em !important;
+
+    > div {
+      height: 100%;
+    }
+
+  }
+
+  .slider-arrow {
+    position: absolute;
+    top: 50%;
+    bottom: auto;
+    display: block;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    transform: translate(0, -50%);
+  }
+
+  .prev-arrow {
+    right: auto;
+    left: @carouselButtonDistance;
+  }
+
+  .next-arrow {
+    right: @carouselButtonDistance;
+    left: auto;
+  }
+
+  .slick-dots li button:before {
+    background-color: @carouselDotsBackgroundColor;
+    color: transparent;
+    border: @carouselDotsBorder;
+    border-radius: @carouselDotsBorderRadius;
+    opacity: @carouselDotsOpacity;
+    width: @mobileCarouselDotsWidth;
+    height: @mobileCarouselDotsHeight;
+  }
+
+  .slick-dots li.slick-active button:before {
+    background-color: @carouselDotsActiveBackgroundColor;
+    color: transparent;
+    
+  }
+
+  
+}
+
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .cards-carousel {
+
+    .ui.button.icon.slider-arrow {
+      display: block;
+    }
+
+    .slick-dots li button:before {
+      width: inherit;
+      height: inherit;
+    }
+  }
+}

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

@@ -157,7 +157,7 @@
 --------------------*/
 
 /* Link */
-@linkHoverBackground: @white;
+@linkHoverBackground: transparent;
 @linkHoverBorder: @border;
 @linkHoverZIndex: 5;
 @linkHoverRaiseDistance: 3px;
@@ -319,3 +319,31 @@
 /* Meta */
 @cardMetaFontSize: 12px;
 @cardMetaTagFontWeight: 400;
+
+/*******************************
+        Carousel Cards
+*******************************/
+
+/*  Title */
+@carouselTitleFontWeight: 700;
+@carouselTitleMargin: 0;
+@carouselTitleColor: @deepBlue;
+
+/* Button */
+@carouselButtonPadding: 0;
+@carouselButtonIconColor: @black;
+@carouselButtonIconFontSize: 3.125rem;
+@carouselButtonDistance: -3.5rem;
+
+
+/* Dots */
+@carouselDotsFontSize: 0.75rem;
+@carouselDotsBorderRadius: 50%;
+@carouselDotsOpacity: 1;
+@carouselDotsBorder: 1px solid @darkCerulean;
+@carouselDotsBackgroundColor: @white;
+@carouselDotsActiveBackgroundColor: @darkCerulean;
+@mobileCarouselDotsWidth: 0.875rem;
+@mobileCarouselDotsHeight: 0.875rem;
+
+

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

@@ -6,3 +6,40 @@
 .ui.items:not(.unstackable) > .item > .image {
   margin: @imageMargin;
 }
+
+.item .tile.image {
+  width: @tileImageWidth;
+  height: @tileImageHeight;
+}
+
+.ui.items.row > .item {
+  margin: @mobileRowItemMargin;
+}
+
+// As semantic does for non unstacable items
+// so columns does not affect margin in mobiles
+.ui.items.row > .item:last-child {
+  margin-bottom: 0;
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.items.row > .item {
+    flex-direction: row;
+  }
+  
+  .ui.items.row > .item > .image + .content {
+    padding: 0em 0em 0em @mobileContentImageDistance;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.items.row > .item {
+    margin: @tabletRowItemMargin;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.items.row > .item {
+    margin: @desktopRowItemMargin;
+  }
+}

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

@@ -24,16 +24,16 @@
 /* Responsive */
 @itemSpacing: 1em;
 @imageWidth: 175px;
-@contentImageDistance: 1.5em;
+@contentImageDistance: 2rem;
 
 @tabletItemSpacing: 1em;
 @tabletImageWidth: 150px;
-@tabletContentImageDistance: 1em;
+@tabletContentImageDistance: 2rem;
 
 @mobileItemSpacing: 2em;
 @mobileImageWidth: auto;
 @mobileImageMaxHeight: 250px;
-@mobileContentImageDistance: 1.5em;
+@mobileContentImageDistance: 1.5rem;
 
 
 /*-------------------
@@ -52,6 +52,10 @@
 @imageBoxShadow: none;
 @imageBorder: none;
 
+/* Tile image size */
+@tileImageWidth: 50px;
+@tileImageHeight: auto;
+
 /* Content */
 @contentDisplay: block;
 @contentVerticalAlign: top;
@@ -155,3 +159,8 @@
 /* Unstackable */
 @unstackableMobileImageWidth: 125px;
 
+/* Row */
+@mobileRowItemMargin  : 1rem 0;
+@tabletRowItemMargin  : 1.5rem 0;
+@desktopRowItemMargin : 2rem 0;
+