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';
-
-div#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/project/index';
-    @import 'layout/circle/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/circle/_index.scss

-@import 'circle-profile';
-@import 'circle-admin';

src/styles/layout/circle/circle-admin.scss

-.admin-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 5rem;
-
-  .admin-header__title {
-    @extend h3;
-  }
-}
\ No newline at end of file

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

-#circle-information {
-
-  .box-button {
-    display: flex;
-    justify-content: flex-end;
-  }
-}

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;
-}
-
-sib-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"],
-        sib-display-link-event .mdi::before {
-            color:  $color-357-67-45;
-        }
-        .event-place-name,
-        .nextevent-startdate,
-        sib-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;
-            }
-            sib-form sib-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;
-            }
-            sib-display-location-events {
-                padding: 5px;
-            }
-        }
-        #eventdetail {
-            [name="name"] {
-                font-family: "RefrigeratorDelxW01Bold";
-                font-size: 3.2rem;
-                line-height: 3.8rem;
-                color: $color-203-87-19;
-            }
-            sib-display div .event-type {
-                width: max-content;
-                padding: 5px 20px; 
-            }
-            [name="longDescription"] p {
-                font-size: 1.6rem;
-                line-height: 2.6rem;
-            }
-            sib-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;
-}
-
-sib-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;
-
-    >sib-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;
-      }
-
-      >sib-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(sib-action) {
-              margin: 0.25em;
-            }
-
-            [name='author.first_name'] {
-              color: $color-0-0-29;
-              font-weight: 600;
-            }
-
-            sib-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;
-
-            >sib-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;
-            }
-          }
-        }
-
-        .sib-conversation,
-        .conversation > div {
-          display: flex;
-          flex-direction: column-reverse;
-        }
-
-        [name="dateCreated"] {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-sib-action[name='edit'] {
-  margin-left: auto;
-  color: $color-215-6-63;
-
-  &>sib-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 {
-
-      sib-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;
-
-        sib-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;
-          }
-        }
-
-        sib-set-default[name='member-profile'] {
-          align-items: baseline;
-          align-self: end;
-          display: flex;
-          grid-area: name;
-
-          >sib-multiple[name$='groups'] {
-            display: flex;
-            padding-left: 1.4rem;
-          }
-        }
-
-        sib-display-value[name='profile.bio'] {
-          grid-area: bio;
-        }
-
-        sib-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;
-            }
-          }
-        }
-
-        sib-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 {
-
-  sib-multiple[name^='user.'],
-  >member-info>div,
-  >sib-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;
-      }
-    }
-
-    &>sib-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);
-      }
-
-      &>sib-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;
-        }
-
-        sib-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%;
-          }
-        }
-
-        sib-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;
-          }
-
-          sib-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;
-            }
-          }
-        }
-
-        sib-set-default[name='infos'] {
-          padding: 0.4rem 2rem 3.7rem;
-          @extend %member-info;
-
-          sib-multiple[name='skills'] {
-            margin: 1.6rem 0;
-          }
-        }
-      }
-    }
-  }
-}*/

src/styles/layout/project/_index.scss

-@import 'project-profile';

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

-#project-profile {
-
-  .button-question__position {
-    position: relative;
-    bottom: 5px;
-  }
-
-  .button-question__color {
-    color: var(--color-secondary);
-  }
-
-  .customer-box {
-    display: flex;
-    margin: 1.6rem 0;
-
-    >* {
-      border: 1px solid var(--color-grey-8);
-      flex: 0 1 50%;
-      padding: 1.7rem 2rem;
-
-      &:first-child {
-
-        li:last-child {
-          margin-top: 3rem;
-
-          p {
-            margin-top: 0.8rem;
-          }
-        }
-      }
-
-      &:last-child {
-        border-left: none;
-
-        li {
-          margin-bottom: 1.5rem;
-        }
-      }
-    }
-  }
-
-  .customer-logo {
-    box-sizing: border-box;
-    display: flex;
-    height: 8.5vh;
-    justify-content: flex-end;
-    margin-top: 20px;
-    text-align: end;
-    width: 15vw;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-
-    li {
-      margin-bottom: 0.5em;
-
-      span::before {
-        color: var(--color-primary);
-        font-size: 2.2rem;
-        margin: 0 1rem 0 0;
-      }
-
-      span {
-        font-weight: bold;
-
-        &.link-color {
-          color: var(--color-complementary);
-        }
-
-        &.norm-weight {
-          font-weight: normal;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file

src/styles/layout/user/_index.scss

-@import 'user-profile';
-@import 'admin-users';

src/styles/layout/user/admin-users.scss

-/* Fix. Could disappear when we can add .class on set fields */
-sib-set-default[name='cell-1'] {
-  @extend .w75;
-  @extend .cell;
-  @extend .border;
-}
\ No newline at end of file