renommage des variables de composants

2017-09-26 11:42:46 +02:00 · 2017-09-26 11:42:46 +02:00 · f45ea52562
parent c5b27ac2d3
commit f45ea52562
13 changed files with 225 additions and 184 deletions
--- a/changelog.md
+++ b/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`
--- a/css/knacss-unminified.css
+++ b/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 {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+/* 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 */
+.switch,
+.checkbox,
+.radio {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  outline: 0;
  cursor: pointer;
-}
-
-.checkbox ~ 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;
+  -webkit-box-shadow: inset 0 0 0 1px #727e96;
+          box-shadow: inset 0 0 0 1px #727e96;
+  border-radius: 3em;
  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;
 }

 /* ----------------------------- */
--- a/css/knacss.css
+++ b/css/knacss.css
--- a/sass/_config/_variables.scss
+++ b/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;
-$color-link-hover: $color-dark;
-$color-forms     : $color-gray3;
+$link-color      : $color-gray1;
+$link-color-hover: $color-dark;
+$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;
-$color-table-caption      : $color-gray3;
-$color-table-head         : $color-base;
-$background-table         : transparent;
-$background-table-head    : transparent;
+$table-border             : $color-gray4;
+$table-caption-color      : $color-gray3;
+$table-head-color         : $color-base;
+$table-background         : 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;
-$border-tabs-active     : $color-gray3;
-$color-tabs             : $color-base;
-$color-tabs-active      : $color-gray3;
-$background-tabs        : transparent;
-$background-tabs-active : transparent;
-$border-radius-tabs     : 0;
+$tabs-border            : $color-gray5;
+$tabs-active-border     : $color-gray3;
+$tabs-color             : $color-base;
+$tabs-active-color      : $color-gray3;
+$tabs-background        : transparent;
+$tabs-active-background : transparent;
+$tabs-border-radius     : 0;

 // nav burger button
-$color-burger             : $color-gray1;
-$background-burger        : transparent;
-$background-burger-hover  : transparent;
-$size-burger              : 2.6rem;
-$weight-burger            : 5px; // size of stripes
-$padding-burger           : 0;
+$burger-color             : $color-gray1;
+$burger-background        : transparent;
+$burger-hover-background  : transparent;
+$burger-size              : 2.6rem;
+$burger-weight            : 5px; // size of stripes
+$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
--- a/sass/_library/_base.scss
+++ b/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 {
--- a/sass/components/_arrows.scss
+++ b/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;
 }
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@ -109,15 +109,15 @@ button {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
-    height: $size-burger;
-    width: $size-burger;
-    padding: $padding-burger;
-    background-color: $background-burger;
-    background-image: linear-gradient($color-burger, $color-burger);
+    height: $burger-size;
+    width: $burger-size;
+    padding: $burger-padding;
+    background-color: $burger-background;
+    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;
-      background: $color-burger;
+      height: $burger-weight;
+      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;
    }
  }

--- a/sass/components/_checkbox.scss
+++ b/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 {
-  @extend .visually-hidden;
+// common styles
+.switch,
+.checkbox,
+.radio {
+  -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;
+  border-radius: $checkbox-border-radius;
+  background: #fff;

-  & ~ label {
-    display: flex;
+  ~ label {
    cursor: pointer;
+    user-select: none;
+  }

-    &: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: $border-radius;
-      box-shadow:  0 0 0 2px $color-checkbox inset;
-      transition: .25s background-color;
+  &::-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;
  }
 }
--- a/sass/components/_forms.scss
+++ b/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;
 }
--- a/sass/components/_radio.scss
+++ b/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;
-  }
-}
--- a/sass/components/_tables.scss
+++ b/sass/components/_tables.scss
@ -14,8 +14,8 @@ table,

 .table {
  display: table;
-  border: 1px solid $border-table;
-  background: $background-table;
+  border: 1px solid $table-border;
+  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;
-    background: $background-table-head;
+    color: $table-head-color;
+    background: $table-head-background;
  }
 }

--- a/sass/components/_tabs.scss
+++ b/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;
-    background: $background-tabs;
+    color: $tabs-color;
+    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;
-      color: $color-tabs-active;
-      background: $background-tabs-active;
+      border-bottom-color: $tabs-active-border;
+      color: $tabs-active-color;
+      background: $tabs-active-background;
      outline: 0;
    }

    &:focus {
-      border-bottom-color: $border-tabs-active;
-      color: $color-tabs-active;
+      border-bottom-color: $tabs-active-border;
+      color: $tabs-active-color;
      outline: 0;
    }

--- a/sass/knacss.scss
+++ b/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/_radio.scss"; // radio styles
+@import "components/_checkbox.scss"; // checkbox, radio, switch styles
@import "components/_tabs.scss"; // tabs styles
@import "components/_arrows.scss"; // arrows styles
@import "components/_badges.scss"; // badges styles