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

new styles for tabs

Browse source
This commit is contained in:
Raphael Goetter 2017-08-08 15:33:53 +02:00
parent abe0ab4e83
commit 07a574134e
3 changed files with 52 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
css/knacss-unminified.css
View file

@ -2288,42 +2288,35 @@ 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 {
list-style: none; border-bottom: 2px solid #ddd;
padding-left: 0;
border-bottom: 2px solid #727e96;
}
.tabs-menu-item {
margin-bottom: -2px;
}
@media (min-width: 480px) {
.tabs-menu-item {
display: inline-block;
}
} }
.tabs-menu-link { .tabs-menu-link {
display: block; display: block;
margin-bottom: -2px;
padding: 0.5rem 3rem; padding: 0.5rem 3rem;
border-bottom: 4px solid transparent;
text-decoration: none; text-decoration: none;
-webkit-transition: .25s background-color; -webkit-transition: .25s;
transition: .25s background-color; transition: .25s;
} -webkit-transition-property: color, border, background-color;
transition-property: color, border, background-color;
@media (min-width: 480px) {
.tabs-menu-link {
display: inline-block;
}
}
.tabs-menu-link:hover, .tabs-menu-link:focus {
color: #727e96;
} }
.tabs-menu-link.is-active { .tabs-menu-link.is-active {
color: #fff; border-bottom-color: #ddd;
background-color: #727e96; outline: 0;
}
.tabs-menu-link:focus {
border-bottom-color: #727e96;
color: #727e96;
}
@media (min-width: 576px) {
.tabs-menu-link {
display: inline-block;
}
} }
.tabs-content-item { .tabs-content-item {

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

65
sass/components/tabs.scss
View file

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