checkbox stylings

sass/_config/_variables.scss

@@ -53,7 +53,7 @@ $color-link-hover: $color4;
 
 $brand-primary: $color5;
 
-$color-border: $color7;
+$color-forms: $color7;
 $color-burger: $color1;
 
 // button, badges, alerts color variants list

sass/_library/_utilities.scss

@@ -23,9 +23,11 @@
 }
 
 .is-disabled,
-[disabled] {
+[disabled],
+.is-disabled ~ label,
+[disabled] ~ label {
   opacity: 0.5;
-  cursor: not-allowed;
+  cursor: not-allowed !important;
   filter: grayscale(1);
 }
 

sass/components/checkbox.scss

@@ -0,0 +1,35 @@
+/* ----------------------------- */
+/* ==Checkbox                    */
+/* ----------------------------- */
+/* use .checkbox class on input type=checkbox */
+/* recommanded HTML : <input type="checkbox" class="checkbox" id="test1"><label for="test1">click here</label> */
+
+.checkbox {
+  @extend .visually-hidden;
+
+  & ~ label {
+    cursor: pointer;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      vertical-align: baseline;
+      transform: translateY(.2rem);
+      margin-right: .5rem;
+      width: 1.1em; height: 1.1em;
+      border: 0;
+      background: #fff;
+      border-radius: 6px;
+      box-shadow:  0 0 0 2px $color-forms inset;
+      transition: .25s background-color;
+    }
+  }
+  &:checked ~ label:before {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
+    background-color: $color-forms;
+    background-size: 60% 60%;
+    background-position: center;
+    background-repeat: no-repeat;
+    pointer-events: none;
+  }
+}

sass/components/forms.scss

@@ -21,7 +21,6 @@ fieldset {
 
 label {
   display: inline-block;
-  vertical-align: middle;
   cursor: pointer;
 }