ui : job-offers & members page update

src/styles/content.scss

@@ -1,9 +1,13 @@
 // job offers
-.new-job-offer {
-  @extend %button;
-  text-transform: uppercase;
-  float: right;
-}
+// .new-job-offer {
+//   @extend %button;
+//   text-transform: uppercase;
+//   margin-left: 1em;
+//   margin-bottom: 1em
+//   //float: right;
+// }
+
+
 #offers-list {
   > div {
     > sib-display {
@@ -198,8 +202,8 @@ sib-display#member-info,
   hdapp-hyperlink {
     display: block;
     @include icon('link');
-  }  
-  
+  }
+
   sib-display-div[name$='foaf:homepage'] * {
     @include icon('link');
   }
@@ -280,6 +284,61 @@ hdapp-available {
     }
   }
 }
+
+
+.right-link{
+  padding: 0.5em;
+  margin-bottom: 1em;
+  margin-left: 1em;
+  flex-basis: content;
+  border-radius: 2em;
+  sib-trigger{
+    padding-left: 1em;
+  }
+}
+
+.how-link{
+  @extend .right-link;
+  background-color: $color-white;
+  color: $color-black;
+  .icon-idea{
+    background-color: $color-yellow-light;
+    border-radius :100%;
+    flex-shrink: 0;
+    flex-grow: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 1.8em;
+    height: 1.8em;
+  }
+  sib-trigger{
+    padding-left: 1em;
+    width: 12em;
+  }
+}
+
+.action-link{
+  @extend .right-link;
+  background-color: $color-yellow;
+  color: $color-white;
+  font-weight: bold;
+  text-transform: uppercase;
+  .icon-plus{
+    flex-shrink: 0;
+    flex-grow: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    &:before {
+      font-size: 1.3em;
+    }
+  }
+}
+
+
+
 /*
 label {
   @extend h2;

src/styles/icons.scss

@@ -248,6 +248,7 @@ $icons: (
   social-vkontakte: '\e618',
   event: '\e619',
   social-steam: '\e620',
+  idea:'\e076'
 );
 
 

src/styles/main.scss

@@ -5,9 +5,9 @@
 }
 
 *,
-*::before,
-*::after {
-//  box-sizing: inherit;
+*::after,
+*::before {
+  //  box-sizing: inherit;
 }
 
 html {
@@ -17,9 +17,6 @@ html {
   background-color: $color-grey-light;
   color: $color-grey;
 }
-
-
-
 // body {
 //   height: 100%;
 //   display:flex;
@@ -36,9 +33,11 @@ h6 {
   font-weight: 600;
   padding: 0;
   margin: 0.67em 0;
+
   span {
     font-weight: 400;
     padding-left: 0.5em;
+
     &:before {
       content: '// ';
     }
@@ -48,12 +47,15 @@ h6 {
 h1 {
   font-size: 1.24em;
 }
+
 h2 {
   font-size: 1.04em;
 }
+
 h3 {
-  font-size: .84em;
+  font-size: 0.84em;
 }
+
 h4 {
   font-size: 0.68em;
 }
@@ -67,13 +69,12 @@ h4 {
   padding: 1em;
 }
 
-
 #header {
   background-color: $color-white;
   color: $color-black;
   //position: relative;
   //@include border-shadow(bottom);
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
   border: solid $color-white;
   border-width: 1px 0;
   display: flex;
@@ -82,6 +83,7 @@ h4 {
   flex-shrink: 0;
   align-items: center;
   padding: 1em 0;
+
   > * {
     padding: 0 1rem;
   }
@@ -97,7 +99,7 @@ h4 {
 }
 
 #logo {
-  flex: 1 1 0px;
+  flex: 1 1 0;
 }
 
 #notifications-button {
@@ -107,18 +109,18 @@ h4 {
   list-style-type: none;
 }
 
-#notifications{
+#notifications {
   position: absolute;
   right: 0;
   bottom: 0;
   height: 0;
   left: 0;
   z-index: 1;
-  >div{
+
+  > div {
     position: absolute;
     top: 0;
     right: 0;
-
   }
 }
 
@@ -126,6 +128,7 @@ h4 {
   > * {
     vertical-align: middle;
   }
+
   img {
     margin-right: 0.5em;
     width: 43px;
@@ -136,11 +139,13 @@ h4 {
   }
 }
 
-
-.layer{
-  position:absolute;
-  bottom:0;top:0;right:0;left:0;
-  display:flex;
+.layer {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
   flex-direction: column;
   align-items: stretch;
   overflow-x: hidden;
@@ -164,39 +169,46 @@ h4 {
   max-width: 650px;
 }
 /* sub menu (right menu) */
-
 #mainContainer > div {
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-start;
+
   > sib-router {
     font-family: monospace;
     color: $color-black;
     display: block;
     background-color: $color-grey-light2;
+
     sib-route {
       display: block;
       cursor: pointer;
+
       > div {
         position: relative;
         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 {
           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%);
@@ -205,9 +217,10 @@ h4 {
       }
     }
   }
+
   > div {
     margin: 2.6em;
-    flex: 1 1 0px;
+    flex: 1 1 0;
   }
 }
 
@@ -219,8 +232,8 @@ h4 {
   pointer-events: none;
 }
 
-#search-icon,
-#close-search-icon {
+#close-search-icon,
+#search-icon {
   position: absolute;
   right: 0.4em;
   top: 50%;
@@ -228,18 +241,22 @@ h4 {
   margin: auto;
   display: block;
 }
+
 #search-input {
   -webkit-appearance: textfield;
   border-radius: 10em;
   padding: 0.4em 0.8em;
   border: 1px solid $color-grey;
+
   & ~ #close-search-icon {
     opacity: 0;
   }
+
   &:focus {
     & ~ #close-search-icon {
       opacity: 1;
     }
+
     & ~ #search-icon {
       visibility: hidden;
     }
@@ -256,3 +273,28 @@ sib-trigger.back {
   @include icon('arrow-left');
   @extend h1;
 }
+
+.containerH {
+  display: flex;
+}
+
+.containerV {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.grow {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.fix {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.containerCenter {
+  justify-content: center;
+  align-items: center;
+}