feature: html + css - sub-menu added in user panel + styles

src/header.pug

@@ -1,55 +1,59 @@
-//-.segment.lg-three-quarter.float-left.align-middle
+.segment.lg-three-quarter.float-left.bg-color-heading
-  .logo
+  .logo.segment.lg-auto.float-left
     solid-link(next='dashboard')
       img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
     
-  span.tag.beta.reversed.color-primary(data-trans='header.beta')
+  span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')
 
-//-.segment.lg-auto.float-right
+.segment.lg-quarter.float-left.bg-color-third
-  .segment.lg-auto.float-left.margin-right.align-middle
+  .segment.bg-color-primary
     solid-notifications.notLoggedIn(
       nested-field="inbox"
       bind-user
     )
 
-  .segment.lg-auto.float-left.margin-left.text-bold.text-small.text-color-heading
+  .segment.lg-auto
-    details#user-controls.notLoggedIn.segment
+    details#user-controls.notLoggedIn
       summary.segment.padding(tabindex='0' role='button')
-        solid-display#user-controls__profile(
+        solid-display#user-controls__profile.user-thumb(
-          fields='first_name, account.picture'
+          fields='account.picture, content(name-and-icon(first_name, button))'
-          class-first_name='text-letter-spacing-larger'
+          class-account.picture='user-thumb-avatar user-thumb-avatar__size'
-          class-account.picture='avatar small margin-right-small'
+          class-content='user-thumb-content'
+          class-name-and-icon='user-thumb-content__name-and-icon'
+          class-first_name='name'
+          class-button='icon icon-arrow-down'
           widget-account.picture='hubl-user-avatar'
           bind-user
         )
       #user-controls__panel
-        nav(role="user's functionalities menu")
+        nav.bg-color-white.text-semibold.text-color-heading
           ul
             if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
-              li.border-bottom
+              li.border-bottom.border-color-grey
-                solid-link.segment.padding(next='profile' data-trans='header.myProfile')
+                solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
-            li.border-bottom
+            li.segment.padding-small.border-bottom.border-color-grey
-              solid-link.segment.padding(next='admin' data-trans='header.admin')
+              div(data-trans='header.admin')
-              ul
+              ul.text-normal
                 if (endpoints.users || (endpoints.get && endpoints.get.users))
-                  solid-route(name='admin-communities')
+                  solid-route.text-hover(name='admin-communities')
-                    li.segment.padding.text-normal
+                    li.segment.padding-top-small
-                      a.icon.icon-people.icon-color-third(data-trans='admin.menuRight.community')
+                      a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
                 if endpoints.circles || (endpoints.get && endpoints.get.circles)
-                  solid-route(name='admin-circles')
+                  solid-route.text-hover(name='admin-circles')
-                    li.segment.padding.text-normal
+                    li.segment.padding-top-small
-                      a.icon.icon-globe.icon-color-third(data-trans='admin.menuRight.circles')
+                      a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
                 if endpoints.projects || (endpoints.get && endpoints.get.projects)
-                  solid-route(name='admin-projects')
+                  solid-route.text-hover(name='admin-projects')
-                    li.segment.padding.text-normal
+                    li.segment.padding-top-small
-                      a.icon.icon-folder-alt.icon-color-third(data-trans='admin.menuRight.projects')
+                      a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
-            li.border-bottom
+            li.border-bottom.border-color-grey
-              solid-link.segment.padding(next='about' data-trans='header.about')
+              solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
-          button.segment.padding.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+            li
+              button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
 
   button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
 
-  button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
+  button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
 
   sib-auth(style='display:none!important')
     sib-auth-provider(
@@ -59,56 +63,8 @@
     )
 
 
-
-
-
-//-.header-left
-  .logo
-    solid-link(next='dashboard')
-      img(src=`${clientLogo || '/images/logo.webp'}` style=`max-height:${clientLogoHeight || '74px'}`)
-
-  span.beta-tag(data-trans='header.beta')
-
-//-solid-notifications.notLoggedIn(
-  nested-field="inbox"
-  bind-user
-//-)
-
 //- Templates for notifications from circles and from other users
 include views/notifications/message-circle.pug
 include views/notifications/message-private.pug
 
 include templates/hubl-user-avatar.pug
-
-//-details#user-controls.notLoggedIn
-  summary(tabindex='0' role='button')
-    solid-display#user-controls__profile(
-      fields='first_name, account.picture'
-      class-first_name='flex'
-      class-account.picture='avatar'
-      widget-account.picture='hubl-user-avatar'
-      bind-user
-    )
-  #user-controls__panel
-    nav(role="user's functionalities menu")
-      ul
-        if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
-          li
-            solid-link(next='profile' data-trans='header.myProfile')
-        li
-          solid-link(next='admin' data-trans='header.admin')
-        li
-          solid-link(next='about' data-trans='header.about')
-      button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
-
-//-button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
-
-//-button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
-
-//-sib-auth(style='display:none!important')
-  sib-auth-provider(
-    data-authority=`${authority}`
-    data-id=`${authorityName || "authority"}`
-    data-client-name=`${clientName || "Hubl"}`
-  )
-

src/index.pug

@@ -16,17 +16,26 @@ html(lang="en")
     link(rel="manifest" href="/manifest.webmanifest")
   body
 
+    header#header.segment.padding-left-large.padding-right-large.shadow-small
+      include header.pug
+    
+    nav#main__menu.segment.bg-color-heading.lg-quarter.float-left
+      p Hi!
+
+    main#content.segment.bg-color-third.lg-three-quarter.float-left
+      p Hello
+
     //- header#header.header.is-spaced(role='banner')
       include header.pug
 
-    header#header.segment.bg-color-white.shadow
+    //-header#header.segment.bg-color-white.shadow
       include header.pug
 
     //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
       include menu-left.pug
-    nav.segment.lg-quarter.bg-color-heading
+    //-nav.segment.lg-quarter.bg-color-heading
 
-    main.segment.lg-three-quarter.bg-color-third
+    //-main.segment.lg-three-quarter.bg-color-third
     //-main#viewport.segment.float-left.notLoggedIn
 
       if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)

src/interactions.html

@@ -47,19 +47,19 @@
   <solid-link class="button rounded reversed color-secondary icon-pencil icon-large bordered"></solid-link>
 
   <p>Borders</p>
-  <div class="border all-sides color-primary">
+  <div class="border-all-sides border-color-primary">
     <p>Salut</p>
   </div>
-  <div class="border left color-secondary">
+  <div class="border-left border-color-secondary">
     <p>Salut</p>
   </div>
-  <div class="border bottom color-third">
+  <div class="border-bottom border-color-third">
     <p>Salut</p>
   </div>
-  <div class="border right color-heading">
+  <div class="border-right border-color-heading">
     <p>Salut</p>
   </div>
-  <div class="border all-sides color-grey">
+  <div class="border-all-sides border-color-grey">
     <p>Salut</p>
   </div>
 

src/styles/hubl-app/_index.scss

@@ -0,0 +1,3 @@
+@import 'header/_index';
+@import 'left-nav/_index';
+@import 'content/_index';

src/styles/hubl-app/content/_index.scss

@@ -0,0 +1,3 @@
+main {
+  height: calc(100vh - 72px);
+}

src/styles/hubl-app/header/_index.scss

@@ -0,0 +1,310 @@
+header {
+  height: 72px;
+  position: fixed;
+  z-index: 999;
+
+  .logo {
+    img {
+      max-width: 200px;
+    }
+  }
+
+  /* Remove the disclosure triangle */
+  details {
+
+    summary {
+
+      /* on Firefox v.<69 */
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+      /* on Chrome */
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  /* End */
+
+  solid-notifications {
+    color: var(--color-primary);
+
+    @media($small) {
+      padding: 0;
+    }
+
+    .solid-notifications__container {
+      position: relative;
+
+      .solid-notifications__button {
+        @include icon('bell');
+        font-size: 2.5rem;
+
+        @media($large) {
+          font-size: 3rem;
+        }
+
+        &::before {
+          margin-left: 0;
+        }
+
+        img {
+          display: none;
+        }
+
+        .solid-notifications__counter {
+          left: 2rem;
+          position: absolute;
+          top: 1px;
+
+          @media($large) {
+            left: 2.1rem;
+            top: -3px;
+          }
+
+          span {
+            color: white;
+          }
+        }
+      }
+
+      .solid-notifications__triangle-back {
+        display: none;
+      }
+
+      .solid-notifications__triangle-shadow {
+        display: none;
+
+        @media($large) {
+          background: white;
+          display: block;
+          position: absolute;
+          left: auto;
+          right: -2.1em;
+          top: 5em;
+          transform: initial;
+          width: 0;
+          z-index: 4;
+
+          &::after {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            margin-left: -5em;
+            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;
+
+        @media($large) {
+          max-height: calc(100vh - 93px);
+          position: absolute;
+          left: auto;
+          right: -2.3em;
+          top: 3.95em;
+          width: 347px;
+        }
+
+        /* Custom scrollbar */
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: none;
+        scrollbar-width: thin;
+        scrollbar-color: #C9C8C8 #F1F1F1;
+
+        &::-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: 1.2rem 0 1.5rem;
+
+            &[data-read] {
+              opacity: 0.5;
+            }
+
+            .solid-notification__avatar {
+              align-items: center;
+              background: var(--color-grey);
+              display: flex;
+              height: 35px;
+              justify-content: center;
+              margin-left: 1.6rem;
+              margin-right: 1.4rem;
+              overflow: hidden;
+              position: relative;
+              vertical-align: middle;
+              width: 35px;
+
+              img {
+                background-color: var(--color-grey);
+                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: 1.3rem;
+                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-grey);
+                font-size: 1.2rem;
+                line-height: 1.7rem;
+                margin: 1.1rem 0 0;
+
+                @media($small) {
+                  max-width: 226px;
+                }
+
+                @media($large) {
+                  max-width: 256px;
+                }
+              }
+            }
+
+            .solid-notification__read {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  #user-controls {
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    summary {
+      cursor: pointer;
+      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+
+      &:focus {
+        background-color: transparent;
+        color: white;
+        outline: none;
+
+        @media($large) {
+          background-color: var(--color-heading);
+        }
+      }
+    }
+
+    #user-controls__panel {
+      height: 0;
+      position: absolute;
+      right: 0;
+      z-index: 1;
+      /* Quick fix for mobile version */
+      width: 215px;
+      top: 42px;
+
+      @media($large) {
+        width: 100%;
+        top: 72px;
+      }
+
+      >nav {
+        box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: auto;
+        width: 100%;
+
+        solid-link,
+        button {
+          display: block;
+        }
+
+        button {
+          width: 100%;
+          text-align: left;
+        }
+      }
+    }
+
+    &[open] {
+
+      #user-controls__profile {
+
+        div {
+
+          solid-display-value[name='button'] {
+            @include icon('close');
+          }
+        }
+      }
+    }
+  }
+}

src/styles/hubl-app/left-nav/_index.scss

@@ -0,0 +1,3 @@
+nav {
+  height: calc(100vh - 72px);
+}

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

@@ -2,3 +2,5 @@
 @import 'texts';
 @import 'borders';
 @import 'shadows';
+@import 'user-thumb';
+@import 'lists'

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

@@ -1,24 +1,24 @@
 .border {
   
-  &.all-sides {
+  &-all-sides {
     border: 1px solid;
   }
-  &.top {
+  &-top {
     border-top: 1px solid;
   }
-  &.right {
+  &-right {
     border-right: 1px solid;
   }
-  &.bottom {
+  &-bottom {
     border-bottom: 1px solid;
   }
-  &.left {
+  &-left {
     border-left: 1px solid;
   }
   &-thick {
     border-width: thick;
   }
-  &.color {
+  &-color {
     &-primary {
       border-color: var(--color-primary);
     }

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

@@ -0,0 +1,5 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

src/styles/hubl-framework/commons/user-thumb.scss

@@ -0,0 +1,73 @@
+.user-thumb {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+
+  div {
+    display: flex;
+    align-items: center;
+
+    .user-thumb-avatar {
+      background: #E4E8ED;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      height: 50px;
+      width: 50px;
+      margin-right: 16px;
+      border-radius: 50%;
+      overflow: hidden;
+
+      &.user-thumb-avatar__size {
+        height: 44px;
+        width: 44px;
+      }
+      >img,
+      object {
+        object-fit: cover;
+        object-position: center;
+      }
+      >img {
+        max-height: 100%;
+        max-width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      >object {
+        max-height: 40%;
+        max-width: 40%;
+      }
+    }
+
+    .user-thumb-content {
+      flex: 1 1 auto;
+
+      .user-thumb-content__name-and-icon {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .name {
+          font-size: 14px;
+          font-weight: 600;
+          flex: 0 1 auto;
+          letter-spacing: 0.38px;
+        }
+
+        .icon {
+          margin-left: 10px;
+
+          &::before {
+            font-size: 15px;
+          }
+        }
+      }
+
+      .user-thumb__sub-text {
+        color: red;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 input[type='text'],
 textarea {
+  background: #F6F6F6;
   border: none;
   outline: none;
   color: #636363;
@@ -15,10 +16,6 @@ textarea {
   }
 }
 
-.input-bg-grey input {
-  background: #F6F6F6;
-}
-
 .input-bg-white input {
   background: white;
 }

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

@@ -2,3 +2,6 @@
 @import 'sizes';
 @import 'positions';
 @import 'colors';
+@import 'custom-icons';
+@import 'material-design-icons';
+@import 'simple-line-icons';

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

@@ -0,0 +1,116 @@
+/* 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',
+  add-user: '\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/hubl-framework/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/hubl-framework/icons/positions.scss

@@ -3,11 +3,12 @@
   &.centered {
     margin: 0 auto;
   }
-
   &.margin-right-small::before {
     margin-right: 15px;
   }
-
+  &.margin-right-xsmall::before {
+    margin-right: 10px;
+  }
   &.margin-right-xxsmall::before {
     margin-right: 5px;
   }

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

@@ -0,0 +1,263 @@
+@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;
+
+  /* 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',
+  calendar: '\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/hubl-framework/links/_index.scss

@@ -1,3 +1,8 @@
+solid-link,
+solid-route {
+  cursor: pointer;
+}
+
 .backlink {
   color: #636363;
   text-decoration: underline;

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

@@ -1,29 +1,36 @@
+$small: "min-width: 640px";
+$medium: "min-width: 768px";
+$large: "min-width: 1024px";
+$xlarge: "min-width: 1280px";
+
 .segment {
 
-  &.lg {
+  @media($large) {
-    &-hidden {
+    &.lg {
-      display: none;
+      &-hidden {
-    }
+        display: none;
-    &-quarter {
+      }
-      width: 25%;
+      &-quarter {
-    }
+        width: 25%;
-    &-third {
+      }
-      width: 33.333%;
+      &-third {
-    }
+        width: 33.333%;
-    &-half {
+      }
-      width: 50%;
+      &-half {
-    }
+        width: 50%;
-    &-two-third {
+      }
-      width: 66.666%;
+      &-two-third {
-    }
+        width: 66.666%;
-    &-three-quarter {
+      }
-      width: 75%;
+      &-three-quarter {
-    }
+        width: 75%;
-    &-full {
+      }
-      width: 100%;
+      &-full {
-    }
+        width: 100%;
-    &-auto {
+      }
-      width: auto;
+      &-auto {
+        width: auto;
+      }
     }
   }
 }

src/styles/index.scss

@@ -1,2 +1,11 @@
+@charset "UTF-8";
+
+@import '../../node_modules/include-media/dist/include-media';
+@import '../../node_modules/normalize.css/normalize';
+
+
+:root {
+  font-size: 14px;
+}
 @import 'hubl-framework/_index';
 @import 'hubl-app/_index';