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

Simplify iconpicker code and make it responsive

parent 2fb40b38
......@@ -221,36 +221,21 @@ div#step4 > div:nth-of-type(1) {
}
div#step4 > div:nth-of-type(1) {
max-height: 600px;
max-height: 500px;
overflow-y: scroll;
}
div#step4 > div:nth-of-type(1) .row > label {
background: #ebf3ff url('./imgs/icon_select.svg') no-repeat;
background-size: 400%;
height: 25vw;
}
@media (min-width: 576px) {
div#step4 > div:nth-of-type(1) .row > label {
height: 12.5vw;
}
}
@media (min-width: 992px) {
div#step4 > div:nth-of-type(1) .row > label {
height: 8.33vw;
}
}
@media (min-width: 1200px) {
div#step4 > div:nth-of-type(1) .row > label {
height: 6.25vw;
}
.iconpicker {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div#step4 > div:nth-of-type(1) .row > label:nth-type(2) {
background: -100px 0 important!;
.iconpicker > label {
background: #ebf3ff url('./imgs/icon_select.svg') no-repeat;
background-size: 400%;
height: 100px;
width: 100px;
}
div#step3 > div:nth-of-type(1) > input[type="radio"],
......
......@@ -128,81 +128,79 @@
</div>
<div id="step4">
<h2>Choisissez votre icône</h2>
<div class="container">
<div class="row">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-1"></label>
<input type="radio" id="radio-icon-2" name="icon" value="2" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-2" style="background-position: 33% 0"></label>
<input type="radio" id="radio-icon-3" name="icon" value="3" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-3" style="background-position: 67% 0"></label>
<input type="radio" id="radio-icon-4" name="icon" value="4" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-4" style="background-position: 100% 0"></label>
<input type="radio" id="radio-icon-5" name="icon" value="5" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-5" style="background-position: 0 12.5%"></label>
<input type="radio" id="radio-icon-6" name="icon" value="6" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-6" style="background-position: 33% 12.5%"></label>
<input type="radio" id="radio-icon-7" name="icon" value="7" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-7" style="background-position: 67% 12.5%"></label>
<input type="radio" id="radio-icon-8" name="icon" value="8" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-8" style="background-position: 100% 12.5%"></label>
<input type="radio" id="radio-icon-9" name="icon" value="9" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-9" style="background-position: 0 24%"></label>
<input type="radio" id="radio-icon-10" name="icon" value="10" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-10" style="background-position: 33% 24%"></label>
<input type="radio" id="radio-icon-11" name="icon" value="11" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-11" style="background-position: 67% 24%"></label>
<input type="radio" id="radio-icon-12" name="icon" value="12" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-12" style="background-position: 100% 24%"></label>
<input type="radio" id="radio-icon-13" name="icon" value="13"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-13" style="background-position: 0 37.5%"></label>
<input type="radio" id="radio-icon-14" name="icon" value="14"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-14" style="background-position: 33% 37.5%"></label>
<input type="radio" id="radio-icon-15" name="icon" value="15"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-15" style="background-position: 67% 37.5%"></label>
<input type="radio" id="radio-icon-16" name="icon" value="16"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-16" style="background-position: 100% 37.5%"></label>
<input type="radio" id="radio-icon-17" name="icon" value="17"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-17" style="background-position: 0 50%"></label>
<input type="radio" id="radio-icon-18" name="icon" value="18"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-18" style="background-position: 33% 50%"></label>
<input type="radio" id="radio-icon-19" name="icon" value="19"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-19" style="background-position: 67% 50%"></label>
<input type="radio" id="radio-icon-20" name="icon" value="20"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-20" style="background-position: 100% 50%"></label>
<input type="radio" id="radio-icon-21" name="icon" value="21"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-21" style="background-position: 0 61%"></label>
<input type="radio" id="radio-icon-22" name="icon" value="22"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-22" style="background-position: 33% 61%"></label>
<input type="radio" id="radio-icon-23" name="icon" value="23"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-23" style="background-position: 67% 61%"></label>
<input type="radio" id="radio-icon-24" name="icon" value="24"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-24" style="background-position: 100% 61%"></label>
<input type="radio" id="radio-icon-25" name="icon" value="25"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-25" style="background-position: 0 73%"></label>
<input type="radio" id="radio-icon-26" name="icon" value="26"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-26" style="background-position: 33% 73%"></label>
<input type="radio" id="radio-icon-27" name="icon" value="27"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-27" style="background-position: 67% 73%"></label>
<input type="radio" id="radio-icon-28" name="icon" value="28"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-28" style="background-position: 100% 73%"></label>
<input type="radio" id="radio-icon-29" name="icon" value="29"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-29" style="background-position: 0 87.5%"></label>
<input type="radio" id="radio-icon-30" name="icon" value="30"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-30" style="background-position: 33% 87.5%"></label>
<input type="radio" id="radio-icon-31" name="icon" value="31"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-31" style="background-position: 67% 87.5%"></label>
<input type="radio" id="radio-icon-32" name="icon" value="32"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-32" style="background-position: 100% 87.5%"></label>
<input type="radio" id="radio-icon-33" name="icon" value="33"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-33" style="background-position: -1% 100%"></label>
<input type="radio" id="radio-icon-34" name="icon" value="34"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-34" style="background-position: 32% 100%"></label>
<input type="radio" id="radio-icon-35" name="icon" value="35"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-35" style="background-position: 67% 100%"></label>
<input type="radio" id="radio-icon-36" name="icon" value="36"/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-36" style="background-position: 100% 100%"></label>
</div>
<div class="iconpicker">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label for="radio-icon-1"></label>
<input type="radio" id="radio-icon-2" name="icon" value="2" />
<label for="radio-icon-2" style="background-position: 33% 0"></label>
<input type="radio" id="radio-icon-3" name="icon" value="3" />
<label for="radio-icon-3" style="background-position: 67% 0"></label>
<input type="radio" id="radio-icon-4" name="icon" value="4" />
<label for="radio-icon-4" style="background-position: 100% 0"></label>
<input type="radio" id="radio-icon-5" name="icon" value="5" />
<label for="radio-icon-5" style="background-position: 0 12.5%"></label>
<input type="radio" id="radio-icon-6" name="icon" value="6" />
<label for="radio-icon-6" style="background-position: 33% 12.5%"></label>
<input type="radio" id="radio-icon-7" name="icon" value="7" />
<label for="radio-icon-7" style="background-position: 67% 12.5%"></label>
<input type="radio" id="radio-icon-8" name="icon" value="8" />
<label for="radio-icon-8" style="background-position: 100% 12.5%"></label>
<input type="radio" id="radio-icon-9" name="icon" value="9" />
<label for="radio-icon-9" style="background-position: 0 24%"></label>
<input type="radio" id="radio-icon-10" name="icon" value="10" />
<label for="radio-icon-10" style="background-position: 33% 24%"></label>
<input type="radio" id="radio-icon-11" name="icon" value="11" />
<label for="radio-icon-11" style="background-position: 67% 24%"></label>
<input type="radio" id="radio-icon-12" name="icon" value="12" />
<label for="radio-icon-12" style="background-position: 100% 24%"></label>
<input type="radio" id="radio-icon-13" name="icon" value="13"/>
<label for="radio-icon-13" style="background-position: 0 37.5%"></label>
<input type="radio" id="radio-icon-14" name="icon" value="14"/>
<label for="radio-icon-14" style="background-position: 33% 37.5%"></label>
<input type="radio" id="radio-icon-15" name="icon" value="15"/>
<label for="radio-icon-15" style="background-position: 67% 37.5%"></label>
<input type="radio" id="radio-icon-16" name="icon" value="16"/>
<label for="radio-icon-16" style="background-position: 100% 37.5%"></label>
<input type="radio" id="radio-icon-17" name="icon" value="17"/>
<label for="radio-icon-17" style="background-position: 0 50%"></label>
<input type="radio" id="radio-icon-18" name="icon" value="18"/>
<label for="radio-icon-18" style="background-position: 33% 50%"></label>
<input type="radio" id="radio-icon-19" name="icon" value="19"/>
<label for="radio-icon-19" style="background-position: 67% 50%"></label>
<input type="radio" id="radio-icon-20" name="icon" value="20"/>
<label for="radio-icon-20" style="background-position: 100% 50%"></label>
<input type="radio" id="radio-icon-21" name="icon" value="21"/>
<label for="radio-icon-21" style="background-position: 0 61%"></label>
<input type="radio" id="radio-icon-22" name="icon" value="22"/>
<label for="radio-icon-22" style="background-position: 33% 61%"></label>
<input type="radio" id="radio-icon-23" name="icon" value="23"/>
<label for="radio-icon-23" style="background-position: 67% 61%"></label>
<input type="radio" id="radio-icon-24" name="icon" value="24"/>
<label for="radio-icon-24" style="background-position: 100% 61%"></label>
<input type="radio" id="radio-icon-25" name="icon" value="25"/>
<label for="radio-icon-25" style="background-position: 0 73%"></label>
<input type="radio" id="radio-icon-26" name="icon" value="26"/>
<label for="radio-icon-26" style="background-position: 33% 73%"></label>
<input type="radio" id="radio-icon-27" name="icon" value="27"/>
<label for="radio-icon-27" style="background-position: 67% 73%"></label>
<input type="radio" id="radio-icon-28" name="icon" value="28"/>
<label for="radio-icon-28" style="background-position: 100% 73%"></label>
<input type="radio" id="radio-icon-29" name="icon" value="29"/>
<label for="radio-icon-29" style="background-position: 0 87.5%"></label>
<input type="radio" id="radio-icon-30" name="icon" value="30"/>
<label for="radio-icon-30" style="background-position: 33% 87.5%"></label>
<input type="radio" id="radio-icon-31" name="icon" value="31"/>
<label for="radio-icon-31" style="background-position: 67% 87.5%"></label>
<input type="radio" id="radio-icon-32" name="icon" value="32"/>
<label for="radio-icon-32" style="background-position: 100% 87.5%"></label>
<input type="radio" id="radio-icon-33" name="icon" value="33"/>
<label for="radio-icon-33" style="background-position: -1% 100%"></label>
<input type="radio" id="radio-icon-34" name="icon" value="34"/>
<label for="radio-icon-34" style="background-position: 32% 100%"></label>
<input type="radio" id="radio-icon-35" name="icon" value="35"/>
<label for="radio-icon-35" style="background-position: 67% 100%"></label>
<input type="radio" id="radio-icon-36" name="icon" value="36"/>
<label for="radio-icon-36" style="background-position: 100% 100%"></label>
</div>
<div class="navButtons">
<a href="#step3" class="prevButton">&lsaquo;</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