OEL-4068: Cleanup and improved styles for new header. (#694)

* OEL-4068: Cleanup and improved styles for new header.

* OEL-4068: Updated styles.

* OEL-4068: Border radius for toggler.

* OEL-4068: Last style update.

---------

Co-authored-by: Moisés Rodríguez Carmona <moises@rodriguezcarmona.es>

Author: tibi2303

src/themes/default/src/icons/icons.js

@@ -56,6 +56,7 @@ module.exports = [
   "exclamation-lg.svg",
   "question-lg.svg",
   "info-lg.svg",
+  "x.svg",
   "x-lg.svg",
   "plus-lg.svg",
   "dash-lg.svg",
@@ -115,6 +116,7 @@ module.exports = [
   "trash.svg",
   "trash-fill.svg",
   "link.svg",
+  "list.svg",
 
   // Social.svg
   "skype.svg",

src/themes/default/src/scss/_header.scss

@@ -4,25 +4,37 @@ $header-background-start: #039 !default;
 $header-background-end: #1b4ac3 !default;
 $header-link-active-background: #003776 !default;
 
-.bcl-header__project {
-  background: linear-gradient(
-    90deg,
-    $header-background-start 0%,
-    $header-background-end 100%
-  );
-}
-
 .bcl-header .nav-link {
   color: $eu-blue;
   display: flex;
   align-items: center;
 }
 
+.bcl-navbar-toggler {
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-sm);
+  padding: map-get($spacers, "1-5") map-get($spacers, "2-5");
+  color: $link-color;
+  line-height: 1;
+  @extend .rounded-2;
+  .active-icon {
+    display: none;
+  }
+  &[aria-expanded="true"] {
+    background-color: $primary;
+    color: $white;
+    .active-icon {
+      display: block;
+    }
+    .default-icon {
+      display: none;
+    }
+  }
+}
+
 .bcl-header--ec,
 .ec__header {
-  .bcl-header__project {
-    background: $header-background;
-  }
   /* stylelint-disable-next-line no-descending-specificity */
   .nav-link {
     color: $ec-blue;
@@ -33,21 +45,7 @@ $header-link-active-background: #003776 !default;
   align-items: flex-end;
 }
 
-.bcl-header--neutral {
-  .bcl-header__project {
-    background: $gray-700;
-  }
-}
-
-.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
-  padding-top: map-get($spacers, 3);
-}
-
 .bcl-header {
-  .navbar-brand img {
-    width: 100px;
-  }
-
   .notification {
     position: relative;
     padding-right: 0;
@@ -64,16 +62,6 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-.bcl-header__project .bcl-header__site-name {
-  display: inline-block;
-  margin-bottom: 0;
-  font-size: 1.3rem;
-  font-weight: 300;
-  color: $white;
-  vertical-align: middle;
-  max-width: 80%;
-}
-
 .bcl-header__navbar.navbar {
   padding: 0;
   .dropdown-toggle,
@@ -87,12 +75,6 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-@media only screen and (max-width: 400px) {
-  .bcl-header--neutral .bcl-header__project-logo {
-    display: none;
-  }
-}
-
 @include media-breakpoint-up(md) {
   .bcl-header--ec,
   .ec__header {
@@ -124,23 +106,8 @@ $header-link-active-background: #003776 !default;
     }
   }
 
-  .bcl-header__project {
-    padding: map-get($spacers, 3) 0;
-  }
-
   .bcl-header {
-    .bcl-header__project {
-      z-index: 1040; // Make sure project bar is above the mega menu
-      position: relative;
-      box-shadow: var(--bs-box-shadow);
-      flex-shrink: 0;
-    }
-  }
-
-  .bcl-header:not(:has(.bcl-header__project)) {
-    > .navbar:first-child {
-      box-shadow: var(--bs-box-shadow);
-    }
+    box-shadow: var(--bs-box-shadow);
   }
 
   .bcl-header nav + nav {
@@ -225,12 +192,6 @@ $header-link-active-background: #003776 !default;
 }
 
 @include media-breakpoint-up(lg) {
-  .bcl-header__project.light,
-  .bcl-header--ec .bcl-header__project.light,
-  .ec__header .bcl-header__project.light {
-    background: $white;
-  }
-
   .bcl-header__navbar {
     background: linear-gradient(
       90deg,
@@ -256,33 +217,16 @@ $header-link-active-background: #003776 !default;
     }
   }
 
-  .bcl-header__site-name {
-    margin-left: map-get($spacers, 4);
-    font-weight: 500;
-  }
-
-  .bcl-header__project.light .bcl-header__site-name {
-    color: $black;
-  }
-
   .bcl-header .navbar-toggler {
     position: relative;
     right: 0;
     bottom: 0;
   }
 
-  .bcl-header .navbar-brand img {
-    width: auto;
-  }
-
   .bcl-header__navbar .bcl-mega-menu {
     --bcl-mega-menu-zindex: 1050; // Make sure dropdown overlaps the search offcanvas
   }
 
-  .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
-    padding-bottom: map-get($spacers, 3);
-  }
-
   .bcl-header__navbar.collapse {
     display: block;
   }

src/themes/default/src/scss/base/_utilities.scss

@@ -154,6 +154,14 @@ svg {
   border-color: $gray-300;
 }
 
+.border-top-subtle {
+  border-top: 1px solid $primary-border-subtle;
+}
+
+.border-bottom-subtle {
+  border-bottom: 1px solid $primary-border-subtle;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
 }

src/themes/ucpkn/src/scss/_header.scss

@@ -2,9 +2,3 @@
   left: auto;
   right: 14px;
 }
-
-@include media-breakpoint-down(lg) {
-  .bcl-header__site-name {
-    margin-left: 0;
-  }
-}