Permalink
Browse files

Drop checkbox label hacks in favor of -moz-appearance

Fixes #59
  • Loading branch information...
lmorchard committed Nov 8, 2018
1 parent 2ecfb8d commit 922df6c37bc36efc1197f1073a1630c013f780ca
Showing with 42 additions and 52 deletions.
  1. +18 −12 components/Checkbox/README.md
  2. +21 −39 components/Checkbox/index.css
  3. +3 −1 components/Checkbox/index.js
@@ -2,26 +2,32 @@
## Styles
### With label
### Without label
```html
<input type="checkbox" />
```
### Without label (disabled)
The checkbox is contained within the label element in order to activate a
hidden checkbox overlaid with custom styling.
```html
<input type="checkbox" disabled />
```
### With label
```html
<label class="checkbox">
<input type="checkbox" class="checkbox__field" />
<span class="checkbox__label">Example label</span>
<input type="checkbox" class="checkbox__field" />
<span class="checkbox__label">Example label</span>
</label>
```
### Without label
**Note:** Even without a visible text label, the checkbox component still
requires the markup for a label. This is used as an anchor to apply the custom
styling while keeping the checkbox accessible.
### With label (disabled)
```html
<label class="checkbox">
<input type="checkbox" class="checkbox__field" />
<span class="checkbox__label"></span>
<label class="checkbox checkbox--disabled">
<input type="checkbox" disabled class="checkbox__field" />
<span class="checkbox__label">Disabled checkbox</span>
</label>
```
@@ -1,63 +1,45 @@
.checkbox {
position: relative;
/* TODO: Figure out if inline-block and 100% width the right thing for
providing consistent click target */
display: inline-block;
width: 100%;
}
.checkbox--disabled {
opacity: .4;
}
.checkbox__field {
opacity: 0;
padding-right: 4px;
width: 16px;
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
background-color: var(--grey-90-a10);
border-radius: 2px;
border: 1px solid var(--grey-90-a30);
height: 16px;
margin: -2px 4px;
width: 16px;
}
.checkbox__label::after {
position: absolute;
cursor: pointer;
left: 2px;
bottom: 2px;
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
margin-left: 0;
margin-right: 0;
content: "";
background-color: var(--grey-90-a10);
border: 1px solid var(--grey-90-a30);
input[type="checkbox"]:disabled {
opacity: .4;
}
.checkbox__label:hover::after {
input[type="checkbox"]:hover {
background-color: var(--grey-90-a20);
}
.checkbox__label:active::after {
input[type="checkbox"]:active {
background-color: var(--grey-90-a30);
}
.checkbox__field:focus + .checkbox__label::after {
input[type="checkbox"]:focus {
border: none;
left: 3px;
bottom: 3px;
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, .3);
}
.checkbox__field:checked + .checkbox__label::after {
input[type="checkbox"]:checked {
background-color: var(--blue-60);
background-image: url(./checkbox-check-16.svg);
background-position: center center;
}
.checkbox__field:checked + .checkbox__label:hover::after {
input[type="checkbox"]:checked:hover {
background-color: var(--blue-70);
}
.checkbox__field:checked + .checkbox__label:active::after {
input[type="checkbox"]:checked:active {
background-color: var(--blue-80);
}
label.checkbox--disabled > span {
opacity: .4;
}
@@ -4,11 +4,13 @@ import classNames from "classnames";
import "./index.css";
export const Checkbox = ({ disabled, label, ...props }) => {
return (
return label ? (
<label className={classNames("checkbox", { "checkbox--disabled": disabled })}>
<input {...props} disabled={disabled} className="checkbox__field" type="checkbox" />
<span className="checkbox__label">{label}</span>
</label>
) : (
<input {...props} disabled={disabled} type="checkbox" />
);
};

0 comments on commit 922df6c

Please sign in to comment.