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

59 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);
2017-10-16 02:38:47 +02:00
user-select: none;
2017-09-18 02:27:50 +02:00
> 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 08:00:43 +02:00
margin: 0 12px;
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%;}
}