Complete first color picker

parent 9f3e3593
......@@ -25,36 +25,52 @@
<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>
<input type="radio" name="bg-color" value="red" id="bg-red" checked/>
<label for="bg-red">
<span style="background-color: red"></span>
</label>
</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>
<label for="bg-pink">
<span style="background-color: pink"></span>
</label>
</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>
<label for="bg-orange">
<span style="background-color: orange"></span>
</label>
</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>
<label for="bg-yellow">
<span style="background-color: yellow"></span>
</label>
</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>
<label for="bg-teal">
<span style="background-color: teal"></span>
</label>
</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>
<label for="bg-blue">
<span style="background-color: blue"></span>
</label>
</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>
<label for="bg-black">
<span style="background-color: black"></span>
</label>
</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>
<label for="bg-white">
<span style="background-color: white"></span>
</label>
</div>
</div>
</div>
......
......@@ -46,21 +46,36 @@ div#inputs {
display: none;
}
.colorpicker > div > div {
margin-bottom: 2em;
}
.colorpicker input[type="radio"] + label {
/* display: inline-block; */
border-radius: 50%;
margin: 1em;
}
.colorpicker input[type="radio"] + label > span {
display: inline-block;
width: 4em;
height: 4em;
margin: 1em;
/* margin: .5em; */
border-radius: 50%;
cursor: pointer;
}
.colorpicker input[type="radio"][value="white"]:not(:checked) + label {
border: 2px solid grey
.colorpicker input[type="radio"][value="white"] + label > span {
padding: 1em;
border: 2px solid grey;
}
.colorpicker input[type="radio"] + label {
border: 5px solid #dde5f1;
}
.colorpicker input[type="radio"]:checked + label {
border: 5px solid grey;
.colorpicker input[type="radio"]:not(:checked) + label {
border: 5px solid transparent;
}
div[id^="step"] {
......
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