style

src/dependencies.pug

@@ -3,7 +3,7 @@
 script(src="/lib/webcomponentsjs/webcomponents-loader.js")
 //- script(src="lib/html-imports.js")
 
-script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
+//- script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
 script(src="/scripts/index.js")
 
 // Stylesheets
@@ -20,7 +20,7 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6
 //- local
 link(rel='import', href='/lib/sib-core/sib-display.html')
 link(rel='import', href='/lib/sib-router/sib-router.html')
-link(rel='import', href='/lib/sib-chat/sib-chat.html')
+//- link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
   link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")

src/menu.pug

@@ -4,12 +4,12 @@ div
       div(hidden)
       div#menu-items
         sib-route(name='members')
-          div.icon-people Membres
+          div.icon-people Members
         sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
         sib-route(name='job-offers')
           div.icon-briefcase Job offers
         div
-          div.icon-folder-alt Projets
+          div.icon-folder-alt Projects
           sib-display(
             data-src=`${sdn}/projects/`,
             data-fields='name',

src/page-group-edit.pug

@@ -1,5 +1,5 @@
 #group-edit
-  sib-form(
+  sib-form.block(
     range-owner=`${sdn}/members/`,
     widget-members='sib-form-multiple-dropdown',
     range-members=`${sdn}/members/`,

src/page-member-edit.pug

@@ -18,7 +18,7 @@
 label.d-none(for='avatar-input')
   img#avatar-preview(src='', style='width: 100%;')
 input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
-sib-form.edit-form(
+sib-form.edit-form.block(
   data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
   widget-user='hdapp-usereditinfo',
   range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',

src/page-project-edit.pug

@@ -1,5 +1,5 @@
 #project-edit
-  sib-form(
+  sib-form.block(
     range-client=`${sdn}/clients/`,
     widget-team='sib-form-multiple-dropdown',
     range-team=`${sdn}/members/`,

src/styles/content.scss

@@ -118,3 +118,11 @@ sib-display#member-info,
     grid-gap: 1em;
   }
 }
+
+
+// projects
+#project-profile {
+  [name="title"]{
+    
+  }
+}

src/styles/form.scss

@@ -1,6 +1,8 @@
 //button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
 
-
+sib-form.block>form>*{
+  display: block;
+}
 sib-form{
   form{
     margin: -.5em;

src/styles/icons.scss

@@ -250,6 +250,7 @@ $icons: (
   social-steam: '\e620',
 );
 
+
 @each $name, $code in $icons {
   .icon-#{$name} {
     &:before {

src/styles/main.scss

@@ -99,7 +99,7 @@ h3 {
   flex: 1 1 0px;
 }
 
-.limiter{
+.limiter {
   display: block;
   max-width: 650px;
 }
@@ -110,21 +110,37 @@ h3 {
   flex-direction: row-reverse;
   align-items: flex-start;
   > sib-router {
+    font-family: monospace;
+    color: $color-black;
     display: block;
-    background-color: #ccc;
+    background-color: $color-grey-light2;
     sib-route {
       display: block;
+      cursor: pointer;
       > div {
         position: relative;
-        padding: 1em 2em;
-        border-bottom: 1px solid #888;
+        padding: 1.5em 3em;
+        border-bottom: 1px solid $color-grey;
+      }
+      &:hover {
+        background-color: $color-grey;
       }
       &[active] {
         font-weight: bold;
+        background-color: $color-black;
+        color: $color-yellow;
         > div:before {
-          content: '<';
-          position: absolute;
+          opacity: 1;
           transform: translateX(-150%);
+          transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+      }
+      > div {
+        @include icon(arrow-left);
+        &:before {
+          position: absolute;
+          transform: translateX(-50%);
+          opacity: 0;
         }
       }
     }
@@ -170,6 +186,11 @@ h3 {
   }
 }
 
+sib-route,
+sib-trigger {
+  cursor: pointer;
+}
+
 sib-trigger.back {
   display: block;
   @include icon('arrow-left');

src/styles/variables.scss

@@ -2,6 +2,7 @@
 $color-white: #fff;
 $color-black: #36383b;
 $color-grey: #898f95;
+$color-grey-light2: #d8d8d8;
 $color-grey-light: #f0f3f6;
 
 $color-yellow: #ffb700;
@@ -11,6 +12,11 @@ $color-yellow-light: #ffd759;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
 }
 
+%cadre {
+  @extend %shadow;
+  background-color: $color-white;
+}
+
 $breakpoints: (
   phone: 480px,
   tablet: 768px,