yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix width issue on the checkbox label

Browse Source
This commit is contained in:
Jan Skovgaard
2018-10-31 21:24:35 +01:00
parent fc742bcf18
commit 87340d6c2c
2 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
View File

@@ -72,9 +72,10 @@
&__label{
position: relative;
padding: 0;
margin: 0 0 15px 0;
&-text{
margin: 0 0 0 32px;
margin: 0 0 0 10px;
position: relative;
top: 2px;
}
@@ -86,14 +87,14 @@
left: 0;
opacity: 0;
&:focus ~ .umb-checkboxlist__state{
&:focus ~ .umb-checkboxlist__state .umb-checkboxlist__check{
box-shadow: 0 1px 3px fade(@black, 12%), 0 1px 2px fade(@black, 24%);
}
&:checked ~ .umb-checkboxlist__state{
&:checked ~ .umb-checkboxlist__state .umb-checkboxlist__check{
&:before{
width: 100%;
height: 100%;
width: 20px;
height: 20px;
}
}
@@ -105,10 +106,15 @@
&__state{
display: flex;
flex-wrap: wrap;
height: 20px;
position: relative;
}
&__check{
position: relative;
border: 1px solid @gray-8;
width: 20px;
height: 20px;
position: relative;
&:before{
content: "";

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
View File

@@ -9,7 +9,9 @@
class="umb-checkboxlist__input" />
<div class="umb-checkboxlist__state">
<i class="umb-checkboxlist__icon icon-check" aria-hidden="true"></i>
<div class="umb-checkboxlist__check">
<i class="umb-checkboxlist__icon icon-check" aria-hidden="true"></i>
</div>
<span class="umb-checkboxlist__label-text">{{item.val}}</span>
</div>
</label>