@eeacms/volto-bise-policy 1.0.0 → 1.0.2

package/theme/extras/header.overrides

@@ -1,18 +1,10 @@
-// .search-action {
-//   background-color: @primaryColor;
-// }
-
-#search-box {
-  min-height: 100%;
-}
-
-.has-toolbar.homepage .eea.header {
-  width: 100%;
-}
+/*******************************
+            Header
+*******************************/
 
 /*----------------------------------------------------------------------------
-      HEADER MAIN BAR DESKTOP
-  ----------------------------------------------------------------------------*/
+   HEADER MAIN BAR
+----------------------------------------------------------------------------*/
 
 #main {
   .main.bar {
@@ -28,3 +20,105 @@
     }
   }
 }
+
+.main-menu .item a,
+.main-menu .item a:hover {
+  text-decoration: none;
+}
+
+.eea.header {
+  z-index: 4;
+}
+
+.eea.header .main.bar > .ui.container .ui.grid .column {
+  display: flex;
+  align-items: center;
+
+  > * {
+    flex: 1;
+  }
+}
+
+.eea.header .eea-logo {
+  margin-top: 0;
+}
+
+/************************
+        MEGA MENU
+************************/
+
+/*Mega Menu Accordion - Tablet & Mobile */
+#mega-menu .ui.accordion {
+  .content {
+    background: transparent;
+  }
+}
+
+/*----------------------------------------------------------------------------
+   Natura 2000 subsite
+----------------------------------------------------------------------------*/
+
+.subsite.subsite-natura2000 {
+  .eea.header .main.bar {
+    backdrop-filter: blur(2px);
+    background-color: hsla(0,0%,100%,.8);;
+  }
+
+  .eea.header .main.bar > .ui.container {
+    height: 92px;
+  }
+
+  .eea.header .main-menu {
+    align-items: center;
+  }
+
+  @media only screen and (min-width: @mobileBreakpoint) {
+    .eea.header .main.bar > .ui.container {
+      height: 92px;
+    }
+
+    .eea.header .eea-logo {
+      max-width: fit-content;
+      height: 60px;
+    }
+
+    .burger-action.mobile,
+    .search-action {
+      width: 58px;
+      height: 92px;
+    }
+  }
+
+  @media only screen and (min-width: @tabletBreakpoint) {
+    .eea.header .main.bar > .ui.container {
+      height: 92px;
+    }
+
+    .eea.header .eea-logo {
+      max-width: fit-content;
+      height: 60px;
+    }
+
+    .burger-action.mobile,
+    .search-action {
+      width: 58px;
+      height: 92px;
+    }
+  }
+
+  @media only screen and (min-width: @computerBreakpoint) {
+    .eea.header .eea-logo {
+      max-width: fit-content;
+      height: 60px;
+    }
+  }
+}
+
+
+// #search-box {
+//   min-height: 100%;
+// }
+
+// .has-toolbar.homepage .eea.header {
+//   width: 100%;
+// }

package/theme/extras/header.variables

@@ -5,3 +5,15 @@
 /* Search box */
 @searchBoxBackgroundGradient  : linear-gradient(45deg, @primaryColor 12%, @secondaryColor 80%);
 @megaMenuBackgroundColor      : linear-gradient(45deg, @primaryColor 12%, @secondaryColor 80%);
+
+
+/*-----------------
+   HEADER ACTIONS
+------------------*/
+
+/* Actions (Mega menu & Search) */
+@burgerActionBackgroundColor: @primaryColor;
+
+/* Mega menu */
+@mobileMegaMenuWidth: 100%;
+

package/theme/extras/keyfacts.less

@@ -159,7 +159,7 @@
 }
 
 
-@media only screen and (max-width: 1279px) and (min-width: 1072px) {
+@media only screen and (min-width: 1072px) and (max-width: 1279px)  {
   .title-wrapper,
   .facts-wrapper {
     width: 50%!important;
@@ -169,8 +169,8 @@
 @media only screen and (max-width: 1071px) {
   .keyfacts-block {
     .block-wrapper {
-      display: block;
-      max-height: unset;
+      display: block !important;
+      max-height: unset !important;
 
       .title-wrapper {
         padding: 2rem 0.5rem;

package/theme/extras/pluggables.less

@@ -128,9 +128,9 @@ div#view .ui.container > {
 }
 
 ul.n2k-list {
-  padding-left: 28px;
-  margin: 0;
-  margin-bottom: 1rem;
+  padding-left: 28px !important;
+  margin: 0 !important;
+  margin-bottom: 1rem !important;
 
   li {
     position: relative;
@@ -141,23 +141,24 @@ ul.n2k-list {
   }
 
   li:before {
-    position: absolute;
-    top: 50%;
-    left: -28px;
-    width: 18px;
-    height: 18px;
-    background: url(../assets/icons/plus.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    content: '';
-    opacity: 1;
-    transform: translateY(-50%);
+    position: absolute !important;
+    top: 50% !important;
+    left: -28px !important;
+    width: 18px !important;
+    height: 18px !important;
+    margin: 0 !important;
+    background: url(../assets/icons/plus.png) !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+    content: '' !important;
+    opacity: 1 !important;
+    transform: translateY(-50%) !important;
   }
 }
 
 .n2k-green-border {
   padding: 1rem;
-  border: 1px solid #72a34a;
+  border: 1px solid @secondaryColor;
   margin-bottom: 1rem;
   border-radius: 10px;
 
@@ -169,7 +170,7 @@ ul.n2k-list {
 .n2k-circle {
   position: relative;
   margin-bottom: 1rem;
-  background-color: #72a34a;
+  background-color: @secondaryColor;
   border-radius: 50%;
   color: #fff;
   text-align: center;

package/theme/globals/helpers.less

@@ -0,0 +1,75 @@
+/* Helpers classes */
+.w-100 {
+  width: 100%;
+}
+
+.w-90 {
+  width: 90%;
+}
+
+.w-80 {
+  width: 80%;
+}
+
+.w-70 {
+  width: 70%;
+}
+
+.w-60 {
+  width: 60%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-40 {
+  width: 40%;
+}
+
+.w-30 {
+  width: 30%;
+}
+
+.w-20 {
+  width: 20%;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-1 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.my-2 {
+  margin-top: 2rem !important;
+  margin-bottom: 2rem !important;
+}
+
+.ma-0 {
+  margin: 0 !important;
+}
+
+.font-weight-normal,
+.font-weight-normal h1,
+.font-weight-normal h2,
+.font-weight-normal h3,
+.font-weight-normal h4 {
+  font-weight: normal !important;
+}
+
+.font-weight-bold,
+.font-weight-bold h1,
+.font-weight-bold h2,
+.font-weight-bold h3,
+.font-weight-bold h4 {
+  font-weight: bold !important;
+}

package/theme/globals/natura2000.less

@@ -0,0 +1,53 @@
+.styled.protected-habitats
+  > .tabs-block.default
+  > .styled
+  > .tabs.default
+  > .ui.menu {
+  border-bottom: 2px solid #dadada;
+  margin-bottom: 1rem;
+  border-radius: 0;
+}
+
+.protected-habitats {
+  margin-top: 0 !important;
+
+  .default.tabs {
+    .ui.menu {
+      border-bottom: none !important;
+      background-color: #00a390 !important;
+      padding-bottom: 0 !important;
+      margin-left: 0 !important;
+
+      &::after,
+      &::before {
+        display: none !important;
+      }
+
+      .item {
+        padding: 1rem !important;
+        border-radius: 0 !important;
+        color: #fff !important;
+        border-bottom: none !important;
+        margin-bottom: 0 !important;
+
+        p {
+          font-size: 16px !important;
+        }
+
+        &.active:hover,
+        &:hover {
+          text-decoration: none !important;
+          padding-bottom: calc(1rem - 3px) !important;
+          border-bottom: 3px solid #fff !important;
+          color: #fff !important;
+        }
+
+        &.active {
+          padding-bottom: calc(1rem - 3px) !important;
+          border-bottom: 3px solid #fff !important;
+          color: #fff !important;
+        }
+      }
+    }
+  }
+}

package/theme/globals/site.overrides

@@ -7,6 +7,68 @@
 @import '../extras/pluggables.less';
 @import '../extras/stylemenu.less';
 @import '../extras/tocnav.less';
+@import './helpers.less';
+@import './natura2000.less';
+
+// :root {
+//   .define-color(primary, #005248);
+//   .define-color(secondary, #00a390);
+//   .define-color(tertiary, #3d5265);
+//   .define-color(light-primary, #007b6c);
+//   .define-color(light-secondary, #00a390);
+//   .define-color(light-tertiary, #54728c);
+//   .define-color(dark-primary, #005248);
+//   .define-color(dark-secondary, #005248);
+//   .define-color(dark-tertiary, #2e3e4c);
+// }
+
+// body::-webkit-scrollbar {
+//   width: @scrollbarWidth;
+// }
+
+// body::-webkit-scrollbar-track {
+//   background: #F9F9F9;
+// }
+
+// body::-webkit-scrollbar-thumb {
+//   background-color: #B4B4B4;
+//   border-radius: 20px;
+//   border: 3px solid #FAF9F9;
+// }
+
+// body::-webkit-scrollbar-thumb:hover {
+//   background-color: #6A6A6A;
+// }
+
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: normal;
+  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 600;
+  src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 800;
+  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RajdhaniR';
+  font-weight: 400;
+  src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RajdhaniB';
+  font-weight: 600;
+  src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
+}
 
 a {
   color: @linkColor;
@@ -64,15 +126,153 @@ p.has--clear--both:empty {
   }
 }
 
+.smart-table .search-description {
+  margin-bottom: 2rem;
+  color: #6b6b6b;
+}
+
+.subsite.subsite-natura2000.subsite-root {
+  footer {
+    display: none;
+  }
+
+  .ui.content-area {
+    padding-bottom: 0;
+  }
+}
+
 .subsite.subsite-natura2000 {
-  &.contenttype-lrf {
+  &.grey-bg {
+    .content-area {
+      margin-bottom: 0 !important;
+      padding-bottom: 0;
+    }
+
+    #view {
+      padding-bottom: 4rem !important;
+      background-color: #f8f8f8 !important;
+    }
+  }
+
+  .eea.banner,
+  .breadcrumbs,
+  .block-editor-title {
+    display: none;
+  }
+
+  &:not(.section-edit) {
     .ui.basic.segment.content-area {
       padding-top: 0;
       margin-top: 0;
     }
   }
 
-  .subsite-logo {
-    background-color: red;
+  .styled-with-bg {
+    padding: 0 !important;
+  }
+
+  /* TEXT */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  span,
+  button {
+    font-family: OpenSans, 'Raleway', sans-serif;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: @primaryColor !important;
+  }
+
+  h2 {
+    font-weight: 600;
+  }
+
+  a {
+    color: @secondaryColor;
+    font-weight: 600;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: @secondaryColor !important;
+    }
+
+    &:hover {
+      color: @secondaryColor;
+      text-decoration: underline;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: @secondaryColor !important;
+      }
+    }
+  }
+
+  .light-links {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: @secondaryColor !important;
+    }
+
+    a {
+      color: @secondaryColor;
+
+      &:hover {
+        color: @secondaryColor;
+        text-decoration: underline;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: @secondaryColor !important;
+        }
+      }
+    }
+  }
+
+  .dark-links {
+    a {
+      color: @primaryColor;
+
+      &:hover {
+        color: @primaryColor;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .ui.overlay.sidebar {
+    z-index: 800;
+  }
+}
+
+.subsite.subsite-natura2000:not(.subsite-root) {
+  .ui.content-area {
+    margin-bottom: 2rem;
   }
-}
+} 

package/theme/globals/site.variables

@@ -4,6 +4,9 @@
 
 @import '@eeacms/volto-bise-policy/../theme/tokens/tokens';
 
+@fontName: 'OpenSans';
+@fontSize: 16px;
+
 /*-------------------
     Brand Colors
 --------------------*/
@@ -20,3 +23,5 @@
 @linkColor: @secondaryColor;
 @linkHoverColor: @primaryColor;
 @linkActiveColor: @linkHoverColor;
+
+@scrollbarWidth: 15px;

package/theme/modules/accordion.overrides

@@ -0,0 +1,3 @@
+.ui.accordion:not([class*='ary']) .active.title i {
+  color: @iconColorActive;
+}

package/theme/modules/accordion.variables

@@ -0,0 +1,7 @@
+/*******************************
+           Accordion
+*******************************/
+
+/* Icon */
+@iconColor: #fff;
+@iconColorActive: #fff;