style forms

src/styles/content.scss

@@ -4,12 +4,11 @@
     > sib-display {
       display: block;
       margin: 1em 0;
-      @extend %shadow;
-      background-color: $color-white;
+      @extend %frame;
       padding: 0.5em 1em;
-      &:nth-child(odd) {
-        background-color: $color-white;
-      }
+      /*&:nth-child(odd) {
+        background-color: $color-grey-light;
+      }*/
       sib-display-div[name='title'] {
         display: block;
         @extend h2;
@@ -53,10 +52,10 @@ sib-display-lookuplist[name='skills'] {
 .chat-view {
   padding: 1em;
   position: relative;
-  background-color: #fff;
-  @extend %shadow;
-  height: calc(100vh - 143px - 5em);
-  height: calc(100vh - var(--pos-top, 143px) - 5em);
+  @extend %frame;
+  height: 400px;
+  height: calc(100vh - 143px - 3em);
+  height: calc(100vh - var(--pos-top, 143px) - 3em);
   > sib-chat {
     @include pos();
   }
@@ -87,8 +86,7 @@ sib-display#member-info,
 #profiles-list > div > sib-display {
   display: block;
   position: relative;
-  background-color: $color-white;
-  @extend %shadow;
+  @extend %frame;
   padding: 1em;
   cursor: pointer;
 
@@ -163,10 +161,11 @@ sib-display#member-info,
     }
   }
 }
-
+/*
 label {
   @extend h2;
   &:after {
     content: ':';
   }
 }
+*/

src/styles/form.scss

@@ -1,37 +1,102 @@
 //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;
+.form-view{
+  @extend %frame
 }
-sib-form{
-  form{
-    margin: -.5em;
-    >*{
-      margin: .5em;
+
+sib-form.inline form {
+  margin: -0.5em;
+  > * {
+    margin: 0.5em;
+  }
+}
+sib-form.block {
+  display: block;
+  padding: 1em;
+  > form {
+    > * {
+      display: block;
+      margin-top: 2em;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:not(sib-form-checkbox) {
+        label {
+          margin: 0.5em 0;
+          display: block;
+        }
+        input,
+        textarea {
+          background-color: $color-grey-light;
+          box-shadow: none !important;
+          border: none;
+          padding: 1em 2em;
+        }
+        input,
+        select {
+          height: 3em;
+        }
+        input,
+        textarea,
+        select {
+          width: 100%;
+        }
+        textarea {
+          resize: vertical;
+          height: 200px;
+          min-height: 3em;
+        }
+      }
+    }
+    sib-form-multiple-dropdown select {
+      width: calc(100% - 2.5em);
+    }
+    input[type='submit'] {
+      width: auto;
     }
   }
+}
 
+sib-form {
   // text like
-  input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=file]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]){
+  textarea,
+  input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) {
     padding: 0.5em;
     border: none;
     @extend %shadow;
   }
-  
+
   // button like
   button,
-  input[type=button],
-  input[type=color],
-  input[type=file],
-  input[type=reset],
-  input[type=submit]{
+  input[type='button'],
+  input[type='color'],
+  input[type='file'],
+  input[type='reset'],
+  input[type='submit'] {
     padding: 0.5em 1em;
     border: none;
     background-color: $color-yellow;
     border-radius: 100em;
   }
 
-  input[type="reset"]{
+  input[type='reset'] {
     display: none;
   }
-}
+
+  sib-form-multiple-dropdown {
+    button {
+      appearance: none;
+      background-color: $color-white;
+      color: $color-yellow;
+      border: 1px solid;
+      width: 1em;
+      height: 1em;
+      line-height: 0;
+      font-size: 1.5em;
+      padding: 0;
+      cursor: pointer;
+      margin: 0.2em;
+      vertical-align: middle;
+    }
+  }
+}

src/styles/main.scss

@@ -4,7 +4,12 @@
   display: none !important;
 }
 
+*,*::before,*::after{
+  box-sizing: inherit;
+}
+
 html {
+  box-sizing: border-box;
   font-family: Open Sans, sans-serif;
   font-size: 13px;
   background-color: $color-grey-light;

src/styles/members.scss

@@ -25,8 +25,7 @@
   }
   display: block;
   position: relative;
-  background-color: $color-white;
-  @extend %shadow;
+  @extend %frame;
   padding: 0.5em;
   cursor: pointer;
 
@@ -124,9 +123,8 @@
   }
 }
 #member-info {
-  background-color: $color-white;
   padding: 1em;
-  @extend %shadow;
+  @extend %frame;
 }
 
 #profiles-list,

src/styles/menu.scss

@@ -50,10 +50,13 @@
       text-transform: uppercase;
       &:before {
         display: block;
+        width: 2em;
+        height: 2em;
+        line-height: 2em;
+        padding: 0;
         margin: -0.5em auto 0;
         font-size: 2em;
         border-radius: 100%;
-        padding: 0.7em;
         transform: perspective(1000px) translateZ(1px) scale(1);
         will-change: transform;
         transition: all 0.3s ease,

src/styles/variables.scss

@@ -12,7 +12,7 @@ $color-yellow-light: #ffd759;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
 }
 
-%cadre {
+%frame {
   @extend %shadow;
   background-color: $color-white;
 }