onglets (tabs)

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                      */
 /* ----------------------------- */