css: refactoring & fixing - day 1

src/styles/components/_index.scss

@@ -0,0 +1,8 @@
+@import 'form';
+@import 'content';
+@import 'filters';
+@import 'howto';
+@import 'header';
+@import 'menu-left';
+@import 'menu-right';
+@import 'skills';

src/styles/components/content.scss

@@ -0,0 +1,114 @@
+.backlink {
+  font-size: 1.5rem;
+  margin: 2rem 0 0 2rem;
+  @include icon('arrow-left-circle');
+  color: #3d4057;
+  text-decoration: underline;
+
+  &::before {
+    text-decoration: none;
+  }
+
+  &::before {
+    font-size: 2rem;
+    margin-right: 1rem;
+  }
+}
+
+sib-route,
+sib-link {
+  cursor: pointer;
+}
+
+// group
+
+#group-profile {
+  sib-display-div[name='name'] div {
+    @extend h1;
+  }
+
+  sib-display-div[name='label-description'] div {
+    @extend h2;
+  }
+}
+// chat
+
+.chat-view {
+  padding: 1.7rem;
+  position: relative;
+  z-index: 0;
+  @include window-style-modal();
+  height: calc(100vh - 104px);
+
+  > sib-chat {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+#member-profile {
+  @include media('width>tablet') {
+    div[name='header'] {
+      float: left;
+      width: 50%;
+    }
+  }
+
+  div[name='name'] {
+    @extend h1;
+
+    div {
+      display: inline-block;
+      margin-right: 0.7rem;
+    }
+  }
+
+  sib-link[next='member-chat'] {
+    border-style: solid;
+    display: flex;
+    border-radius: 25px;
+    border-style: solid;
+    border-color: $color-244-73-62;
+    color: $color-244-73-62;
+    padding: 1.7rem;
+    text-decoration:none;
+  }
+
+  div[name='pseudonym'] {
+    margin-top: -1.7rem;
+    margin-bottom: 1.7rem;
+  }
+
+  #member-info {
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+sib-form {
+
+  form > * {
+    margin-top: 0.85rem;
+  }
+
+  // button like
+  input[type='color'],
+  input[type='file'],
+  input[type='reset'],
+  input[type='submit'] {
+    display: inline-block;
+    padding: 0.85rem 2.55rem;
+    border: none;
+    border-radius: 100em;
+    font-weight: normal;
+  }
+
+  input[type='reset'] {
+    display: none;
+  }
+}

src/styles/components/filters.scss

@@ -0,0 +1,59 @@
+%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;
+  }
+}
+
+#offers-list, #members-list {
+  sib-form {
+    @extend %filters;
+  }
+}

src/styles/components/form.scss

@@ -0,0 +1,297 @@
+@include style-template-fieldset('fee');
+@include style-template-fieldset('customer');
+@include style-template-fieldset('team');
+
+.frame-form {
+  &.full-wide {
+    display: flex;
+    flex: 1;
+    font-size: 1.5rem;
+    flex-direction: column;
+    margin: 0 auto;
+    min-height: 100vh;
+    padding: 6.8rem 8.5rem 10.2rem;
+    background: $color-0-0-100;
+  }
+  
+  .form-view {
+    border-bottom: 1px solid $color-210-17-91;
+    padding-bottom: 2.55rem;
+  }
+
+  h1 {
+    color: $color-233-18-29;
+    font-weight: bold;
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  p.form-goal {
+    margin-bottom: 6.8rem;
+    text-align: center;
+  }
+
+  [name$='-text'] {
+    font-size: 1.5rem;
+    margin-bottom: 2em;
+  }
+
+  div[name^='block-'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  input {
+    -webkit-appearance: none;
+    align-items: center;
+    background: $color-222-57-95;
+    border: none;
+    color: $color-233-18-29;
+    display: inline-flex;
+    justify-content: flex-start;
+    line-height: 1.5;
+    vertical-align: top;
+  }
+  
+  sib-form-auto-completion,
+  sib-form-checkbox,
+  sib-form-dropdown,
+  sib-form-label-text,
+  sib-form-multiple-dropdown,
+  sib-form-number,
+  sib-form-textarea {
+    display: flex;
+    flex-direction: column;
+
+    > label {
+      color: $color-244-10-70;
+      font-weight: 600;
+      margin: 2em 0 0.5em;
+      text-transform: uppercase;
+    
+      > div {
+        padding-bottom: 1rem;
+      }
+    }
+
+    select,
+    textarea {
+      background: $color-222-57-95;
+      border: none;
+      color: $color-233-18-29;
+      line-height: 1.5;
+      width: 100%;
+      
+    }
+
+    select,
+    textarea {
+      padding: 1.7rem;
+    }
+
+    select {
+      margin-bottom: 1.7rem;
+    }
+  }
+
+  sib-form-auto-completion,
+  sib-form-checkbox,
+  sib-form-multiple-dropdown {
+
+    label {
+      color: $color-216-4-22;
+      font-weight: 600;
+      text-transform: initial;
+    }
+  }
+
+  sib-form-auto-completion {
+
+    div.choices__inner {
+      background-color: inherit;
+      border: none;
+      display: flex;
+      flex-direction: column-reverse;
+      padding-left: 0;
+
+      div.choices__list {
+        margin-top: 1.7rem;
+
+        div.choices__item {
+          /*@extend %skill;*/
+
+          button.choices__button {
+            border-left: 1px solid $color-43-100-50;
+            opacity: 1;
+            padding-left: 0;
+          }
+        }
+      }
+
+      input[type='text'].choices__input {
+        max-width: 27.2rem;
+        min-width: 27.2rem;
+      }
+    }
+  }
+
+  sib-form-checkbox {
+    flex-direction: row;
+
+    [type='checkbox'] {
+      cursor: pointer;
+      position: relative;
+      margin-top: 2em;
+      
+      &:before {
+        border: 2px solid $color-210-5-56; 
+        content: '';
+        height: 1rem;
+        left: 0;
+        margin-left: 1rem;
+        padding-bottom: 0.2rem;
+        position: absolute;
+        width: 1.2rem;
+        z-index: 1;
+      }
+      
+      &:checked {
+        &:before {
+          border: 2px solid $color-210-5-56; 
+          color: $color-244-73-62;
+          height: 1rem;
+          left: 0;
+          margin-left: 1rem;
+          padding-bottom: 0.2rem;
+          position: absolute;
+          width: 1.2rem;
+          z-index: 1;
+          @include mdi('check');
+        } 
+      }
+      
+      &:after {
+        background: $color-0-0-100;
+        content: '';
+        height: 1rem;
+        position: absolute;
+        width: 1rem;
+      }
+    }
+  }
+
+  sib-form-dropdown {
+
+    select {
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      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;
+    }
+  }
+
+  /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
+  
+  sib-form-multiple-dropdown {
+
+    button {
+      appearance: none;
+      background-color: $color-0-0-100;
+      border: 1px solid;
+      border-radius: 100%;
+      color: $color-244-73-62;
+      cursor: pointer;
+      font-size: 2.55rem;
+      height: 1em;
+      line-height: 0;
+      margin: 0.34rem;
+      padding: 0 0.04em 0.08em;
+      vertical-align: middle;
+      width: 1em;
+    }
+  }
+
+  sib-form-textarea {
+    align-items: stretch;
+  }
+
+  sib-multiple-form {
+
+    > label {
+      display: none;
+    }
+  }
+
+  input[type='submit'] {
+    margin-top: 6rem;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
+    float: right;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+}
+
+#project-create,
+#project-edit {
+
+  input,
+  textarea {
+    margin-bottom: 3.4rem;
+  }
+}
+
+.is-horizontal {
+  display: flex;
+}
+
+.field {
+  margin-right: 0.75rem;
+  max-width: 50%;
+}
+
+.is-expanded {
+  flex-grow: 1;
+}
+
+sib-multiple-form[name='members'] {
+
+  > div {
+    align-items: center;
+    display: flex;
+  }
+
+  > div:not(:nth-child(-n + 2)) {
+
+    label {
+      
+      > div {
+        display: none;
+      }
+    }
+  }
+
+  button {
+    appearance: none;
+    background-color: $color-0-0-100;
+    border: 1px solid;
+    border-radius: 100%;
+    color: $color-244-73-62;
+    cursor: pointer;
+    font-size: 2.55rem;
+    height: 1em;
+    line-height: 0;
+    margin: 0.34rem;
+    padding: 0 0.04em 0.08em;
+    vertical-align: middle;
+    width: 1em;
+
+    &::after {
+      content: Add;
+    }
+  }
+}

src/styles/components/header.scss

@@ -0,0 +1,206 @@
+
+#header {
+  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 {
+  cursor: pointer;
+
+  summary {
+
+    &::-moz-list-bullet {
+      list-style-type: none;
+    }
+
+    &::-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;
+  }
+}
+
+details#user-controls {
+
+  summary: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;
+      }
+    
+      img {
+        border-radius: 100%;
+        height: 4.8rem;
+        margin-right: 2rem;
+        object-fit: cover;
+        object-position: center;
+        width: 4.8rem;
+      }
+
+      sib-display-value[name='first_name'] {
+        @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;
+    
+    > 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: 208px;
+      
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        
+        li {
+          border-bottom: 1px solid $color-213-20-91;
+          margin-right: 0;
+          padding: 1.6rem 1.3rem;
+
+          a {
+            color: $color-213-4-50;
+            text-decoration: none;
+          }
+        }
+      }
+
+      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='first_name'] {
+          @include icon('close');
+
+          &::before {
+            margin-left: 1.5rem;
+          }
+        }
+      }
+    }
+  }
+}
+

src/styles/components/howto.scss

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,3 @@
+@import 'custom-icons';
+@import 'icons';
+@import 'material-design-icons';

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

@@ -0,0 +1,115 @@
+/* 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'
+);
+
+%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

@@ -0,0 +1,267 @@
+@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

@@ -0,0 +1,91 @@
+/* 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/menu-left.scss

@@ -0,0 +1,120 @@
+#navbar {
+  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 {
+      padding-left: 2.88rem;
+      
+      div {
+        color: $color-244-10-70;
+        cursor: pointer;
+        padding-bottom: 1.12rem;
+  
+        div[name='project'] {
+          display: flex;
+
+          sib-display-value {
+            display: block;
+          }
+  
+          sib-display-div[name='dash'] {
+            margin: 0 0.4em;
+          }
+        }
+      }
+    }
+
+    .divider {
+      height: 1px;
+      background-color: $color-213-13-86;
+    }
+  }
+}
+

src/styles/components/menu-right.scss

@@ -0,0 +1,113 @@
+#mainContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+
+
+  >div#project,
+  >div#circle {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: stretch;
+    overflow-x: hidden;
+    
+    .views-container {
+      flex: 1 0 0;
+      overflow-y: auto;
+    }
+
+    >div {
+      transition: all 0.5s;
+    }
+  }
+
+  >div {
+
+    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;
+          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.55rem 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 {
+              @include ci('information');
+            }
+          }
+        }
+      }
+
+      &.offsite-is-closed {
+        transform: translate(15.5rem);
+
+        & .jsOffsiteToggle::before {
+          transform: rotate(180deg);
+        }
+
+        &~.views-container {
+          margin-left: -15.5rem;
+          transform: translate(15.5rem);
+        }
+      }
+    }
+  }
+}

src/styles/components/skills.scss

@@ -0,0 +1,18 @@
+/* TEMPLATE SKILLS*/
+
+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;
+}