onglets (tabs)

changelog.md

@@ -8,6 +8,7 @@
 - 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 onglets (tabs)
 - refonte des styles de formulaires
 - autogrid object en Grid Layout
 - regroupement des styles des tableaux

css/knacss-unminified.css

@@ -25,6 +25,7 @@
   - Buttons (buttons consistency)
   - Checkbox (checkbox styles)
   - Radio (radio styles)
+  - Tabs (tabs styles)
   - Badges (badges consistency)
   - Alerts (alerts consistency)
   - Grillade (Grid System in Flexbox)
@@ -1085,7 +1086,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, .button-burger > *, .checkbox, .radio {
+.visually-hidden, .button-burger > *, .checkbox, .radio, .tabs-content-item[aria-hidden="true"] {
   position: absolute !important;
   border: 0 !important;
   height: 1px !important;
@@ -1731,7 +1732,7 @@ ul.is-unstyled, ul.unstyled {
 /* ==Media object                */
 /* ----------------------------- */
 /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
-@media (min-width: 576px) {
+@media (min-width: 480px) {
   .media {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -1761,7 +1762,7 @@ ul.is-unstyled, ul.unstyled {
 /* ==Autogrid object             */
 /* ----------------------------- */
 /* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
-@media (min-width: 576px) {
+@media (min-width: 480px) {
   .autogrid {
     display: -ms-grid;
     display: grid;
@@ -2276,6 +2277,63 @@ button:focus {
   pointer-events: none;
 }
 
+/* ----------------------------- */
+/* ==Tabs                        */
+/* ----------------------------- */
+/* see example on https://knacss.com/styleguide.html#tabs */
+/* NOTE : tabs need JavaScript to be activated */
+.tabs-menu {
+  list-style: none;
+  padding-left: 0;
+  border-bottom: 2px solid #777;
+}
+
+.tabs-menu-item {
+  margin-bottom: -2px;
+}
+
+@media (min-width: 480px) {
+  .tabs-menu-item {
+    display: inline-block;
+  }
+}
+
+.tabs-menu-link {
+  display: block;
+  padding: 0.5rem 3rem;
+  text-decoration: none;
+  -webkit-transition: .25s background-color;
+  transition: .25s background-color;
+}
+
+@media (min-width: 480px) {
+  .tabs-menu-link {
+    display: inline-block;
+  }
+}
+
+.tabs-menu-link:focus, .tabs-menu-link:hover {
+  outline: 0;
+  color: #777;
+}
+
+.tabs-menu-link.is-active {
+  color: #fff;
+  background-color: #777;
+}
+
+.tabs-content-item {
+  padding-top: 10px;
+}
+
+.tabs-content-item[aria-hidden="true"] {
+  visibility: hidden;
+}
+
+.tabs-content-item[aria-hidden="false"] {
+  visibility: visible;
+}
+
 /* ----------------------------- */
 /* ==Badges                      */
 /* ----------------------------- */

sass/components/tabs.scss

@@ -0,0 +1,51 @@
+/* ----------------------------- */
+/* ==Tabs                        */
+/* ----------------------------- */
+/* see example on https://knacss.com/styleguide.html#tabs */
+/* NOTE : tabs need JavaScript to be activated */
+
+.tabs-menu {
+  list-style: none;
+  padding-left: 0;
+  border-bottom: 2px solid $color-forms;
+
+  &-item {
+    @media (min-width: $tiny) {
+      display: inline-block;
+    }
+    margin-bottom: -2px;
+  }
+
+  &-link {
+    display: block;
+    @media (min-width: $tiny) {
+      display: inline-block;
+    }
+    padding: $tiny-value $medium-plus-value;
+    text-decoration: none;
+    transition: .25s background-color;
+
+    &:focus, &:hover {
+      outline: 0;
+      color: $color-forms;
+    }
+
+    &.is-active {
+      color: #fff;
+      background-color: $color-forms;
+    }
+  }
+}
+
+.tabs-content-item {
+  padding-top: 10px;
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    @extend .visually-hidden;
+  }
+
+  &[aria-hidden="false"] {
+    visibility: visible;
+  }
+}

sass/knacss.scss

@@ -26,6 +26,7 @@
   - Buttons (buttons consistency)
   - Checkbox (checkbox styles)
   - Radio (radio styles)
+  - Tabs (tabs styles)
   - Badges (badges consistency)
   - Alerts (alerts consistency)
   - Grillade (Grid System in Flexbox)
@@ -58,6 +59,7 @@
 @import "components/buttons.scss"; // buttons styles
 @import "components/checkbox.scss"; // checkbox styles
 @import "components/radio.scss"; // radio styles
+@import "components/tabs.scss"; // tabs styles
 @import "components/badges.scss"; // badges styles
 @import "components/alerts.scss"; // alerts styles
 @import "components/grillade.scss"; // grids