LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

split tabs style from header

Browse source
This commit is contained in:
btzr-io 2017-09-17 18:27:50 -06:00
parent b49e5f3075
commit 15216d0cad
3 changed files with 58 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/scss/all.scss
View file

@ -21,5 +21,6 @@
@import "component/_video.scss"; @import "component/_video.scss";
@import "component/_pagination.scss"; @import "component/_pagination.scss";
@import "component/_markdown-editor.scss"; @import "component/_markdown-editor.scss";
@import "component/_tabs.scss";
@import "page/_developer.scss"; @import "page/_developer.scss";
@import "page/_show.scss"; @import "page/_show.scss";

58
ui/scss/component/_header.scss
View file

@ -56,61 +56,3 @@
border-color: var(--color-primary); border-color: var(--color-primary);
} }
} }
/* 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;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
vertical-align: baseline;
margin: 0 8px;
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;
animation-duration: 0.3s;
animation-timing-function: cubic-bezier(.55,0,.1,1);
}
}
&:hover
{
color: var(--tab-active-color);
}
}
}
@keyframes activeTab {
from {width: 0;}
to {width: 100%;}
}

57
ui/scss/component/_tabs.scss
View file

@ -0,0 +1,57 @@
/* 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;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
vertical-align: baseline;
margin: 0 8px;
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;
animation-duration: 0.3s;
animation-timing-function: cubic-bezier(.55,0,.1,1);
}
}
&:hover
{
color: var(--tab-active-color);
}
}
}
@keyframes activeTab {
from {width: 0;}
to {width: 100%;}
}