mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-27 21:47:59 +01:00
95 lines
2.1 KiB
SCSS
95 lines
2.1 KiB
SCSS
|
.header {
|
||
|
|
background: var(--primary-color);
|
||
|
|
line-height: var(--navbar-size);
|
||
|
|
padding: 0 var(--padding-normal);
|
||
|
|
border-bottom: 1px solid var(--primary-border-color);
|
||
|
|
box-shadow: 0 1px var(--primary-muted-color) inset, 0 -1px var(--primary-dark-color) inset;
|
||
|
|
font-size: var(--font-header-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header--secondary {
|
||
|
|
background: var(--secondary-dark-color);
|
||
|
|
border-color: var(--secondary-color);
|
||
|
|
line-height: var(--navbar-secondary-size);
|
||
|
|
|
||
|
|
.header__link {
|
||
|
|
border-right-color: var(--secondary-color);
|
||
|
|
border-left-color: var(--secondary-dark-color);
|
||
|
|
|
||
|
|
& > .fa {
|
||
|
|
margin-right: var(--padding-small);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--secondary-muted-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__spacer {
|
||
|
|
flex: 1 0 auto;
|
||
|
|
height: var(--navbar-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__link {
|
||
|
|
color: var(--text-color) !important;
|
||
|
|
display: block;
|
||
|
|
flex-shrink: 0;
|
||
|
|
padding: 0 var(--padding-small);
|
||
|
|
border-right: 1px solid var(--primary-border-color);
|
||
|
|
border-left: 1px solid var(--primary-dark-color);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--primary-dark-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__link--no-hover:hover {
|
||
|
|
background: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__input {
|
||
|
|
@include animated-transition;
|
||
|
|
height: var(--navbar-input-size);
|
||
|
|
background: var(--primary-muted-color);
|
||
|
|
font-size: var(--font-size);
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
select.header__input {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
select.header__input:hover {
|
||
|
|
@include animated-transition;
|
||
|
|
background: var(--primary-dark-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__search {
|
||
|
|
@extend .flex__row;
|
||
|
|
height: var(--navbar-size);
|
||
|
|
padding: 0 var(--padding-small);
|
||
|
|
border-right: 1px solid var(--primary-border-color);
|
||
|
|
border-left: 1px solid var(--primary-dark-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__buttons {
|
||
|
|
border: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
border-left: 1px solid var(--primary-dark-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__search__button {
|
||
|
|
height: var(--navbar-input-size);
|
||
|
|
background: var(--primary-muted-color);
|
||
|
|
box-shadow: 0 -1px var(--secondary-dark-color) inset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__search__button:hover {
|
||
|
|
background: var(--primary-dark-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header__filter-form {
|
||
|
|
padding: 0 var(--padding-small);
|
||
|
|
}
|