Skip to content

GitLab

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

Add selectors for icons

parent 8014bf95
Pipeline #1374 passed with stage
in 33 seconds
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 832 additions and 41 deletions
static/imgs/icon_select.svg 0 → 100644
View file @ a349a5ee
This diff is collapsed.
static/style.css
View file @ a349a5ee
......@@ -189,6 +189,34 @@ div#step4 > div:nth-of-type(1) {
background-color: #ebf3ff;
}
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;
}
}
div#step4 > div:nth-of-type(1) .row > label:nth-type(2) {
background: -100px 0 important!;
}
div#step3 > div:nth-of-type(1) > input[type="radio"],
div#step4 input[type="radio"] {
display: none;
......@@ -202,11 +230,6 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
padding-right: 20px;
}
div#step4 input[type="radio"] + label {
font-size: 2.4em;
text-align: center;
}
div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label,
div#step4 input[type="radio"]:checked + label {
color: #ebf3ff;
......
views/index.ejs
View file @ a349a5ee
......@@ -164,77 +164,77 @@
<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">1</label>
<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">2</label>
<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">3</label>
<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">4</label>
<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">5</label>
<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">6</label>
<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">7</label>
<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">8</label>
<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">9</label>
<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">10</label>
<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">11</label>
<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">12</label>
<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">13</label>
<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">14</label>
<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">15</label>
<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">16</label>
<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">17</label>
<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">18</label>
<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">19</label>
<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">20</label>
<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">21</label>
<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">22</label>
<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">23</label>
<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">24</label>
<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">25</label>
<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">26</label>
<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">27</label>
<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">28</label>
<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">29</label>
<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">30</label>
<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">31</label>
<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">32</label>
<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">33</label>
<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">34</label>
<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">35</label>
<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">36</label>
<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>
<div class="navButtons">
......
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