better checkbox styles
This commit is contained in:
parent
ac95dea827
commit
f17777b511
4 changed files with 97 additions and 29 deletions
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -25,4 +25,5 @@
|
|||
@import "component/_tabs.scss";
|
||||
@import "component/_media.scss";
|
||||
@import "component/_divider.scss";
|
||||
@import "component/_checkbox.scss";
|
||||
@import "page/_show.scss";
|
||||
|
|
71
ui/scss/component/_checkbox.scss
Normal file
71
ui/scss/component/_checkbox.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in a new issue