Skip to content

Commit

Permalink
feat: add new realization for checkboxes
Browse files Browse the repository at this point in the history
  • Loading branch information
mikhailovSvyat committed Jul 13, 2021
1 parent 9259224 commit 4b1549b
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 7 deletions.
3 changes: 3 additions & 0 deletions src/v2/img/sprites/svg/common/icon-checkmark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions src/v2/scss/components/_forms/_checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,35 @@
}
}
}

&._svg {
.control__indicator {
position: relative;

.svg-icon._icon-checkmark {
display: none;
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
fill: $white;
}
}

.control__input {
&:checked ~ .control__indicator {
background-image: none;

._icon-checkmark {
display: block;
}
}
}

.control__description {
margin-left: 6px;
}
}
}
}
5 changes: 5 additions & 0 deletions src/v2/scss/sprites/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
height: 32px;
}

.sprite-img._icon-checkmark {
width: 24px;
height: 24px;
}

.sprite-img._icon-facebook {
width: 24px;
height: 24px;
Expand Down
41 changes: 34 additions & 7 deletions templates/v2/components/forms/checkboxes.jinja2
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,52 @@
<div class="container page-content">
<div class="row">
<div class="col-lg-9">
<h2>States</h2>
<h2>Bg-img realization</h2>
<table>
<tr>
<td>
Enabled Selected<br>
<label class="ui option checkbox">
<input type="checkbox" class="control__input">
<input type="checkbox" class="control__input" checked>
<span class="control__indicator"></span>
<span class="control__description">Enabled Selected</span>
</label>

</td>
<td>
Disabled Selected
<label class="ui option checkbox disabled">
<input type="checkbox" class="control__input" checked disabled>
<span class="control__indicator"></span>
<span class="control__description">Disabled Selected</span>
</label>
</td>
<td>Hover Selected</td>
<td>Focus Selected</td>
<td>Pressed Selected</td>
</tr>
</table>
<br>
<br>
<h2>Svg realization</h2>
<table>
<tr>
<td>
<label class="ui option checkbox _svg">
<input type="checkbox" class="control__input" checked>
<span class="control__indicator">
{{ macros.svg_icon('checkmark') }}
</span>
<span class="control__description">Enabled Selected</span>
</label>

</td>
<td>
<label class="ui option checkbox _svg disabled">
<input type="checkbox" class="control__input" checked disabled>
<span class="control__indicator">
{{ macros.svg_icon('checkmark') }}
</span>
<span class="control__description">Disabled Selected</span>
</label>
</td>
</tr>
</table>
</div>
</div>
</div>
Expand Down

0 comments on commit 4b1549b

Please sign in to comment.