From bddfbb37a3b3dd0cb6027c13fe091c150ac10ac5 Mon Sep 17 00:00:00 2001
From: Raphael Goetter <raphael@goetter.fr>
Date: Tue, 1 Aug 2017 09:20:53 +0200
Subject: [PATCH] checkbox stylings

---
 sass/_config/_variables.scss  |  2 +-
 sass/_library/_utilities.scss |  6 ++++--
 sass/components/checkbox.scss | 35 +++++++++++++++++++++++++++++++++++
 sass/components/forms.scss    |  1 -
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 sass/components/checkbox.scss

diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss
index e3ebac0..b33cd51 100644
--- a/sass/_config/_variables.scss
+++ b/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
diff --git a/sass/_library/_utilities.scss b/sass/_library/_utilities.scss
index 922d865..65b4ec5 100644
--- a/sass/_library/_utilities.scss
+++ b/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);
 }
 
diff --git a/sass/components/checkbox.scss b/sass/components/checkbox.scss
new file mode 100644
index 0000000..613fb25
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/sass/components/forms.scss b/sass/components/forms.scss
index 47314fa..45c97a9 100644
--- a/sass/components/forms.scss
+++ b/sass/components/forms.scss
@@ -21,7 +21,6 @@ fieldset {
 
 label {
   display: inline-block;
-  vertical-align: middle;
   cursor: pointer;
 }