From f4123f0969a438df43c953b07b5db7d471c6be91 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 4 Mar 2022 17:35:02 +0200 Subject: [PATCH] Add tab and dropdown css. Add ovveride css for links, navbar --- css/import.css | 24 ++++++++------- css/openaire.css | 4 +++ css/structure/background.css | 4 +-- .../{breadcrumbs.css => breadcrumb.css} | 0 css/structure/dropdown.css | 30 +++++++++++++++++++ css/structure/link.css | 28 ++++++++++++----- css/structure/navbar.css | 26 +++++++++++++++- css/structure/tab.css | 28 +++++++++++++++++ css/structure/variables.css | 6 +++- 9 files changed, 127 insertions(+), 23 deletions(-) rename css/structure/{breadcrumbs.css => breadcrumb.css} (100%) create mode 100644 css/structure/dropdown.css create mode 100644 css/structure/tab.css diff --git a/css/import.css b/css/import.css index 669d790..ec1817f 100644 --- a/css/import.css +++ b/css/import.css @@ -3,19 +3,21 @@ @import "theme.update.css"; @import "structure/variables.css"; -@import "structure/height.css"; -@import "structure/text.css"; -@import "structure/button.css"; -@import "structure/link.css"; -@import "structure/background.css"; -@import "structure/icons.css"; -@import "structure/breadcrumbs.css"; -@import "structure/card.css"; -@import "structure/navbar.css"; -@import "structure/list.css"; @import "structure/alert.css"; -@import "structure/slider.css"; +@import "structure/background.css"; +@import "structure/breadcrumb.css"; +@import "structure/button.css"; +@import "structure/card.css"; +@import "structure/dropdown.css"; +@import "structure/height.css"; +@import "structure/icons.css"; @import "structure/input.css"; +@import "structure/link.css"; +@import "structure/list.css"; +@import "structure/navbar.css"; +@import "structure/slider.css"; +@import "structure/text.css"; +@import "structure/tab.css"; @import "openaire.css"; diff --git a/css/openaire.css b/css/openaire.css index b4234aa..48ee652 100644 --- a/css/openaire.css +++ b/css/openaire.css @@ -1 +1,5 @@ /* Overrides common to all dashboards*/ +.graph { + --link-color: var(--graph-color); + --font-primary-color: var(--graph-color); +} diff --git a/css/structure/background.css b/css/structure/background.css index 318b5df..b6f940e 100644 --- a/css/structure/background.css +++ b/css/structure/background.css @@ -1,9 +1,9 @@ :root{ --primary-background: var(--primary-color); - --primary-background-image: linear-gradient(51deg, var(--primary-color) 50%,var(--primary-color) 75%, var(--secondary-color) 100%); + --primary-background-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%); --primary-background-color: var(--light-color); --secondary-background: var(--secondary-color); - --secondary-background-image: linear-gradient(51deg, var(--primary-color) 50%,var(--primary-color) 75%, var(--secondary-color) 100%); + --secondary-background-image: none; --secondary-background-color: var(--light-color); } diff --git a/css/structure/breadcrumbs.css b/css/structure/breadcrumb.css similarity index 100% rename from css/structure/breadcrumbs.css rename to css/structure/breadcrumb.css diff --git a/css/structure/dropdown.css b/css/structure/dropdown.css new file mode 100644 index 0000000..d56cd68 --- /dev/null +++ b/css/structure/dropdown.css @@ -0,0 +1,30 @@ +:root { + --dropdown-background: var(--light-color); + --dropdown-color: var(--grey-color); + --dropdown-background-hover: var(--light-blue); + --dropdown-font-size: 14px; +} + + +.uk-navbar-dropdown, .uk-dropdown { + background: var(--dropdown-background); + border-radius: 0; + padding: 5px 0; +} + +.uk-navbar-dropdown-nav > li > a, .uk-dropdown-nav > li > a { + padding: 5px 30px; + background: transparent; + color: var(--dropdown-color); + font-weight: normal; + font-size: 14px; +} + +.uk-navbar-dropdown-nav > li:hover > a, .uk-dropdown-nav > li:hover > a, +.uk-navbar-dropdown-nav > li.uk-active > a, .uk-dropdown-nav > li.uk-active > a { + background: var(--dropdown-background-hover); +} + +.uk-nav > .uk-nav-divider { + margin: 5px 0; +} diff --git a/css/structure/link.css b/css/structure/link.css index 03ef229..f110e8a 100644 --- a/css/structure/link.css +++ b/css/structure/link.css @@ -1,13 +1,25 @@ -/*:root{ - --link-color: var(--primary-color); - --link-color-hover: var(--secondary-color); +:root { + --link-color: var(--primary-color); + --link-color-hover: var(--secondary-color); } - -.uk-link, a{ - color:var(--link-color); +/*.uk-button-text, .uk-button-text:hover { + color: var(--link-color); } -.uk-link:hover, a:hover{ - color:var(--link-color-hover); +.uk-button-text.uk-disabled, .uk-button-text:hover.uk-disabled { + color: var(--disable-color); }*/ + +.uk-link, a { + color: var(--link-color); +} + +.uk-link-muted { + color: var(--disable-color); +} + +.uk-link:hover, .uk-link-toggle:hover, .uk-link-muted:hover, .uk-link-text:hover, .uk-link-heading:hover { + color: var(--link-color-hover) !important; + text-decoration: underline !important; +} diff --git a/css/structure/navbar.css b/css/structure/navbar.css index 91af5d4..f0e31de 100644 --- a/css/structure/navbar.css +++ b/css/structure/navbar.css @@ -1,9 +1,33 @@ :root { --navbar-background-color: var(--light-color); --navbar-background-image: none; + --navbar-color: var(--grey-color); + --navbar-color-hover: var(--link-color); + --navbar-height: 90px; + --navbar-shadow: 0px 3px 6px #0000001A; } navbar .uk-navbar-container { - background-color: var(--navbar-background-color) !important; + background: var(--navbar-background-color) !important; background-image: var(--navbar-background-image) !important; + height: var(--navbar-height); + border-bottom: none !important; + box-shadow: var(--navbar-shadow); +} + +.uk-navbar-container .uk-logo { + padding-top: 10px; + padding-bottom: 10px; +} + +.uk-navbar-container .uk-logo > img { + max-height: calc(var(--navbar-height) - 20px); +} + +.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle { + min-height: var(--navbar-height); +} + +.uk-navbar-nav > li.uk-active >a::before, .uk-navbar-nav >li:hover >a::before, .uk-navbar-nav >li >a[aria-expanded=true]::before { + opacity: 0; } diff --git a/css/structure/tab.css b/css/structure/tab.css new file mode 100644 index 0000000..f6cc053 --- /dev/null +++ b/css/structure/tab.css @@ -0,0 +1,28 @@ +:root { + --tab-bar-border: 2px solid var(--muted-color); + --tab-color: var(--placeholder-color); + --tab-color-hover: var(--secondary-color); + --tab-active-border: 3px solid var(--secondary-color); + --tab-active-color: var(--primary-color); +} + +.uk-tab::before { + border-bottom: var(--tab-bar-border); + box-shadow: none; +} + +.uk-tab > li > a { + color: var(--tab-color); + font-weight: normal; + border-bottom: none; +} + +.uk-tab > * > a:hover { + color: var(--tab-color-hover); +} + +.uk-tab> li.uk-active > a { + color: var(--tab-active-color); + border-bottom: var(--tab-active-border); + font-weight: 600; +} diff --git a/css/structure/variables.css b/css/structure/variables.css index 436341a..bc89759 100644 --- a/css/structure/variables.css +++ b/css/structure/variables.css @@ -9,9 +9,11 @@ --dark-color: #2C2C2C; --grey-color: #4B4B4B; --placeholder-color: #8E8E8E; + --disable-color: #B3B3B3; --muted-color: #EAEAEA; --light-color: #FFFFFF; --default-color: #F9F9F9; + --light-blue: #F4F8F9; --explore-color: #D95F2D; --provide-color: #37C7E9; @@ -20,6 +22,8 @@ --monitor-color-rgb: 86, 166, 1; --monitor-light-color: #8BCC00; --monitor-dark-color: #228001; - /**/ + /* Connect */ --connect-color: #EBB13E; + /* Graph */ + --graph-color: #FA193E; }