update: frameworkisation of forms

src/styles/base/form.scss

@@ -1,9 +1,10 @@
-#admin-circle-create,
+form {
-#admin-project-create,
+  display: flex;
-#admin-users-create,
+  flex-direction: column;
-#admin-users-edit {
+  transition: all .3s ease;
+}
 
-  input[type='submit'] {
+.button-register>form>input[type=submit] {
   @extend .button,
   .text-bold,
   .text-uppercase,
@@ -13,21 +14,6 @@
   margin-left: auto;
   margin-top: 3.2rem;
 }
-}
-
-.content-box {
-
-  &.with-form {
-
-    h1 {
-      color: var(--color-title);
-      font-weight: bold;
-      font-size: 2rem;
-
-      &.centered {
-        text-align: center;
-      }
-    }
 
 .fieldset {
   border-bottom: 1px solid var(--color-fieldset-border);
@@ -40,150 +26,6 @@
   padding-bottom: 0.8rem;
 }
 
-    [name^='block-'] {
-      margin-bottom: 2.75rem;
-    }
-
-    [name$='border-top'] {
-      border-top: 1px solid var(--color-grey-10);
-      margin-top: 3rem;
-    }
-
-    form {
-      display: flex;
-      flex-direction: column;
-    }
-
-    sib-set-default:not([name='user-thumb']) {
-			clear: both;
-	    display: flex!important;
-			flex-wrap: wrap;
-			max-width: 100%;
-			
-			sib-form-label-text {
-				float: left;
-				width: 50%;
-			}
-		}
-
-    label {
-      display: flex;
-      flex-direction: column;
-
-      input:not([type='file']),
-      textarea {
-        -webkit-tap-highlight-color: var(--color-grey-7);
-        background-color: var(--color-input-background);
-        box-sizing: border-box;
-        border: 2px solid var(--color-input-background);
-        color: var(--color-input-text);
-        /*flex: 1 1 0;  Problem on Firefox for input type date*/
-        line-height: 1;
-        min-width: 0;
-        padding: 1rem;
-      }
-
-      input:not([type="search"]):not([type="file"]),
-      textarea {
-        border: 2px solid var(--color-input-background);
-
-        &:focus,
-        &:active {
-          border-bottom: 2px solid var(--color-input-active);
-        }
-      }
-
-      textarea {
-        height: 100px;
-      }
-    }
-
-    sib-form[set-user-id-select] {
-
-      input[type="submit"] {
-        margin-left: 0;
-        margin-top: 0;
-      }
-
-      select {
-        display: none;
-      }
-    }
-
-    /* CLASSES Peut-être à sortir de .content-box */
-
-    .block.select-add-member>form { /* circle-profile */
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 2.6rem;
-
-      label {
-        margin-top: 0;
-
-        >.ss-main {
-          font-weight: normal;
-          min-width: 35vw;
-          text-transform: none;
-
-          >.ss-single-selected {
-            align-items: center;
-            background-color: var(--color-input-background);
-            border: none;
-            border-radius: 0px;
-            color: var(--color-input-text);
-            display: flex;
-            justify-content: flex-end;
-            min-height: 4.2rem;
-            padding-left: 1.2rem;
-
-            .ss-arrow {
-              font-size: 1.8rem;
-              margin: 0 18px 0 0;
-
-              span {
-                border: solid var(--color-input-icon);
-                border-width: 0 2px 2px 0;
-              }
-            }
-          }
-
-          .ss-list {
-            color: var(--color-select-list);
-          }
-        }
-      }
-
-      >input[type='submit'] {
-        @extend
-          .button,
-          .btn-margin-left,
-          .text-bold,
-          .text-uppercase,
-          .button-complementary,
-          .bordered;
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-    }
-
-		.form-container>form {
-		  margin-top: 2.7rem;
-    }
-    
-    .form-edit>form {
-
-      input[type='submit'] {
-        @extend .button,
-        .text-bold,
-        .text-uppercase,
-        .reversed,
-        .button-secondary,
-        .bordered;
-        margin-left: auto;
-        margin-top: 3.2rem;
-      }
-    }
-
 .form-label {
   /*flex: 1 1 auto;*/
   font-weight: 600;
@@ -225,39 +67,102 @@
   }
 }
 
-    /* WIDGETS SIB */
+input:not([type='file']):not([type='search']),
+textarea {
+  -webkit-tap-highlight-color: var(--color-grey-7);
+  background-color: var(--color-input-background);
+  box-sizing: border-box;
+  border: 2px solid var(--color-input-background);
+  color: var(--color-input-text);
+  /*flex: 1 1 0;  Problem on Firefox for input type date*/
+  line-height: 1;
+  min-width: 0;
+  padding: 1rem;
 
-    sib-form-auto-completion.member-select, hubl-status {
+  &:focus,
-      align-self: flex-end;
+  &:active {
+    border-bottom: 2px solid var(--color-input-active);
+  }
+}
 
-      >label:first-of-type>div {
+textarea {
-        font-weight: 600;
+  height: 100px;
+}
+
+.content-box {
+
+  &.with-form {
+
+    sib-set-default:not([name='user-thumb']) {
+			clear: both;
+	    display: flex!important;
+			flex-wrap: wrap;
+			max-width: 100%;
+			
+			sib-form-label-text {
+				float: left;
+				width: 50%;
+			}
+		}
+
+    /* To align label and input vertically */
+    label {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /*sib-form[set-user-id-select] {
+
+      input[type="submit"] {
+        margin-left: 0;
+        margin-top: 0;
+      }
+
+      select {
+        display: none;
+      }
+    }*/
+
+
+    /* WIDGETS SIB  (let in .content-box to override default styles) */
+
+    sib-form-auto-completion {
+
+      .ss-main {
+        font-weight: normal;
+        text-transform: none;
       }
 
       .ss-single-selected {
+        align-items: center;
         background-color: var(--color-input-background);
         border: none;
         border-radius: 0px;
         color: var(--color-input-text);
         display: flex;
         font-weight: normal;
-        margin-top: 0.8rem;
+        justify-content: flex-end;
-        min-height: 4.4rem;
+        min-height: 4.6rem;
-        padding-left: 1rem;
+        padding-left: 1.2rem;
         text-transform: none;
 
         .ss-disabled {
           color: var(--color-grey-5);
         }
 
-        .ss-arrow span {
+        .ss-arrow {
+          font-size: 1.8rem;
+          margin: 0 18px 0 0;
+
+          span {
             border: solid var(--color-input-icon);
             border-width: 0 2px 2px 0;
           }
         }
+      }
 
-      .ss-content .ss-list .ss-option {
+      .ss-list {
-        color: var(--color-input-text);
+        color: var(--color-select-list);
         font-weight: normal;
         text-transform: none;
       }
@@ -330,15 +235,7 @@
       }
     }
 
-    sib-multiple-form {
+    /*sib-multiple-select {
-      margin-top: 1.8rem;
-    }
-
-    sib-multiple-select {
-
-      &.select-groups .ss-values .ss-disabled::before {
-        content: "Sélectionne des groupes";
-      }
 
       &.select-skills .ss-values .ss-disabled::before {
         content: "Select skills";
@@ -413,7 +310,7 @@
           }
         }
       }
-    }
+    }*/
 
     /* CUSTOM WIDGETS */
 

src/styles/base/main.scss

@@ -288,6 +288,10 @@ h5 {
   }
 }
 
+.centered {
+  text-align: center;
+}
+
 .name {
   color: var(--color-grey-1);
   font-size: 2rem;

src/views/admin/page-admin-circles-create.pug

@@ -3,7 +3,7 @@ div.content-box__info
 
   h1.centered Créer un canal
 
-  sib-form(
+  sib-form.button-register(
     data-src=`${endpoints.circles || endpoints.post.circles}`
 
     fields='status, name, description'

src/views/admin/page-admin-projects-create.pug

@@ -18,7 +18,7 @@ div.content-box__info
 
   h1.centered Créer un projet
 
-  sib-form(
+  sib-form.button-register(
     data-src=`${endpoints.projects || endpoints.post.projects}`
     
     fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'

src/views/admin/page-admin-users-create.pug

@@ -3,7 +3,7 @@ div.content-box__info
 
   h1.centered Ajouter un utilisateur à la plateforme
 
-  sib-form(
+  sib-form.button-register(
     data-src=`${endpoints.users || endpoints.post.users}`
     range-groups=`${endpoints.groups || endpoints.get.groups}`
 

src/views/admin/page-admin-users-edit.pug

@@ -8,7 +8,7 @@ div.content-box__info
       fields='name'
     )  
 
-  sib-form(
+  sib-form.button-register(
     bind-resources=''
     range-groups=`${endpoints.groups || endpoints.get.groups}`
 

src/views/circle/page-circle-edit.pug

@@ -46,7 +46,7 @@ div.content-box__info
   sib-ac-checker(permission='acl:Write', bind-resources)
     h1 Modifie ton canal
 
-    sib-form.form-edit(
+    sib-form.button-register.form-edit(
       bind-resources
 
       fields='status, block-circle__info(name, owner), description'
@@ -75,7 +75,7 @@ div.content-box__info
   h2 Liste des membres:
 
   sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    sib-form.block.select-add-member(
+    sib-form.block.select-add.button-add(
       bind-resources 
       nested-field='members'
       fields='user'

src/views/project/page-project-edit.pug

@@ -10,7 +10,7 @@ div.content-box__info
 
   h1 Modifie ton projet
 
-  sib-form.form-edit(
+  sib-form.button-register.form-edit(
 	  bind-resources
 	
 	  fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'
@@ -40,7 +40,7 @@ div.content-box__info
 
   h2 Liste des membres :
 
-  sib-form.block.select-add-member(
+  sib-form.block.select-add.button-add(
     bind-resources 
     nested-field='members'
     fields='user'