renommage des variables de composants

changelog.md

@@ -9,7 +9,7 @@
 - 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 et radio stylés
+- ajout des checkbox, radio et bouton "switch" stylés
 - ajout des onglets (tabs)
 - ajout des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
 - refonte des styles de formulaires
@@ -20,6 +20,7 @@
 - automatisation des classes utilitaires via Sass
 - ajout de `* {min-width: 0}` pour éviter la valeur `auto` sur les flex-items et grid-items
 - renommage des variables couleur de projets
+- renommage des variables de composants
 
 # changelog v6.1.2 (21 juin 2017)
 - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
@@ -33,11 +34,11 @@
 # changelog v6.1.0 (3 mars 2017)
 - passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
 - ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`
-- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$color-link`, etc.
+- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$link-color`, etc.
 - typo fix
 
 # changelog v6.0.8 (10 janvier 2017)
-- application de `$color-link-hover` uniquement si différent de `$color-link`
+- application de `$link-color-hover` uniquement si différent de `$link-color`
 
 # changelog v6.0.7 (7 décembre 2016)
 - application de `$font-stack-headings` uniquement si différent de `$font-stack-common`

css/knacss-unminified.css

@@ -24,7 +24,6 @@
   - Forms
   - Buttons
   - Checkbox
-  - Radio
   - Tabs
   - Badges
   - Alerts
@@ -516,10 +515,6 @@ a {
   color: #333;
 }
 
-a:focus, a:hover, a:active {
-  color: #000;
-}
-
 /* Headings */
 h1, .h1-like {
   font-size: 2.8rem;
@@ -1108,7 +1103,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 }
 
 /* hidden but not for an assistive technology like a screen reader, Yahoo! method */
-.visually-hidden, .checkbox, .radio, .tabs-content-item[aria-hidden="true"] {
+.visually-hidden, .tabs-content-item[aria-hidden="true"] {
   position: absolute !important;
   border: 0 !important;
   height: 1px !important;
@@ -2267,80 +2262,107 @@ button:focus {
 }
 
 /* ----------------------------- */
-/* ==Checkbox                    */
+/* ==Checkbox, radio, switch     */
 /* ----------------------------- */
 /* use .checkbox class on input type=checkbox */
 /* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
-.checkbox ~ label {
+/* use .radio class on input type=radio */
-  display: -webkit-box;
+/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
-  display: -ms-flexbox;
+/* use .switch class on input type=checkbox */
-  display: flex;
+.switch,
+.checkbox,
+.radio {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  outline: 0;
   cursor: pointer;
-}
+  -webkit-box-shadow: inset 0 0 0 1px #727e96;
-
+          box-shadow: inset 0 0 0 1px #727e96;
-.checkbox ~ label:before {
+  border-radius: 3em;
-  content: "";
-  display: inline-block;
-  vertical-align: baseline;
-  -webkit-transform: translateY(0.2rem);
-          transform: translateY(0.2rem);
-  margin-right: .5rem;
-  width: 1.1em;
-  height: 1.1em;
-  border: 0;
   background: #fff;
-  border-radius: 0;
-  -webkit-box-shadow: 0 0 0 2px #727e96 inset;
-          box-shadow: 0 0 0 2px #727e96 inset;
-  -webkit-transition: .25s background-color;
-  transition: .25s background-color;
 }
 
-.checkbox:checked ~ label:before {
+.switch ~ label,
+.checkbox ~ label,
+.radio ~ label {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.switch::-ms-check,
+.checkbox::-ms-check,
+.radio::-ms-check {
+  display: none;
+}
+
+.switch {
+  width: 6rem;
+  height: 3rem;
+  line-height: 3rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 60%;
+  -webkit-box-shadow: inset -3rem 0 0 #727e96, inset 0 0 0 1px #727e96;
+          box-shadow: inset -3rem 0 0 #727e96, inset 0 0 0 1px #727e96;
+  -webkit-transition: -webkit-box-shadow .15s;
+  transition: -webkit-box-shadow .15s;
+  transition: box-shadow .15s;
+  transition: box-shadow .15s, -webkit-box-shadow .15s;
+}
+
+.switch::before, .switch::after {
+  color: #fff;
+}
+
+.switch::before {
+  content: "off";
+  float: right;
+}
+
+.switch:checked {
+  -webkit-box-shadow: inset 3rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C;
+          box-shadow: inset 3rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C;
+}
+
+.switch:checked::before {
+  content: "on";
+  float: left;
+}
+
+.checkbox {
+  width: 3rem;
+  height: 3rem;
+  -webkit-transition: background-color .15s;
+  transition: background-color .15s;
+}
+
+.checkbox:checked {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
-  background-color: #727e96;
   background-size: 60% 60%;
   background-position: center;
   background-repeat: no-repeat;
-  pointer-events: none;
-}
-
-/* ----------------------------- */
-/* ==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 ~ label {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-}
-
-.radio ~ label:before {
-  content: "";
-  display: inline-block;
-  vertical-align: baseline;
-  -webkit-transform: translateY(0.2rem);
-          transform: translateY(0.2rem);
-  margin-right: .5rem;
-  width: 1.1em;
-  height: 1.1em;
-  border: 0;
-  background: #fff;
-  border-radius: 50%;
-  -webkit-box-shadow: 0 0 0 2px #727e96 inset;
-          box-shadow: 0 0 0 2px #727e96 inset;
-  -webkit-transition: .25s background;
-  transition: .25s background;
-}
-
-.radio:checked ~ label:before {
-  background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
   background-color: #727e96;
+}
+
+.radio {
+  width: 3rem;
+  height: 3rem;
+  -webkit-transition: background-color .15s;
+  transition: background-color .15s;
+}
+
+.radio:checked {
+  background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E);
+  background-size: 80% 80%;
   background-position: center;
   background-repeat: no-repeat;
-  pointer-events: none;
+  background-color: #727e96;
 }
 
 /* ----------------------------- */

sass/_config/_variables.scss

@@ -47,25 +47,27 @@ $color-muted    : #F7F7F7;
 // colors used in project
 $color-base      : $color-dark;
 $background-base : $color-light;
-$color-link      : $color-gray1;
+$link-color      : $color-gray1;
-$color-link-hover: $color-dark;
+$link-color-hover: $color-dark;
-$color-forms     : $color-gray3;
+$forms-color     : $color-gray3;
 
 // quotes
-$color-quote     : $color-gray5;
+$quote-color     : $color-gray5;
 
 // arrows
-$color-arrow     : $color-dark;
+$arrow-color     : $color-dark;
 
 // checkboxes, radios
-$color-checkbox  : $color-gray3;
+$checkbox-color  : $color-gray3;
+$checkbox-size: 3rem;
+$checkbox-border-radius: 3em;
 
 // tables
-$border-table             : $color-gray4;
+$table-border             : $color-gray4;
-$color-table-caption      : $color-gray3;
+$table-caption-color      : $color-gray3;
-$color-table-head         : $color-base;
+$table-head-color         : $color-base;
-$background-table         : transparent;
+$table-background         : transparent;
-$background-table-head    : transparent;
+$table-head-background    : transparent;
 
 // buttons, badges, alerts color variants list
 // name - background-color - color - border
@@ -80,21 +82,21 @@ $variants-list: (
 );
 
 // tabs
-$border-tabs            : $color-gray5;
+$tabs-border            : $color-gray5;
-$border-tabs-active     : $color-gray3;
+$tabs-active-border     : $color-gray3;
-$color-tabs             : $color-base;
+$tabs-color             : $color-base;
-$color-tabs-active      : $color-gray3;
+$tabs-active-color      : $color-gray3;
-$background-tabs        : transparent;
+$tabs-background        : transparent;
-$background-tabs-active : transparent;
+$tabs-active-background : transparent;
-$border-radius-tabs     : 0;
+$tabs-border-radius     : 0;
 
 // nav burger button
-$color-burger             : $color-gray1;
+$burger-color             : $color-gray1;
-$background-burger        : transparent;
+$burger-background        : transparent;
-$background-burger-hover  : transparent;
+$burger-hover-background  : transparent;
-$size-burger              : 2.6rem;
+$burger-size              : 2.6rem;
-$weight-burger            : 5px; // size of stripes
+$burger-weight            : 5px; // size of stripes
-$padding-burger           : 0;
+$burger-padding           : 0;
 
 // spacings (choose unit you prefer)
 $tiny-value             : .5rem ; // tiny value for margins / paddings
@@ -113,7 +115,7 @@ $ultra-large-plus-value : 20rem ; // ultra large value for margins / paddings
 // grid gutters (for .has-gutter-* classes)
 $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
 
-// border-radius
+// global border-radius
 $border-radius: 0;
 
 // Responsive breakpoints variables

sass/_library/_base.scss

@@ -40,15 +40,15 @@ body {
 
 /* Links */
 a {
-  color: $color-link;
+  color: $link-color;
 
   // No styling on focus/hover if there's no effect.
   @if variable_exists(color-link-hover) and
-      ( null == index( ($color-link, null, false), $color-link-hover) ) {
+      ( null == index( ($link-color, null, false), $link-color-hover) ) {
     &:focus,
     &:hover,
     &:active {
-      color: $color-link-hover;
+      color: $link-color-hover;
     }
   }
 }
@@ -294,7 +294,7 @@ blockquote::before {
   font-size: 5em;
   height: .4em;
   line-height: .9;
-  color: $color-quote;
+  color: $quote-color;
 }
 
 blockquote > footer {

sass/components/_arrows.scss

@@ -9,7 +9,7 @@
   width: 1em;
   height: 1em;
   mask-size: cover;
-  background-color: $color-arrow;
+  background-color: $arrow-color;
   line-height: 1;
   vertical-align: baseline;
 }

sass/components/_buttons.scss

@@ -109,15 +109,15 @@ button {
     flex-direction: column;
     justify-content: space-between;
     align-items: stretch;
-    height: $size-burger;
+    height: $burger-size;
-    width: $size-burger;
+    width: $burger-size;
-    padding: $padding-burger;
+    padding: $burger-padding;
-    background-color: $background-burger;
+    background-color: $burger-background;
-    background-image: linear-gradient($color-burger, $color-burger);
+    background-image: linear-gradient($burger-color, $burger-color);
     background-position: center;
     background-repeat: no-repeat;
     background-origin: content-box;
-    background-size: 100% $weight-burger;
+    background-size: 100% $burger-weight;
     transition: .25s;
     transition-property: transform, background;
     will-change: transform, background;
@@ -125,8 +125,8 @@ button {
     &::before,
     &::after {
       content: "";
-      height: $weight-burger;
+      height: $burger-weight;
-      background: $color-burger;
+      background: $burger-color;
       transition: .25s;
       transition-property: transform, top;
       will-change: transform, top;
@@ -135,7 +135,7 @@ button {
 
   &:hover {
     & > * {
-      background-color: $background-burger-hover;
+      background-color: $burger-hover-background;
     }
   }
 

sass/components/_checkbox.scss

@@ -1,36 +1,89 @@
 /* ----------------------------- */
-/* ==Checkbox                    */
+/* ==Checkbox, radio, switch     */
 /* ----------------------------- */
 /* use .checkbox class on input type=checkbox */
 /* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
+/* use .radio class on input type=radio */
+/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
+/* use .switch class on input type=checkbox */
+// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
 
-.checkbox {
+// common styles
-  @extend .visually-hidden;
+.switch,
-
+.checkbox,
-  & ~ label {
+.radio {
-    display: flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  outline: 0;
   cursor: pointer;
-
+  box-shadow: inset 0 0 0 1px $checkbox-color;
-    &:before {
+  border-radius: $checkbox-border-radius;
-      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: $border-radius;
+
-      box-shadow:  0 0 0 2px $color-checkbox inset;
+  ~ label {
-      transition: .25s background-color;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &::-ms-check {
+    display: none; // unstyle IE checkboxes
+  }
+}
+
+// switch styling
+.switch {
+  width: $checkbox-size *2;
+  height: $checkbox-size;
+  line-height: $checkbox-size;
+  padding-left: $checkbox-size /4;
+  padding-right: $checkbox-size /4;
+  font-size: 60%;
+  box-shadow: inset -#{$checkbox-size} 0 0 $checkbox-color, inset 0 0 0 1px $checkbox-color;
+  transition: box-shadow .15s;
+  &::before, &::after {
+    color: #fff;
+  }
+  &::before {
+    content: "off";
+    float: right;
+    }
+  &:checked {
+    box-shadow: inset #{$checkbox-size} 0 0 $color-success, inset 0 0 0 1px $color-success;
+    &::before {
+      content: "on";
+      float: left;
     }
   }
-  &:checked ~ label:before {
+}
+
+
+// checkbox styling
+.checkbox {
+  width: $checkbox-size;
+  height: $checkbox-size;
+  transition: background-color .15s;
+  &:checked {
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
-    background-color: $color-checkbox;
     background-size: 60% 60%;
     background-position: center;
     background-repeat: no-repeat;
-    pointer-events: none;
+    background-color: $checkbox-color;
+  }
+}
+
+// radio styling
+.radio {
+  width: $checkbox-size;
+  height: $checkbox-size;
+  transition: background-color .15s;
+  &:checked {
+    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E);
+    background-size: 80% 80%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: $checkbox-color;
   }
 }

sass/components/_forms.scss

@@ -44,7 +44,7 @@ textarea {
   font-family: inherit;
   font-size: inherit;
   border: 0;
-  box-shadow: 0 0 0 1px $color-forms inset;
+  box-shadow: 0 0 0 1px $forms-color inset;
   color: $color-base;
   vertical-align: middle;
   padding: $tiny-value $small-value;
@@ -58,7 +58,7 @@ textarea {
 }
 
 [type="submit"] {
-  background-color: $color-forms;
+  background-color: $forms-color;
   color: $color-light;
   cursor: pointer;
 }

sass/components/_radio.scss

@@ -1,35 +0,0 @@
-/* ----------------------------- */
-/* ==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 {
-    display: flex;
-    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-checkbox inset;
-      transition: .25s background;
-    }
-  }
-  &:checked ~ label:before {
-    background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
-    background-color: $color-checkbox;
-    background-position: center;
-    background-repeat: no-repeat;
-    pointer-events: none;
-  }
-}

sass/components/_tables.scss

@@ -14,8 +14,8 @@ table,
 
 .table {
   display: table;
-  border: 1px solid $border-table;
+  border: 1px solid $table-border;
-  background: $background-table;
+  background: $table-background;
 
   &--zebra {
     & tbody tr:nth-child(odd) {
@@ -26,7 +26,7 @@ table,
   & caption {
     caption-side: bottom;
     padding: $small-value;
-    color: $color-table-caption;
+    color: $table-caption-color;
     font-style: italic;
     text-align: right;
   }
@@ -36,13 +36,13 @@ table,
     padding: 0.3rem 0.6rem;
     min-width: $medium-value;
     vertical-align: top;
-    border: 1px $border-table dotted;
+    border: 1px $table-border dotted;
     text-align: left;
     cursor: default;
   }
   & thead {
-    color: $color-table-head;
+    color: $table-head-color;
-    background: $background-table-head;
+    background: $table-head-background;
   }
 }
 

sass/components/_tabs.scss

@@ -6,30 +6,30 @@
 
 
 .tabs-menu {
-  border-bottom: 2px solid $border-tabs;
+  border-bottom: 2px solid $tabs-border;
 
   &-link {
     display: block;
     margin-bottom: -2px;
     padding: $tiny-value $medium-plus-value;
     border-bottom: 4px solid transparent;
-    color: $color-tabs;
+    color: $tabs-color;
-    background: $background-tabs;
+    background: $tabs-background;
     text-decoration: none;
-    border-radius: $border-radius-tabs $border-radius-tabs 0 0;
+    border-radius: $tabs-border-radius $tabs-border-radius 0 0;
     transition: .25s;
     transition-property: color, border, background-color;
 
     &.is-active {
-      border-bottom-color: $border-tabs-active;
+      border-bottom-color: $tabs-active-border;
-      color: $color-tabs-active;
+      color: $tabs-active-color;
-      background: $background-tabs-active;
+      background: $tabs-active-background;
       outline: 0;
     }
 
     &:focus {
-      border-bottom-color: $border-tabs-active;
+      border-bottom-color: $tabs-active-border;
-      color: $color-tabs-active;
+      color: $tabs-active-color;
       outline: 0;
     }
 

sass/knacss.scss

@@ -25,7 +25,6 @@
   - Forms
   - Buttons
   - Checkbox
-  - Radio
   - Tabs
   - Badges
   - Alerts
@@ -56,8 +55,7 @@
 @import "components/_tables.scss"; // data tables consistency
 @import "components/_forms.scss"; // forms consistency and styles
 @import "components/_buttons.scss"; // buttons styles
-@import "components/_checkbox.scss"; // checkbox styles
+@import "components/_checkbox.scss"; // checkbox, radio, switch styles
-@import "components/_radio.scss"; // radio styles
 @import "components/_tabs.scss"; // tabs styles
 @import "components/_arrows.scss"; // arrows styles
 @import "components/_badges.scss"; // badges styles