update: frameworkisation of forms

src/styles/base/form.scss

@@ -1,59 +1,98 @@
-#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,
+  @extend .button,
-    .text-bold,
+  .text-bold,
-    .text-uppercase,
+  .text-uppercase,
-    .reversed,
+  .reversed,
-    .button-secondary,
+  .button-secondary,
-    .bordered;
+  .bordered;
-    margin-left: auto;
+  margin-left: auto;
-    margin-top: 3.2rem;
+  margin-top: 3.2rem;
+}
+
+.fieldset {
+  border-bottom: 1px solid var(--color-fieldset-border);
+  color: var(--color-title);
+  display: flex;
+  flex: 1 0 100%;
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin: 2.6rem 0 1.8rem;
+  padding-bottom: 0.8rem;
+}
+
+.form-label {
+  /*flex: 1 1 auto;*/
+  font-weight: 600;
+
+  &.is-dark label {
+    color: var(--color-label-dark);
+    margin-top: 3rem;
+
+    &>*:nth-child(2) {
+      margin-top: 0.8rem;
+    }
   }
+
+  &.is-light label {
+    color: var(--color-label-light);
+    margin-top: 1.8rem;
+    text-transform: uppercase;
+
+    &>*:nth-child(2) {
+      margin-top: 0.8rem;
+    }
+  }
+}
+
+.is-full-width {
+  flex: 1 1 100%;
+}
+
+.is-half-width {
+  box-sizing: border-box;
+  flex: 0 0 50%;
+
+  &:nth-child(even) {
+    padding-left: 1.7rem;
+  }
+
+  &:nth-child(odd) {
+    padding-right: 1.7rem;
+  }
+}
+
+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;
+
+  &:focus,
+  &:active {
+    border-bottom: 2px solid var(--color-input-active);
+  }
+}
+
+textarea {
+  height: 100px;
 }
 
 .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);
-      color: var(--color-title);
-      display: flex;
-      flex: 1 0 100%;
-      font-size: 1.8rem;
-      font-weight: 600;
-      margin: 2.6rem 0 1.8rem;
-      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;
@@ -66,39 +105,13 @@
 			}
 		}
 
+    /* To align label and input vertically */
     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] {
+    /*sib-form[set-user-id-select] {
 
       input[type="submit"] {
         margin-left: 0;
@@ -108,156 +121,48 @@
       select {
         display: none;
       }
-    }
+    }*/
 
-    /* CLASSES Peut-être à sortir de .content-box */
 
-    .block.select-add-member>form { /* circle-profile */
+    /* WIDGETS SIB  (let in .content-box to override default styles) */
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 2.6rem;
 
-      label {
+    sib-form-auto-completion {
-        margin-top: 0;
 
-        >.ss-main {
+      .ss-main {
-          font-weight: normal;
+        font-weight: normal;
-          min-width: 35vw;
+        text-transform: none;
-          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;
-
-		  &.is-dark label {
-		    color: var(--color-label-dark);
-		    margin-top: 3rem;
-
-		    &>*:nth-child(2) {
-		      margin-top: 0.8rem;
-		    }
-		  }
-
-		  &.is-light label {
-		    color: var(--color-label-light);
-		    margin-top: 1.8rem;
-		    text-transform: uppercase;
-
-		    &>*:nth-child(2) {
-		      margin-top: 0.8rem;
-		    }
-		  }
-		}
-
-		.is-full-width {
-		  flex: 1 1 100%;
-		}
-
-		.is-half-width {
-		  box-sizing: border-box;
-		  flex: 0 0 50%;
-
-		  &:nth-child(even) {
-		    padding-left: 1.7rem;
-		  }
-
-		  &:nth-child(odd) {
-		    padding-right: 1.7rem;
-		  }
-		}
-
-    /* WIDGETS SIB */
-
-    sib-form-auto-completion.member-select, hubl-status {
-      align-self: flex-end;
-
-      >label:first-of-type>div {
-        font-weight: 600;
       }
 
       .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 {
-          border: solid var(--color-input-icon);
+          font-size: 1.8rem;
-          border-width: 0 2px 2px 0;
+          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'