qbism/3vis-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add a css class to the checkbox indicator

Browse source
This commit is contained in:
taehoon 2019-03-22 13:49:58 -04:00
parent cf72ebb407
commit 91502a25a4
2 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/checkbox/checkbox.js
View file

@ -36,7 +36,7 @@ export default {
return ( return (
<label class="checkbox" {...wrapperProps}> <label class="checkbox" {...wrapperProps}>
<input type="checkbox" {...inputProps} /> <input type="checkbox" {...inputProps} />
<i /> <i class="checkbox-indicator" />
{children && <span>{children}</span>} {children && <span>{children}</span>}
</label> </label>
) )

12
src/components/checkbox/checkbox.scss
View file

@ -5,10 +5,7 @@
display: inline-block; display: inline-block;
padding-left: 1.2em; padding-left: 1.2em;
input[type=checkbox] { &-indicator::before {
display: none;
& + i::before {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -32,12 +29,15 @@
box-sizing: border-box; box-sizing: border-box;
} }
&:checked + i::before { input[type=checkbox] {
display: none;
&:checked + .checkbox-indicator::before {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
&:disabled + i::before { &:disabled + .checkbox-indicator::before {
opacity: .5; opacity: .5;
} }
} }