feature: css - common styles + test

package.json

@@ -7,6 +7,7 @@
     "url": "https://git.startinblox.com/applications/hubl.git"
   },
   "scripts": {
+    "build:interactions": "cp src/interactions.html dist",
     "build": "run-p copy:* build:*",
     "build:css": "node-sass src/styles/index.scss -o dist/styles/",
     "build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
@@ -18,6 +19,7 @@
     "copy:image": "copyfiles -f src/images/* dist/images",
     "copy:sw": "copyfiles -f src/sw.js dist",
     "serve": "pushstate-server -d ./dist -p 3000",
+    "watch:interactions": "npm-watch build:interactions",
     "watch": "run-p build watch:* serve",
     "watch:css": "npm-watch build:css",
     "watch:js": "npm-watch build:js",
@@ -34,6 +36,7 @@
     "test": "cypress run"
   },
   "watch": {
+    "build:interactions": "src/interactions.html",
     "build:css": "src/styles/**/*",
     "build:manifest": "make-webmanifest.mjs",
     "build:i18n": "src/locales/**/*",

src/dependencies.pug

@@ -14,7 +14,7 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.11" defer)
 script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer)
 //- script(type="module" src="/lib/sib-router/src/index.js" defer)
 
-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
+//-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
 //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 //- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
@@ -27,19 +27,19 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notific
 //-     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.0" defer)
     //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
 
-if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+//-if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.2" defer)
     //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
-if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
+//-if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.2" defer)
     //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
-if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
+//-if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.6" defer)
     //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
-if endpoints.users || (endpoints.get && endpoints.get.users)
+//-if endpoints.users || (endpoints.get && endpoints.get.users)
     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.4" defer)
     //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
 

src/header.pug

@@ -1,11 +1,11 @@
-.segment.lg-three-quarter.float-left.align-middle
+//-.segment.lg-three-quarter.float-left.align-middle
   .logo
     solid-link(next='dashboard')
       img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
     
   span.tag.beta.reversed.color-primary(data-trans='header.beta')
 
-.segment.lg-auto.float-right
+//-.segment.lg-auto.float-right
   .segment.lg-auto.float-left.margin-right.align-middle
     solid-notifications.notLoggedIn(
       nested-field="inbox"

src/index.pug

@@ -22,10 +22,12 @@ html(lang="en")
     header#header.segment.bg-color-white.shadow
       include header.pug
 
-    nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
+    //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
       include menu-left.pug
+    nav.segment.lg-quarter.bg-color-heading
 
-    main#viewport.segment.float-left.notLoggedIn
+    main.segment.lg-three-quarter.bg-color-third
+    //-main#viewport.segment.float-left.notLoggedIn
 
       if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
         #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding

src/interactions.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Interaction</title>
+  <link rel="stylesheet" href="/styles/index.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
+</head>
+<body>
+  <p>Avatars</p>
+  <div class="avatar xsmall">
+    <object type="image/svg+xml" data="/images/alien.svg"></object>
+  </div>
+  <div class="avatar small">
+    <object type="image/svg+xml" data="/images/alien.svg"></object>
+  </div>
+  <div class="avatar">
+    <object type="image/svg+xml" data="/images/alien.svg"></object>
+  </div>
+  <div class="avatar large">
+    <object type="image/svg+xml" data="/images/alien.svg"></object>
+  </div>
+  <div class="avatar xlarge">
+    <object type="image/svg+xml" data="/images/alien.svg"></object>
+  </div>
+
+  <p>Badges</p>
+  <span class="badge color-primary">1</span>
+  <span class="badge reversed color-primary">2</span>
+  <span class="badge color-secondary">3</span>
+  <span class="badge reversed color-secondary">4</span>
+  <span class="badge color-third">5</span>
+  <span class="badge reversed color-third">6</span>
+  <span class="badge">7</span>
+  
+  <p>Buttons + shadows + Text uppercase + text bold</p>
+  <button class="button color-primary bordered">Quitter le projet</button>
+  <button class="button reversed color-primary bordered shadow-small">Quitter le projet</button>
+  <button class="button color-secondary bordered shadow">Quitter le projet</button>
+  <button class="button reversed color-secondary bordered">Quitter le projet</button>
+  <button class="button color-third bordered shadow-large">Quitter le projet</button>
+  <button class="button reversed color-third bordered">Quitter le projet</button>
+  <button class="button color-disabled bordered">Quitter le projet</button>
+  <button class="button reversed color-disabled bordered">Quitter le projet</button>
+  <button class="button color-primary bordered text-uppercase text-bold">Quitter le projet</button>
+  <solid-link class="button rounded reversed color-secondary icon-pencil icon-large bordered"></solid-link>
+
+  <p>Borders</p>
+  <div class="border all-sides color-primary">
+    <p>Salut</p>
+  </div>
+  <div class="border left color-secondary">
+    <p>Salut</p>
+  </div>
+  <div class="border bottom color-third">
+    <p>Salut</p>
+  </div>
+  <div class="border right color-heading">
+    <p>Salut</p>
+  </div>
+  <div class="border all-sides color-grey">
+    <p>Salut</p>
+  </div>
+
+  <p>Colors</p>
+  <div class="segment lg-half padding-medium bg-color-grey hover active text-color-heading">
+    <p>Lorem</p>
+  </div>
+  <div class="segment lg-quarter padding-small bg-color-heading hover active text-color-white">
+    <p>Ipsum</p>
+  </div>
+  <p class="text-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.</p>
+
+  <p>Text sizes + weights + position + letters spacings </p>
+  <p class="text-xsmall text-center">text xsmall and centered</p>
+  <p class="text-small text-letter-spacing-larger">Text small with larger letter spacing</p>
+  <p class="text-medium text-semibold text-right">Text medium, semibold, right-aligned</p>
+  <p class="text-large text-bold">Text large and bold</p>
+  <p class="text-xlarge text-underline">Text xlarge with underline</p>
+  <p class="text-xxlarge text-letter-spacing-large">Text xxlarge with large letter spacing</p>
+
+  <p>Forms</p>
+  <solid-form class="button-register">
+    <form action="">
+      <input type="text" name="" id="">
+      <textarea name="" id="" cols="30" rows="10"></textarea>
+      <input class="icon icon-magnify" type="text" name="" id="">
+      <input type="submit" value="Register">
+    </form>
+  </solid-form>
+
+  <p>Icons</p>
+  <span class="icon icon-home icon-primary hover margin-right-small"></span>
+  <span>Lorem</span>
+  <span class="icon icon-envelope icon-secondary rounded rounded-large rounded-primary icon-xlarge centered"></span>
+
+  <p>Segments</p>
+  <solid-form class="button-register">
+    <form class="segment lg-full padding-large clearfix" action="">
+      <div class="segment lg-half float-left padding-right-small">
+        <label>Lorem</label>
+        <input type="text" name="" id="">
+      </div>
+      <div class="segment lg-half float-left padding-left-small">
+        <label>Ipsum</label>
+        <input type="text" name="" id="">
+      </div>
+    </form>
+  </solid-form>
+  <p>Tables</p>
+  <div class="table-wrapper">
+    <div class="table">
+      <div class="table-header bg-color-heading">
+        <div class="table-cell w280">Lorem</div>
+        <div class="table-cell w280">Ipsum</div>
+        <div class="table-cell w280">Dolor</div>
+      </div>
+      <div class="table-body">
+        <div>
+          <solid-display>
+            <div>
+              <div class="table-cell w280"></div>
+              <div class="table-cell w280"></div>
+              <div class="table-cell w280"></div>
+            </div>
+          </solid-display>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p>Tags</p>
+  <span class="tag color-primary hover">Lorem</span>
+  <p>Links</p>
+  <div>
+    <solid-link class="backlink icon icon-arrow-left-circle margin-right-small icon-large">Back</solid-link>
+  </div>
+  <div>
+    <a class="link" href="">hello</a>
+  </div>
+  <p>Highlight</p>
+  <p class="highlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.</p>
+  <p>User thumb</p>
+  <solid-display class="segment lg-auto clearfix">
+    <div>
+      <hubl-user-avatar class="segment float-left margin-right-xsmall avatar xsmall">
+        <img src="https://www.resetera.com/data/avatar/1537498521/m/47/47921.jpg" alt="">
+      </hubl-user-avatar>
+      <solid-set-default class="segment lg-auto float-left block">
+        <solid-display-value class="block text-small text-semibold text-color-heading">Gaëlle Morin</solid-display-value>
+        <solid-display-value class="block text-xsmall">@gaelle</solid-display-value>
+      </solid-set-default>
+    </div>
+  </solid-display>
+  <solid-set-default class="segment lg-auto clearfix">
+    <author-avatar class="segment float-left margin-right-xsmall avatar xsmall">
+      <img src="https://www.resetera.com/data/avatar/1537498521/m/47/47921.jpg" alt="">
+    </author-avatar>
+    <solid-set-default class="segment lg-auto float-left block">
+      <solid-display-value class="text-small text-semibold text-color-heading">Sylvain</solid-display-value>
+      <solid-display-value class="text-small text-semibold text-color-heading">Le Bon</solid-display-value>
+      <author-contact>
+        <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
+      </author-contact>
+    </solid-set-default>
+  </solid-set-default>
+</body>
+</html>

src/styles/hubl-framework/README.md

@@ -0,0 +1,15 @@
+# GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI !
+
+Les avatars
+Utiliser la class `.avatar` sur un élément HTML englobant une image.
+L'élément sera arrondi avec une hauteur et une largeur par défaut de 50px.
+Les avatars peuvent avoir différentes tailles.
+
+Les badges
+Utiliser la class `.badge` sur un élément HTML.
+L'élément sera arrondi. Par défaut, le texte sera bleu foncé et sa taille fera 11px, l'intérieur du cercle sera vert avec une taille de 18px;
+Le texte et le cercle peuvent avoir différente couleurs.
+
+Les boutons
+Utiliser la class `.button` sur un élément HTML.
+Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs.

src/styles/hubl-framework/_index.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@import '../../../node_modules/include-media/dist/include-media';
+@import '../../../node_modules/normalize.css/normalize';
+
+.block {
+  display: block;
+}
+@import 'commons/_index';
+@import 'avatars/_index';
+@import 'badges/_index';
+@import 'buttons/_index';
+@import 'links/_index';
+@import 'forms/_index';
+@import 'icons/_index';
+@import 'segments/_index';
+@import 'tables/_index';
+@import 'tags/_index';

src/styles/hubl-framework/avatars/_index.scss

@@ -0,0 +1,46 @@
+.avatar {
+  background: #E4E8ED;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  height: 50px;
+  width: 50px;
+
+  >img,
+  object {
+    object-fit: cover;
+    object-position: center;
+  }
+  >img {
+    max-height: 100%;
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  >object {
+    max-height: 40%;
+    max-width: 40%;
+  }
+
+  &.xsmall {
+    height: 31px;
+    width: 31px;
+  }
+  &.small {
+    height: 44px;
+    width: 44px;
+  }
+  &.large {
+    height: 180px;
+    width: 180px;
+  }
+  &.xlarge {
+    height: 241px;
+    width: 241px;
+  }
+}

src/styles/hubl-framework/badges/_index.scss

@@ -0,0 +1,50 @@
+.badge {
+  display: block;
+  border-radius: 50%;
+  font-size: 11px;
+  height: 18px;
+  width: 18px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 18px;
+  color: var(--color-heading);
+  background: var(--color-third);
+
+  &.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;
+    }
+  }
+}

src/styles/hubl-framework/buttons/_index.scss

@@ -0,0 +1,188 @@
+button,
+.button,
+input[type='submit'],
+a {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+
+  &.button {
+    padding: 8px 20px;
+    border-radius: 16.5px;
+    height: 33px;
+
+    &.rounded {
+      border-radius: 50%;
+      font-size: 18px;
+      padding: 2px;
+      height: 29px;
+      width: 29px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &.icon::before {
+      font-size: 15px;
+      margin-right: 10px;
+    }
+    &.color-primary {
+      background-color: white;
+      *,
+      & {
+        color: var(--color-primary);
+      }
+      &.bordered {
+        border: 1px solid var(--color-primary);
+      }
+      &:hover {
+        background-color: var(--color-primary);
+
+        *,
+        & {
+          color: white;
+        }
+      }
+    }
+    &.color-secondary {
+      background-color: white;
+
+      *,
+      & {
+        color: var(--color-secondary);
+      }
+      &.bordered {
+        border: 1px solid var(--color-secondary);
+      }
+      &:hover {
+        background-color: var(--color-secondary);
+        color: white;
+
+        *,
+        & {
+          color: white;
+        }
+      }
+    }
+    &.color-third {
+      color: var(--color-third);
+      background-color:white;
+
+      *,
+      & {
+        color: var(--color-third);
+      }
+      &.bordered {
+        border: 1px solid var(--color-third);
+      }
+      &:hover {
+        background-color: var(--color-third);
+
+        *,
+        & {
+          color: white;
+        }
+      }
+    }
+    &.color-disabled {
+      cursor: not-allowed;
+      background-color: white;
+
+      *,
+      & {
+        color: #636363;
+      }
+      &.bordered {
+        border: 1px solid #636363;
+      }
+      &:hover {
+        background-color: white;
+
+        *,
+        & {
+          color: #636363;
+        }
+      }
+    }
+    &.reversed {
+      &.color-primary {
+        background-color: var(--color-primary);
+
+        *,
+        & {
+          color: white;
+        }
+        &:hover {
+          background-color: white;
+
+          *,
+          & {
+            color: var(--color-primary);
+          }
+          &.bordered {
+            border: 1px solid var(--color-primary);
+          }
+        }
+      }
+      &.color-secondary {
+        background-color: var(--color-secondary);
+
+        *,
+        & {
+          color: white;
+        }
+        &:hover {
+          background-color: white;
+
+          *,
+          & {
+            color: var(--color-secondary);
+          }
+          &.bordered {
+            border: 1px solid var(--color-secondary);
+          }
+        }
+      }
+      &.color-third {
+        background-color: var(--color-third);
+
+        *,
+        & {
+          color: white;
+        }
+        &:hover {
+          background-color: white;
+
+          *,
+          & {
+            color: var(--color-third);
+          }
+          &.bordered {
+            border: 1px solid var(--color-third);
+          }
+        }
+      }
+      &.color-disabled {
+        cursor: not-allowed;
+        background-color: #636363;
+
+        *,
+        & {
+          color: white;
+        }
+        &.bordered {
+          border: 1px solid white;
+        }
+        &:hover {
+          background-color: #636363;
+
+          *,
+          & {
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/hubl-framework/commons/borders.scss

@@ -1,9 +1,24 @@
 .border {
-
+  
+  &.all-sides {
+    border: 1px solid;
+  }
+  &.top {
+    border-top: 1px solid;
+  }
+  &.right {
+    border-right: 1px solid;
+  }
+  &.bottom {
+    border-bottom: 1px solid;
+  }
+  &.left {
+    border-left: 1px solid;
+  }
   &-thick {
     border-width: thick;
   }
-  &-color {
+  &.color {
     &-primary {
       border-color: var(--color-primary);
     }
@@ -16,69 +31,8 @@
     &-heading {
       border-color: var(--color-heading);
     }
-  }
+    &-grey {
-  &-top {
+      border-color: #D6CECE;
-    border-top: 1px solid;
-    
-    &-color-primary {
-      border-color: var(--color-primary);
-    }
-    &-color-secondary {
-      border-color: var(--color-secondary);
-    }
-    &-color-third {
-      border-color: var(--color-third);
-    }
-    &-color-heading {
-      border-color: var(--color-heading);
-    }
-  }
-  &-right {
-    border-right: 1px solid;
-
-    &-color-primary {
-      border-color: var(--color-primary);
-    }
-    &-color-secondary {
-      border-color: var(--color-secondary);
-    }
-    &-color-third {
-      border-color: var(--color-third);
-    }
-    &-color-heading {
-      border-color: var(--color-heading);
-    }
-  }
-  &-bottom {
-    border-bottom: 1px solid;
-
-    &-color-primary {
-      border-color: var(--color-primary);
-    }
-    &-color-secondary {
-      border-color: var(--color-secondary);
-    }
-    &-color-third {
-      border-color: var(--color-third);
-    }
-    &-color-heading {
-      border-color: var(--color-heading);
-    }
-  }
-  &-left {
-    border-left: 1px solid;
-
-    &-color-primary {
-      border-color: var(--color-primary);
-    }
-    &-color-secondary {
-      border-color: var(--color-secondary);
-    }
-    &-color-third {
-      border-color: var(--color-third);
-    }
-    &-color-heading {
-      border-color: var(--color-heading);
     }
   }
 }

src/styles/hubl-framework/commons/colors.scss

@@ -5,14 +5,18 @@
   --color-heading: #2E3F58;
 }
 
+.highlight::selection {
+  background-color: var(--color-third);
+}
+
 .bg-color-primary {
   background-color: var(--color-primary);
 
-  &.active[active] {
+  &.active:active {
     background-color: var(--color-secondary);
   }
-  &.hover:hover {
+  &.hover:hover:not(:active) {
-    opacity: 0.3;
+    background-color: #202B3C;
   }
   &.reverse {
     background-color: var(--color-secondary);
@@ -22,11 +26,11 @@
 .bg-color-secondary {
   background-color: var(--color-secondary);
 
-  &.active[active] {
+  &.active:active {
     background-color: var(--color-primary);
   }
-  &.hover:hover {
+  &.hover:hover:not(:active) {
-    opacity: 0.3;
+    background-color: #202B3C;
   }
   &.reverse {
     background-color: var(--color-primary);
@@ -36,11 +40,11 @@
 .bg-color-third {
   background-color: var(--color-third);
 
-  &.active[active] {
+  &.active:active {
     background-color: var(--color-heading);
   }
-  &.hover:hover {
+  &.hover:hover:not(:active) {
-    opacity: 0.3;
+    background-color: #202B3C;
   }
   &.reverse {
     background-color: var(--color-heading);
@@ -50,26 +54,38 @@
 .bg-color-heading {
   background-color: var(--color-heading);
 
-  &.active[active] {
+  &.active:active {
     background-color: var(--color-third);
   }
-  &.hover:hover {
+  &.hover:hover:not(:active) {
-    opacity: 0.3;
+    background-color: #202B3C;
   }
   &.reverse {
     background-color: var(--color-third);
   }
 }
 
+.bg-color-grey {
+  background-color: #F1F1F1;
+
+  &.active:active {
+    background-color: var(--color-heading);
+  }
+  &.hover:hover:not(:active) {
+    background-color: #E4E4E4;
+  }
+}
+
+.bg-color-white {
+  background: white;
+}
+
 .text-color-primary {
   color: var(--color-primary);
 
-  &.active[active] {
+  &.active:active {
     color: var(--color-secondary);
   }
-  &.hover:hover {
-    opacity: 0.3;
-  }
   &.reverse {
     color: var(--color-secondary);
   }
@@ -78,14 +94,9 @@
 .text-color-secondary {
   color: var(--color-secondary);
 
-  &.active[active] {
+  &.active:active {
     color: var(--color-primary);
   }
-
-  &.hover:hover {
-    opacity: 0.3;
-  }
-
   &.reverse {
     color: var(--color-primary);
   }
@@ -94,12 +105,9 @@
 .text-color-third {
   color: var(--color-third);
 
-  &.active[active] {
+  &.active:active {
     color: var(--color-heading);
   }
-  &.hover:hover {
-    opacity: 0.3;
-  }
   &.reverse {
     color: var(--color-heading);
   }
@@ -108,13 +116,18 @@
 .text-color-heading {
   color: var(--color-heading);
 
-  &.active[active] {
+  &.active:active {
-    color: var(--color-third);
+    color: white;
-  }
-  &.hover:hover {
-    opacity: 0.3;
   }
   &.reverse {
     color: var(--color-third);
   }
 }
+
+.text-color-white {
+  color: white;
+}
+
+.text-hover:hover {
+  color: var(--color-secondary);
+}

src/styles/hubl-framework/commons/texts.scss

@@ -6,7 +6,7 @@
   &-small {
     font-size: 13px;
   }
-  &-normal {
+  &-medium {
     font-size: 14px;
   }
   &-large {

src/styles/hubl-framework/forms/_index.scss

@@ -0,0 +1,10 @@
+solid-form {
+  
+  [data-id="error"] {
+    display: none !important; // Hide the default core message, english only with a weird message
+  }
+
+  @import 'inputs';
+  @import 'buttons';
+  @import 'widgets';
+}

src/styles/hubl-framework/forms/buttons.scss

@@ -0,0 +1,27 @@
+.button-register>form>input[type='submit'] {
+  /*@extend .button,
+  .text-bolder,
+  .text-uppercase,
+  .reversed,
+  .button-secondary,
+  .bordered;*/
+  height: auto;
+  position: fixed;
+  bottom: 1em;
+  left: 10%;
+  white-space: normal;
+  width: 80%;
+  z-index: 1;
+
+  /*@include breakpoint(lg) {
+  height: 3rem;
+  position: unset;
+  bottom: unset;
+  white-space: unset;
+  left: unset;
+  width: unset;
+  z-index: unset;
+  float: right;
+  margin-top: 10px;
+  }*/
+}

src/styles/hubl-framework/forms/inputs.scss

@@ -0,0 +1,34 @@
+input[type='text'],
+textarea {
+  border: none;
+  outline: none;
+  color: #636363;
+  padding: 12px 14px;
+  margin-top: 6px;
+  line-height: 1;
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: var(--color-secondary);
+
+  &:required:invalid {
+    border-color: 1px solid var(--color-primary);
+  }
+}
+
+.input-bg-grey input {
+  background: #F6F6F6;
+}
+
+.input-bg-white input {
+  background: white;
+}
+
+textarea {
+  height: 110px;
+  resize: vertical;
+}
+
+input.icon {
+  background-position: right 12px top 50%;
+  background-repeat: no-repeat;
+}

src/styles/hubl-framework/forms/widgets.scss

@@ -0,0 +1,82 @@
+solid-form-text-label>input[type='text'] + label {
+  display: block;
+}
+
+solid-form-dropdown-autocompletion,
+solid-form-dropdown-autocompletion-label,
+solid-form-multipleselect-autocompletion-label,
+hubl-status {
+
+  .ss-main {
+    font-weight: normal;
+    margin-top: 6px;
+    text-transform: none;
+  
+    .ss-single-selected {
+      background-color: #F6F6F6;
+      border: none;
+      border-radius: 0px;
+      color: var(--color-grey);
+      font-weight: normal;
+      min-height: 46px;
+      padding: 12px 14px;
+
+      .ss-disabled {
+        color: #7A7F85;
+      }
+
+      .ss-arrow {
+        font-size: 15px;
+        margin: 0 12px 0 0;
+
+        span {
+          border: solid var(--color-grey);
+          border-width: 0 2px 2px 0;
+        }
+      }
+    }
+  }
+
+  .ss-list {
+    color: var(--color-grey);
+    font-weight: normal;
+    text-transform: none;
+  }
+}
+
+solid-form-date {
+  input[type="date"] {
+    background-image: url("/images/calendar.svg");
+    background-position: right 12px top 50%;
+    background-repeat: no-repeat;
+    background-size: 1.4rem;
+    color: var(--color-input-icon);
+    cursor: default;
+    font-size: 1.4rem;
+    margin-top: 1.6rem;
+    max-width: 50vw;
+    padding-right: 3rem;
+    /* Needed to replace the close icon in FF when you are selecting a date */
+    padding-top: 1.2rem;
+    /* Needed to center the close icon in FF when you are selecting a date */
+    position: relative;
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0;
+      position: absolute;
+      right: 8px;
+    }
+
+    &::-webkit-clear-button {
+      cursor: pointer;
+      margin-bottom: 5px;
+      /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+      margin-right: 5px;
+    }
+
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+  }
+}

src/styles/hubl-framework/icons/_index.scss

@@ -0,0 +1,4 @@
+@import 'styles';
+@import 'sizes';
+@import 'positions';
+@import 'colors';

src/styles/hubl-framework/icons/colors.scss

@@ -0,0 +1,42 @@
+.icon {
+
+  &-primary{
+
+    &::before {
+      color: var(--color-primary);
+    }
+    &.hover:hover::before {
+      color: var(--color-secondary);
+    }
+  }
+  &-secondary{
+
+    &::before {
+      color: var(--color-secondary);
+    }
+    &.hover:hover::before {
+      color: var(--color-primary);
+    }
+  }
+  &-third{
+
+    &::before {
+      color: var(--color-third);
+    }
+    &.hover:hover::before {
+      color: var(--color-heading);
+    }
+  }
+  &-heading{
+
+    &::before {
+      color: var(--color-heading);
+    }
+    &.hover:hover::before {
+      color: var(--color-third);
+    }
+  }
+  &-grey::before {
+    color: #636363;
+  }
+}

src/styles/hubl-framework/icons/positions.scss

@@ -0,0 +1,14 @@
+.icon {
+
+  &.centered {
+    margin: 0 auto;
+  }
+
+  &.margin-right-small::before {
+    margin-right: 15px;
+  }
+
+  &.margin-right-xxsmall::before {
+    margin-right: 5px;
+  }
+}

src/styles/hubl-framework/icons/sizes.scss

@@ -0,0 +1,18 @@
+.icon {
+
+  &::before {
+    font-size: 18px;
+  }
+  &-xsmall::before {
+    font-size: 12px;
+  }
+  &-small::before {
+    font-size: 15px;
+  }
+  &-large::before {
+    font-size: 20px;
+  }
+  &-xlarge::before {
+    font-size: 30px;
+  }
+}

src/styles/hubl-framework/icons/styles.scss

@@ -0,0 +1,37 @@
+.icon {
+
+  &.icon-magnify {
+    background-image: url("/lib/solid-directory/dist/assets/magnify.svg");
+  }
+  &.icon-arrow-down {
+    background-image: url();
+  }
+  &.rounded {
+    border: 2px solid;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-small {
+      height: 35px;
+      width: 35px;
+    }
+    &-large {
+      height: 70px;
+      width: 70px;
+    }
+    &-primary {
+      border-color: var(--color-primary); 
+    }
+    &-secondary {
+      border-color: var(--color-secondary);
+    }
+    &-third {
+      border-color: var(--color-third);
+    }
+    &-heading {
+      border-color: var(--color-heading);
+    }
+  }
+}

src/styles/hubl-framework/links/_index.scss

@@ -0,0 +1,19 @@
+.backlink {
+  color: #636363;
+  text-decoration: underline;
+
+  &::before {
+    display: inline-block;
+    font-size: 20px;
+    margin-right: 10px;
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.link {
+  color: var(--color-secondary);
+}

src/styles/hubl-framework/segments/_index.scss

@@ -0,0 +1,3 @@
+@import 'positions';
+@import 'spaces';
+@import 'sizes';

src/styles/hubl-framework/segments/positions.scss

@@ -0,0 +1,13 @@
+.segment {
+  position: relative;
+
+  .align-middle {
+    transform: translateY(50%);
+  }
+  &.float-left {
+    float: left;
+  }
+  &.float-right {
+    float: right;
+  }
+}

src/styles/hubl-framework/segments/sizes.scss

@@ -0,0 +1,29 @@
+.segment {
+
+  &.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;
+    }
+  }
+}

src/styles/hubl-framework/segments/spaces.scss

@@ -0,0 +1,244 @@
+.segment {
+  box-sizing: border-box;
+
+  &.clearfix::after {
+    content: "";
+    clear: both;
+    display: block;
+    height: 0;
+    width: 100%;
+  }
+
+  &.margin {
+    &-xxsmall {
+      margin: 5px;
+    }
+    &-xsmall {
+      margin: 10px;
+    }
+    &-small {
+      margin: 15px;
+    }
+    &-medium {
+      margin: 20px;
+    }
+    &-large {
+      margin: 25px;
+    }
+    &-xlarge {
+      margin: 30px;
+    }
+    &-xxlarge {
+      margin: 35px;
+    }
+    &-top {
+      &-xxsmall {
+        margin-top: 5px;
+      }
+      &-xsmall {
+        margin-top: 10px;
+      }
+      &-small {
+        margin-top: 15px;
+      }
+      &-medium {
+        margin-top: 20px;
+      }
+      &-large {
+        margin-top: 25px;
+      }
+      &-xlarge {
+        margin-top: 30px;
+      }
+      &-xxlarge {
+        margin-top: 35px;
+      }
+    }
+    &-right {
+      &-xxsmall {
+        margin-right: 5px;
+      }
+      &-xsmall {
+        margin-right: 10px;
+      }
+      &-small {
+        margin-right: 15px;
+      }
+      &-medium {
+        margin-right: 20px;
+      }
+      &-large {
+        margin-right: 25px;
+      }
+      &-xlarge {
+        margin-right: 30px;
+      }
+      &-xxlarge {
+        margin-right: 35px;
+      }
+    }
+    &-bottom {
+      &-xxsmall {
+        margin-bottom: 5px;
+      }
+      &-xsmall {
+        margin-bottom: 10px;
+      }
+      &-small {
+        margin-bottom: 15px;
+      }
+      &-medium {
+        margin-bottom: 20px;
+      }
+      &-large {
+        margin-bottom: 25px;
+      }
+      &-xlarge {
+        margin-bottom: 30px;
+      }
+      &-xxlarge {
+        margin-bottom: 35px;
+      }
+    }
+    &-left {
+      &-xxsmall {
+        margin-left: 5px;
+      }
+      &-xsmall {
+        margin-left: 10px;
+      }
+      &-small {
+        margin-left: 15px;
+      }
+      &-medium {
+        margin-left: 20px;
+      }
+      &-large {
+        margin-left: 25px;
+      }
+      &-xlarge {
+        margin-left: 30px;
+      }
+      &-xxlarge {
+        margin-left: 35px;
+      }
+    }
+  }
+
+  &.padding {
+    &-xxsmall {
+      padding: 5px;
+    }
+    &-xsmall {
+      padding: 10px;
+    }
+    &-small {
+      padding: 15px;
+    }
+    &-medium {
+      padding: 20px;
+    }
+    &-large {
+      padding: 25px;
+    }
+    &-xlarge {
+      padding: 30px;
+    }
+    &-xxlarge {
+      padding: 35px;
+    }
+    &-top {
+      &-xxsmall {
+        padding-top: 5px;
+      }
+      &-xsmall {
+        padding-top: 10px;
+      }
+      &-small {
+        padding-top: 15px;
+      }
+      &-medium {
+        padding-top: 20px;
+      }
+      &-large {
+        padding-top: 25px;
+      }
+      &-xlarge {
+        padding-top: 30px;
+      }
+      &-xxlarge {
+        padding-top: 35px;
+      }
+    }
+
+    &-right {
+      &-xxsmall {
+        padding-right: 5px;
+      }
+      &-xsmall {
+        padding-right: 10px;
+      }
+      &-small {
+        padding-right: 15px;
+      }
+      &-medium {
+        padding-right: 20px;
+      }
+      &-large {
+        padding-right: 25px;
+      }
+      &-xlarge {
+        padding-right: 30px;
+      }
+      &-xxlarge {
+        padding-right: 35px;
+      }
+    }
+    &-bottom {
+      &-xxsmall {
+        padding-bottom: 5px;
+      }
+      &-xsmall {
+        padding-bottom: 10px;
+      }
+      &-small {
+        padding-bottom: 15px;
+      }
+      &-medium {
+        padding-bottom: 20px;
+      }
+      &-large {
+        padding-bottom: 25px;
+      }
+      &-xlarge {
+        padding-bottom: 30px;
+      }
+      &-xxlarge {
+        padding-bottom: 35px;
+      }
+    }
+    &-left {
+      &-xxsmall {
+        padding-left: 5px;
+      }
+      &-xsmall {
+        padding-left: 10px;
+      }
+      &-small {
+        padding-left: 15px;
+      }
+      &-medium {
+        padding-left: 20px;
+      }
+      &-large {
+        padding-left: 25px;
+      }
+      &-xlarge {
+        padding-left: 30px;
+      }
+      &-xxlarge {
+        padding-left: 35px;
+      }
+    }
+  }
+}

src/styles/hubl-framework/tables/_index.scss

@@ -0,0 +1,5 @@
+@import 'tables';
+@import 'cells';
+@import 'headers';
+@import 'bodies';
+@import 'sizes';

src/styles/hubl-framework/tables/bodies.scss

@@ -0,0 +1,22 @@
+.table-body {
+  display: table-row-group;
+  border-left: 1px solid #C9C8C8;
+
+  &>div {
+    display: contents;
+
+    &>solid-display {
+      display: table-row;
+
+      &>div {
+        display: contents;
+
+        &>.table-cell {
+          border-bottom: 1px solid #C9C8C8;
+          border-right: 1px solid #C9C8C8;
+          height: 64px;
+        }
+      }
+    }
+  }
+}

src/styles/hubl-framework/tables/cells.scss

@@ -0,0 +1,6 @@
+.table-cell {
+  display: table-cell;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+}

src/styles/hubl-framework/tables/headers.scss

@@ -0,0 +1,20 @@
+.table-header {
+  display: table-header-group;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 1px solid #C9C8C8;
+  border-bottom: 1px solid #C9C8C8;
+  border-left: 1px solid #C9C8C8;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.25px;
+
+  &>.table-cell {
+    height: 50px;
+    border-right: 1px solid white;
+
+    &:last-child {
+      border-right: 1px solid #C9C8C8;
+    }
+  }
+}

src/styles/hubl-framework/tables/sizes.scss

@@ -0,0 +1,22 @@
+.table-body,
+.table-header {
+
+  .w280 {
+    width: 280px;
+  }
+  .w450 {
+    width: 450px;
+  }
+  .w370 {
+    width: 370px;
+  }
+  .w230 {
+    width: 230px;
+  }
+  .w70 {
+    width: 70px;
+  }
+  .w162 {
+    width: 162px;
+  }
+}

src/styles/hubl-framework/tables/tables.scss

@@ -0,0 +1,14 @@
+.table-wrapper {
+  overflow: auto;
+  position: relative;
+  width: 100%;
+
+  .table {
+    border-collapse: collapse;
+    display: table;
+    overflow: auto;
+    table-layout: fixed;
+    width: 100%;
+    max-width: 100%;
+  }
+}

src/styles/hubl-framework/tags/_index.scss

@@ -0,0 +1,83 @@
+.tag {
+  cursor: pointer;
+  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);
+
+    &.hover:hover {
+      background: var(--color-primary);
+      color: white;
+    }
+  }
+
+  &.color-secondary {
+    background: white;
+    border: 1px solid var(--color-secondary);
+    color: var(--color-secondary);
+
+    &.hover:hover {
+      background: var(--color-secondary);
+      color: white;
+    }
+  }
+
+  &.color-third {
+    background: white;
+    border: 1px solid var(--color-third);
+    color: var(--color-third);
+
+    &.hover:hover {
+      background: var(--color-third);
+      color: white;
+    }
+  }
+
+  &.reversed {
+    &.color-primary {
+      background: var(--color-primary);
+      border: 1px solid var(--color-primary);
+      color: white;
+
+      &.hover:hover {
+        background: white;
+        color: var(--color-primary);
+      }
+    }
+
+    &.color-secondary {
+      background: var(--color-secondary);
+      border: 1px solid var(--color-secondary);
+      color: white;
+
+      &.hover:hover {
+        background: white;
+        color: var(--color-secondary);
+      }
+    }
+
+    &.color-third {
+      background: var(--color-third);
+      border: 1px solid var(--color-third);
+      color: white;
+
+      &.hover:hover {
+        background: white;
+        color: var(--color-third);
+      }
+    }
+  }
+}

src/styles/index.scss

@@ -1,23 +1,2 @@
-@charset "UTF-8";
+@import 'hubl-framework/_index';
-
+@import 'hubl-app/_index';
-@import '../../node_modules/include-media/dist/include-media';
-@import '../../node_modules/normalize.css/normalize';
-
-@import 'abstracts/fonts';
-@import 'abstracts/variables';
-@import 'abstracts/mixins';
-@import 'components/loader';
-@import 'components/icons/index';
-@import 'base/main';
-@import 'base/about';
-
-#viewport {
-    @import 'components/index';
-    @import 'layout/members/index';
-    @import 'layout/job-offers/index';
-    @import 'layout/user/index';
-    @import 'layout/events/index';    
-    @import 'layout/resources/index';
-    @import 'layout/dashboard/index';
-    @import 'layout/polls/index';
-}

src/styles_old/abstracts/_variables.scss

@@ -6,6 +6,8 @@
   --color-grey: #636363;
   --color-heading: #2E3F58;
 
+  --nav-height: 72px;
+
   --color-complementary: #5BB4CE;
   --color-complementary-darken: #35A0C0;
 

src/styles_old/base/main.scss

@@ -3,7 +3,7 @@
 }
 
 :root {
-  font-size: 10px;
+  font-size: 14px;
   font-family: Open Sans, sans-serif;
   --sib-notifications-theme: var(--color-primary);
 
@@ -11,7 +11,6 @@
     background-color: var(--color-main-background);
     box-sizing: border-box;
     color: var(--color-grey) !important;
-    font-size: 14px;
     /* Fix for viewport height bug in webkit for mobile */
     height: -webkit-fill-available;
     min-height: -webkit-fill-available;

src/styles_old/index.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+@import '../../node_modules/include-media/dist/include-media';
+@import '../../node_modules/normalize.css/normalize';
+
+@import 'abstracts/fonts';
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'components/loader';
+@import 'components/icons/index';
+@import 'base/main';
+@import 'base/about';
+
+#viewport {
+    @import 'components/index';
+    @import 'layout/members/index';
+    @import 'layout/job-offers/index';
+    @import 'layout/user/index';
+    @import 'layout/events/index';    
+    @import 'layout/resources/index';
+    @import 'layout/dashboard/index';
+    @import 'layout/polls/index';
+}

src/views/project/page-project-profile.pug

@@ -9,7 +9,7 @@ solid-router(default-route='project-profile', hidden)
     template 
       solid-link(data-src='\${value}', next='messages')
 
-  .content-box__info.flex
+  .content-box__info
 
     div#loader-project-profile.loader
       div