@eeacms/volto-eea-design-system 0.5.5 → 0.6.5

package/theme/themes/eea/collections/menu.overrides

@@ -2,8 +2,233 @@
          Theme Overrides
 *******************************/
 
-/* Pagination and Tabs */
-.ui.pagination.pointing.secondary {
+/*************/
+/* Pastanaga */
+/*************/
+
+.ui.menu .item.personal-bar {
+  position: fixed;
+  bottom: 68px;
+  width: 80px;
+}
+
+.ui.menu.left.fixed ~ .pusher {
+  margin-right: 80px;
+  transition: margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+}
+
+.ui.menu.collapsed.left.fixed ~ .pusher {
+  margin-right: 20px;
+}
+
+.chevron-left-icon {
+  padding: 0.4em 0.2em !important;
+}
+
+.chevron-right-icon {
+  padding: 0.4em 0.2em !important;
+}
+
+.ui.vertical.icon.menu {
+  width: 80px;
+}
+
+.ui.vertical.icon.menu .item {
+  padding: 14px 20px;
+}
+
+.ui.menu .item.logo {
+  position: fixed;
+  bottom: 0;
+  width: 80px;
+}
+
+.ui.menu .item.logo > .image {
+  width: 64px;
+  height: 18px;
+  margin: 4px -14px 0;
+  background-repeat: no-repeat;
+  background-size: 64px 18px;
+  transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
+    margin 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+}
+
+.ui.menu.collapsed .item.logo > .image {
+  width: 10px;
+  margin: 4px -14px 0 45px;
+}
+
+.ui.menu .trigger {
+  position: absolute;
+  top: 50%;
+  left: 60px;
+  width: 20px;
+  height: 80px;
+  padding: 0;
+  margin-top: -40px;
+  background: transparent;
+  border-radius: 0;
+  opacity: 0.3;
+  transition: opacity 0.3s;
+}
+
+.ui.menu .trigger:before {
+  position: relative;
+  left: 8px;
+  display: block;
+  width: 4px;
+  height: 100%;
+  background: @blue;
+  content: '';
+}
+
+.ui.menu.collapsed .trigger {
+  opacity: 1;
+}
+
+.ui[class*='left fixed'].menu {
+  transition: left 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+}
+
+.ui[class*='left fixed'].menu.collapsed {
+  left: -60px;
+}
+
+.ui.grid > .row > .logo.column {
+  padding-bottom: 0 !important;
+}
+
+.ui.grid > .row > .tools.column {
+  margin-top: 0.6em;
+}
+
+.ui.grid > .row > .search.column {
+  padding-left: 0;
+  margin-top: 0.4em;
+}
+
+.ui.grid > .row > .tools.column .ui.list {
+  @media only screen and (max-width: (@largestMobileScreen)) {
+    float: none;
+    font-size: 1em;
+  }
+}
+
+.navigation,
+.tools {
+  .ui.secondary.pointing.menu {
+    border: 0;
+    margin: 0 0 0 40px;
+
+    @media only screen and (max-width: @largestTabletScreen) {
+      margin-bottom: 20px;
+      margin-left: 0;
+    }
+
+    .item {
+      padding-top: @relativeBig;
+      margin: 0;
+      text-transform: @secondaryPointingItemTextTransform;
+
+      @media only screen and (min-width: @largestTabletScreen) {
+        padding: 1.7em 0 @relativeBig;
+        margin: 0 unit(@relativeLarge * 2, em) 0 0;
+      }
+    }
+  }
+}
+
+.tools {
+  .ui.secondary.pointing.menu {
+    margin: 0 @relativeMini 0 0;
+
+    .item {
+      // padding-top: @relativeMini;
+      // padding-bottom: 0;
+      padding: @relativeSmall 0 @relativeMini;
+      margin: 0 @relativeMini 0 0;
+      text-transform: none;
+      @media only screen and (min-width: @largestTabletScreen) {
+        padding: 1.7em 0 @relativeBig;
+      }
+    }
+  }
+}
+
+//
+// WARNING: Uncommenting the following code will break the sidebar tabs in Volto
+//
+// See https://github.com/eea/volto-eea-design-system/pull/162#issuecomment-1135949927
+//
+// .ui.secondary.attached.pointing.menu {
+//   .item {
+//     padding: 1.4em 1em;
+//     color: @blue;
+//     font-size: @large;
+//   }
+
+//   .active.item {
+//     border-color: @teal;
+//     color: @black;
+//   }
+// }
+
+@media only screen and (max-width: 767px) {
+  .ui.menu.stackable > .menu,
+  .ui.menu.stackable > .menu.right {
+    display: block;
+  }
+}
+
+/* Pagination */
+.pagination-wrapper {
+  text-align: center;
+}
+
+.ui.pagination.menu {
+  border: none;
+  box-shadow: none;
+
+  .item {
+    color: @linkColor;
+
+    &:before {
+      display: none;
+    }
+  }
+
+  .active.item {
+    background: none;
+    color: @textColor;
+  }
+}
+
+
+/*************/
+/* EEA Theme */
+/*************/
+
+/***********
+ Pagination
+***********/
+
+/*
+.ui.pagination.menu {
+  border: none;
+  box-shadow: none;
+
+  a.item {
+
+    &.active {
+      background: none;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
+}
+.ui.pagination.pointing.secondary, .ui.pagination {
   display: flex;
   width: @paginationWidth;
   justify-content: start;
@@ -12,14 +237,16 @@
     justify-content: center;
   }
 }
-
 .ui.pagination.pointing.secondary.menu .item {
   justify-content: center;
   padding: @squareTiny;
   font-size: @paginationFontSize;
+  color: @itemTextColor;
 }
+*/
 
 /* Pagination active item custom border design */
+/*
 .ui.pagination.pointing.secondary.menu .active.item {
   padding: (@tinyGap - @1px) @tinyGap;
   border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
@@ -30,21 +257,28 @@
     color: @secondaryPointingActiveTextColor;
   }
 }
+*/
 
 /* Hover item pagination */
+/*
 .ui.pagination.pointing.secondary.menu .item:hover {
   padding: (@tinyGap - @1px) @tinyGap;
   border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
   margin-bottom: -@secondaryPointingctiveItemMarginBottom;
   color: @paginationColor;
 }
+*/
 
 /* Hover ellipsis item pagination */
-.ui.pagination.pointing.secondary.menu .item[type='ellipsisItem']:hover {
-  padding: @squareTiny;
-  border-bottom: none; // Not clickable so no border
-  margin: 0.031rem 0; // Adjust to no border
+/*
+.ui.pagination.pointing.secondary.menu a.item[type='ellipsisItem']:hover {
+  border-bottom: @secondaryPointingActiveBorderWidth solid transparent;
 }
+*/
+
+/***********
+    Tabs
+***********/
 
 /* Tab active item custom border design */
 .ui.secondary.pointing.menu:not(.vertical):not(.pagination) .active.item,
@@ -82,3 +316,9 @@
   border-top: 1px solid @midGray;
   content: ' ';
 }
+
+// edit page, normalize font size of tab headers from the sidebar
+.section-edit .ui.pointing.secondary.menu .item,
+.tabs-wrapper .ui.pointing.secondary.menu .item {
+  font-size: 1.25rem;
+}

package/theme/themes/eea/collections/menu.variables

@@ -18,7 +18,7 @@
 @border: @borderWidth solid @borderColor;
 @boxShadow: @subtleShadow;
 @borderRadius: @defaultBorderRadius;
-@minHeight: (@itemVerticalPadding * 2) + 1em;
+@minHeight: auto;//(@itemVerticalPadding * 2) + 1em;
 
 /* Menu Item */
 @itemVerticalPadding: @relativeSmall;

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

@@ -13,7 +13,6 @@
   content: " ";
   position: absolute;
   height: 100%;
-  z-index: -1;
   margin-right: -50vw;
   left: 50%;
   right: 50%;
@@ -33,16 +32,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;
+    }
   }
 }
 

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

@@ -58,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

@@ -96,8 +96,9 @@
 
 .top.bar .ui.dropdown i.chevron.down.icon {
   position: absolute;
-  font-size: 1.1rem;
-  top: -@rem-space-1;
+  font-size: @topSectionIconFontSize;
+  margin-left: @topSectionIconMarginLeft;
+  top: 0;
 }
 
 /* Official union dropdown */
@@ -132,7 +133,6 @@
 
 /* Theme sites dropdown */
 #theme-sites.ui.dropdown .menu {
-  left: @themeSitesMenuLeft;
 
   .wrapper {
     width: @mobileThemeSitesMenuWidth;
@@ -156,6 +156,7 @@
 #language-switcher {
   img {
     width: @mobileOfficialUnionImageWidth;
+    margin-left: @topSectionIconMarginLeft;
   }
   .menu {
     .wrapper {
@@ -303,6 +304,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 +476,6 @@
     margin-top: @computerDropdownMenuMarginTop;
   }
 
-  #theme-sites.ui.dropdown .menu {
-    .wrapper {
-      width: @computerThemeSitesMenuWidth;
-    }
-  }
   /*----------------------------------------------------------------------------
       HEADER MAIN BAR DESKTOP
   ----------------------------------------------------------------------------*/
@@ -487,7 +488,7 @@
         flex-wrap: wrap;
         display: flex;
         width: 88%;
-        max-height: 20px;
+        max-height: 100%;
         justify-content: space-between;
         margin: 0;
 
@@ -650,7 +651,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;
 
@@ -34,6 +34,8 @@
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
 @topSectionZindex                     : @z-index-1;
+@topSectionIconMarginLeft             : 1px;
+@topSectionIconFontSize               : 0.8rem;
 
 /* Dropdown */
 @mobileDropdownMenuMarginTop          : 0;
@@ -72,11 +74,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 +98,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/hero.less

@@ -42,6 +42,8 @@
 .hero-block-image-wrapper {
   position: absolute;
   min-height: @heroBlockImageWrapperMinHeight;
+  width: 100%;
+  height: 100%;
 }
 
 
@@ -68,6 +70,9 @@
   .hero-block-body {
     gap: @tabletHeroBlockBodyGap;
   }
+  .hero-block-inner-wrapper {
+    padding-block: @tableHeroBlockWrapperPadding;
+  }
   .homepage #page-document > .eea.hero-block:first-of-type .hero-block-body {
     margin: @heroBlockHomePageBodyMargin;
   }
@@ -79,6 +84,10 @@
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @desktopHeroBlockMinHeight;
   }
+
+  .hero-block-inner-wrapper {
+    padding-block: @desktopHeroBlockWrapperPadding;
+  }
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }

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

@@ -3,13 +3,13 @@
 *******************************/
 
 /* Hero block */
-@mobileHeroBlockMinHeight : 360px;
-@tabletHeroBlockMinHeight : 500px;
-@desktopHeroBlockMinHeight: 600px;
+@mobileHeroBlockMinHeight : 412px;
+@tabletHeroBlockMinHeight : 446px;
+@desktopHeroBlockMinHeight: 664px;
 
 @heroBlockPosition: relative;
 @heroBlockHomePagePadding: 0 @rem-space-5;
-@heroBlockHomePageBodyMargin: @rem-space-16 0 0 0;
+@heroBlockHomePageBodyMargin: @rem-space-20 0 0 0;
 
 /* Hero block spaced */
 @heroBlockSpacedMargin: @rem-space-12 0;
@@ -23,7 +23,9 @@
 @heroBlockImageBackgroundPosition : center;
 
 /* Wrapper */
-@heroBlockWrapperPadding : @rem-space-20;
+@heroBlockWrapperPadding : 5rem;
+@tableHeroBlockWrapperPadding: 6rem;
+@desktopHeroBlockWrapperPadding: 194px 96px;
 
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;