dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tabs revisited

This commit is contained in:
Raphael Goetter 2017-09-07 15:54:20 +02:00
parent c87a1e1d11
commit b0030aeec2
4 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/knacss-unminified.css
View File

@ -2341,7 +2341,7 @@ button:focus {
/* see example on https://knacss.com/styleguide.html#tabs */
/* NOTE : tabs need JavaScript to be activated */
.tabs-menu {
border-bottom: 2px solid #ddd;
border-bottom: 2px solid #e7e9ed;
}
.tabs-menu-link {
@ -2349,7 +2349,10 @@ button:focus {
margin-bottom: -2px;
padding: 0.5rem 3rem;
border-bottom: 4px solid transparent;
color: #000;
background: transparent;
text-decoration: none;
border-radius: 0 0 0 0;
-webkit-transition: .25s;
transition: .25s;
-webkit-transition-property: color, border, background-color;
@ -2357,7 +2360,9 @@ button:focus {
}
.tabs-menu-link.is-active {
border-bottom-color: #ddd;
border-bottom-color: #727e96;
color: #727e96;
background: transparent;
outline: 0;
}
@ -2374,7 +2379,7 @@ button:focus {
}
.tabs-content-item {
padding-top: 10px;
padding-top: 1rem;
}
.tabs-content-item[aria-hidden="true"] {

2
css/knacss.css
View File

File diff suppressed because one or more lines are too long

10
sass/_config/_variables.scss
View File

@ -52,7 +52,6 @@ $color-link : $color-gray1;
$color-link-hover: $color-dark;
$color-forms : $color-gray3;
$color-burger : $color-dark;
// buttons, badges, alerts color variants list
// name - background-color - color - border
@ -66,6 +65,15 @@ $variants-list: (
(ghost, $color-ghost, $color-light, 0 0 0 1px $color-light inset)
);
// 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;
// burger button
$color-burger : $color-gray1;
$background-burger : transparent;

67
sass/components/_tabs.scss
View File

@ -4,45 +4,50 @@
/* see example on https://knacss.com/styleguide.html#tabs */
/* NOTE : tabs need JavaScript to be activated */
.tabs-menu {
border-bottom: 2px solid #ddd;
}
border-bottom: 2px solid $border-tabs;
.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;
}
&-link {
display: block;
margin-bottom: -2px;
padding: $tiny-value $medium-plus-value;
border-bottom: 4px solid transparent;
color: $color-tabs;
background: $background-tabs;
text-decoration: none;
border-radius: $border-radius-tabs $border-radius-tabs 0 0;
transition: .25s;
transition-property: color, border, background-color;
.tabs-menu-link.is-active {
border-bottom-color: #ddd;;
outline: 0;
}
.tabs-menu-link:focus {
border-bottom-color: $color-forms;
color: $color-forms;
outline: 0;
}
&.is-active {
border-bottom-color: $border-tabs-active;
color: $color-tabs-active;
background: $background-tabs-active;
outline: 0;
}
@media (min-width: $small) {
.tabs-menu-link {
display: inline-block;
&:focus {
border-bottom-color: $border-tabs-active;
color: $color-tabs-active;
outline: 0;
}
@media (min-width: $small) {
display: inline-block;
}
}
}
.tabs-content-item {
padding-top: 10px;
}
padding-top: $small-value;
.tabs-content-item[aria-hidden="true"] {
visibility: hidden;
@extend .visually-hidden;
}
&[aria-hidden="true"] {
visibility: hidden;
@extend .visually-hidden;
}
.tabs-content-item[aria-hidden="false"] {
visibility: visible;
&[aria-hidden="false"] {
visibility: visible;
}
}