created classes for new checkbox and variables

public/sass/_variables.dark.scss

@@ -363,3 +363,10 @@ $switch-slider-color: $dark-2;
 $switch-slider-off-bg: $gray-1;
 $switch-slider-off-bg: $gray-1;
 $switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
 $switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
 $switch-slider-shadow: 0 0 3px black;
 $switch-slider-shadow: 0 0 3px black;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $dark-1;
+$checkbox-border: 1px solid $gray-2;
+$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
+$checkbox-color: $dark-1;

public/sass/_variables.light.scss

@@ -372,3 +372,10 @@ $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
 $switch-slider-off-bg: $gray-5;
 $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
 $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
 $switch-slider-shadow: 0 0 3px $dark-5;
 $switch-slider-shadow: 0 0 3px $dark-5;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $gray-6;
+$checkbox-border: 1px solid $gray-3;
+$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red);
+$checkbox-color: $gray-7;

public/sass/components/_switch.scss

@@ -142,3 +142,29 @@ input:checked + .gf-form-switch__slider {
 input:checked + .gf-form-switch__slider::before {
 input:checked + .gf-form-switch__slider::before {
   transform: translateX(14px);
   transform: translateX(14px);
 }
 }
+
+/* The Checkbox */
+
+.gf-form-switch__checkbox {
+  position: absolute;
+  left: 16px;
+  height: 16px;
+  width: 16px;
+  border-radius: 3px;
+  border: $checkbox-border;
+  background: $checkbox-bg;
+  top: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+input:checked + .gf-form-switch__checkbox::before {
+  font-family: 'FontAwesome';
+  content: '\f00c';
+  color: $checkbox-color;
+}
+
+input:checked + .gf-form-switch__checkbox {
+  background: $checkbox-checked-bg;
+  border: none;
+}