Verified Commit 2fb40b38 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Simplify colorpickers code and make them responsive

parent ed9731a2
......@@ -64,17 +64,17 @@ a {
}
div#inputs {
width: 30vw;
height: 100%;
background-color: white;
}
.colorpicker input[type="radio"] {
display: none;
.colorpicker {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.colorpicker > div > div {
margin-bottom: 1em;
.colorpicker input[type="radio"] {
display: none;
}
.colorpicker input[type="radio"] + label {
......
......@@ -29,104 +29,70 @@
</div>
<div id="step1">
<h2>Choisissez la couleur de fond</h2>
<div class="colorpicker container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red">
<span style="background-color: #f54358"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
<label for="bg-pink">
<span style="background-color: #ee0088"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
<label for="bg-orange">
<span style="background-color: #ff9146"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
<label for="bg-yellow">
<span style="background-color: #ffd201"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
<label for="bg-teal">
<span style="background-color: #39d0b7"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#000" id="bg-black" />
<label for="bg-black">
<span style="background-color: #000"></span>
</label>
</div>
</div>
<div class="colorpicker">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red">
<span style="background-color: #f54358"></span>
</label>
<input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
<label for="bg-pink">
<span style="background-color: #ee0088"></span>
</label>
<input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
<label for="bg-orange">
<span style="background-color: #ff9146"></span>
</label>
<input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
<label for="bg-yellow">
<span style="background-color: #ffd201"></span>
</label>
<input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
<label for="bg-teal">
<span style="background-color: #39d0b7"></span>
</label>
<input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-blue">
<span style="background-color: #2f5189"></span>
</label>
<input type="radio" name="bg-color" value="#000" id="bg-black" />
<label for="bg-black">
<span style="background-color: #000"></span>
</label>
</div>
<h2>Choisissez la couleur du texte</h2>
<div class="colorpicker container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red">
<span style="background-color: #f54358"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
<label for="fg-pink">
<span style="background-color: #ee0088"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
<label for="fg-orange">
<span style="background-color: #ff9146"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
<label for="fg-yellow">
<span style="background-color: #ffd201"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
<label for="fg-teal">
<span style="background-color: #39d0b7"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#000" id="fg-black" />
<label for="fg-black">
<span style="background-color: #000"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#fff" id="fg-white" />
<label for="fg-white">
<span style="background-color: #fff"></span>
</label>
</div>
</div>
<div class="colorpicker">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red">
<span style="background-color: #f54358"></span>
</label>
<input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
<label for="fg-pink">
<span style="background-color: #ee0088"></span>
</label>
<input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
<label for="fg-orange">
<span style="background-color: #ff9146"></span>
</label>
<input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
<label for="fg-yellow">
<span style="background-color: #ffd201"></span>
</label>
<input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
<label for="fg-teal">
<span style="background-color: #39d0b7"></span>
</label>
<input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-blue">
<span style="background-color: #2f5189"></span>
</label>
<input type="radio" name="fg-color" value="#000" id="fg-black" />
<label for="fg-black">
<span style="background-color: #000"></span>
</label>
<input type="radio" name="fg-color" value="#fff" id="fg-white" />
<label for="fg-white">
<span style="background-color: #fff"></span>
</label>
</div>
<div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment