Verified Commit d8dd0349 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Use Bootstrap grid to make color picker responsive

parent 2f52c253
......@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./bootstrap-grid.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>Soutenez La Quadrature du Net !</title>
</head>
......@@ -21,40 +22,42 @@
</div>
<div id="step1">
<h2>Choisissez la couleur de fond</h2>
<div class="colorpicker">
<div>
<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="red" id="bg-red" />
<label style="background-color: red" for="bg-red"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="pink" id="bg-pink" />
<label style="background-color: pink" for="bg-pink"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="orange" id="bg-orange" />
<label style="background-color: orange" for="bg-orange"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="yellow" id="bg-yellow" />
<label style="background-color: yellow" for="bg-yellow"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="teal" id="bg-teal" />
<label style="background-color: teal" for="bg-teal"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="blue" id="bg-blue" />
<label style="background-color: blue" for="bg-blue"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="black" id="bg-black" />
<label style="background-color: black" for="bg-black"></label>
</div>
<div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="white" id="bg-white" />
<label style="background-color: white" for="bg-white"></label>
</div>
</div>
</div>
<div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
</div>
......
......@@ -42,23 +42,11 @@ 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"] {
.colorpicker input[type="radio"] {
display: none;
}
.colorpicker > div > input[type="radio"] + label {
.colorpicker input[type="radio"] + label {
display: inline-block;
width: 4em;
height: 4em;
......@@ -67,11 +55,11 @@ div#inputs {
cursor: pointer;
}
.colorpicker > div > input[type="radio"][value="white"]:not(:checked) + label {
.colorpicker input[type="radio"][value="white"]:not(:checked) + label {
border: 2px solid grey
}
.colorpicker > div > input[type="radio"]:checked + label {
.colorpicker input[type="radio"]:checked + label {
border: 5px solid grey;
}
......
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