Start to design color picker

parent 4c0ee903
......@@ -20,7 +20,41 @@
<button id="randomize">CHOISIR AU HASARD</button>
</div>
<div id="step1">
<h2>Choisissez 2 couleurs</h2>
<h2>Choisissez la couleur de fond</h2>
<div class="colorpicker">
<div>
<input type="radio" name="bg-color" value="red" id="bg-red" />
<label style="background-color: red" for="bg-red"></label>
</div>
<div>
<input type="radio" name="bg-color" value="pink" id="bg-pink" />
<label style="background-color: pink" for="bg-pink"></label>
</div>
<div>
<input type="radio" name="bg-color" value="orange" id="bg-orange" />
<label style="background-color: orange" for="bg-orange"></label>
</div>
<div>
<input type="radio" name="bg-color" value="yellow" id="bg-yellow" />
<label style="background-color: yellow" for="bg-yellow"></label>
</div>
<div>
<input type="radio" name="bg-color" value="teal" id="bg-teal" />
<label style="background-color: teal" for="bg-teal"></label>
</div>
<div>
<input type="radio" name="bg-color" value="blue" id="bg-blue" />
<label style="background-color: blue" for="bg-blue"></label>
</div>
<div>
<input type="radio" name="bg-color" value="black" id="bg-black" />
<label style="background-color: black" for="bg-black"></label>
</div>
<div>
<input type="radio" name="bg-color" value="white" id="bg-white" />
<label style="background-color: white" for="bg-white"></label>
</div>
</div>
<div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
......
......@@ -42,6 +42,39 @@ div#inputs {
background-color: white;
}
.colorpicker {
padding: 20px;
width: 100%;
}
.colorpicker > div {
width: 20%;
height: 20%;
text-align: center;
display: inline-block;
}
.colorpicker > div > input[type="radio"] {
display: none;
}
.colorpicker > div > input[type="radio"] + label {
display: inline-block;
width: 4em;
height: 4em;
margin: 1em;
border-radius: 50%;
cursor: pointer;
}
.colorpicker > div > input[type="radio"][value="white"]:not(:checked) + label {
border: 2px solid grey
}
.colorpicker > div > input[type="radio"]:checked + label {
border: 5px solid grey;
}
div[id^="step"] {
display: none;
}
......
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