🎨 Styled input checkbox

2019-08-28 10:47:31 +05:30
parent ae2d996754
commit 1652381444
2 changed files with 29 additions and 5 deletions
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -187,11 +187,32 @@ option {
 }

 input[type="checkbox"] {
-  width: initial;
+  display: none;

  &,
  & + label {
    vertical-align: middle;
+    cursor: pointer;
+
+    &:before {
+      content: "\2714";
+      border: 2px solid var(--fg-color);
+      border-radius: 4px;
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      align-items: center;
+      justify-content: center;
+      margin: 8px 8px 8px 0;
+      color: transparent;
+      transition: .2s;
+    }
+  }
+
+  &:checked + label:before {
+    background-color: var(--ac-color);
+    border-color: var(--ac-color);
+    color: var(--act-color);
  }
 }