a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restyle sidebar with colour

Browse Source
This commit is contained in:
Tom Russell 2019-01-22 19:39:27 +00:00
parent d39d5a2e9f
commit 6d054919f8
1 changed files with 78 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
app/src/frontend/sidebar.css
View File

@ -9,7 +9,6 @@
bottom: 3rem; bottom: 3rem;
padding: 0.25em 0em 2em; padding: 0.25em 0em 2em;
background: #fff; background: #fff;
background-color: rgba(255,255,255,0.98);
z-index: 1000; z-index: 1000;
overflow-y: auto; overflow-y: auto;
} }
@ -54,8 +53,26 @@
/** /**
* Sidebar main header * 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 { .sidebar-header h2 {
margin-top: 0.45rem; margin: 0.45rem 0 0.6rem;
display: inline-block; display: inline-block;
} }
.sidebar-header .icon-button { .sidebar-header .icon-button {
@ -76,10 +93,11 @@
clear: both; clear: both;
text-decoration: none; text-decoration: none;
color: #222; color: #222;
transition: border-color 0.2s;
border-style: solid; border-style: solid;
border-color: #fff; 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 { .section-header h3 {
display: inline-block; display: inline-block;
@ -95,91 +113,105 @@
color: #222; color: #222;
text-decoration: none; text-decoration: none;
} }
.section-header.active.location { .data-section:first-of-type .section-header {
border-color: #edc40b; border-top-color: #fff;
} }
.section-header.location:hover { .section-header.active.location {
border-color: #fae897; border-bottom-color: #edc40b;
}
.section-header.location:hover > a::before,
.section-header.location.active > a::before {
color: #edc40b;
} }
.section-header.active.use { .section-header.active.use {
border-color: #f0ee0c; border-bottom-color: #f0ee0c;
} }
.section-header.use:hover { .section-header.use:hover > a::before,
border-color: #f6f552; .section-header.use.active > a::before {
color: #f0ee0c;
} }
.section-header.active.type { .section-header.active.type {
border-color: #ff9100; border-bottom-color: #ff9100;
} }
.section-header.type:hover { .section-header.type:hover > a::before,
border-color: #ffb24d; .section-header.type.active > a::before {
color: #ff9100;
} }
.section-header.active.age { .section-header.active.age {
border-color: #ee5f63; border-bottom-color: #ee5f63;
} }
.section-header.age:hover { .section-header.age:hover > a::before,
border-color: #f5a4a6; .section-header.age.active > a::before {
color: #ee5f63;
} }
.section-header.active.size { .section-header.active.size {
border-color: #ee91bf; border-bottom-color: #ee91bf;
} }
.section-header.size:hover { .section-header.size:hover > a::before,
border-color: #f8d3e6; .section-header.size.active > a::before {
color: #ee91bf;
} }
.section-header.active.construction { .section-header.active.construction {
border-color: #aa7fa7; border-bottom-color: #aa7fa7;
} }
.section-header.construction:hover { .section-header.construction:hover > a::before,
border-color: #c9adc7; .section-header.construction.active > a::before {
color: #aa7fa7;
} }
.section-header.active.team { .section-header.active.team {
border-color: #6f879c; border-bottom-color: #6f879c;
} }
.section-header.team:hover { .section-header.team:hover > a::before,
border-color: #9cadbb; .section-header.team.active > a::before {
color: #6f879c;
} }
.section-header.active.sustainability { .section-header.active.sustainability {
border-color: #5ec232; border-bottom-color: #5ec232;
} }
.section-header.sustainability:hover { .section-header.sustainability:hover > a::before,
border-color: #8bd868; .section-header.sustainability.active > a::before {
color: #5ec232;
} }
.section-header.active.greenery { .section-header.active.greenery {
border-color: #6dbb8b; border-bottom-color: #6dbb8b;
} }
.section-header.greenery:hover { .section-header.greenery:hover > a::before,
border-color: #8bd868; .section-header.greenery.active > a::before {
color: #6dbb8b;
} }
.section-header.active.planning { .section-header.active.planning {
border-color: #65b7ff; border-bottom-color: #65b7ff;
} }
.section-header.planning:hover { .section-header.planning:hover > a::before,
border-color: #b2dbff; .section-header.planning.active > a::before {
color: #65b7ff;
} }
.section-header.active.demolition { .section-header.active.demolition {
border-color: #a1a3a9; border-bottom-color: #a1a3a9;
} }
.section-header.demolition:hover { .section-header.demolition:hover > a::before,
border-color: #c9cace; .section-header.demolition.active > a::before {
color: #a1a3a9;
} }
.section-header.active.like { .section-header.active.like {
border-color: #9c896d; border-bottom-color: #9c896d;
} }
.section-header.like:hover { .section-header.like:hover > a::before,
border-color: #bbae9b; .section-header.like.active > a::before {
color: #9c896d;
} }
.section-header > a::before { .section-header > a::before {
display: block; display: block;
position: absolute; position: absolute;
left: 0.55rem; left: 0.55rem;
top: 0.3rem; top: 0.4rem;
width: 1.2rem; width: 1.2rem;
height: 1rem; height: 1rem;
text-align: center; text-align: center;
color: #222264; color: #222264;
font-size: 1.2rem; font-size: 1.2rem;
content: '\25B8'; content: '\25B8';
transition: color 0.2s;
} }
.section-header:hover > a::before, .section-header:hover > a::before,
.section-header.active > a::before { .section-header.active > a::before {
@ -187,11 +219,9 @@
} }
.section-header:hover > a::before, .section-header:hover > a::before,
.section-header.active > a::before { .section-header.active > a::before {
top: 0.6rem;
content: '\25BC'; content: '\25BC';
} }
.section-header.view.active:hover > a::before {
content: '\25B2';
}
.data-section.inactive .section-header, .data-section.inactive .section-header,
.data-section.inactive .section-header > a { .data-section.inactive .section-header > a {
@ -202,19 +232,11 @@
.data-section.inactive .section-header.active > a { .data-section.inactive .section-header.active > a {
color: #222; 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 { .section-header .icon-buttons {
position: absolute; position: absolute;
top: 0; top: 0;
right: 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 { .data-intro {
padding: 0 0.5rem 0 2.25rem; padding: 0 0.5rem 0 2.25rem;
margin-top: 0.25rem; margin-top: 0.5rem;
} }
.data-list { .data-list {
margin: 0; margin: 0;