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

90 lines
1.8 KiB
SCSS
Raw Normal View History

@import "../global";
#header
{
color: var(--header-color);
background: var(--header-bg);
display: flex;
position: fixed;
box-shadow: var(--box-shadow-layer);
top: 0;
left: 0;
width: 100%;
z-index: 3;
padding: $spacing-vertical / 2;
box-sizing: border-box;
}
.header__item {
flex: 0 0 content;
padding-left: $spacing-vertical / 4;
padding-right: $spacing-vertical / 4;
}
.header__item--wunderbar {
flex-grow: 1;
}
.wunderbar
{
position: relative;
.icon {
position: absolute;
left: 10px;
top: $spacing-vertical / 2 - 4px; //hacked
}
}
2017-04-27 15:17:18 +02:00
2017-08-18 07:37:35 +02:00
.wunderbar--active .icon-search { color: var(--color-primary); }
2017-04-27 15:17:18 +02:00
.wunderbar__input {
background: var(--search-bg);
width: 100%;
color: var(--search-color);
height: $spacing-vertical * 1.5;
line-height: $spacing-vertical * 1.5;
padding-left: 38px;
padding-right: 5px;
@include border-radius(2px);
border: var(--search-border);
2017-08-20 07:58:03 +02:00
transition: box-shadow var(--transition-duration) var(--transition-type);
&:focus {
2017-08-20 07:58:03 +02:00
background: var(--search-active-bg);
color: var(--search-active-color);
2017-08-18 07:37:35 +02:00
box-shadow: var(--box-shadow-focus);
border-color: var(--color-primary);
}
}
nav.sub-header
{
text-transform: uppercase;
2017-04-27 15:17:18 +02:00
padding: 0 0 $spacing-vertical;
2017-05-04 05:44:08 +02:00
max-width: $width-page-constrained;
margin-left: auto;
margin-right: auto;
> a
{
display: inline-block;
margin: 0 15px;
padding: 0 5px;
line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
color: var(--tab-color);
&:first-child
{
margin-left: 0;
}
&:last-child
{
margin-right: 0;
}
&.sub-header-selected
{
border-bottom: var(--tab-border);
color: var(--tab-active-color);
}
&:hover
{
color: var(--tab-active-color);
}
}
2017-08-18 07:37:35 +02:00
}