feature: tzcld-checkbox

src/styles/index.scss

@@ -39,3 +39,75 @@ solid-form-dropdown-label {
     appearance: none;
   }
 }
+
+solid-form-checkbox-label[name="tzcld_profile.membership"].tzcld-checkbox {
+  white-space: normal;
+
+  label:nth-child(odd) {
+    display: inline-block;
+    vertical-align: text-top;
+    padding-right: 6px;
+    width: 100%;
+  }
+
+  label:nth-child(even) {
+    position: relative;
+    display: inline-block;
+    padding: 0px;
+    width: 35px;
+    height: 15px;
+    margin-top: 16px;
+    margin-left: calc(50% - 17.5px);
+
+    input {
+      display: none;
+    }
+
+    div {
+      position: absolute;
+      text-indent: -9999px;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #f6f6f6;
+
+      &.revert {
+        background-color: white;
+      }
+
+      transition: 0.4s;
+      border-radius: 10px;
+
+      &:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 1px;
+        bottom: 2px;
+        background-color: white;
+        transition: 0.4s;
+        border-radius: 10px;
+      }
+
+      &.revert:before {
+        background-color: #e4e9f1;
+      }
+    }
+
+    input:checked + div:before {
+      background-color: var(--color-primary);
+    }
+
+    input:focus + div {
+      box-shadow: 0 0 1px var(--color-primary);
+    }
+
+    input:checked + div:before {
+      left: calc(100% - 2px);
+      transform: translateX(-100%);
+    }
+  }
+}
\ No newline at end of file