From c3dbc1d8574b6fbeac58d3db9dcaa677d8495cc5 Mon Sep 17 00:00:00 2001 From: Fabian Date: Mon, 29 Jul 2019 16:10:43 +0200 Subject: [PATCH] Improving header styles --- src/base.scss | 5 ++-- src/base/_global.scss | 7 ++++-- src/base/_header.scss | 55 ++++++++++++++++++++++++++++++------------- 3 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/base.scss b/src/base.scss index 4e852b0..b920f34 100644 --- a/src/base.scss +++ b/src/base.scss @@ -9,16 +9,15 @@ } :root { - // --primary: #1e88e5; --primary: #196eb9; - // or 196eb9 => Needs further investigations + // 1e88e5 or 196eb9 => Needs further investigations --on-primary: white; --secondary: #d8701b; --on-secondary: black; --error: rgb(255, 0, 0); + --primary-transparent: #196eb917 } -$default-font-size: 1rem; $primary: var(--primary) !default; $on-primary: var(--on-primary) !default; diff --git a/src/base/_global.scss b/src/base/_global.scss index e9929f8..ca64dff 100644 --- a/src/base/_global.scss +++ b/src/base/_global.scss @@ -1,10 +1,9 @@ * { box-sizing: border-box; font-family: 'Roboto', sans-serif; - font-size: $default-font-size; + font-size: 1rem; } - html, body { margin: 0; @@ -43,4 +42,8 @@ h5 { h6 { font-size: .67rem; +} + +hr { + border-top: 1px solid rgb(128, 128, 128); } \ No newline at end of file diff --git a/src/base/_header.scss b/src/base/_header.scss index 6e107e4..fb4c1a5 100644 --- a/src/base/_header.scss +++ b/src/base/_header.scss @@ -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; + // } + // } } \ No newline at end of file