@eeacms/volto-eea-design-system 0.3.0 → 0.4.1

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;
+