src/styles/content/_index.scss

+main {
+  height: 100vh;
+}
+
+.no-background-image {
+  background-image: none !important;
+}
+
+/* Styles of the right-hand menu + pages with that menu */
+.with-sidebar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  /*margin-top: 50px;*/
+  overflow: hidden;
+
+  .views-container {
+    flex: 1 0 0;
+    /*-webkit-backface-visibility: hidden;*/
+
+    &.sidebar-is-closed {
+
+      @media(min-width: 768.01px) {
+        margin-left: -157px;
+        transform: translate(157px);
+      }
+    }
+  }
+
+  >div {
+    transition: all 0.5s;
+  }
+
+  .sidebar {
+    background: #F1F1F1;
+    height: calc(100vh - 50px);
+    transition: all 0.5s;
+    width: 217px;
+
+    @media (max-width: 768px) {
+      width: 60px;
+    }
+
+    ul {
+
+      &>li:first-child>a {
+        vertical-align: middle;
+      }
+
+      >solid-route {
+
+        &[active]>li {
+          background-color: var(--color-heading);
+          color: white;
+        }
+        &:hover:not([active])>li {
+          background: #E4E4E4;
+        }
+      }
+    }
+
+    /* Styles use with JS to open/close the sidebar */
+    &.jsRightMenu {
+      @media (min-width: 768,01px) {
+        display: block;
+      }
+
+      @media (max-width: 768px) {
+        position: fixed;
+        top: 99px;
+        right: 0;
+        height: auto;
+        z-index: 2999;
+        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14);
+      }
+
+      solid-link[active] {
+        color: white;
+        background: var(--color-heading);
+
+        >li {
+          border-bottom: 1px solid var(--color-heading);
+        }
+      }
+
+      solid-link:not([active]):hover {
+        background: #e4e4e4;
+      }
+    }
+
+    &.jsRightMenu:not([open]) {
+      @media (min-width: 768.01px) {
+        transform: translate(157px);
+      }
+    }
+
+    &.jsRightMenu[open] {
+      display: block;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  .jsMobileRightMenuButton {
+    float: right;
+  }
+}
+
+/* Add scrollbar to the left menu and to the content */
+.scrollbar-nav,
+.scrollbar-content {
+  overflow-y: auto;
+  height: calc(100vh - 50px); /* 50px == header's height */
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-content {
+
+  @media (max-width: 768px) {
+    position: relative;
+  }
+}
+
+/* Custom scrollbar of the right-menu */
+/* Works on Firefox*/
+.scrollbar-nav {
+  scrollbar-width: thin;
+  scrollbar-color:#E4E9F1 var(--color-heading);
+}
+
+/* Works on Chrome, Edge, and Safari */
+.scrollbar-nav {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-heading);          /* color of the tracking area */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color:#E4E9F1;                /* color of the scroll thumb */
+    border-radius: 6px;                        /* roundness of the scroll thumb */
+    border: 3px solid var(--color-heading);    /* creates padding around scroll thumb */
+  }
+}
+
+/* Custom scrollbar of the content */
+/* Works on Firefox */
+.scrollbar-content {
+  scrollbar-width: thin;
+  scrollbar-color:#E4E9F1 white;            /* scroll thumb and track */
+}
+
+/* Works on Chrome, Edge, and Safari */
+.scrollbar-content {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: white;                        /* color of the tracking area */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color:#E4E9F1;                 /* color of the scroll thumb */
+    border-radius: 6px;                         /* roundness of the scroll thumb */
+    border: 3px solid white;                  /* creates padding around scroll thumb */
+  }
+}
+/* End scrollbar*/
+
+orbit-circle-headline,
+solid-display-value-markdown {
+  p {
+    margin: 0;
+  }
+
+  a {
+    vertical-align: baseline;
+  }
+}

src/styles/forms/_index.scss

+/*.search-form {
+  [type="submit"] {
+    margin-bottom: 20px;
+    @media (min-width: 768.01px) {
+      margin-bottom: 0;
+      float: none !important;
+      margin-top: 0 !important;
+    }
+  }
+}*/
\ No newline at end of file

src/styles/header/_index.scss

+header {
+  height: 50px;
+  position: fixed;
+  z-index: 10000;
+
+  >div {
+    display: flex;
+
+    >div {
+      display: flex;
+      margin-left: auto;
+    }
+  }
+
+  solid-link {
+    align-self: center;
+  }
+
+  .tag {
+    align-self: flex-start;
+    height: auto !important;
+    letter-spacing: 0.16px !important;
+    line-height: normal !important;
+    padding: 1px 8px !important;
+    margin-top: 10px;
+  }
+
+  solid-notifications {
+    color: var(--color-heading);
+    align-self: center;
+
+    height: 25px;
+    width: 25px;
+
+    .solid-notifications__container {
+      position: relative;
+
+      &[open] summary {
+        background-color: white;
+        color: var(--color-heading);
+      }
+
+      .solid-notifications__button {
+        font-size: 25px;
+        padding: 0;
+        line-height: 1;
+        height: auto;
+        width: auto;
+
+        &:hover, &:focus {
+          background: white;
+        }
+
+        img {
+          display: none;
+        }
+
+        .solid-notifications__counter {
+          left: 12px;
+          position: absolute;
+          top: -4px;
+          width: 18px;
+          height: 18px;
+
+          span {
+            background-color: var(--color-primary);
+            color: white;
+            font-size: 11px;
+            line-height: 18px;
+          }
+        }
+      }
+
+      .solid-notifications__triangle-back {
+        display: none;
+      }
+
+      .solid-notifications__triangle-shadow {
+        display: none;
+
+        @media(min-width: 768.01px) {
+          background: white;
+          display: block;
+          position: absolute;
+          left: auto;
+          right: -1.9em;
+          top: 4em;
+          transform: initial;
+          width: 0;
+          z-index: 4;
+
+          &::after {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            margin-left: -4.2em;
+            top: 0px;
+            left: 50%;
+            border: 1em solid black;
+            border-color: #fff #fff transparent transparent;
+            transform-origin: 0 0;
+            transform: rotate(-45deg);
+            box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+          }
+        }
+      }
+
+      .solid-notifications__list {
+        border: none;
+        border-radius: 0;
+        box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
+        max-height: calc(100vh - 50px);
+        position: fixed;
+        left: 0;
+        top: 2.5em;
+        width: 100vw;
+
+        /* Custom scrollbar */
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: none;
+        scrollbar-width: thin;
+        scrollbar-color: #C9C8C8 #F1F1F1;
+
+        @media(min-width: 768.01px) {
+          max-height: calc(100vh - 93px);
+          position: absolute;
+          left: auto;
+          right: -2.3em;
+          top: 2.95em;
+          width: 347px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #F1F1F1;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: #C9C8C8;
+          border-radius: 8px;
+        }
+
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        /* End of custom scrollbar */
+
+        .solid-notifications__item {
+          border-bottom: none;
+
+          &:hover {
+            background-color: transparent;
+
+            & solid-notification__title,
+            & solid-notification__summary {
+              color: var(--color-secondary);
+            }
+          }
+
+          .solid-notification {
+            padding: 16px 0 5px;
+
+            &[data-read] {
+              opacity: 0.5;
+            }
+
+            .solid-notification__avatar {
+              align-items: center;
+              background: #f6f6f6;
+              display: flex;
+              height: 35px;
+              justify-content: center;
+              margin-left: 16px;
+              margin-right: 14px;
+              overflow: hidden;
+              position: relative;
+              vertical-align: middle;
+              width: 35px;
+
+              img {
+                background-color: #f6f6f6;
+                height: 100%;
+                object-fit: cover;
+                object-position: center center;
+                width: 100%;
+              }
+
+              object {
+                height: 45%;
+                width: 45%;
+              }
+            }
+
+            .solid-notification__content {
+              font-family: Open Sans, sans-serif;
+
+              .solid-notification__title {
+                color: var(--color-heading);
+                font-size: 13px;
+                font-weight: 600;
+
+                .solid-notification__title__side {
+                  font-weight: normal;
+
+                  >span:first-child {
+                    margin-right: 4px;
+                  }
+                }
+
+                .solid-notification__title__icon {
+                  display: inline-block;
+                  font-family: simple-line-icons;
+                }
+              }
+
+              .solid-notification__summary {
+                color: var(--color-text, #636363);
+                font-size: 12px;
+                line-height: 17px;
+                margin-top: 4px;
+
+                @media(min-width: 768.01px) {
+                  max-width: 256px;
+                }
+              }
+            }
+
+            .solid-notification__date {
+              display: none;
+            }
+
+            .solid-notification__read {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  details {
+
+    &[open] {
+      summary {
+        background-color: var(--color-heading);
+        color: #fff;
+        .text-color-heading {
+          color: #fff;
+        }
+        .labelled-avatar>div {
+          line-height: normal;
+        }
+      }
+    }
+    summary {
+      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+      cursor: pointer;
+      height: 50px;
+
+      /* To remove the disclosure triangle on Chrome (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget) */
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+      /* End */
+
+      solid-display {
+        padding-top: 13px;
+      }
+    }
+  }
+
+  .panel {
+    height: 0;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    /* Quick fix for mobile version */
+    width: 227px;
+    top: 50px;
+
+    >nav {
+      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+      height: auto;
+      width: 100%;
+
+      solid-route,
+      solid-link,
+      button {
+        display: block;
+      }
+
+      li,
+      button {
+        width: 100%;
+        text-align: left;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    height: 50px;
+
+    .icon-menu {
+      font-size: 24px;
+    }
+
+    .tag {
+      align-self: center;
+      margin: 0;
+      margin-left: 15px;
+    }
+
+    details.user-menu {
+
+      .user-firstname {
+        display: none;
+      }
+
+      summary {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 50px;
+        padding: 0;
+
+        solid-display {
+          padding-top: 0;
+        }
+
+        >.labelled-avatar .avatar {
+          height: 32px;
+          width: 32px;
+        }
+
+        .sm-arrow-down {
+          width: 16px;
+          height: 16px;
+          background: white;
+          border-radius: 50%;
+          text-align: center;
+          position: absolute;
+          top: 26px;
+          right: -1px;
+          box-shadow: 0 0 4px 0 rgba(46, 63, 87, 0.18);
+
+          .icon::before {
+            font-size: 10px;
+          }
+        }
+      }
+
+      &[open] {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 72px;
+
+        summary {
+          display: flex;
+          height: 72px;
+        }
+
+        .labelled-avatar {
+          display: none;
+        }
+
+        .user-firstname {
+          display: flex;
+          align-items: center;
+          padding: 13px;
+          width: 100%;
+
+          [name="segment3"] {
+            margin-left: auto;
+
+            .icon::before {
+              font-size: 20px;
+            }
+          }
+        }
+
+        .panel {
+          top: 72px;
+          height: calc(100vh - 72px);
+          background: white;
+          width: calc(100vw);
+
+          >nav {
+            box-shadow: none;
+
+            >ul>li:last-child {
+              border-bottom: 1px solid #E4E9F1;
+            }
+          }
+        }
+      }
+    }
+  }
+  .solid-notifications__item:hover * {
+    color: var(--color-secondary)!important;
+  }
+  .solid-notification__content {
+    max-width: calc(100% - 65px);
+  }
+  .solid-notification__summary {
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+  }
+  .solid-notification__title {
+    overflow: hidden;
+    white-space: break-spaces;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+  }
+}

src/styles/index.scss

 @charset "UTF-8";
+@use "sass:meta";
 
-@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/icons/index';
-@import 'base/main';
-@import 'base/about';
-
-#viewport {
-    display: flex;
-    flex: 1;
-    /*height: auto;
-    min-height: 100vh;*/
-    overflow-y: auto;
-    @import 'components/index';
-    @import 'layout/members/index';
-    @import 'layout/job-offers/index';
-    @import 'layout/user/index';
-    @import 'layout/events/index';
-    @import 'layout/dashboard/index';
-}
\ No newline at end of file
+@include meta.load-css("@startinblox/orbit-styling-framework");
+
+@font-face {
+  font-family: "ConverseFontAwesomeBrands";
+  font-style: normal;
+  font-weight: normal;
+  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot");
+  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff2")
+      format("woff2"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff")
+      format("woff"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.ttf")
+      format("truetype"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.svg#fontawesome")
+      format("svg");
+}
+
+@font-face {
+  font-family: "ConverseFontAwesomeRegular";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot");
+  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff2")
+      format("woff2"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff")
+      format("woff"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.ttf")
+      format("truetype"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.svg#fontawesome")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "ConverseFontAwesomeSolid";
+  font-style: normal;
+  font-weight: 900;
+  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot");
+  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff2")
+      format("woff2"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff")
+      format("woff"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.ttf")
+      format("truetype"),
+    url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.svg#fontawesome")
+      format("svg");
+}
+
+body {
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+
+solid-display > div {
+  display: contents !important;
+}
+
+@include meta.load-css("header");
+@include meta.load-css("left-nav");
+@include meta.load-css("content");
+@include meta.load-css("about");
+@include meta.load-css("members");
+@include meta.load-css("job-offers");
+@include meta.load-css("chat");
+@include meta.load-css("forms");
+@include meta.load-css("registering");
+@include meta.load-css("projects");
+@include meta.load-css("admin-circles");
+@include meta.load-css("admin-projects");
+
+nav#main__menu {
+  @media (min-width: 768.01px) {
+    width: 250px;
+  }
+}
+
+main#content {
+  @media (min-width: 768.01px) {
+    width: calc(100% - 250px);
+  }
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.admin-name-ellipsis {
+    display: inline-block;
+    width: 75%;
+  }
+}
+
+orbit-menu-empty + orbit-menu-empty {
+  display: none;
+  /* Duplicate widget generation? */
+}
+
+.swal2-container {
+  z-index: 50000 !important;
+}
+
+.global-loader {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */
+.two-lines-ellipsis {
+  display: -webkit-box !important;
+}
+
+.link-hover {
+  text-decoration: underline;
+  &:before {
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.submit-button {
+  float: right;
+
+  button {
+    line-height: 1;
+
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+}
+
+.search-button {
+  button {
+    @media (max-width: 768px) {
+      margin-bottom: 20px;
+      width: 100%;
+    }
+  }
+}
+
+.add-member-button {
+  button[type="submit"] {
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+}
+
+.children-button-icon {
+  button {
+    display: inline-flex;
+    justify-content: center;
+    line-height: 15px;
+
+    &::before {
+      vertical-align: middle;
+    }
+  }
+}
+
+.button-icon {
+  display: inline-flex;
+  justify-content: center;
+  line-height: 15px;
+
+  &::before {
+    vertical-align: middle;
+  }
+}

src/styles/job-offers/_index.scss

+#job-offers #job-offers-board {
+  min-height: calc(100vh - 50px);
+}

src/styles/layout/dashboard/_index.scss

-@import 'dashboard.scss';
\ No newline at end of file

src/styles/layout/dashboard/dashboard.scss

-.dashboard>div {
-  margin: 0 2px;
-}
-
-solid-dashboard .icon::before {
-  width: 41px;
-}
\ No newline at end of file

src/styles/layout/events/_index.scss

-@import 'events.scss';
\ No newline at end of file

src/styles/layout/events/events.scss

-#events {
-    width: 100%;
-    font-family: "Facit";
-    font-weight: 400;
-    color: $color-0-0-22;
-    sib-event {
-        .red-button,
-        .event-type {
-            background-color: $color-357-67-45;
-        }
-        .black-button {
-            background-color: $color-0-0-22;
-            margin-left: 10%;
-        }
-        .event-type,
-        .event-place-name {
-            font-weight: 700;
-        }
-        #listevents [name="name"],
-        solid-display-link-event .mdi::before {
-            color:  $color-357-67-45;
-        }
-        .event-place-name,
-        .nextevent-startdate,
-        solid-display-link-event {
-            color: $color-0-0-22;
-        }
-        .sib-event {
-            font-family: "Facit";
-            font-weight: 400;
-            .page-title {
-                font-family: "RefrigeratorDelxW01Bold";
-                    font-size: 3.2rem;
-                    line-height: 3.8rem;
-                    color: $color-203-87-19;
-            }
-        }
-        #listevents {
-            .newtype .button{
-                font-size: 1.2rem;
-                width: max-content;
-                height: max-content;
-                padding: 5px 20px;
-                color: $color-203-87-19;
-            }
-            solid-form solid-form-dropdown{
-                label div {
-                    height: 2.5rem;
-                }
-                &::before {
-                    font-family: "RefrigeratorDelxW01Bold";
-                    font-size: 2.4rem;
-                    line-height: 29px;
-                    color: $color-203-87-19;
-                    top: -40px;
-                    content: "Research an event";
-                }
-            }
-            [name="name"] {
-                font-family: "RefrigeratorDelxW01Bold";
-                font-size: 2.2rem;
-                line-height: 2.6rem;
-                letter-spacing: 0.32px;
-                color: $color-203-87-19;
-                padding: 5px;
-                max-width: 250px;
-                margin: 5px auto;
-            }
-            .event-type {
-                font-size: 1.1rem;
-                padding: 5px 20px;
-                width: max-content;
-                height: max-content;
-            }
-            solid-display-location-events {
-                padding: 5px;
-            }
-        }
-        #eventdetail {
-            [name="name"] {
-                font-family: "RefrigeratorDelxW01Bold";
-                font-size: 3.2rem;
-                line-height: 3.8rem;
-                color: $color-203-87-19;
-            }
-            solid-display div .event-type {
-                width: max-content;
-                padding: 5px 20px; 
-            }
-            [name="longDescription"] p {
-                font-size: 1.6rem;
-                line-height: 2.6rem;
-            }
-            solid-display-link-event a {
-                font-size: 1.6rem;
-            }
-        }
-        #newevent input[type="submit"], 
-        #newtype input[type="submit"],
-        button {
-            width: max-content;
-            padding: 5px 20px; 
-        }
-    }
-}
\ No newline at end of file

src/styles/layout/job-offers/_index.scss

-@import 'job-offers.scss';
\ No newline at end of file

src/styles/layout/job-offers/job-offers.scss

-/*.job-offers__container {
-  @extend %grid-layer;
-}
-
-solid-job-board {
-  @extend %grid-layer-main;
-  @extend %containerV;
-}
-
-.job-offers__newoffer {
-  @extend %grid-layer-links;
-  @extend %containerV;
-}
-
-#job-offers {
-
-  .plus-button {
-    @extend .howto;
-    background-color: $color-43-100-50;
-    color: $color-0-0-100;
-    font-weight: bold;
-    text-transform: uppercase;
-    cursor: pointer;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-
-    .icon-plus {
-      font-size: 20px;
-      justify-content: center;
-      margin: 0.5rem 0.5rem 0.5rem 0;
-
-    }
-  }
-
-  .job-board__list {
-    @extend %grid-layer;
-
-    >solid-form {
-      grid-column-start: start;
-      grid-column-end: middle;
-      grid-row-start: start;
-      grid-row-end: middle;
-    }
-
-    >div {
-      grid-column-start: start;
-      grid-column-end: end;
-      grid-row-start: middle;
-      grid-row-end: end;
-
-      &:first-of-type {
-        margin-top: 5rem;
-      }
-
-      >solid-display {
-        @include window-style-modal();
-        display: block;
-        font-size: 1.5rem;
-        margin: 1.7rem 0;
-        
-        [name="offer-detail"] {
-          display: block;
-          border-bottom: 1px solid $color-210-17-91;
-          margin: 0 2.1rem;
-          padding: 2.1rem 0;
-
-          [name='user-thumb'] {
-            align-items: center;
-            display: flex;
-            margin: -0.25em;
-
-            >*:not(solid-action) {
-              margin: 0.25em;
-            }
-
-            [name='author.first_name'] {
-              color: $color-0-0-29;
-              font-weight: 600;
-            }
-
-            solid-multiple[name$='groups'] {
-              display: flex;
-
-              label {
-                display: none;
-              }
-
-              >* {
-                @extend %tag-role;
-              }
-            }
-
-            author-avatar {
-              align-items: center;
-              background-color: $color-213-20-91;
-              border-radius: 50%;
-              display: flex;
-              height: 4.25rem;
-              justify-content: center;
-              margin-right: 2rem;
-              overflow: hidden;
-              width: 4.25rem;
-              
-              img {
-                height: 100%;
-                object-fit: cover;
-                object-position: center;
-                width: 100%;
-              }
-
-              object {
-                height: 45%;
-                width: 45%;
-              }
-            }
-          }
-
-          [name='creationDate'] {
-            display: block;
-            margin-bottom: 0.7rem;
-            margin-top: 2rem;
-          }
-
-          [name='title'] {
-            @extend h3;
-            display: block;
-            font-weight: bold;
-            line-height: 19px;
-          }
-
-          [name='description'] {
-            display: block;
-            line-height: 1.6;
-            margin-bottom: 1.6rem;
-          }
-
-          [name='skills'] {
-            label {
-              display: none;
-            }
-          }
-
-          author-contact {
-            color: $color-244-73-62;
-            font-size: 1.3rem;
-            float: right;
-
-            >solid-link {
-              cursor: pointer;
-              @include icon('speech');
-
-              &::before {
-                font-size: 1.5rem;
-                margin-right: 1.2rem;
-              }
-            }
-          }
-
-          [name='status'] {
-            float: right;
-            display: flex;
-            align-items: center;
-            margin: -0.25em;
-
-            >* {
-              margin: 0.25em;
-            }
-
-            strong {
-              background-color: $color-244-73-62;
-              border: none;
-              border-radius: 100em;
-              color: $color-0-0-100;
-              display: inline-block;
-              font-weight: normal;
-              padding: 0.85rem 1.7rem;
-            }
-          }
-        }
-
-        .solid-conversation,
-        .conversation > div {
-          display: flex;
-          flex-direction: column-reverse;
-        }
-
-        [name="dateCreated"] {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-solid-action[name='edit'] {
-  margin-left: auto;
-  color: $color-215-6-63;
-
-  &>solid-link {
-    @include icon('pencil');
-    font-size: 2rem;
-  }
-}*/
-

src/styles/layout/members/_index.scss

-@import 'members';
-@import 'member-profile';

src/styles/layout/members/member-profile.scss

-/*#member-profile {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-
-  .member-info {
-    background-color: $color-0-0-100;
-    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-    margin: 2rem 1rem 5rem 2rem;
-    min-height: 100vh;
-
-    .member-bio {
-
-      solid-set-default[name='member-profile__bio'] {
-        display: grid;
-        grid-gap: 1rem;
-        grid-template-areas: "avatar name status"
-          "avatar pseudo status"
-          "avatar bio status"
-          "avatar list button";
-        grid-template-columns: 1fr 2fr 1fr;
-
-        solid-set-default[name='member-img'] {
-          grid-area: avatar;
-          
-          member-picture {
-            align-items: center;
-            background-color: $color-213-20-91;
-            border-radius: 50%;
-            display: flex;
-            height: 28vh;
-            justify-content: center;
-            overflow: hidden;
-            width: 28vh;
-
-            img {
-              height: 265px;
-              object-fit: cover;
-              object-position: center;
-              width: 265px;
-            }
-
-            object {
-              height: 45%;
-              width: 45%;
-            }
-          }
-
-          img {
-            border-radius: 50%;
-            height: 250px;
-            object-fit: cover;
-            object-position: center;
-            overflow: hidden;
-            width: 250px;
-          }
-        }
-
-        solid-set-default[name='member-profile'] {
-          align-items: baseline;
-          align-self: end;
-          display: flex;
-          grid-area: name;
-
-          >solid-multiple[name$='groups'] {
-            display: flex;
-            padding-left: 1.4rem;
-          }
-        }
-
-        solid-display-value[name='profile.bio'] {
-          grid-area: bio;
-        }
-
-        solid-set-default[name='infos'] {
-          display: block;
-          grid-area: list;
-
-          @extend %member-info;
-        }
-
-        member-status[name$='profile.available'] {
-          align-self: flex-end;
-          color: $color-244-73-62;
-          grid-area: status;
-          justify-self: flex-end;
-
-          span {
-            align-items: center;
-            align-self: center;
-            display: flex;
-            flex-direction: column;
-            font-weight: 600;
-            line-height: 2;
-          }
-
-          span.status-one {
-            @include ci('awareness');
-
-            &::before {
-              border-bottom: 2px solid $color-43-100-50;
-              font-size: 7.3rem;
-              padding-bottom: 1.5rem;
-            }
-          }
-
-          span.status-two {
-            @include ci('armor');
-
-            &::before {
-              border-bottom: 2px solid $color-43-100-50;
-              font-size: 7.3rem;
-              padding-bottom: 1.5rem;
-            }
-          }
-        }
-
-        solid-action[name='send'] {
-          align-self: flex-end;
-          grid-area: button;
-          justify-self: flex-end;
-        }
-
-        [next=messages] {
-          @include icon('speech');
-          border: 1px solid $color-244-73-62;
-          border-radius: 2em;
-          color: $color-244-73-62;
-          font-size: 18px;
-          font-weight: bold;
-          justify-self: end;
-          padding: 0.6em 1.5em 0.4em;
-
-          &::before {
-            font-size: 25px;
-            padding-right: 0.5em;
-          }
-        }
-      }
-    }
-
-    .member-skills {
-
-      label {
-        float: left;
-        font-weight: bold;
-        display: block;
-        padding-bottom: 0.5rem;
-      }
-    }
-  }
-}*/

src/styles/layout/members/members.scss

-/*%member-info {
-
-  solid-multiple[name^='user.'],
-  >member-info>div,
-  >solid-display-value {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 0;
-    margin-top: 1.7rem;
-
-    &::before {
-      color: $color-43-100-50;
-      padding: 0 0.6em 0 0;
-    }
-  }
-
-  [name$='profile.city'] * {
-    @include mdi('atom');
-  }
-
-  [name$='email'] * {
-    @include mdi('email-outline');
-  }
-
-  [name$='profile.phone'] * {
-    @include mdi('cellphone-iphone');
-  }
-
-  [name="profile.website"]:not(:empty) {
-    @include mdi('link-variant');
-  }
-}
-
-member-info-groups {
-  @extend %tag-role;
-}
-
-#members-list {
-
-  #members-list__content {
-    @extend %grid-layer;
-
-    nav {
-      align-items: center;
-      display: flex;
-      flex-wrap: wrap;
-      font-size: 2.4rem;
-      justify-content: center;
-
-      button {
-        color: $color-210-25-95;
-
-        &:before {
-          color: $color-216-4-22;
-          @include icon('arrow-left-circle');
-        }
-
-        &:disabled::before {
-          color: $color-215-6-63;
-        }
-      }
-
-      button:nth-of-type(2) {
-        order: 1;
-        transform: rotate(180deg);
-      }
-
-      span {
-        font-size: 2.6rem;
-      }
-    }
-
-    &>solid-form {
-      grid-column-start: start;
-      grid-column-end: middle;
-      grid-row-start: start;
-      grid-row-end: middle;
-    }
-
-    &>div,
-    &>nav {
-      grid-column-start: start;
-      grid-column-end: end;
-      margin-bottom: 1.7rem;
-    }
-
-    &>div:first-of-type {
-      display: flex;
-      color: $color-0-0-29;
-      flex-wrap: wrap;
-      font-weight: bold;
-      justify-content: center;
-      margin: 3.75rem 0;
-      position: relative;
-
-      &::before {
-        border-top: 1px solid $color-0-0-85;
-        bottom: 0;
-        content: '';
-        left: 0;
-        margin: 0 auto;
-        position: absolute;
-        right: 0;
-        top: 50%;
-        width: 100%;
-        z-index: -1;
-      }
-
-      span {
-        background-color: $color-210-25-95;
-        padding: 0 60px;
-      }
-    }
-
-    &>div:nth-of-type(2) {
-      display: grid;
-      grid-gap: 30px;
-      grid-template-columns: 1fr;
-      grid-template-rows: auto;
-
-      @media only screen and (min-width: 850px) {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      @media only screen and (min-width: 1180px) {
-        grid-template-columns: repeat(3, 1.5fr);
-      }
-
-      &>solid-display {
-        background-color: white;
-        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-        color: $color-210-4-50;
-        cursor: pointer;
-        min-height: auto;
-        position: relative;
-        text-decoration: none;
-        top: 0;
-        transition: all .1s ease-in;
-
-        &>div {
-          display: flex;
-          flex-direction: column;
-        }
-
-        &:hover {
-          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
-          top: -2px;
-        }
-
-        label {
-          display: none;
-        }
-
-        solid-multiple[name$='groups'] {
-          align-items: flex-start;
-          display: flex;
-          justify-content: flex-end;
-          min-height: 3.4rem;
-          padding-left: 2.6rem;
-          padding-right: 2.6rem;
-          padding-top: 1.3rem;
-
-          >* {
-            margin: 0.3rem;
-          }
-        }
-
-        member-picture {
-          align-items: center;
-          background-color: $color-213-20-91;
-          border-radius: 50%;
-          display: flex;
-          height: 28vh;
-          justify-content: center;
-          margin: 1.7rem auto;
-          overflow: hidden;
-          width: 28vh;
-
-          img {
-            height: 100%;
-            object-fit: cover;
-            object-position: center;
-            width: 100%;
-          }
-
-          object {
-            height: 45%;
-            width: 45%;
-          }
-        }
-
-        solid-set-default[name='bio'] {
-          align-items: center;
-          border-bottom: 1px solid $color-210-25-95;
-          display: flex;
-          flex-direction: column;
-          padding-bottom: 3rem;
-
-          >* {
-            text-align: center;
-          }
-
-          [name='pseudonym'] {
-            margin-top: 0.6rem;
-          }
-
-          solid-display-value[name$='bio'] {
-            flex: 1;
-            margin: 2.5rem 0;
-            padding: 0 10px;
-            width: 70%;
-            flex-basis: 4.5em;
-          }
-
-          [name='send'] {
-            border: 1px solid $color-244-73-62;
-            border-radius: 3.4rem;
-            color: $color-244-73-62;
-            font-size: 1.8rem;
-            font-weight: bold;
-            padding: 1rem 2.55rem 0.7rem;
-            @include icon('speech');
-
-            [next=messages]:before {
-              font-size: 2.5rem;
-              padding-right: 0.85rem;
-            }
-          }
-        }
-
-        solid-set-default[name='infos'] {
-          padding: 0.4rem 2rem 3.7rem;
-          @extend %member-info;
-
-          solid-multiple[name='skills'] {
-            margin: 1.6rem 0;
-          }
-        }
-      }
-    }
-  }
-}*/

src/styles/layout/user/_index.scss

-@import 'user-profile';

src/styles/layout/user/user-profile.scss

-/*.user-profile__container {
-
-  .user-bio {
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-areas: "avatar name"
-      "avatar information";
-    grid-template-columns: minmax(300px, 400px) 2fr;
-
-    .avatar-display {
-      grid-area: avatar;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        border-radius: 50%;
-        height: 300px;
-        object-fit: cover;
-        overflow: hidden;
-        object-position: center;
-        width: 300px;
-      }
-    }
-
-    .name-diplay {
-      grid-area: name;
-
-      [name='user-name-groups'] {
-        align-items: baseline;
-        align-self: end;
-        display: flex;
-
-        solid-multiple {
-          display: flex;
-          padding-left: 1.4rem;
-
-          hubl-groups-name {
-            @extend %tag-role;
-          }
-        }
-      }
-    }
-
-    .info-form {
-      grid-area: information; */
-
-      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
-      /*[name="account.picture"] {
-        margin-bottom: 1rem;
-      }
-
-      hubl-instruction {
-        margin-left: 1rem;
-
-        span {
-          color: $color-233-18-29;
-          font-weight: bold;
-        }
-
-        p {
-          margin-left: 1rem;
-        }
-      }*/
-      /* Fin commentaire sur upload photos */
-    /*}
-
-    [name^="inline-"] {
-      display: flex;
-      justify-content: flex-start;
-
-      >*:not(:last-child) {
-        margin-right: 3rem;
-      }
-    }
-  }
-}*/

src/styles/left-nav/_index.scss

+nav#main__menu {
+
+  @media (min-width: 768.01px) {
+    height: 100vh;
+  }
+
+  &.searching {
+    background-image: url('/images/magnify-white.svg');
+    background-color: var(--color-heading);
+    background-repeat: no-repeat;
+    background-position-x: right -20px;
+    background-position-y: 150px;
+    background-size: 80%;
+
+    @media (max-width: 768px) {
+      background-size: 60%;
+    }
+  }
+
+  .transparent-background {
+    background-color: transparent;
+
+    &.active[active] {
+      background-color: var(--color-third);
+    }
+
+    &.hover:hover:not([active]) {
+      background-color: #202B3C;
+    }
+
+    &.reverse {
+      background-color: var(--color-third);
+    }
+  }
+
+  .unread {
+    font-weight: bolder;
+  }
+
+  .badge {
+    float: right;
+    margin-right: 2px;
+  }
+
+  .icon {
+    padding: 3px;
+  }
+
+  .menu-search {
+    padding: 0;
+
+    form::before,
+    solid-form-placeholder-text::before {
+      display: none;
+    }
+
+    form {
+      display: flex;
+
+      solid-form-placeholder-text {
+        display: contents;
+      }
+    }
+
+    input {
+      background: transparent;
+      color: #D0D4DA;
+      margin-top: 0;
+      padding: 12px 13px;
+      height: 50px;
+
+      /* https://css-tricks.com/almanac/selectors/p/placeholder/ */
+      &::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: #D0D4DA;
+      }
+
+      &::-moz-placeholder {
+        /* Firefox 19+ */
+        color: #D0D4DA;
+      }
+
+      &:focus {
+        /*background: #202B3C;*/
+        color: white;
+      }
+    }
+
+    div>button {
+      background: transparent;
+      border: none;
+      color: #D0D4DA;
+      margin-top: 0 !important;
+      height: 100%;
+
+      @media (max-width: 768px) {
+        width: 20%;
+      }
+
+      &:hover::before {
+        color: white;
+      }
+    }
+  }
+
+  .menu-header {
+
+    /* Chevron animation */
+    .transform-up {
+      transform: rotateX(180deg);
+    }
+
+    .badge {
+      padding-top: 2px;
+      margin-right: 5px;
+    }
+
+    @media (min-width: 768.01px) {
+
+      &:not(:hover) .menu-options,
+      &:not(:hover) .menu-admin {
+        display: none;
+      }
+    }
+
+    .menu-options {
+      float: right;
+    }
+
+    .menu-admin {
+      position: absolute;
+      z-index: 3016;
+      left: 15%;
+      top: 36px;
+      text-align: end;
+      width: 80%;
+
+      @media (max-width: 768px) {
+        width: 100%;
+        left: 0;
+        height: 9vh;
+        top: 0;
+        text-align: center;
+        position: fixed;
+        top: 50px;
+        height: calc(100% - 50px);
+      }
+    }
+  }
+
+  .sub-menu {
+
+    /* Styles for the small icon */
+    .sub-menu-icon {
+      margin-left: 3px;
+      opacity: 0.8;
+      width: 12px;
+
+      >div {
+        line-height: 19px;
+      }
+    }
+
+    .sub-menu-name {
+      margin-right: 15px;
+      margin-left: 3px;
+      vertical-align: middle;
+      width: calc(75% - 15px);
+    }
+  }
+
+  /* Ellipsis */
+  .ellipsis {
+
+    orbit-menu-fix-url-circle,
+    orbit-menu-fix-url-project {
+      display: block;
+    }
+
+    .ellipsis-content,
+    .ellipsis-content>div {
+      display: block;
+      line-height: 19px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+
+      @media (max-width: 768px) {
+        display: block;
+      }
+    }
+  }
+
+  .empty {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 13px;
+    width: 87%;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #D7DBE0;
+    opacity: 0.2;
+  }
+
+
+  /* Header's general counter appear or disappear on click (JS animation) */
+  .menu-header>div:not(.transform-up)~.badge {
+    display: none;
+  }
+
+  .menu-header>div.transform-up~.badge {
+    display: block;
+  }
+
+  /* End */
+
+  /* The little cross icon on contacts' name appears or disapear + hover + styles */
+  .sub-menu__contacts>div>solid-display {
+    height: 28px;
+    display: block;
+
+    orbit-menu-contact-removed {
+      display: none;
+    }
+
+    &:hover {
+
+      orbit-menu-fix-url-contact {
+        display: inline-block;
+        width: 100%;
+      }
+
+      orbit-counter {
+        padding-right: 25px;
+      }
+
+      solid-set-default[name="message"] {
+        margin-right: 5px;
+        width: 75%;
+      }
+
+      orbit-menu-contact-removed {
+        width: 38px;
+        height: 27.75px;
+        text-align: right;
+        position: relative;
+        top: -28px;
+        display: block;
+        left: calc(100% - 44px);
+        padding-top: 5px;
+
+        solid-delete > button {
+          visibility: hidden;
+
+          &::before {
+            font-size: 18px;
+            color: white;
+            visibility: visible;
+            position: relative;
+            bottom: 1px;
+            margin-left: 6px;
+          }
+        }
+      }
+    }
+  }
+
+  /* End */
+
+  /* Modal to keep/remove a contact */
+  orbit-menu-contact-removed dialog {
+    background: white !important;
+    border: none;
+    padding: 60px 30px;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      width: 100vw;
+    }
+
+    p {
+      margin-bottom: 30px;
+      font-size: 16px;
+    }
+
+    div,
+    p {
+      background: white !important;
+    }
+
+    &::before,
+    p::before,
+    div::before,
+    button::before {
+      display: none;
+    }
+  }
+
+  /* End */
+
+  &.jsLeftMenu {
+    display: inline-flex;
+    flex-direction: column;
+
+    @media(max-width: 768px) {
+      display: none;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: none;
+
+    @media (max-width: 768px) {
+      display: flex;
+      bottom: 0;
+      box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+      width: 100%;
+      position: fixed;
+      right: 0;
+      top: 50px;
+      z-index: 3000;
+    }
+  }
+
+  /* Bottom image */
+  .navbar-bottom-image-container {
+    margin-top: auto;
+    padding: 4px;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+}

src/styles/members/_index.scss

+#members>div:first-of-type {
+  min-height: calc(100vh - 50px);
+}

src/styles/projects/_index.scss

+#admin-projects-create .form solid-multiple-form {
+    height: 100%;
+    button {
+        border: 1px solid var(--color-secondary);
+        text-transform: uppercase;
+        color: var(--color-secondary);
+        background-color: white;
+        font-weight: 700;
+        padding: 9px 20px;
+        font-size: 12px;
+        line-height: 14px;
+        border-radius: 16.5px;
+
+        @media (max-width: 768px) {
+            width: 100%;
+        }
+    }
+    button:hover {
+        background-color: var(--color-secondary);
+        color: white;
+    }
+}
+#projects-edit .edit-businessprovider form {
+    display: table-row;    
+    border-bottom: 1px solid #C9C8C8;
+    border-right: 1px solid #C9C8C8;
+    text-align: center;
+    .segment.table-cell {
+        border-bottom: 1px solid #C9C8C8;
+        border-right: 1px solid #C9C8C8;
+        height: 60px;
+        padding: 10px;
+    }
+    [type="submit"] {
+        margin: 19px auto;
+    }
+}
+#projects-information .display-businessprovider {
+    [name="name"]::after {
+        content: " - ";
+        margin-left: 5px;
+    }
+    [name="fee"]:after {
+        content: " %";
+    }
+    > div > solid-display:not(:first-child) [name="titlebusinessprovider"] {
+        display: none;
+    }
+}

src/styles/registering/_index.scss

+.index-community {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+
+  > div {
+    min-height: 75%;
+    margin-top: 100px;
+    padding-bottom: 70px;
+
+    @media (max-width: 768px) {
+      margin: 0;
+      min-height: 100%;
+    }
+
+    .community-logo {
+      max-width: 100%;
+      height: 100px;
+      margin-top: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .community-button {
+      height: 80px;
+      border-radius: 5px;
+    }
+
+    .community-button-flexed {
+      flex-basis: 33%;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    .community-button-flexed-large {
+      flex-basis: 66%;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    .community-flex-container {
+      display: flex;
+      flex-wrap: wrap;
+      text-align: center;
+      justify-content: center;
+      > div > solid-display {
+        display: contents;
+        > div > orbit-index-select-community {
+          display: contents;
+        }
+      }
+    }
+
+    .community-button-flex-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      > solid-display,
+      orbit-index-community-logo,
+      orbit-index-community-text {
+        display: contents;
+      }
+    }
+  }
+
+  solid-form-text-label,
+  solid-form-password-label,
+  orbit-index-input-type-email {
+    color: #5d7393;
+  }
+
+  label {
+    text-align: left;
+  }
+
+  [type="submit"] {
+    float: initial !important;
+  }
+}