src/styles/base/_compat.scss

-%grid-layer {
-    display: grid;
-    font-size: 16px;
-    grid-template-columns: [start]auto[middle]25%[end];
-    grid-template-rows: [start]7em[middle]auto[end];
-}
-
-%flex-grid-layer {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
-
-%grid-layer-main {
-    @extend %flex-grid-layer;
-    grid-column-start: start;
-    grid-column-end: end;
-    grid-row-start: start;
-    grid-row-end: end;
-}
-
-%grid-layer-links {
-    @extend %flex-grid-layer;
-    grid-column-start: middle;
-    grid-column-end: end;
-    grid-row-start: start;
-    grid-row-end: middle;
-}
-
-%containerV {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
\ No newline at end of file

src/styles/base/form.scss

-.content-box {
-
-  &.with-form {
-
-    h1 {
-      color: $color-233-18-29;
-      font-weight: bold;
-      font-size: 2rem;
-      text-align: center;
-    }
-    
-    .fieldset {
-      border-bottom: 1px solid $color-221-51-90;
-      color: $color-233-18-29;
-      display: flex;
-      flex: 1 0 100%;
-      font-size: 1.8rem;
-      font-weight: 600;
-      padding-bottom: 1rem;
-    }
-
-    p.center {
-      margin: 0;
-      text-align: center;
-    }
-
-    [name$='-text'] {
-      font-size: 1.5rem;
-      margin-bottom: 2rem;
-    }
-
-    [name^='block-'] {
-      margin-bottom: 2.75rem;
-    }
-
-    form {
-      display: flex;
-      flex-direction: column;
-    }
-
-    sib-set-default {
-			clear: both;
-	    display: flex!important;
-			flex-wrap: wrap;
-			max-width: 100%;
-			
-			sib-form-label-text {
-				float: left;
-				width: 50%;
-			}
-		}
-
-    label {
-      display: flex;
-      flex-direction: column;
-
-      input:not([type='file']),
-      textarea {
-        -webkit-tap-highlight-color: $color-244-73-62;
-        background-color: $color-222-57-95;
-        box-sizing: border-box;
-        border: 2px solid $color-222-57-95;
-        color: $color-233-18-29;
-        /*flex: 1 1 0;  Problem on Firefox for input type date*/
-        line-height: 1;
-        min-width: 0;
-        padding: 1rem;
-      }
-
-      input:not([type="search"]):not([type="file"]),
-      textarea {
-        border: 2px solid $color-222-57-95;
-
-        &:focus,
-        &:active {
-          border-bottom: 2px solid $color-244-73-62;
-        }
-      }
-
-      textarea {
-        height: 100px;
-      }
-    }
-
-    sib-form[set-user-id-select] {
-
-      input[type="submit"] {
-        margin-left: 0;
-        margin-top: 0;
-      }
-
-      select {
-        display: none;
-      }
-    }
-
-    /* CLASSES Peut-être à sortir de .content-box */
-
-    .block.team-form>form { /* circle-profile */
-      display: flex;
-      flex-direction: row;
-
-      label {
-
-        >.ss-main {
-          font-weight: normal;
-          min-width: 35vw;
-          text-transform: none;
-
-          >.ss-single-selected {
-            align-items: center;
-            background-color: #ebeffa;
-            border: none;
-            border-radius: 0px;
-            display: flex;
-            justify-content: flex-end;
-            min-height: 4.2rem;
-            padding-left: 1.2rem;
-
-            .ss-arrow {
-              font-size: 1.8rem;
-              margin: 0 18px 0 0;
-
-              span {
-                border: solid $color-244-73-62;
-                border-width: 0 2px 2px 0;
-              }
-            }
-          }
-        }
-      }
-
-      >input[type='submit'] {
-        @extend
-          .button,
-          .btn-margin-left,
-          .text-bold,
-          .text-uppercase,
-          .button-blue,
-          .bordered;
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-    }
-
-		.form-container>form {
-		  margin-top: 2.7rem;
-		}
-
-		.form-label {
-		  /*flex: 1 1 auto;*/
-		  font-weight: 600;
-
-		  &.is-dark label {
-		    color: $color-216-4-22;
-		    margin-top: 3rem;
-
-		    &>*:nth-child(2) {
-		      margin-top: 0.8rem;
-		    }
-		  }
-
-		  &.is-light label {
-		    color: $color-244-10-70;
-		    margin-top: 1.8rem;
-		    text-transform: uppercase;
-
-		    &>*:nth-child(2) {
-		      margin-top: 0.8rem;
-		    }
-		  }
-		}
-
-		.is-full-width {
-		  flex: 1 1 100%;
-		}
-
-		.is-half-width {
-		  box-sizing: border-box;
-		  flex: 0 0 50%;
-
-		  &:nth-child(even) {
-		    padding-left: 1.7rem;
-		  }
-
-		  &:nth-child(odd) {
-		    padding-right: 1.7rem;
-		  }
-		}
-
-    /* WIDGETS SIB */
-
-    sib-form-auto-completion.member-select {
-      align-self: flex-end;
-
-      >label:first-of-type>div {
-        font-weight: 600;
-      }
-
-      .ss-single-selected {
-        background-color: $color-222-57-95;
-        border: none;
-        border-radius: 0px;
-        display: flex;
-        font-weight: normal;
-        margin-top: 0.8rem;
-        min-height: 4.4rem;
-        padding-left: 1rem;
-        text-transform: none;
-
-        .ss-arrow span {
-          border: solid $color-244-73-62;
-          border-width: 0 2px 2px 0;
-        }
-      }
-
-      .ss-content .ss-list .ss-option {
-        font-weight: normal;
-        text-transform: none;
-      }
-    }
-
-    sib-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: $color-213-4-50;
-        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;
-        }
-      }
-    }
-
-    sib-form-file {
-
-      label {
-        align-items: baseline;
-        clear: both;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        max-width: 100%;
-
-        div {
-          width: 100%;
-        }
-
-        input[type='text'] {
-          box-sizing: border-box;
-          flex: 0 0 50%;
-        }
-
-        input[type='file'] {
-          box-sizing: border-box;
-          flex: 0 0 20%;
-          color: $color-244-73-62;
-          cursor: pointer;
-          padding-left: 3rem;
-        }
-      }
-    }
-
-    sib-multiple-form {
-      margin-top: 1.8rem;
-    }
-
-    sib-multiple-select {
-
-      sib-form-auto-completion > label {
-        display: flex;
-        flex-direction: column;
-
-        .ss-main {
-          font-weight: normal;
-          margin-bottom: 7.8rem;
-          margin-top: 1.6rem;
-          max-width: 50vw;
-          text-transform: none;
-
-          .ss-multi-selected {
-            align-items: center;
-            background-color: $color-222-57-95;
-            border: none;
-            border-radius: 0px;
-            display: flex;
-            justify-content: flex-end;
-            min-height: 4.2rem;
-            padding-left: 1.2rem;
-
-            .ss-add {
-              font-size: 1.8rem;
-              margin: 0 18px 0 0;
-
-              span.ss-plus {
-                background: $color-244-73-62;
-
-                &::after {
-                  background: $color-244-73-62;
-                }
-              }
-            }
-
-            .ss-values {
-              background: transparent;
-              position: absolute;
-              top: 6rem;
-              width: 100%;
-
-              .ss-disabled {
-                color: transparent;
-                font-size: 1.4rem;
-                left: calc(1.2rem - 5px);
-                position: absolute;
-                top: calc(-6rem + 7px);
-
-                &::before {
-                  color: $color-213-4-50;
-                  content: "Select skills";
-                  font-weight: normal;
-                }
-              }
-
-              .ss-value {
-                @extend .skill;
-                display: flex;
-
-                .ss-value-delete {
-                  font-weight: normal;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    /* CUSTOM WIDGETS */
-
-    hd-member-form {
-      width: 100%;
-
-      form {
-        display: flex;
-        flex-direction: column;
-
-        [name='member-form__input'] {
-          margin-bottom: 1rem;
-        }
-
-        sib-form-auto-completion {
-          float: left;
-        }
-
-        input[type='submit'] {
-          background-color: transparent;
-          border: 1px solid $color-244-73-62;
-          color: $color-244-73-62;
-        }
-      }
-    }
-
-    [widget='hd-project-members'] {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-
-      &>label {
-        display: none;
-      }
-
-      &>div {
-        align-items: center;
-        border: 1px solid $color-43-100-50;
-        border-radius: 3px;
-        display: flex;
-        margin: 0 1.5rem 1.5rem 0;
-        padding: 2.2rem;
-
-        .member-info>div {
-          display: grid;
-          grid-template-areas: "avatar name"
-            "avatar role";
-          grid-column-gap: 15px;
-          margin-right: 15px;
-        }
-
-        &>button {
-          cursor: pointer;
-          background-color: transparent;
-          border: 1px solid $color-43-100-50;
-          border-radius: 50%;
-          color: $color-43-100-50;
-          height: 22px;
-          width: 22px;
-        }
-      }
-
-      &>button {
-        display: none;
-      }
-
-      sib-display-img {
-        grid-area: avatar;
-        align-items: center;
-        background-color: #e3e8ed;
-        border-radius: 50%;
-        display: flex;
-        height: 45px;
-        justify-content: center;
-        overflow: hidden;
-        width: 45px;
-
-        img {
-          height: 100%;
-          object-fit: cover;
-          object-position: center;
-          width: 100%;
-        }
-      }
-
-      sib-display-value:first-of-type {
-        font-weight: 600;
-        grid-area: name;
-      }
-
-      sib-display-value:last-of-type {
-        grid-area: role;
-      }
-    }
-  }
-}

src/styles/base/header.scss

-#header {
-  max-height: 83px;
-  height: 83px;
-  align-items: center;
-  background-color: $color-0-0-100;
-  color: $color-216-4-22;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
-  display: flex;
-  flex-shrink: 0;
-  // padding: 1.6rem 0.64rem;
-  position: relative;
-  z-index: 1;
-
-  > *:not(sib-widget) {
-    padding: 0 2.5rem;
-  }
-
-  #logo {
-    flex: 1 1 0;
-  }
-  
-  #search-bar {
-    position: relative;
-    
-    #search-input {
-      border-radius: 10em;
-      padding: 0.64rem 1.28rem;
-      border: 1px solid $color-215-9-73;
-      height: 3.8rem;
-      width: 28rem;
-      -webkit-appearance: textfield;
-    
-      & ~ #close-search-icon,
-      & ~ #search-icon {
-        color: $color-215-9-73;
-        display: block;
-        font-size: 1.7rem;
-        margin: auto;
-        position: absolute;
-        right: 3.7rem;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-text-stroke: 1px $color-215-9-73;
-      }
-    
-      & ~ #close-search-icon {
-        opacity: 0;
-      }
-    
-      &:focus {
-        & ~ #close-search-icon {
-          opacity: 1;
-        }
-    
-        & ~ #search-icon {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-  
-  details {
-    margin-right: 2.5rem;
-  
-    summary {
-  
-      &::-moz-list-bullet {
-        list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
-      }
-  
-      &::-webkit-details-marker {
-        display: none;
-      }
-    }
-  }
-  
-  details {
-    position: relative;
-  
-    .sib-notifications__button {
-      @include icon('bell');
-      font-size: 3rem;
-  
-      &::before {
-        margin-left: 0;
-      }
-  
-      img {
-        display: none;
-      }
-  
-      .sib-notifications__counter {
-        left: 2.1rem;
-        position: absolute;
-        top: -3px;
-      }
-    }
-  
-    .sib-notifications__list {
-      position: absolute;
-      right: 0;
-      top: 5.6rem;
-    }
-  }
-  
-  #user-controls {
-    padding: 0;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-    summary {
-      padding: 18px;
-      cursor: pointer;
-      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
-
-      &:focus {
-        background-color: $color-233-18-29;
-        color: $color-0-0-100;
-        outline: none;
-      }
-    }
-  
-    #user-controls__profile {
-      div {
-        display: flex;
-        flex-direction: row-reverse;
-        
-        > * {
-          vertical-align: middle;
-        }
-
-        hd-user-avatar {
-          align-items: center;
-          background-color: $color-213-20-91;
-          border-radius: 50%;
-          display: flex;
-          height: 4.8rem;
-          justify-content: center;
-          margin-right: 2rem;
-          overflow: hidden;
-          width: 4.8rem;
-        }
-
-        img {
-          background-color: white;
-          height: 100%;
-          object-fit: cover;
-          object-position: center;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
-  
-        sib-display-value[name='firstName'] {
-          @include icon('arrow-down');
-          align-items: center;
-          display: flex;
-          flex-direction: row-reverse;
-          font-size: 1.8rem;
-          font-weight: 600;
-  
-          &::before {
-            margin-left: 1.5rem;
-          }
-        }
-      }
-    }
-  
-    #user-controls__panel {
-      height: 0;
-      position: absolute;
-      right: 0;
-      z-index: 1;
-      width: 100%;
-      top: 83px;
-      
-      > nav {
-        background-color: $color-0-0-100;
-        box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 100%;
-        
-        ul {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          
-          li {
-  
-            sib-link {
-              color: $color-213-4-50;
-              display: block;
-              border-bottom: 1px solid $color-213-20-91;
-              margin-right: 0;
-              padding: 1.6rem 1.3rem;
-              &:hover {
-                color: $color-244-73-62;
-              }
-            }
-          }
-        }
-  
-        button {
-          color: $color-213-4-50;
-          padding: 1.6rem 1.3rem;
-          text-align: left;
-          width: 100%;
-        }
-      }
-    }
-  
-    &[open] {
-      background-color: $color-233-18-29;
-      color: $color-0-0-100;
-  
-      #user-controls__profile {
-  
-        div {
-  
-          sib-display-value[name='firstName'] {
-            @include icon('close');
-  
-            &::before {
-              margin-left: 1.5rem;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-

src/styles/base/main.scss

-$breakpoints: (phone: 480px,
-  tablet: 768px,
-  desktop: 1024px) !default;
-
-[hidden],
-.hidden {
-  display: none !important;
-}
-
-* {
-  outline: none;
-}
-
-:root {
-  font-size: 10px;
-  font-family: Open Sans, sans-serif;
-  --sib-notifications-theme: #{$color-46-100-50};
-
-  body {
-    background-color: $color-210-25-95;
-    color: $color-213-4-50;
-    font-size: 1.6rem;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: hidden;
-  }
-
-  main {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    max-width: 100%;
-    overflow: hidden;
-  }
-}
-
-img {
-  max-height: 100%;
-  max-width: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: $color-216-4-22;
-  font-weight: 600;
-  padding: 0;
-
-  /*span {
-    font-weight: 400;
-    padding-left: 0.85rem;
-
-    &:before {
-      content: '// ';
-    }
-  }*/
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.7rem;
-}
-
-h4 {
-  font-size: 1.2rem;
-}
-
-h5 {
-  font-size: 2rem;
-}
-
-%padding-main {
-  padding: 5rem;
-}
-
-%padding-block {
-  padding: 3.2rem;
-}
-
-.content-box {
-  @include window-style-modal();
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  margin: 2rem 1rem 5rem 2rem;
-
-  &.full-width {
-    background: $color-0-0-100;
-    flex: 1;
-    font-size: 1.6rem;
-    margin: 0 auto;
-    min-height: calc(100vh - 84px);
-  }
-
-  &.with-padding {
-    @extend %padding-main;
-  }
-}
-
-.content-box__header {
-  padding: 1.9rem 3rem;
-
-  div {
-    color: $color-233-18-29;
-    display: flex;
-    font-size: 2rem;
-
-    &>* {
-      align-self: center;
-    }
-
-    .name {
-      font-size: 2rem;
-      font-weight: bold;
-      margin: 1.1rem 0;
-    }
-  }
-}
-
-.drive {
-  width: 100%;
-  border: 0;
-}
-
-.content-box__header.with-description {
-  border-bottom: 1px solid $color-221-51-90;
-
-  div {
-
-    .name {
-      text-transform: uppercase;
-    }
-
-    .description {
-      color: $color-215-6-63;
-      font-size: 1.8rem;
-
-      &:not(:empty)::before {
-        color: $color-216-4-22;
-        content: '- ';
-        font-size: 2rem;
-        font-weight: bold;
-        margin-left: 0.60rem;
-      }
-    }
-  }
-}
-
-.backlink {
-  @include icon('arrow-left-circle');
-  color: $color-233-18-29;
-  font-size: 1.5rem;
-  margin: 2rem 0 0 2rem;
-  text-decoration: underline;
-
-  &::before {
-    font-size: 2rem;
-    margin-right: 1rem;
-    text-decoration: none;
-  }
-}
-
-.name {
-  color: $color-216-4-22;
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.username {
-
-  &::before {
-    content: '@';
-  }
-}
-
-.space-between {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 1.4rem;
-}
-
-.section {
-  border-bottom: 1px solid $color-221-51-90;
-  padding: 4.5rem;
-}
-
-// Compatibility layer for non-updated components
-@import 'compat';
-// Other base components
-@import 'form';
-@import 'header';
-@import 'menu-left';
-@import 'user-avatar';
-
-// Button global CSS
-sib-delete,
-sib-route,
-sib-link,
-button,
-input[type='submit'],
-a,
-.button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0;
-
-  &.button {
-    padding: 0.55rem 2.5rem;
-    border-radius: 100em;
-
-    *,
-    & {
-      font-size: 1.4rem;
-    }
-
-    &.btn-margin-left {
-      margin-left: 2.2rem;
-    }
-
-    &.small {
-
-      *,
-      & {
-        font-size: 1rem;
-      }
-    }
-
-    &.text-bold {
-
-      *,
-      & {
-        font-weight: bold;
-      }
-    }
-
-    &.text-uppercase {
-
-      *,
-      & {
-        text-transform: uppercase;
-      }
-    }
-
-    &.rounded {
-      border-radius: 50%;
-      padding: 0.5rem 1rem;
-    }
-
-    &.button-link {
-      border-radius: 100em;
-
-      *,
-      & {
-        text-decoration: underline;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &.with-icon::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
-    }
-
-    &.button-yellow {
-      background-color: white;
-
-      *,
-      & {
-        color: $color-43-100-50;
-      }
-
-      &.bordered {
-        border: 1px solid $color-43-100-50;
-      }
-
-      &:hover {
-        background-color: $color-43-100-50;
-
-        *,
-        & {
-          color: white;
-        }
-      }
-    }
-
-    &.button-blue {
-      background-color: white;
-
-      *,
-      & {
-        color: $color-244-73-62;
-      }
-
-      &.bordered {
-        border: 1px solid $color-244-73-62;
-      }
-
-      &:hover {
-        background-color: $color-244-73-62;
-
-        *,
-        & {
-          color: white;
-        }
-      }
-    }
-
-    &.button-dark {
-      color: $color-233-18-29;
-      background-color: white;
-
-      &.bordered {
-        border: 1px solid $color-233-18-29;
-      }
-
-      &:hover {
-        background-color: $color-233-18-29;
-        color: white;
-      }
-    }
-
-    &.test {
-      display: flex;
-    }
-
-    &.reversed {
-      &.button-yellow {
-        background-color: $color-43-100-50;
-
-        *,
-        & {
-          color: white;
-        }
-
-        &:hover {
-          background-color: white;
-          color: $color-43-100-50;
-
-          &.bordered {
-            border: 1px solid $color-43-100-50;
-          }
-        }
-      }
-
-      &.button-blue {
-        background-color: $color-244-73-62;
-
-        *,
-        & {
-          color: white;
-        }
-
-        &:hover {
-          background-color: white;
-
-          *,
-          & {
-            color: $color-244-73-62;
-          }
-
-          &.bordered {
-            border: 1px solid $color-244-73-62;
-          }
-        }
-      }
-
-      &.button-dark {
-        background-color: $color-233-18-29;
-
-        *,
-        & {
-          color: white;
-        }
-
-        &:hover {
-          background-color: white;
-
-          *,
-          & {
-            color: $color-233-18-29;
-          }
-
-          &.bordered {
-            border: 1px solid $color-233-18-29;
-          }
-        }
-      }
-    }
-  }
-}

src/styles/base/menu-left.scss

-#main__menu {
-  background-color: $color-233-18-29;
-  color: $color-0-0-100;
-  display: block;
-  overflow: auto;
-  flex: 0 0 16em;
-  transition: flex-basis 0.5s ease-in-out;
-
-  &.open {
-    transform: translateX(0);
-  }
-  
-  sib-router {
-  
-    .menu-wrapper {
-      &.is-closed {
-        .sub-menu {
-          display: none;
-        }
-        .menu-chevron {
-          transform: rotate(180deg);
-        }
-      }
-    }
-  
-    .menu {
-      cursor: pointer;
-      display: flex;
-      flex-direction: row-reverse;
-      font-weight: bold;
-      padding: 1.6rem;
-  
-      &[active] {
-        background-color: $color-46-100-67;
-        color: $color-233-18-29;
-  
-        .menu-icon:before {
-          background-color: $color-233-18-29;
-          color: $color-0-0-100;
-        }
-  
-        .menu-notification > sib-display > div:first-child {
-          background-color: $color-233-18-29;
-          color: $color-46-100-67;
-        }
-      }
-
-      .menu-icon {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        font-size: 1.7rem;
-        width: 3.2em;
-  
-        &:before {
-          border-radius: 100%;
-          height: 1.9em;
-          line-height: 1.9em;
-          width: 1.9em;
-        }
-      }
-      
-      .menu-label {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        flex-shrink: 0;
-        font-weight: 600;
-        justify-content: center;
-        letter-spacing: 0.017rem;
-        text-transform: uppercase;
-        width: 8em;
-      }
-
-      .menu-chevron {
-        align-items: center;
-        color: $color-244-10-70;
-        display: flex;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-        width: 2em;
-      }
-  
-      > sib-display {
-        display: block;
-      }
-    }
-
-    .sub-menu {
-      
-      sib-display>div {
-
-        .create {
-          color: $color-244-10-70;
-          margin: 1rem 1rem 2.2rem 3.2rem;
-        }
-      
-        &>sib-display {
-          
-          &:last-child>div {
-            margin-bottom: 2.2rem;
-          }
-        
-          >div {
-            color: $color-244-10-70;
-            cursor: pointer;
-            padding: 10px 10px 10px 32px;
-          }         
-    
-          sib-route[name='project'] {
-            display: flex;
-            flex: 3;
-
-            sib-display-value {
-              display: block;
-              height: 20px;
-            }
-    
-            sib-display-value[name='dash'] {
-              margin: 0 0.4em;
-            }
-          }
-        }
-
-        &>sib-display[active]>div {
-          background-color: $color-46-100-67;
-          color: $color-233-18-29;
-          font-weight: bold;
-        }
-      }
-
-      &.menu-notification {
-        > sib-display > div > sib-display > div {
-            display: flex;
-            sib-display-div {
-              flex: 3;
-            }
-            hd-counter {
-              height: 20px;
-              width: 20px;
-              margin-right: 1em;
-              div.counter:not([data-nb-unread="0"]) {
-                text-align: center;
-                display: block;
-                background-color: var(--sib-notifications-theme, gray);
-                border-radius: 50%;
-                font-size: 12px;
-                line-height: 20px;
-                width: 20px;
-                height: 20px;
-                padding-bottom: 0;
-                color: $color-216-4-22;
-              }
-            }
-          }
-        }
-      }
-
-    .divider {
-      height: 1px;
-      background-color: $color-213-13-86;
-    }
-  }
-}
-

src/styles/base/user-avatar.scss

-.project-profile-user-avatar {
-  align-self: center;
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 2;
-  display: inline;
-
-  * {
-    height: 100%;
-    width: 100%;
-  }
-
-  div {
-    background-color: $color-0-0-100;
-    border-radius: 50%;
-    height: 7vh;
-    overflow: hidden;
-    position: relative;
-    width: 7vh;
-
-    img {
-      height: 100%;
-      left: 0;
-      object-fit: cover;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-}
\ No newline at end of file

src/styles/chat/_index.scss

+.chat-view {
+  height: calc(100vh - 50px - 78px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px - 68px);
+  }
+}
+
+#messages {
+
+  @media (max-width: 768px) {
+
+    height: calc(100vh - 50px);
+
+    .messages-header {
+      display: flex;
+    }
+
+    solid-set-default[name="segment2"] {
+      font-size: 14px;
+      line-height: 16px;
+      width: 75%;
+    }
+
+    orbit-user-avatar {
+      height: 31px;
+      width: 31px;
+    }
+
+    solid-display-value[name="name"] {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 210px;
+    }
+
+    solid-display-value[name="hyphen"] {
+        display: none;
+    }
+
+    solid-link {
+      vertical-align: super;
+    }
+  }
+}

src/styles/components/_index.scss

-@import 'chat';
-@import 'comment.scss';
-@import 'filters';
-@import 'howto';
-@import 'sidebar';
-@import 'skills';
-@import 'user-role';
\ No newline at end of file

src/styles/components/chat.scss

-.chat-view {
-  padding: 0;
-  height: calc(100vh - 84px - 83px);
-  position: relative;
-  overflow: hidden;
-
-  > sib-chat {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: calc(100vh - 84px - 83px);
-    z-index: 0;
-  }
-}
-

src/styles/components/comment.scss

-#job-offers {
-
-  details {
-
-    summary {
-      color: $color-244-73-62;
-      cursor: pointer;
-      display: flex;
-      padding: 1.3rem 2.1rem;
-
-      &::-moz-list-bullet {
-        list-style-type: none;
-      }
-
-      &::-webkit-details-marker {
-        display: none;
-      }
-
-      span {
-        @include icon('speech');
-        font-weight: 600;
-
-        &::before {
-          margin: 0 1rem 0 0;
-        }
-      }
-
-      .icon-arrow-up {
-        margin-left: auto;
-      }
-    }
-
-    &[open] {
-
-      .icon-arrow-up {
-        transform: rotate(180deg);
-      }
-    }
-
-    sib-conversation.conversation {
-
-      .sib-conversation {
-        font-family: Open Sans;
-
-        [name='conversation-wrapper'] {
-          display: flex;
-
-          [name='conversation-avatar'] {
-            margin-right: 6px;
-
-            .avatar {
-              height: 35px;
-              width: 35px;
-            }
-          }
-
-          [name='conversation-content'] {
-
-            [name='author_user.name'] {
-              color: $color-0-0-29;
-              font-size: 1.5rem;
-            }
-
-            .conversation__messages {
-              display: none;
-            }
-          }
-        }
-
-        >sib-display.conversation>div>sib-display:first-child {
-          margin-bottom: 4.5rem;
-        }
-
-        sib-ac-checker {
-          border-top: 1px solid $color-210-17-91;
-
-          sib-form-textarea {
-
-            >label div {
-              color: $color-210-5-56;
-              font-size: 1.4rem;
-              margin-bottom: 1rem;
-              visibility: hidden;
-
-              &::before {
-                content: 'Add a comment';
-                visibility: visible;
-              }
-            }
-
-            textarea {
-              border: none;
-              font-size: 1.5rem;
-              resize: none;
-            }
-          }
-
-          input[type='submit'] {
-            border: 1px solid $color-244-73-62;
-            border-radius: 100em;
-            color: $color-244-73-62;
-            font-size: 1.3rem;
-            padding: 0.8rem 1.5rem;
-            text-transform: lowercase;
-
-            &:hover {
-              background-color: $color-244-73-62;
-              border: 1px solid $color-244-73-62;
-              color: white;
-            }
-          }
-        }
-
-        .conversation>div>sib-display,
-        .conversation-form {
-          border: none;
-          margin: 1rem 2.1rem;
-        }
-      }
-    }
-  }
-}

src/styles/components/filters.scss

-%filters {
-  display: grid;
-  grid-gap: 0px 15px;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 3.5em 3.5em;
-
-  label {
-    display: block;
-  }
-
-  input, select {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    border-style: none;
-    box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
-    color: $color-210-5-56;
-    font-size: 1.36rem;
-    line-height: 1.80;
-    margin-top: 1.36rem;
-    padding: 0.9rem;
-    width: 95%;
-  }
-
-  input[type="submit"] {
-    display: none;
-  }
-
-  select {
-    background: $color-0-0-100;
-    background-image: url("/images/chevron-down.png");
-    background-position: right 12px top 60%;
-    background-repeat: no-repeat;
-    background-size: 14px 9px;
-    box-sizing: border-box;
-    display: inline-block;
-    width: 100%;
-
-    > option:not(:first-child) {
-      color: black;
-    }
-  }
-
-  sib-form-label-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  sib-form-placeholder-dropdown[name="skills"] {
-    grid-column-end: 3;
-    grid-column-start: 1;
-  }
-}
-
-.job-board, #members-list {
-  sib-form[naked] {
-    @extend %filters;
-  }
-}

src/styles/components/howto.scss

-.howto {
-  padding: 0.85rem;
-  margin-bottom: 1.7rem;
-  margin-left: 8.5rem;
-  flex-basis: auto;
-  border-radius: 2em;
-
-  div[class*="icon-"] {
-    align-items: center;
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-
-
-

src/styles/components/icons/_index.scss

-@import 'custom-icons';
-@import 'icons';
-@import 'material-design-icons';
\ No newline at end of file

src/styles/components/icons/custom-icons.scss

-/* Custom icons */
-
-$ci-filename:         "custom-icons";
-$ci-font-name:        "custom-icons";
-$ci-font-family:      "custom-icons";
-$ci-font-weight:      "regular";
-$ci-font-path:        "../fonts" !default;
-$ci-css-prefix:       ci !default;
-$ci-version:          "tlnzh2" !default;
-
-@font-face {
-  font-family: '#{$ci-font-name}';
-  src:  url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}');
-  src:  url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'),
-    url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'),
-    url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'),
-    url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-$ci-icons: (
-  awareness: '\e900',
-  businessman: '\e901',
-  information: '\e902',
-  list-1: '\e903',
-  sale: '\e904',
-  armor: '\e905',
-  chat: '\e906',
-  list: '\e907',
-  network: '\e908',
-  offer: '\e909',
-  reaction: '\e90a',
-  add: '\e90b',
-  appointment: '\e90c',
-  desk: '\e90d',
-  file: '\e90e',
-  premium: '\e90f',
-  team: '\e910',
-  beer: '\e911',
-  networking: '\e912',
-  receipt: '\e913',
-  robot: '\e914',
-  team-1: '\e915',
-  croupier: '\e916',
-  learning: '\e917',
-  review: '\e918',
-  surf: '\e919',
-  document: '\e91a',
-  code: '\e91b',
-  hat: '\e91c',
-  beer1: '\e91d',
-  alien: '\e91e',
-  drawing: '\e91f',
-  feedback: '\e920',
-  globe: '\e921',
-  bubble-add: '\e922'
-);
-
-%ci,
-[class^='ci-']::before,
-[class*='ci-']::before {
-  display: inline-block;
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: '#{$ci-font-name}' !important;
-  font-size: 25px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  speak: none;
-  text-align: center;
-  text-decoration: inherit;
-  width: 1em;
-  
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* Better Font Rendering */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@function char($character-code) {
-  @if function-exists("selector-append") {
-    @return unquote("\"\\#{$character-code}\"");
-  }
-
-  @if "\\#{'x'}" == "\\x" {
-    @return str-slice("\x", 1, 1) + $character-code;
-  }
-  @else {
-    @return #{"\"\\"}#{$character-code + "\""};
-  }
-}
-
-@function ci($name) {
-  @if map-has-key($ci-icons, $name) == false {
-    @warn "Icon #{$name} not found.";
-    @return "";
-  }
-  @return char(map-get($ci-icons, $name));
-}
-
-@each $key, $value in $ci-icons {
-  .#{$ci-css-prefix}-#{$key}:before {
-    content: char($value);
-  }
-}
-
-@mixin ci($value) {
-  &:before {
-    @extend %ci;
-    @extend .#{$ci-css-prefix}-#{$value};
-  }
-}

src/styles/components/icons/icons.scss

-@font-face {
-  font-family: 'simple-line-icons';
-  src: url('../fonts/simple-line-icons.eot?23594131');
-  src: url('../fonts/simple-line-icons.eot?23594131#iefix')
-      format('embedded-opentype'),
-    url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
-    url('../fonts/simple-line-icons.woff?23594131') format('woff'),
-    url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
-    url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
-      format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'simple-line-icons';
-    src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg');
-  }
-}
-*/
-%icon,
-[class^='icon-']:before,
-[class*=' icon-']:before {
-  font-family: 'simple-line-icons';
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: 0.2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: 0.2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Uncomment for 3D effect */
-  // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
-}
-
-$icons: (
-  user-female: '\e000',
-  people: '\e001',
-  user-follow: '\e002',
-  user-following: '\e003',
-  user-unfollow: '\e004',
-  user: '\e005',
-  trophy: '\e006',
-  speedometer: '\e007',
-  social-youtube: '\e008',
-  social-twitter: '\e009',
-  social-tumblr: '\e00a',
-  social-facebook: '\e00b',
-  social-dropbox: '\e00c',
-  social-dribbble: '\e00d',
-  shield: '\e00e',
-  screen-tablet: '\e00f',
-  screen-smartphone: '\e010',
-  screen-desktop: '\e011',
-  plane: '\e012',
-  notebook: '\e013',
-  mustache: '\e014',
-  mouse: '\e015',
-  magnet: '\e016',
-  magic-wand: '\e017',
-  hourglass: '\e018',
-  graduation: '\e019',
-  ghost: '\e01a',
-  game-controller: '\e01b',
-  fire: '\e01c',
-  eyeglass: '\e01d',
-  envelope-open: '\e01e',
-  envelope-letter: '\e01f',
-  energy: '\e020',
-  emotsmile: '\e021',
-  disc: '\e022',
-  cursor-move: '\e023',
-  crop: '\e024',
-  credit-card: '\e025',
-  chemistry: '\e026',
-  bell: '\e027',
-  badge: '\e028',
-  anchor: '\e029',
-  wallet: '\e02a',
-  vector: '\e02b',
-  speech: '\e02c',
-  puzzle: '\e02d',
-  printer: '\e02e',
-  present: '\e02f',
-  playlist: '\e030',
-  pin: '\e031',
-  picture: '\e032',
-  map: '\e033',
-  layers: '\e034',
-  handbag: '\e035',
-  globe-alt: '\e036',
-  globe: '\e037',
-  frame: '\e038',
-  folder-alt: '\e039',
-  film: '\e03a',
-  feed: '\e03b',
-  earphones-alt: '\e03c',
-  earphones: '\e03d',
-  drop: '\e03e',
-  drawar: '\e03f',
-  docs: '\e040',
-  directions: '\e041',
-  direction: '\e042',
-  diamond: '\e043',
-  cup: '\e044',
-  compass: '\e045',
-  call-out: '\e046',
-  call-in: '\e047',
-  call-end: '\e048',
-  calculator: '\e049',
-  bubbles: '\e04a',
-  briefcase: '\e04b',
-  book-open: '\e04c',
-  basket-loaded: '\e04d',
-  basket: '\e04e',
-  bag: '\e04f',
-  action-undo: '\e050',
-  action-redo: '\e051',
-  wrench: '\e052',
-  umbrella: '\e053',
-  trash: '\e054',
-  tag: '\e055',
-  support: '\e056',
-  size-fullscreen: '\e057',
-  size-actual: '\e058',
-  shuffle: '\e059',
-  share-alt: '\e05a',
-  share: '\e05b',
-  rocket: '\e05c',
-  question: '\e05d',
-  pie-chart: '\e05e',
-  pencil: '\e05f',
-  note: '\e060',
-  music-tone-alt: '\e061',
-  music-tone: '\e062',
-  microphone: '\e063',
-  loop: '\e064',
-  logout: '\e065',
-  login: '\e066',
-  list: '\e067',
-  like: '\e068',
-  home: '\e069',
-  grid: '\e06a',
-  graph: '\e06b',
-  equalizer: '\e06c',
-  dislike: '\e06d',
-  cursor: '\e06e',
-  control-start: '\e06f',
-  control-rewind: '\e070',
-  control-play: '\e071',
-  control-pause: '\e072',
-  control-forward: '\e073',
-  control-end: '\e074',
-  calender: '\e075',
-  bulb: '\e076',
-  chart: '\e077',
-  arrow-up-circle: '\e078',
-  arrow-right-circle: '\e079',
-  arrow-left-circle: '\e07a',
-  arrow-down-circle: '\e07b',
-  ban: '\e07c',
-  bubble: '\e07d',
-  camrecorder: '\e07e',
-  camera: '\e07f',
-  check: '\e080',
-  clock: '\e081',
-  close: '\e082',
-  cloud-download: '\e083',
-  cloud-upload: '\e084',
-  doc: '\e085',
-  envelope: '\e086',
-  eye: '\e087',
-  flag: '\e088',
-  folder: '\e089',
-  heart: '\e08a',
-  info: '\e08b',
-  key: '\e08c',
-  link: '\e08d',
-  lock: '\e08e',
-  lock-open: '\e08f',
-  magnifier: '\e090',
-  magnifier-add: '\e091',
-  magnifier-remove: '\e092',
-  paper-clip: '\e093',
-  paper-plane: '\e094',
-  plus: '\e095',
-  location-pin: '\e096',
-  power: '\e097',
-  refresh: '\e098',
-  reload: '\e099',
-  settings: '\e09a',
-  star: '\e09b',
-  symble-female: '\e09c',
-  symbol-male: '\e09d',
-  target: '\e09e',
-  volume-1: '\e09f',
-  volume-2: '\e0a0',
-  volume-off: '\e0a1',
-  phone: '\e600',
-  menu: '\e601',
-  options-vertical: '\e602',
-  options: '\e603',
-  arrow-down: '\e604',
-  arrow-left: '\e605',
-  arrow-right: '\e606',
-  arrow-up: '\e607',
-  paypal: '\e608',
-  social-instagram: '\e609',
-  social-linkedin: '\e60a',
-  social-pintarest: '\e60b',
-  social-github: '\e60c',
-  social-google: '\e60d',
-  social-reddit: '\e60e',
-  social-skype: '\e60f',
-  social-behance: '\e610',
-  social-foursqare: '\e611',
-  social-soundcloud: '\e612',
-  social-spotify: '\e613',
-  social-stumbleupon: '\e614',
-  minus: '\e615',
-  organization: '\e616',
-  exclamation: '\e617',
-  social-vkontakte: '\e618',
-  event: '\e619',
-  social-steam: '\e620',
-  idea:'\e076'
-);
-
-
-@each $name, $code in $icons {
-  .icon-#{$name} {
-    &:before {
-      content: $code;
-    }
-  }
-}
-@mixin icon($code) {
-  &:before {
-    @extend %icon;
-    @extend .icon-#{$code};
-  }
-}

src/styles/components/icons/material-design-icons.scss

-/* MaterialDesignIcons.com */
-
-$mdi-filename:         "material-design-icons";
-$mdi-font-name:        "material-design-icons";
-$mdi-font-family:      "material-design-icons";
-$mdi-font-weight:      "regular";
-$mdi-font-path:        "../fonts" !default;
-$mdi-css-prefix:       mdi !default;
-$mdi-version:          "3.3.92" !default;
-
-@font-face {
-  font-family: '#{$mdi-font-name}';
-  src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
-  src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-$mdi-icons: (
-  account-outline: '\F013',
-  atom: '\F767',
-  cellphone-iphone: '\F120',
-  check: '\F12C',
-  email-outline: '\F1F0',
-  link-variant: '\F339'
-);
-
-%mdi,
-[class^='mdi-']::before,
-[class*='mdi-']::before {
-  display: inline-block;
-  font-family: '#{$mdi-font-name}' !important;
-  font-size: 25px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 0.5em;
-  margin-left: -0.15em;
-  text-align: center;
-  text-decoration: inherit;
-  width: 1em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-}
-
-@function char($character-code) {
-  @if function-exists("selector-append") {
-    @return unquote("\"\\#{$character-code}\"");
-  }
-
-  @if "\\#{'x'}" == "\\x" {
-    @return str-slice("\x", 1, 1) + $character-code;
-  }
-  @else {
-    @return #{"\"\\"}#{$character-code + "\""};
-  }
-}
-
-@function mdi($name) {
-  @if map-has-key($mdi-icons, $name) == false {
-    @warn "Icon #{$name} not found.";
-    @return "";
-  }
-  @return char(map-get($mdi-icons, $name));
-}
-
-@each $key, $value in $mdi-icons {
-  .#{$mdi-css-prefix}-#{$key}:before {
-    content: char($value);
-  }
-}
-
-@mixin mdi($value) {
-  &:before {
-    @extend %mdi;
-    @extend .#{$mdi-css-prefix}-#{$value};
-  }
-}
-
-
-.#{$mdi-css-prefix}-blank:before {
-  content: "\F68C";
-  visibility: hidden;
-}

src/styles/components/sidebar.scss

-.no-sidebar {
-  flex: 1;
-  @extend %padding-main;
-}
-
-.with-sidebar {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  overflow-x: hidden;
-
-  .views-container {
-    flex: 1 0 0;
-    overflow-y: auto;
-    -webkit-backface-visibility: hidden;
-
-    &.sidebar-is-closed {
-      margin-left: -15.5rem;
-      transform: translate(15.5rem);
-    }
-  }
-
-  >div {
-    transition: all 0.5s;
-  }
-
-  nav {
-    transition: all 0.5s;
-
-    >sib-router {
-      background-color: $color-222-52-90;
-      color: $color-233-18-29;
-      flex: 0 0 auto;
-      font-weight: 600;
-
-      >ul {
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        list-style: none;
-        margin: 0;
-        padding-left: 0;
-
-        li {
-          align-items: center;
-          border-bottom: 1px solid $color-229-25-79;
-          display: flex;
-          margin: 0;
-          padding: 2.15rem 2.55rem;
-          position: relative;
-          width: 12em;
-
-          &::before {
-            float: left;
-            font-size: 4rem;
-            margin-left: 0;
-            margin-right: 2.55rem;
-          }
-        }
-
-        >li {
-          @include icon('arrow-right-circle');
-        }
-
-        >sib-route {
-
-          &[active] {
-            background-color: $color-233-18-29;
-            color: $color-46-100-67;
-            display: inline-block;
-          }
-
-          &[name*='circle'],
-          &[name^='project'] {
-
-            >li::before {
-              font-size: 4rem;
-            }
-          }
-
-          &[name$='chat']>li {
-            @include ci('chat');
-          }
-
-          &[name$='create']>li {
-            @include ci('offer');
-          }
-
-          &[name$='edit']>li {
-            @include ci('list');
-          }
-
-          &[name$='profile']>li, &[name$='information']>li  {
-            @include ci('information');
-          }
-
-          &[name$='drive']>li {
-            @include ci('file');
-          }
-
-          &[name='admin-circles']>li {
-            @include ci('bubble-add');
-          }
-        }
-      }
-    }
-
-    &.offsite-is-closed {
-      transform: translate(15.5rem);
-
-      & .jsOffsiteToggle::before {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
\ No newline at end of file

src/styles/components/skills.scss

-sib-multiple[name*='skills'] {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.skill {
-  background-color: $color-43-100-50;
-  border: 1px solid $color-43-100-50;
-  border-radius: 2em;
-  color: $color-0-0-100;
-  display: block;
-  font-size: 1.4rem;
-  font-weight: bold;
-  margin: 0.4rem 1rem 0.4rem 0;
-  padding: 0.5rem 2rem;
-}
\ No newline at end of file

src/styles/components/user-role.scss

-%user-role {
-    border: 1px solid $color-45-95-54;
-    border-radius: 3px;
-    color: $color-210-4-50;
-    font-size: 1.4rem;
-    font-weight: 400;
-    margin-right: 0.4rem;
-    padding: 0.2rem 0.98rem;
-  }
\ No newline at end of file

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;
+  }
+}