Tabs revisited
This commit is contained in:
parent
c87a1e1d11
commit
b0030aeec2
4 changed files with 54 additions and 36 deletions
|
@ -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"] {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
.tabs-menu-link {
|
||||
.tabs-menu {
|
||||
border-bottom: 2px solid $border-tabs;
|
||||
|
||||
&-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;;
|
||||
&.is-active {
|
||||
border-bottom-color: $border-tabs-active;
|
||||
color: $color-tabs-active;
|
||||
background: $background-tabs-active;
|
||||
outline: 0;
|
||||
}
|
||||
.tabs-menu-link:focus {
|
||||
border-bottom-color: $color-forms;
|
||||
color: $color-forms;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $small) {
|
||||
.tabs-menu-link {
|
||||
&: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"] {
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
@extend .visually-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-content-item[aria-hidden="false"] {
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue