Integrated the useful boostrap classes within our CSS

dist/lib/ldp-display

@@ -1 +1 @@
-Subproject commit 45b3c7097a270319df06cf008a4413be461f6af0
+Subproject commit cbba4db47150bcac8e86a364e2a4b20ad27fb387

src/html/members.html

@@ -11,35 +11,4 @@
     search-fields="firstname, lastname"
     next="member"
   ></ldp-display>
-
-  <script>// Bootstrap compliance
-    const addBootstrapClassesToMembers = function() {
-      window.setTimeout(function() {
-        const FORM = document.querySelector("ldp-display > ldp-form");
-        
-        if (FORM) {
-          FORM.classList.add("mt-4");
-          FORM.classList.add("mb-4");
-          FORM.classList.add("d-block");
-          FORM.querySelectorAll("ldp-form-text").forEach(function(el) {
-            el.classList.add("form-group");
-            el.classList.add("d-block");
-          });
-          FORM.querySelectorAll('input[type="text"]').forEach(function(el) {
-            el.classList.add("form-control");
-          });
-          FORM.querySelectorAll('label').forEach(function(el) {
-            el.classList.add("text-capitalize");
-          });
-          FORM.querySelector('input[type="submit"]').classList.add("btn", "btn-primary");
-          FORM.querySelector('input[type="reset"]').classList.add("btn", "btn-link");
-        }
-        else {
-          addBootstrapClassesToMembers();
-        }
-      }, 100)
-    };
-
-    window.onload = addBootstrapClassesToMembers();
-  </script>
 </div>

src/html/projects.html

@@ -1,19 +1,4 @@
 <div id="projects" style="display: none">
-  <div class="page-header">
-    <h1>Projets</h1>
-  </div>
-
-  <!--<div id="projectsTable">-->
-  <!--<ol>-->
-  <!--<li id="categorieNumber">Numéro</li>-->
-  <!--<li id="categorieNumberAlt">N°</li>-->
-  <!--<li id="categorieTitle">Titre</li>-->
-  <!--<li id="categorieAssociate">Associé</li>-->
-  <!--<li id="categorieIncome">CA</li>-->
-  <!--<li id="categorieState">Etat</li>-->
-  <!--</ol>-->
-  <!--</div>-->
-
   <ldp-display 
     id="projectsList" 
     data-src="http://localhost:8000/projects/"

src/scss/_forms.scss

@@ -0,0 +1,56 @@
+ldp-display {
+  ldp-form {
+    display:            block;
+    background-color:   #F3F3F3;
+    padding:            15px;
+    box-sizing:         content-box;
+
+    form {
+      @extend %self-clear;
+
+      ldp-form-text {
+        position:       relative;
+        display:        block;
+        margin-bottom:  1rem;
+
+        &::before {
+          position:       absolute;
+          top:            3px;
+          bottom:         0px;
+          left:           10px;
+          margin:         auto;
+          font-family:    FontAwesome;
+          content:        "\f002";
+          color:          gray;
+        }
+
+        label {
+          text-transform:   capitalize;
+          display:          none;
+        }
+
+        input[type="text"] {
+          @extend %form-control;
+          @extend %form-control-sm;
+
+          padding-left:   30px;
+        }
+      }
+
+      input[type="submit"],
+      input[type="reset"] {
+        @extend %btn;
+
+        float:  right;
+      }
+
+      input[type="submit"] {
+        @extend %btn-primary;
+      }
+
+      input[type="reset"] {
+        @extend %btn-link;
+      }
+    }
+  }
+}

src/scss/_mixins.scss

@@ -0,0 +1,62 @@
+%btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: .25rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+
+  &:not(:disabled):not(.disabled) {
+    cursor:   pointer;
+  }
+}
+
+%btn-primary {
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+%btn-link {
+  font-weight: 400;
+  color: #007bff;
+  background-color: transparent;
+}
+
+%form-control {
+  display: block;
+  width: 100%;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+%form-control-sm {
+  padding: .25rem .5rem;
+  font-size: .875rem;
+  line-height: 1.5;
+  border-radius: .2rem;
+}
+
+%self-clear {
+  &::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}

src/scss/_variables.scss

@@ -1,6 +1,6 @@
 $hd-color: rgb(253, 200, 21);
 $twitter-color: #1DA1F2;
 
-$menu-height:           50px;
+$menu-height:           46px;
 $menu-font-size:        17px;
 $vertical-menu-width:   50px;

src/scss/main.scss

@@ -1,6 +1,11 @@
+// Generic
 @import "variables";
+@import "mixins";
 @import "fonts";
 @import "styles";
+@import "forms";
+
+// Specific
 @import "home";
 @import "menu";
 @import "members";