@eeacms/volto-eea-design-system 0.5.4 → 0.6.1

package/theme/themes/eea/elements/button.overrides

@@ -105,6 +105,7 @@
 // .ui.secondary.pointing.menu:not(.vertical) overrides
 .ui.button.full-size-sidenav-btn {
   z-index: 1;
+  padding: @fullSizeSidenavBtnPadding;
 }
 
 /* Global Button Styles */

package/theme/themes/eea/elements/button.variables

@@ -417,3 +417,4 @@
 
 /* Pastanaga Toolbar Button */
 @toolbarButtonLineHeight: 0.75;
+@fullSizeSidenavBtnPadding: 6px;

package/theme/themes/eea/elements/container.overrides

@@ -65,6 +65,21 @@ body {
   .contentWidth(0);
 }
 
+// WIP container fixes for edit interface
+.section-edit .container {
+    max-width: 1120px !important;
+}
+@media only screen and (max-width: 1600px) {
+  .has-sidebar.section-edit .container {
+    margin-left: 0 !important;
+  }
+}
+@media only screen and (min-width: 1601px) {
+  .has-sidebar.section-edit .main.bar .ui.container {
+    margin-left: 10% !important;
+  }
+}
+
 .drag.handle.wrapper {
   margin-left: -15px !important;
 }

package/theme/themes/eea/extras/banner.less

@@ -127,6 +127,12 @@
   }
 }
 
+@media only screen and (max-width: @tabletBreakpoint - 1) {
+  .actions .action {
+    margin-bottom: @mobileActionsActionMarginBottom;
+  }
+}
+
 @media only screen and (min-width: @tabletBreakpoint) {
   .eea.banner {
     .gradient {
@@ -174,7 +180,6 @@
     .actions {
       flex-flow: row;
       display: flex;
-      justify-content: space-between;
 
       .action {
         display: inherit;

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

@@ -38,9 +38,9 @@
 
 /* Metadata */
 @metadataTypeFontWeight    : @bold;
-@mobileMetadataFontSize    : 0.438rem;
+@mobileMetadataFontSize    : 0.75rem;
 @tabletMetadataFontSize    : 0.875rem;
-@mobileMetadataLineHeight  : 0.5rem;
+@mobileMetadataLineHeight  : 1.2;
 @tabletMetadataLineHeight  : 1rem;
 // Metadata field
 @metadataFieldDividerContent: ' | ';
@@ -50,6 +50,7 @@
 @tabletActionsAlignItems                 : flex-end;
 @tabletActionsFlexDirection              : column;
 // Action
+@mobileActionsActionMarginBottom         : 0.5rem;
 @tabletActionsActionMinWidth             : 95px;
 // Button
 @mobileBannerActionButtonFontSize        : 0.75rem;

package/theme/themes/eea/extras/contentBox.less

@@ -33,16 +33,25 @@
   &.primary {
     background-color: @contentBoxBackgroundColorPrimary;
     color: @contentBoxColor;
+    .header {
+      color: @contentBoxColor !important;
+    }
   }
 
   &.secondary {
     background-color: @contentBoxBackgroundColorSecondary;
     color: @contentBoxColor;
+    .header {
+      color: @contentBoxColor !important;
+    }
   }
 
   &.tertiary {
     background-color: @contentBoxBackgroundColorTertiary;
     color: @contentBoxColor;
+    .header {
+      color: @contentBoxColor !important;
+    }
   }
 }
 
@@ -55,3 +64,10 @@
 .content-box[class*="ary"] a {
   color: inherit;
 }
+
+// set color of default cards to black when we are inside a content-box which has the ability to set
+// color classes
+.content-box[class*="ary"] [class="ui fluid card"] {
+  color: @grey-6;
+}
+

package/theme/themes/eea/extras/custom.overrides

@@ -1,3 +1,6 @@
+/*-------------------
+      Homepage
+--------------------*/
 // hide stagingBanner on homepage
 .homepage .stagingBanner {
   display: none !important;
@@ -15,10 +18,13 @@
 
 }
 
-// set color of default cards to black when we are inside a content-box which has the ability to set
-// color classes
-.content-box [class="ui fluid card"] {
-  color: #000;
+// use homepage text color for color of cards that are within a content-box that has a variant class
+.homepage .content-box[class*="ary"] [class="ui fluid card"] {
+  color: @blue-grey-5;
+}
+// set carousel arrow to homepage color
+.homepage .cards-carousel .ui.button.icon.slider-arrow .icon {
+  color: @blue-grey-5;
 }
 
 // remove text decoration on links that might be added by content-box a rule
@@ -52,3 +58,69 @@
 .block .ui.basic.button.delete-button {
   z-index: @z-index-5;
 }
+
+
+// inherit font weight of styled headers so that if we set 300 weight it's visible also on
+// the edit page
+#page-edit .slate .styled h1,
+#page-edit .slate .styled h2,
+#page-edit .slate .styled h3,
+#page-edit .slate .styled h4,
+#page-edit .slate .styled h5,
+#page-edit .slate .styled h6 {
+  font-weight: inherit;
+}
+
+// tweak padding of workflow progress titles now that
+// we have larger font size
+.progress__item .progress__title {
+  padding-top: 0;
+  line-height: 25px; // center bullet of progress item
+}
+
+// inherit color of description and link from homepage cards
+.homepage .ui.items > .item > .content > .description,
+.homepage .grid-block-teaser a {
+  color: inherit;
+}
+
+// Tabs block border left/top
+.tabs-block {
+  .border-left {
+    border-right: none !important;
+    border-left: 0.0625rem solid @midGray !important;
+
+    .item.active {
+      border-right: none !important;
+      border-left-style: solid !important;
+      margin: 0em 0em 0em -0.2rem !important;
+    }
+
+    .item:active {
+      border-right: none !important;
+    }
+  }
+
+  .border-top {
+    border: none !important;
+    border-top: 0.0625rem solid @midGray !important;
+
+    &::before {
+      border-top: none !important;
+    }
+
+    .item {
+      border: none !important;
+    }
+
+    .item.active {
+      border-bottom: none !important;
+      border-top-style: solid !important;
+      margin: 0em 0em 0em -0.2rem !important;
+    }
+
+    .item:active {
+      border-bottom: none !important;
+    }
+  }
+}

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

@@ -41,7 +41,7 @@
 
 /* EIONET Logo */
 @tabletEionetLogoWidth               : 225px;
-@computerEionetLogoWidth             : 260px;
+@computerEionetLogoWidth             : 259px; // 260px was rendering the image fuzzy
 @tabletEionetLogoMarginLeft          : @space-3;
 
 /* Contact Info */

package/theme/themes/eea/extras/header.less

@@ -132,7 +132,6 @@
 
 /* Theme sites dropdown */
 #theme-sites.ui.dropdown .menu {
-  left: @themeSitesMenuLeft;
 
   .wrapper {
     width: @mobileThemeSitesMenuWidth;
@@ -303,6 +302,11 @@
   z-index: 1;
   width: 100%;
 }
+// reduce width of header when we have toolbar open for better placement
+.has-toolbar.homepage .eea.header {
+    width: 96%;
+}
+
 /*----------------------------------------------------------------------------
   Header Actions - Burger and Search Icons
 ----------------------------------------------------------------------------*/
@@ -470,11 +474,6 @@
     margin-top: @computerDropdownMenuMarginTop;
   }
 
-  #theme-sites.ui.dropdown .menu {
-    .wrapper {
-      width: @computerThemeSitesMenuWidth;
-    }
-  }
   /*----------------------------------------------------------------------------
       HEADER MAIN BAR DESKTOP
   ----------------------------------------------------------------------------*/
@@ -487,7 +486,7 @@
         flex-wrap: wrap;
         display: flex;
         width: 88%;
-        max-height: 20px;
+        max-height: 100%;
         justify-content: space-between;
         margin: 0;
 
@@ -650,7 +649,19 @@
 }
 
 #main #mega-menu .ui.accordion .title:first-child {
-  display: none; // hide home link from mobile menu
+  display: flex;
+}
+//#main #mega-menu .ui.accordion .title:first-child {
+//  display: none; // hide home link from mobile menu
+//}
+#main #mega-menu .mobile > .ui.accordion > .title:first-child {
+  display: none;
+}
+
+@media all and (max-width: @tabletBreakpoint - 1) {
+  #theme-sites.ui.dropdown .menu {
+    left: @mobileThemeSitesMenuLeft;
+  }
 }
 
 @media all and (min-width: @tabletBreakpoint) {

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

@@ -3,7 +3,7 @@
 --------------------*/
 
 /* Heights */
-@mobileTopSectionHeight      : 20px;
+@mobileTopSectionHeight      : 22px;
 @tabletTopSectionHeight      : 30px;
 @computerTopSectionHeight    : 33px;
 
@@ -72,11 +72,10 @@
 @tabletOfficialUnionMenuLeft          : -54px;
 
 // Theme Sites
-@mobileThemeSitesMenuWidth            : 190px;
-@computerThemeSitesMenuWidth          : 200px;
+@mobileThemeSitesMenuWidth            : 200px;
 @themeSitesMenuSiteLinkColor          : @blue-grey-6;
 @themeSitesMenuSiteLinkFontWeight     : @normal;
-@themeSitesMenuLeft                   : -20px;
+@mobileThemeSitesMenuLeft             : 0px;
 
 // Language
 @tabletLanguageMenuTop                : 18px;
@@ -97,7 +96,7 @@
 @logoWidth                            : 100%;
 @mobileLogoMaxWidth                   : 122px;
 @tabletLogoMaxWidth                   : 252px;
-@computerLogoMaxWidth                 : 348px;
+@computerLogoMaxWidth                 : 347px; //348 rendered fuzzy :(
 @mobileLogoMarginTop                  : @rem-space-2;
 @tabletLogoMarginTop                  : @rem-space-3-5;
 @computerLogoMarginTop                : @rem-space-5;

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

@@ -9,9 +9,10 @@
 
 .tags {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-direction: row;
+  align-items: center;
   justify-content: right;
+  flex-wrap: wrap;
   width: @tagsBodyWidth;
   line-height: @tagsLineHeight;
 
@@ -23,27 +24,8 @@
     font-weight: @tagsFontWeight;
     font-size: @tagsFontSize;
   }
-
-  .tags-content {
-    line-height: @tagsLineHeight;
-    display: inline-flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-direction: column;
-  }
 }
 
 .tags.left {
   justify-content: left;
-}
-
-@media only screen and (min-width: @tabletBreakpoint) {
-  .tags {
-    flex-direction: row;
-    align-items: center;
-
-    .tags-content {
-      flex-direction: inherit;
-    }
-  }
-}
+}

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

@@ -24,7 +24,7 @@
 @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
 
 
-@bold              : 600;
+@bold              : @font-weight-7;
 @normal            : normal;
 
 /*-------------------
@@ -70,7 +70,7 @@
 ---------------*/
 
 @headerLineHeight : 1.25;
-@headerFontWeight : 700;
+@headerFontWeight : @font-weight-7;
 
 @h1 : unit((48 / @fontSize), rem);
 @h2 : unit((40 / @fontSize), rem);
@@ -176,8 +176,8 @@
 @pageBackground      : @white;
 @pageOverflowX       : hidden;
 
-@lineHeight          : 1.5;
-@mobileLineHeight    : 1.5;
+@lineHeight          : @font-lineheight-3;
+@mobileLineHeight    : @font-lineheight-3;
 @textColor           : rgba(0, 0, 0, 1);
 
 /*-------------------

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

@@ -1,4 +1,11 @@
-// Color utilities
+// Color
+h1, h2, h3, h4, h5, h6, p, span, .header {
+  &.primary { color: @primaryColor !important; }
+  &.secondary { color: @secondaryColor !important; }
+  &.tertiary { color: @tertiaryColor !important; }
+  &.white { color: @white !important; }
+}
+
 .color-fg-primary { color: @primaryColor !important; }
 .color-fg-secondary { color: @secondaryColor !important; }
 .color-fg-tertiary { color: @tertiaryColor !important; }
@@ -20,18 +27,18 @@
   z-index: 0;
 }
 
-// Display utilities
+// Flexbox
 .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
+// Align text
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important;}
 .text-right { text-align: right !important; }
 
-//Quotes utilities
+// Quotes
 .quoted::before {
   content: "\ec51";
   font-family: 'remixicon' !important;
@@ -40,3 +47,9 @@
   content: "\ec52";
   font-family: 'remixicon' !important;
 }
+
+// Borders
+.bordered { 
+  border-bottom: @border-size-1 solid !important;
+  padding-bottom: @rem-space-2 !important;
+}

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

@@ -14,14 +14,14 @@
 @font-lineheight-3: 1.5;
 @font-lineheight-4: 1.75;
 @font-lineheight-5: 2;
-@font-letterspacing-0: -.05em;
-@font-letterspacing-1: .025em;
-@font-letterspacing-2: .050em;
-@font-letterspacing-3: .075em;
-@font-letterspacing-4: .150em;
-@font-letterspacing-5: .500em;
-@font-letterspacing-6: .750em;
-@font-letterspacing-7: 1em;
+@font-letterspacing-000: -.02em;
+@font-letterspacing-00: -.015em;
+@font-letterspacing-0: -.005em;
+@font-letterspacing-1: .005em;
+@font-letterspacing-2: .015em;
+@font-letterspacing-3: .02em;
+@font-letterspacing-4: .075em;
+@font-letterspacing-5: .15em;
 @font-size-00: .75rem;
 @font-size-0: .875rem;
 @font-size-1: 1rem;
@@ -36,4 +36,4 @@
 @font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
 @font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
 @font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
-@font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
+@font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);

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

@@ -31,6 +31,12 @@
   font-size: @metaFontSize;
 }
 
+// add bottom margin also when meta isn't inside .content
+//
+.ui.cards > .card .meta, .ui.card .meta {
+    margin-bottom: @rem-space-4;
+}
+
 .ui.card .extra.content a {
   font-weight: @contentLinkFontWeight;
 

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

@@ -84,7 +84,7 @@
 /* Metadata */
 @metaFontSize: @relativeMedium;
 @metaSpacing: 0.3em;
-@metaColor: @oldSilver;
+@metaColor: @tertiaryColor;
 
 /* Icons */
 @actionOpacity: 0.75;

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

@@ -7,6 +7,69 @@
   margin: @imageMargin;
 }
 
+.ui.items {
+  &:not(.unstackable) > .item.default > .content {
+    padding: @mobileDefaultItemContentPadding;
+  }
+
+  .item.default {
+    background-color: @defaultItemBackgroundColor;
+
+    .image {
+      img {
+        height: @defaultItemImageHeight;
+        border-radius: 0;
+        object-fit: cover;
+      }
+    }
+
+    .content {
+      .extra {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: @mobileDefaultItemExtraMarginTop;
+        margin-bottom: @mobileDefaultItemExtraMarginBottom;
+
+        .meta {
+          color: @defaultItemColor;
+          font-size: @defaultItemMetaFontSize;
+          font-weight: @defaultItemMetaFontWeight;
+          opacity: @defaultItemMetaOpacity;
+
+          &.date {
+            font-size: @defaultItemDateMetaFontSize;
+            font-weight: @defaultItemDateMetaFontWeight;
+            opacity: @defaultItemDateMetaOpacity;
+          }
+        }
+
+        &:after {
+          display: none;
+        }
+      }
+
+      .header {
+        margin-bottom: @mobileDefaultItemHeaderMarginBottom;
+        color: @defaultItemColor;
+        font-size: @mobileDefaultItemHeaderFontSize;
+        font-weight: @defaultItemHeaderFontWeight;
+      }
+
+      .description {
+        color: @defaultItemColor;
+        font-size: @mobileDefaultItemDescriptionFontSize;
+        font-weight: @defaultItemDescriptionFontWeight;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: @defaultItemDescriptionLineClamp;
+      }
+    }
+  }
+}
+
 .item .tile.image,
 .block .item .tile.image {
   width: @tileImageWidth;
@@ -34,12 +97,49 @@
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
+  .ui.items .item.default {
+    .image {
+      width: @tabletDefaultItemWidth;
+    }
+
+    .content {
+      padding: @tabletDefaultItemContentPadding;
+
+      .extra {
+        margin-top: inherit;
+        margin-bottom: @tabletDefaultItemExtraMarginBottom;
+      }
+
+      .header {
+        margin-bottom: @tabletDefaultItemHeaderMarginBottom;
+        font-size: @tabletDefaultItemHeaderFontSize;
+      }
+    }
+  }
   .ui.items.row > .item {
     margin: @tabletRowItemMargin;
   }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
+  .ui.items .item.default {
+    .content {
+      padding: @computerDefaultItemContentPadding;
+
+      .extra {
+        margin-bottom: @computerDefaultItemExtraMarginBottom;
+      }
+
+      .header {
+        margin-bottom: @computerDefaultItemHeaderMarginBottom;
+        font-size: @desktopDefaultItemHeaderFontSize;
+      }
+
+      .description {
+        font-size: @desktopDefaultItemDescriptionFontSize;
+      }
+    }
+  }
   .ui.items.row > .item {
     margin: @desktopRowItemMargin;
   }

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

@@ -31,9 +31,9 @@
 @tabletContentImageDistance: 2rem;
 
 @mobileItemSpacing: 2em;
-@mobileImageWidth: auto;
-@mobileImageMaxHeight: 250px;
-@mobileContentImageDistance: 1.5rem;
+@mobileImageWidth: 100%;
+@mobileImageMaxHeight: 100%;
+@mobileContentImageDistance: 1.5em;
 
 
 /*-------------------
@@ -164,3 +164,46 @@
 @tabletRowItemMargin  : 1.5rem 0;
 @desktopRowItemMargin : 2rem 0;
 
+/*-------------------
+      Default
+--------------------*/
+@defaultItemImageHeight: 100%;
+@tabletDefaultItemWidth: 35%;
+
+@defaultItemBackgroundColor: @white;
+@defaultItemColor: @deepBlue;
+
+/* Extra */
+@mobileDefaultItemExtraMarginBottom: 1.5rem;
+@tabletDefaultItemExtraMarginBottom: 2.5rem;
+@computerDefaultItemExtraMarginBottom: 4.5rem;
+@mobileDefaultItemExtraMarginTop: 0;
+
+/* Meta */
+@defaultItemMetaFontSize: 1rem;
+@defaultItemMetaOpacity: 1;
+@defaultItemMetaFontWeight: 100;
+
+@defaultItemDateMetaFontSize: 1.125rem;
+@defaultItemDateMetaOpacity: 1;
+@defaultItemDateMetaFontWeight: 400;
+
+/* Header */
+@mobileDefaultItemHeaderFontSize: 1.125rem;
+@tabletDefaultItemHeaderFontSize: 1rem;
+@desktopDefaultItemHeaderFontSize: 1.5rem;
+@defaultItemHeaderFontWeight: 700;
+@mobileDefaultItemHeaderMarginBottom: 0.375rem;
+@tabletDefaultItemHeaderMarginBottom: 0.875rem;
+@computerDefaultItemHeaderMarginBottom: 1.25rem;
+
+/* Description */
+@mobileDefaultItemDescriptionFontSize: 1rem;
+@desktopDefaultItemDescriptionFontSize: 1.25rem;
+@defaultItemDescriptionFontWeight: 400;
+@defaultItemDescriptionLineClamp: 4;
+
+/* Content */
+@mobileDefaultItemContentPadding: 1.5em;
+@tabletDefaultItemContentPadding: 1em;
+@computerDefaultItemContentPadding: 1.5em;