better checkbox styles

ui/js/component/formField/view.jsx

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

ui/js/modal/modalRemoveFile/view.jsx

@@ -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>
+            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>
+              label={__("Abandon the claim for this URI")}
+            />
           </section>}
       </Modal>
     );

ui/scss/all.scss

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

ui/scss/component/_checkbox.scss

@@ -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;
+      }
+    }
+  }
+
+}