better checkbox styles

This commit is contained in:
btzr-io 2017-10-14 17:41:41 -06:00
parent ac95dea827
commit f17777b511
4 changed files with 97 additions and 29 deletions

View file

@ -174,19 +174,18 @@ class FormField extends React.PureComponent {
{this.props.prefix
? <span className="form-field__prefix">{this.props.prefix}</span>
: ""}
{renderElementInsideLabel
? <label
htmlFor={elementId}
className={
"form-field__label " +
(isError ? "form-field__label--error" : "") +
(isCheck ? " checked" : "")
}
>
{element}
{this.props.label}
</label>
: element}
{element}
{renderElementInsideLabel &&
<label
htmlFor={elementId}
className={
"form-field__label " +
(isError ? "form-field__label--error" : "") +
(isCheck ? " checked" : "")
}
>
{this.props.label}
</label>}
{formFieldFileSelectorTypes.includes(this.props.type)
? <FileSelector
type={this.props.type}

View file

@ -50,25 +50,22 @@ class ModalRemoveFile extends React.PureComponent {
</p>
<section>
<label>
<FormField
type="checkbox"
checked={deleteChecked}
onClick={this.handleDeleteCheckboxClicked.bind(this)}
/>{" "}
{__("Delete this file from my computer")}
</label>
<FormField
type="checkbox"
checked={deleteChecked}
onClick={this.handleDeleteCheckboxClicked.bind(this)}
label={__("Delete this file from my computer")}
/>
</section>
<br />
{claimIsMine &&
<section>
<label>
<FormField
type="checkbox"
checked={abandonClaimChecked}
onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
/>{" "}
{__("Abandon the claim for this URI")}
</label>
<FormField
type="checkbox"
checked={abandonClaimChecked}
onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
label={__("Abandon the claim for this URI")}
/>
</section>}
</Modal>
);

View file

@ -25,4 +25,5 @@
@import "component/_tabs.scss";
@import "component/_media.scss";
@import "component/_divider.scss";
@import "component/_checkbox.scss";
@import "page/_show.scss";

View file

@ -0,0 +1,71 @@
*, *:before, *:after {
box-sizing: border-box;
}
$md-checkbox-checked-color: var(--color-primary);
$md-checkbox-border-color: rgba(0, 0, 0, 0.54);
$md-checkbox-size: 20px;
$md-checkbox-padding: 4px;
$md-checkmark-width: 2px;
$md-checkmark-color: #fff;
.form-field--checkbox {
position: relative;
label {
cursor: pointer;
&:before, &:after {
content: "";
position: absolute;
left:0;
top: 0;
}
&:before {
// box
width: $md-checkbox-size;
height: $md-checkbox-size;
background: transparent;
border: 2px solid $md-checkbox-border-color;
border-radius: 2px;
cursor: pointer;
transition: background .3s;
}
&:after {
// checkmark
}
}
input[type="checkbox"] {
outline: 0;
visibility: hidden;
margin-right: 16px;
&:checked {
+ label:before{
background: $md-checkbox-checked-color;
border:none;
}
+ label:after {
$md-checkmark-size: $md-checkbox-size - 2*$md-checkbox-padding;
transform: rotate(-45deg);
top: ($md-checkbox-size / 2) - ($md-checkmark-size / 4) - $md-checkbox-size/10;
left: $md-checkbox-padding;
width: $md-checkmark-size;
height: $md-checkmark-size / 2;
border: $md-checkmark-width solid $md-checkmark-color;
border-top-style: none;
border-right-style: none;
}
}
}
}