From c796838fde7240ad0acef61fe31830281fd07dc7 Mon Sep 17 00:00:00 2001
From: Raphael Goetter <raphael@goetter.fr>
Date: Tue, 1 Aug 2017 10:02:19 +0200
Subject: [PATCH] =?UTF-8?q?boutons=20radio=20styl=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 changelog.md                  |  4 ++--
 css/knacss-unminified.css     |  2 +-
 sass/components/checkbox.scss |  2 +-
 sass/components/radio.scss    | 34 ++++++++++++++++++++++++++++++++++
 sass/knacss.scss              |  2 ++
 5 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 sass/components/radio.scss

diff --git a/changelog.md b/changelog.md
index 9b7998e..fc786cc 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,11 +1,11 @@
-# changelog v7.0.0beta (31 juillet 2017)
+# changelog v7.0.0beta (1er août 2017)
 - architecture globale revisitée (vendor, config, library, components)
 - normalize.css v7.0.0
 - refonte complète des boutons, avec possibilités de variantes (primary, success, warning, etc.)
 - ajout des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
 - ajout des alertes, avec possibilités de variantes (primary, success, warning, etc.)
 - ajout d'un bouton de navigation .button-burger
-- ajout des checkbox stylés
+- ajout des checkbox et radio stylés
 - refonte des styles de formulaires
 - autogrid object en Grid Layout
 - regroupement des styles des tableaux
diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css
index 97a4292..f14abcb 100644
--- a/css/knacss-unminified.css
+++ b/css/knacss-unminified.css
@@ -2140,7 +2140,7 @@ button:focus {
 /* ==Checkbox                    */
 /* ----------------------------- */
 /* use .checkbox class on input type=checkbox */
-/* recommanded HTML : <input type="checkbox" class="checkbox" id="test1"><label for="test1">click here</label> */
+/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
 .checkbox ~ label {
   cursor: pointer;
 }
diff --git a/sass/components/checkbox.scss b/sass/components/checkbox.scss
index f11f2b2..b8f3e62 100644
--- a/sass/components/checkbox.scss
+++ b/sass/components/checkbox.scss
@@ -2,7 +2,7 @@
 /* ==Checkbox                    */
 /* ----------------------------- */
 /* use .checkbox class on input type=checkbox */
-/* recommanded HTML : <input type="checkbox" class="checkbox" id="test1"><label for="test1">click here</label> */
+/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
 
 .checkbox {
   @extend .visually-hidden;
diff --git a/sass/components/radio.scss b/sass/components/radio.scss
new file mode 100644
index 0000000..807fe4c
--- /dev/null
+++ b/sass/components/radio.scss
@@ -0,0 +1,34 @@
+/* ----------------------------- */
+/* ==Rdio                    */
+/* ----------------------------- */
+/* use .radio class on input type=radio */
+/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
+
+.radio {
+  @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: 50%;
+      box-shadow:  0 0 0 2px $color-forms inset;
+      transition: .25s background;
+    }
+  }
+  &:checked ~ label:before {
+    background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
+    background-color: $color-forms;
+    background-position: center;
+    background-repeat: no-repeat;
+    pointer-events: none;
+  }
+}
diff --git a/sass/knacss.scss b/sass/knacss.scss
index 4a0be47..37dc607 100644
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@@ -25,6 +25,7 @@
   - Forms (forms consistency)
   - Buttons (buttons consistency)
   - Checkbox (checkbox styles)
+  - Radio (radio styles)
   - Badges (badges consistency)
   - Alerts (alerts consistency)
   - Grillade (Grid System in Flexbox)
@@ -56,6 +57,7 @@
 @import "components/forms.scss"; // forms consistency and styles
 @import "components/buttons.scss"; // buttons styles
 @import "components/checkbox.scss"; // checkbox styles
+@import "components/radio.scss"; // radio styles
 @import "components/badges.scss"; // badges styles
 @import "components/alerts.scss"; // alerts styles
 @import "components/grillade.scss"; // grids