feature: header - new classes

src/styles/base/header.scss

@@ -1,4 +1,11 @@
 #header {
+  height: 72px;
+  z-index: 999;
+  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);*/ /*mockup value*/
+  padding: 0 25px;
+}
+
+/*#header {
   max-height: 50px;
   height: 50px;
   display: flex;
@@ -60,10 +67,10 @@
     @include breakpoint(lg) {
       margin-left: 0;
     }
-  }
+  }*/
 
   /* Fix: to remove the place taken by these elements */
-  solid-widget[name='hubl-user-avatar'] {
+  /*solid-widget[name='hubl-user-avatar'] {
     display: contents;
   }
 
@@ -71,17 +78,12 @@
   solid-notifications-template[data-rdf-type='foaf:user'] {
     position: absolute;
   }
-}
+}*/
   
 /* General styling for both notification and user's panel */
 details {
-  margin-right: 0;
   position: relative;
 
-  @include breakpoint(lg) {
-    margin-right: 2.5rem;
-  }
-
   summary {
 
     &::-moz-list-bullet {
@@ -297,10 +299,6 @@ solid-notifications {
   summary {
     cursor: pointer;
     display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
-
-    @include breakpoint(lg) {
-      padding: 18px;
-    }
     
     &:focus {
       background-color: transparent;

src/styles/base/main.scss

@@ -22,6 +22,119 @@
   }
 }
 
+.segment {
+  background: white;
+  position: relative;
+
+  .content-vertically-centered {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  &.lg-{
+    &hidden {
+      display: none;
+    }
+    &quarter {
+      width: 25%;
+    }
+    &third {
+      width: 33.333%;
+    }
+    &half {
+      width: 50%;
+    }
+    &two-third {
+      width: 66.666%;
+    }
+    &three-quarter {
+      width: 75%;
+    }
+    &full {
+      width: 100%;
+    }
+    &auto {
+      width: auto;
+    }
+  }
+  &.float-left {
+    float: left;
+  }
+  &.float-right {
+    float: right;
+  }
+}
+
+.shadow {
+  box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+}
+
+.logo {
+  height: 34px;
+  width: 220px;
+  display: inline-block;
+
+  >solid-link {
+    cursor: pointer;
+    background: none;
+    display: inline-block;
+    padding: 0;
+    border: none;
+
+    >img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+}
+
+.tag {
+  height: 17px;
+  font-size: 12px;
+  letter-spacing: 0.24px;
+  line-height: 17px;
+  border: 1px solid var(--color-primary);
+  border-radius: 3px;
+  padding: 4px 11px;
+  
+  &.beta {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  &.color-primary {
+    background: white;
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
+  }
+  &.color-secondary {
+    background: white;
+    border: 1px solid var(--color-secondary);
+    color: var(--color-secondary);
+  }
+  &.color-third {
+    background: white;
+    border: 1px solid var(--color-third);
+    color: var(--color-third);
+  }
+  &.reversed {
+    &.color-primary {
+      background: var(--color-primary);
+      border: 1px solid var(--color-primary);
+      color: white;
+    }
+    &.color-secondary {
+      background: var(--color-secondary);
+      border: 1px solid var(--color-secondary);
+      color: white;
+    }
+    &.color-third {
+      background: var(--color-third);
+      border: 1px solid var(--color-third);
+      color: white;
+    }
+  }
+}
+
 /* Fix for solid-dashboard fixture */
 solid-dashboard section {
   padding: 1rem !important;
@@ -35,7 +148,7 @@ solid-dashboard section {
   }
 }
 
-.wrapper {
+/*.wrapper {
   display: grid;
   grid-template-areas: 
     "header"
@@ -47,11 +160,11 @@ solid-dashboard section {
       "header header"
       "leftmenu content";
   }
-}
+}*/
 
-.header {
+/*.header {
   grid-area: header;
-}
+}*/
 
 .left-menu {
   grid-area: leftmenu;