From 6d054919f84e1adede810b4a1c4e30661a5a3f32 Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Tue, 22 Jan 2019 19:39:27 +0000 Subject: [PATCH] Restyle sidebar with colour --- app/src/frontend/sidebar.css | 134 ++++++++++++++++++++--------------- 1 file changed, 78 insertions(+), 56 deletions(-) diff --git a/app/src/frontend/sidebar.css b/app/src/frontend/sidebar.css index c2536576..39d14a64 100644 --- a/app/src/frontend/sidebar.css +++ b/app/src/frontend/sidebar.css @@ -9,7 +9,6 @@ bottom: 3rem; padding: 0.25em 0em 2em; background: #fff; - background-color: rgba(255,255,255,0.98); z-index: 1000; overflow-y: auto; } @@ -54,8 +53,26 @@ /** * Sidebar main header */ +.sidebar-header { + border-bottom: 6px solid; + border-image: linear-gradient( + to right, + #edc40b 0%, #edc40b 8.3%, + #f0ee0c 8.3%, #f0ee0c 16.6%, + #ff9100 16.6%, #ff9100 25%, + #ee5f63 25%, #ee5f63 33.3%, + #ee91bf 33.3%, #ee91bf 41.6%, + #aa7fa7 41.6%, #aa7fa7 50%, + #6f879c 50%, #6f879c 58.3%, + #5ec232 58.3%, #5ec232 66.6%, + #6dbb8b 66.6%, #6dbb8b 75%, + #65b7ff 75%, #65b7ff 83.3%, + #a1a3a9 83.3%, #a1a3a9 91.6%, + #9c896d 91.6%, #9c896d 100% + ) 1; +} .sidebar-header h2 { - margin-top: 0.45rem; + margin: 0.45rem 0 0.6rem; display: inline-block; } .sidebar-header .icon-button { @@ -76,10 +93,11 @@ clear: both; text-decoration: none; color: #222; - transition: border-color 0.2s; border-style: solid; border-color: #fff; - border-width: 4px 0 4px 0; + border-top-color: #222; + border-width: 1px 0 4px 0; + padding-top: 0.2rem; } .section-header h3 { display: inline-block; @@ -95,91 +113,105 @@ color: #222; text-decoration: none; } -.section-header.active.location { - border-color: #edc40b; +.data-section:first-of-type .section-header { + border-top-color: #fff; } -.section-header.location:hover { - border-color: #fae897; +.section-header.active.location { + border-bottom-color: #edc40b; +} +.section-header.location:hover > a::before, +.section-header.location.active > a::before { + color: #edc40b; } .section-header.active.use { - border-color: #f0ee0c; + border-bottom-color: #f0ee0c; } -.section-header.use:hover { - border-color: #f6f552; +.section-header.use:hover > a::before, +.section-header.use.active > a::before { + color: #f0ee0c; } .section-header.active.type { - border-color: #ff9100; + border-bottom-color: #ff9100; } -.section-header.type:hover { - border-color: #ffb24d; +.section-header.type:hover > a::before, +.section-header.type.active > a::before { + color: #ff9100; } .section-header.active.age { - border-color: #ee5f63; + border-bottom-color: #ee5f63; } -.section-header.age:hover { - border-color: #f5a4a6; +.section-header.age:hover > a::before, +.section-header.age.active > a::before { + color: #ee5f63; } .section-header.active.size { - border-color: #ee91bf; + border-bottom-color: #ee91bf; } -.section-header.size:hover { - border-color: #f8d3e6; +.section-header.size:hover > a::before, +.section-header.size.active > a::before { + color: #ee91bf; } .section-header.active.construction { - border-color: #aa7fa7; + border-bottom-color: #aa7fa7; } -.section-header.construction:hover { - border-color: #c9adc7; +.section-header.construction:hover > a::before, +.section-header.construction.active > a::before { + color: #aa7fa7; } .section-header.active.team { - border-color: #6f879c; + border-bottom-color: #6f879c; } -.section-header.team:hover { - border-color: #9cadbb; +.section-header.team:hover > a::before, +.section-header.team.active > a::before { + color: #6f879c; } .section-header.active.sustainability { - border-color: #5ec232; + border-bottom-color: #5ec232; } -.section-header.sustainability:hover { - border-color: #8bd868; +.section-header.sustainability:hover > a::before, +.section-header.sustainability.active > a::before { + color: #5ec232; } .section-header.active.greenery { - border-color: #6dbb8b; + border-bottom-color: #6dbb8b; } -.section-header.greenery:hover { - border-color: #8bd868; +.section-header.greenery:hover > a::before, +.section-header.greenery.active > a::before { + color: #6dbb8b; } .section-header.active.planning { - border-color: #65b7ff; + border-bottom-color: #65b7ff; } -.section-header.planning:hover { - border-color: #b2dbff; +.section-header.planning:hover > a::before, +.section-header.planning.active > a::before { + color: #65b7ff; } .section-header.active.demolition { - border-color: #a1a3a9; + border-bottom-color: #a1a3a9; } -.section-header.demolition:hover { - border-color: #c9cace; +.section-header.demolition:hover > a::before, +.section-header.demolition.active > a::before { + color: #a1a3a9; } .section-header.active.like { - border-color: #9c896d; + border-bottom-color: #9c896d; } -.section-header.like:hover { - border-color: #bbae9b; +.section-header.like:hover > a::before, +.section-header.like.active > a::before { + color: #9c896d; } .section-header > a::before { display: block; position: absolute; left: 0.55rem; - top: 0.3rem; + top: 0.4rem; width: 1.2rem; height: 1rem; text-align: center; color: #222264; font-size: 1.2rem; content: '\25B8'; - transition: color 0.2s; } .section-header:hover > a::before, .section-header.active > a::before { @@ -187,11 +219,9 @@ } .section-header:hover > a::before, .section-header.active > a::before { + top: 0.6rem; content: '\25BC'; } -.section-header.view.active:hover > a::before { - content: '\25B2'; -} .data-section.inactive .section-header, .data-section.inactive .section-header > a { @@ -202,19 +232,11 @@ .data-section.inactive .section-header.active > a { color: #222; } -.data-section.inactive .section-header > a::before, -.data-section.inactive .section-header:hover > a::before, -.data-section.inactive .section-header.active:hover > a::before { - opacity: 0.4; - color: #222; - font-size: 1.2rem; - content: '\25B8'; -} .section-header .icon-buttons { position: absolute; top: 0; right: 0; - padding: 0.6rem 0.5rem 0.5rem 0; + padding: 0.7rem 0.5rem 0.5rem 0; } /** @@ -308,7 +330,7 @@ } .data-intro { padding: 0 0.5rem 0 2.25rem; - margin-top: 0.25rem; + margin-top: 0.5rem; } .data-list { margin: 0;