onglets (tabs)

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