boutons radio stylés

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

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;
 }

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;

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;
+  }
+}

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