Improving header styles

This commit is contained in:
Fabian
2019-07-29 16:10:43 +02:00
parent b5b7285e38
commit c3dbc1d857
3 changed files with 45 additions and 22 deletions

View File

@ -1,35 +1,56 @@
:root {
--header-height: 4rem;
}
.header {
background: $primary !important;
color: $on-primary !important;
display: flex;
justify-content: space-between;
padding: .75rem;
margin-bottom: .5rem;
// justify-content: space-between;
padding: 1rem;
>* {
max-height: 2rem;
margin: 0;
background: $primary;
color: $on-primary;
}
.header-title {
overflow: hidden;
>*:not(:last-child) {
margin-right: 1rem;
}
span {
line-height: 1.5rem;
font-size: 1.5rem;
padding: .25rem;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
margin: 0 1rem;
}
.header-icon-button {
display: block;
margin-top: auto;
margin-bottom: auto;
min-width: $default-font-size;
>svg {
height: $default-font-size;
width: $default-font-size;
}
svg {
height: 2rem;
width: auto;
}
// .header-title {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// flex-grow: 1;
// margin: 0 1rem;
// }
// .header-icon-button {
// display: block;
// margin-top: auto;
// margin-bottom: auto;
// min-width: 1rem;
// >svg {
// height: 1rem;
// width: 1rem;
// }
// }
}