Integrated the useful boostrap classes within our CSS

This commit is contained in:
Alexandre Bourlier 2018-04-22 18:01:07 +02:00
parent ed189a8129
commit 717542a812
7 changed files with 125 additions and 48 deletions

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

View File

@ -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>

View File

@ -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/"

56
src/scss/_forms.scss Normal file
View File

@ -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;
}
}
}
}

62
src/scss/_mixins.scss Normal file
View File

@ -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;
}
}

View File

@ -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;

View File

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