OpenServer/Theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improving header styles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/base.scss
View File

@ -9,16 +9,15 @@
} }
:root { :root {
// --primary: #1e88e5;
--primary: #196eb9; --primary: #196eb9;
// or 196eb9 => Needs further investigations // 1e88e5 or 196eb9 => Needs further investigations
--on-primary: white; --on-primary: white;
--secondary: #d8701b; --secondary: #d8701b;
--on-secondary: black; --on-secondary: black;
--error: rgb(255, 0, 0); --error: rgb(255, 0, 0);
--primary-transparent: #196eb917
} }
$default-font-size: 1rem;
$primary: var(--primary) !default; $primary: var(--primary) !default;
$on-primary: var(--on-primary) !default; $on-primary: var(--on-primary) !default;

7
src/base/_global.scss
View File

@ -1,10 +1,9 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: $default-font-size; font-size: 1rem;
} }
html, html,
body { body {
margin: 0; margin: 0;
@ -44,3 +43,7 @@ h5 {
h6 { h6 {
font-size: .67rem; font-size: .67rem;
} }
hr {
border-top: 1px solid rgb(128, 128, 128);
}

55
src/base/_header.scss
View File

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