Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 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>
) )

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

@ -5,39 +5,39 @@
display: inline-block; display: inline-block;
padding-left: 1.2em; padding-left: 1.2em;
&-indicator::before {
position: absolute;
left: 0;
top: 0;
display: block;
content: '✔';
transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
text-align: center;
line-height: 1.1em;
font-size: 1.1em;
color: transparent;
overflow: hidden;
box-sizing: border-box;
}
input[type=checkbox] { input[type=checkbox] {
display: none; display: none;
& + i::before { &:checked + .checkbox-indicator::before {
position: absolute;
left: 0;
top: 0;
display: block;
content: '✔';
transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
text-align: center;
line-height: 1.1em;
font-size: 1.1em;
color: transparent;
overflow: hidden;
box-sizing: border-box;
}
&:checked + i::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;
} }
} }