forked from AkkomaGang/akkoma-fe
Add a css class to the checkbox indicator
This commit is contained in:
parent
cf72ebb407
commit
91502a25a4
2 changed files with 28 additions and 28 deletions
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue