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

63 lines
1.3 KiB
SCSS
Raw Normal View History

#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;
2017-08-22 04:23:38 +02:00
.button-alt {
background: var(--header-button-bg) !important;
2017-10-03 03:27:44 +02:00
font-size: 18px;
}
.button-alt:hover {
background: var(--header-button-hover-bg) !important;
2017-08-22 04:23:38 +02:00
}
}
2017-08-22 04:23:38 +02:00
.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;
2017-09-07 00:03:09 +02:00
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);
}
}