@mixin form{
fieldset{
font:14px "Poppins-SemiBold";
}
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="time"], input[type="number"], .file label, select{
border:0;
height:30px;
background:transparent;
margin-top:5px;
border-bottom:solid 1px $black;
border-radius:0;
box-shadow:none;
font:13px "Poppins-Regular";
&::placeholder{
color:$lightgrey;
font:13px "Poppins-Regular";
}
}
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
}
@mixin devisForm{
width:100%;
max-width:initial;
padding:20px 8%;
background:$black;
label{
color:$white;
}
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="time"], input[type="number"], select{
border-bottom-color:$white;
color:$white;
&::placeholder{
color:$white;
opacity:.5;
}
}
.select-field{
position:relative;
width:110%;
background: url(arr-down.png) no-repeat 90% center;
select{
-webkit-appearance: none;
-webkit-border-radius: 0px;
margin:0;
padding-bottom: 2px;
}
}
.row-half{
display:flex;
justify-content:space-between;
align-items:flex-end;
.field{
width:48%;
}
}
.row-25-75{
display:flex;
justify-content:space-between;
.field{
&:first-child{
width:23%;
min-width:107px;
}
&:last-child{
width:73%;
min-width:150px;
}
}
}
.row-75-25{
display:flex;
justify-content:space-between;
align-items:flex-end;
.field{
&:last-child{
width:23%;
}
&:first-child{
width:73%;
overflow:hidden;
}
}
}
.nomargin{
position:relative;
&:before{
content:"x";
display:block;
position:absolute;
left:0;
top:2px;
font:14px "Poppins-Regular";
color:$white;
}
input{
margin:0;
padding-left:10px;
}
}
@include breakpoint(large){
width:25%;
min-width:440px;
padding-right:4%;
padding-left:4%;
a.btn{
width:100%;
}
}
}
form{
@include form;
@include devisForm;
max-width:440px;
position:relative;
display:block;
z-index:21;
a.close-devis-popin{
@include close;
position:absolute;
top:-10px;
right:20px;
height:40px;
width:40px;
z-index:30;
}
h4{
font: 17px/20px "Poppins-Medium";
color: #FFFFFF;
letter-spacing: 1.35px;
margin: 20px auto 30px;
text-align: center;
}
.btn{
@include btn;
display:table;
margin:20px auto 0;
text-transform:uppercase;
&.black{
border-color:$gold;
color:$gold;
&:hover{
color:$white;
&:after{
background:$gold;
}
}
}
}
}
}
<!-- Popin Form -->
<section class="devis-popin">
<div class="overlay"></div>
<form>
<a class="close-devis-popin"></a>
<h4>Faire une demande de devis</h4>
<div class="row-half">
<div class="field">
<label>Nom et Prénom</label>
<input type="text" name="company-name" placeholder="Nom">
</div>
<div class="field">
<label>Adresse email</label>
<input type="text" name="company-contact" placeholder="adresse@email.fr">
</div>
</div>
<div class="row-full">
<div class="field">
<label>Adresse</label>
<input type="text" name="company-address" placeholder="140 Avenue des Champs Élysées">
</div>
</div>
<div class="row-25-75">
<div class="field">
<label>Code postal</label>
<input type="text" name="company-zipcode" placeholder="75003">
</div>
<div class="field">
<label>Ville</label>
<input type="text" name="company-city" placeholder="Paris">
</div>
</div>
<div class="row-half">
<div class="field">
<label>Date d'intervention</label>
<input type="time" name="booking-time" placeholder="Heure">
</div>
<div class="field">
<input type="date" name="booking-date" placeholder="Date">
</div>
</div>
<div class="row-75-25">
<div class="field">
<label>Choisir une prestation</label>
<div class="select-field">
<select name="booking-presta" required="">
<option value="" disabled="" selected="" hidden=""></option>
<option value="short">Coupe cheveux courts</option>
<option value="medium">Coupe cheveux mi-longs</option>
<option value="long">Coupe cheveux longs</option>
</select>
</div>
</div>
<div class="field nomargin">
<input type="number" name="booking-number" placeholder="x1" value="1">
</div>
</div>
<a class="btn black">Ajouter une prestation</a>
<a class="btn">Demander un devis</a>
</form>
</section>
