KNACSS/sass/components/tabs.scss

48 lines
965 B
SCSS
Raw Normal View History

2017-08-01 21:13:27 +02:00
/* ----------------------------- */
/* ==Tabs */
/* ----------------------------- */
/* see example on https://knacss.com/styleguide.html#tabs */
/* NOTE : tabs need JavaScript to be activated */
.tabs-menu {
2017-08-08 15:33:53 +02:00
border-bottom: 2px solid #ddd;
}
2017-08-01 21:13:27 +02:00
2017-08-08 15:33:53 +02:00
.tabs-menu-link {
display: block;
margin-bottom: -2px;
padding: $tiny-value $medium-plus-value;
border-bottom: 4px solid transparent;
text-decoration: none;
transition: .25s;
transition-property: color, border, background-color;
}
2017-08-01 21:13:27 +02:00
2017-08-08 15:33:53 +02:00
.tabs-menu-link.is-active {
border-bottom-color: #ddd;;
outline: 0;
}
.tabs-menu-link:focus {
border-bottom-color: $color-forms;
color: $color-forms;
}
2017-08-01 21:13:27 +02:00
2017-08-08 15:33:53 +02:00
@media (min-width: $small) {
.tabs-menu-link {
display: inline-block;
2017-08-01 21:13:27 +02:00
}
}
.tabs-content-item {
padding-top: 10px;
2017-08-08 15:33:53 +02:00
}
2017-08-01 21:13:27 +02:00
2017-08-08 15:33:53 +02:00
.tabs-content-item[aria-hidden="true"] {
visibility: hidden;
@extend .visually-hidden;
}
2017-08-01 21:13:27 +02:00
2017-08-08 15:33:53 +02:00
.tabs-content-item[aria-hidden="false"] {
visibility: visible;
2017-08-01 21:13:27 +02:00
}