@eeacms/volto-n2k 1.0.15 → 1.0.17

package/src/less/styles.less

@@ -127,7 +127,7 @@
       text-align: left;
       transform: translate(-100%, 0);
 
-      @media only screen and (max-width: calc(@largestMobileScreen + 53px)) {
+      @media only screen and (max-width: 1700px) {
         display: none;
       }
     }
@@ -182,7 +182,7 @@ body.grey-bg {
   a,
   ul,
   li {
-    font-size: 16px;
+    // font-size: 16px;
   }
 
   a {
@@ -288,254 +288,36 @@ body.grey-bg {
     }
 
     .header-wrapper {
-      padding: 0;
-
       .header {
         .logo-nav-wrapper {
-          top: 0;
-
-          .tools-search-wrapper {
-            width: 100%;
-            margin-left: 0 !important;
-          }
-
           .navigation {
-            width: 100%;
-            min-height: 80px;
-            align-items: center;
-            align-self: normal;
-            justify-content: flex-end;
-
             .ui.secondary.pointing.menu {
-              top: 0;
-              width: 100%;
-              min-height: 80px;
-              flex-wrap: wrap;
-              justify-content: center;
-              padding: 4px 0;
-              margin-right: 0 !important;
-
-              > * {
-                align-self: center;
-              }
-
-              &.is-sticky {
-                justify-content: center;
-                padding: 0;
-              }
-
-              &.mobile.hidden {
-                max-width: calc(100% - 272px);
-                margin-right: 80px !important;
-              }
-
-              &.mobile.only {
-                .language-selector-wrapper {
-                  display: flex;
-                  align-items: flex-end;
-                }
-              }
-
-              &:not(.is-sdf) {
-                justify-content: center;
-                padding: 4px 0;
-              }
-
-              &:not(.mobile.only) {
-                .item.firstLevel.at-glance {
-                  align-self: stretch;
-                  padding-bottom: 1.5rem !important;
-                  margin-bottom: -0.5rem;
-                  background: #00a390 0% 0% no-repeat padding-box;
-                  border-radius: 0px 0px 10px 10px;
-                  color: #fff !important;
-                  cursor: pointer;
-
-                  &:hover {
-                    color: #fff !important;
-                  }
-                }
-              }
-
-              .home-button {
-                // width: 56px !important;
-                // height: 40px !important;
-                padding-right: 0 !important;
-                padding-left: 0 !important;
-                margin: 4px 0;
-
-                &.logo {
-                  img {
-                    width: 100%;
-                    height: 100%;
-                  }
-                }
-              }
+              height: 100%;
 
               .item.firstLevel.at-glance {
-                color: #00a390 !important;
+                align-self: stretch;
+                margin-top: -1rem;
+                margin-bottom: -1rem;
+                background: #00a390 0 0 no-repeat padding-box;
+                border-radius: 0 0 10px 10px;
+                color: #fff;
                 cursor: pointer;
 
                 &:hover {
-                  color: #00a390 !important;
+                  color: #fff !important;
                 }
               }
 
               .item.firstLevel.deep-dive {
-                color: #00a390 !important;
+                align-self: center;
+                color: #00a390;
                 cursor: pointer;
 
                 &:hover {
-                  color: #00a390 !important;
-                }
-              }
-
-              &:not(.open) {
-                .home-button {
-                  position: absolute;
-                  // top: 50%;
-                  left: 0;
-                  padding: 0 !important;
-                  margin: 0;
-                  transform: translateX(-100%);
-
-                  > a {
-                    display: flex;
-                  }
-                }
-
-                .language-selector-wrapper {
-                  position: absolute;
-                  right: 0;
-                  margin: 0;
-                  margin-bottom: 0;
-                  transform: translateX(100%);
-
-                  &:hover {
-                    background-color: transparent !important;
-                  }
-
-                  .language-selector .ui.dropdown {
-                    display: flex;
-                    flex-direction: row-reverse;
-                    align-items: center;
-
-                    img {
-                      margin-right: 0.25rem;
-                    }
-                  }
-                }
-              }
-
-              &.open {
-                .hamburger-wrapper {
-                  position: absolute;
-                  z-index: 0;
-                  top: 1rem;
-                  right: 15px;
-                }
-
-                .home-button {
-                  &.logo {
-                    // margin-top: 1rem;
-                    // margin-bottom: 1rem;
-                    margin-left: 0.8rem;
-                  }
-                }
-              }
-
-              &.stackable.open {
-                top: 0 !important;
-                height: 100vh !important;
-                margin-top: 0;
-              }
-
-              .item {
-                position: relative;
-                color: @darkGreen;
-
-                &:not(.home-button) {
-                  padding-right: 0.8rem !important;
-                  padding-left: 0.8rem !important;
-                }
-
-                &:not(.active),
-                &:not(.menuActive) > a {
-                  color: @darkGreen;
-                }
-
-                &.firstLevel,
-                &.firstLevel > a {
-                  border: none;
-                  font-size: 1.15rem;
-                  font-weight: bold;
-
-                  &.language-selector-wrapper {
-                    .language-selector {
-                      margin-right: 0;
-
-                      .visible.menu {
-                        left: 50%;
-                        min-width: 70px !important;
-                        transform: translate(-50%, 0);
-                      }
-                    }
-                  }
-
-                  &:hover {
-                    color: @lightGreen !important;
-
-                    &.language-selector-wrapper {
-                      border-color: transparent !important;
-                    }
-
-                    > a {
-                      color: @darkGreen !important;
-                    }
-                  }
-                }
-
-                &.secondLevel {
-                  &:hover {
-                    background: initial !important;
-                    color: #005248;
-                  }
-                }
-
-                &.active,
-                &.menuActive {
-                  color: #005248;
-                }
-
-                &.active:not(.secondLevel):not(.thirdLevel),
-                &.menuActive:not(.secondLevel):not(.thirdLevel) {
-                  @media only screen and (min-width: 1655px) {
-                    &::before {
-                      position: absolute;
-                      top: 4px;
-                      left: 50%;
-                      display: block !important;
-                      width: 6px;
-                      height: 6px;
-                      background-color: #005248;
-                      border-radius: 100%;
-                      content: '';
-                      transform: translateX(-50%);
-                    }
-                  }
+                  color: #00a390;
                 }
               }
             }
-
-            .hamburger-wrapper {
-              height: 24px;
-              margin: 0.5rem 0;
-
-              button.hamburger {
-                padding: 0;
-                cursor: pointer;
-              }
-            }
           }
         }
       }
@@ -549,13 +331,27 @@ body.grey-bg {
   .readmore-button {
     color: #00a390;
   }
+
+  .ui.basic.segment .header {
+    .logo-nav-wrapper {
+      .navigation {
+        > .ui.menu a {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+.sdf-nav {
+  height: 86px;
 }
 
 .back-to-top {
   margin-top: 2em;
   margin-bottom: 3rem;
   color: #7b7b7b;
-  font-size: 16px;
+  // font-size: 16px;
   font-weight: bold;
 
   .ui.circular.button {
@@ -761,8 +557,8 @@ img.slick-image {
 }
 
 .tabs-block .slick-dots-wrapper .slick-dots li.slick-active button {
-  border-color: #005248 !important;
-  background-color: #005248 !important;
+  border-color: #00a390 !important;
+  background-color: #00a390 !important;
 }
 
 .tabs-block.light .slick-dots-wrapper .slick-dots li.slick-active::before {
@@ -814,6 +610,45 @@ img.slick-image {
   margin-bottom: 0 !important;
 }
 
+.tabs-block {
+  .slick-next {
+    p {
+      font-size: 14px;
+    }
+  }
+}
+
+.explorer-tabs .tabs-block .tabs > .ui.menu {
+  > a {
+    padding: 1rem;
+  }
+
+  > a:nth-child(1) {
+    padding-left: 1rem !important;
+  }
+
+  > a.active:nth-child(1),
+  > a.active:hover:nth-child(1) {
+    background: #4aa47f;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  > a.active:nth-child(2),
+  > a.active:hover:nth-child(2) {
+    background: #b78730;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  > a.active:nth-child(3),
+  > a.active:hover:nth-child(3) {
+    background: #2e80ec;
+    border-radius: 4px;
+    color: #fff;
+  }
+}
+
 @media only screen and (max-width: @largestTabletScreen) {
   .tabs-block .slick-slider {
     order: 2;
@@ -863,3 +698,11 @@ img.slick-image {
     width: 650px;
   }
 }
+
+.radjhan-normal {
+  font-family: RajdhaniR, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+}
+
+.radjhan-bold {
+  font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+}