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

Tabs revisited

Browse source
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 */ /* see example on https://knacss.com/styleguide.html#tabs */
/* NOTE : tabs need JavaScript to be activated */ /* NOTE : tabs need JavaScript to be activated */
.tabs-menu { .tabs-menu {
border-bottom: 2px solid #ddd; border-bottom: 2px solid #e7e9ed;
} }
.tabs-menu-link { .tabs-menu-link {
@ -2349,7 +2349,10 @@ button:focus {
margin-bottom: -2px; margin-bottom: -2px;
padding: 0.5rem 3rem; padding: 0.5rem 3rem;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
color: #000;
background: transparent;
text-decoration: none; text-decoration: none;
border-radius: 0 0 0 0;
-webkit-transition: .25s; -webkit-transition: .25s;
transition: .25s; transition: .25s;
-webkit-transition-property: color, border, background-color; -webkit-transition-property: color, border, background-color;
@ -2357,7 +2360,9 @@ button:focus {
} }
.tabs-menu-link.is-active { .tabs-menu-link.is-active {
border-bottom-color: #ddd; border-bottom-color: #727e96;
color: #727e96;
background: transparent;
outline: 0; outline: 0;
} }
@ -2374,7 +2379,7 @@ button:focus {
} }
.tabs-content-item { .tabs-content-item {
padding-top: 10px; padding-top: 1rem;
} }
.tabs-content-item[aria-hidden="true"] { .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-link-hover: $color-dark;
$color-forms : $color-gray3; $color-forms : $color-gray3;
$color-burger : $color-dark;
// buttons, badges, alerts color variants list // buttons, badges, alerts color variants list
// name - background-color - color - border // name - background-color - color - border
@ -66,6 +65,15 @@ $variants-list: (
(ghost, $color-ghost, $color-light, 0 0 0 1px $color-light inset) (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 // burger button
$color-burger : $color-gray1; $color-burger : $color-gray1;
$background-burger : transparent; $background-burger : transparent;

45
sass/components/_tabs.scss
View file

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