lbry-desktop/ui/scss/component/_tabs.scss

58 lines
1.1 KiB
SCSS
Raw Normal View History

2017-09-18 02:27:50 +02:00
/* Tabs */
nav.sub-header
{
text-transform: uppercase;
max-width: $width-page-constrained;
margin-bottom: 40px;
border-bottom: var(--divider);
> a
{
height: 38px;
line-height: 38px;
text-align: center;
2017-10-03 06:08:25 +02:00
font-weight: 500;
2017-09-18 02:27:50 +02:00
text-transform: uppercase;
display: inline-block;
vertical-align: baseline;
2017-10-05 05:07:04 +02:00
margin: 0 16px;
2017-09-18 02:27:50 +02:00
padding: 0 8px;
color: var(--tab-color);
position: relative;
&:first-child
{
margin-left: 0;
}
&:last-child
{
margin-right: 0;
}
&.sub-header-selected
{
color: var(--tab-active-color);
&:before {
width: 100%;
height: var(--tab-border-size);
background: var(--tab-active-color);
position: absolute;
bottom: 0;
left: 0;
content: '';
animation-name: activeTab;
2017-10-03 03:35:52 +02:00
animation-duration: var(--animation-duration);
animation-timing-function: var(--animation-style);
2017-09-18 02:27:50 +02:00
}
}
&:hover
{
color: var(--tab-active-color);
}
}
}
@keyframes activeTab {
from {width: 0;}
to {width: 100%;}
}