From daca8e46ee70e3a5ee731c1fbae042b7ede789ce Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Sat, 20 Oct 2018 11:33:27 +0100
Subject: [PATCH] Split main.css to app/sidebar/transitions.css

---
 app/src/frontend/app.css                |   6 +
 app/src/frontend/app.js                 |   2 +-
 app/src/frontend/main.css               | 213 ------------------------
 app/src/frontend/sidebar.css            | 171 +++++++++++++++++++
 app/src/frontend/styles/transitions.css |  38 +++++
 5 files changed, 216 insertions(+), 214 deletions(-)
 create mode 100755 app/src/frontend/app.css
 delete mode 100755 app/src/frontend/main.css
 create mode 100644 app/src/frontend/styles/transitions.css

diff --git a/app/src/frontend/app.css b/app/src/frontend/app.css
new file mode 100755
index 00000000..84542938
--- /dev/null
+++ b/app/src/frontend/app.css
@@ -0,0 +1,6 @@
+@import 'styles/colours.css';
+@import 'styles/content.css';
+@import 'styles/forms.css';
+@import 'styles/layout.css';
+@import 'styles/transitions.css';
+@import 'styles/typography.css';
diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 7df8c4c5..72c6f35d 100644
--- a/app/src/frontend/app.js
+++ b/app/src/frontend/app.js
@@ -3,7 +3,7 @@ import { Route, Switch, Link } from 'react-router-dom';
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
-import './main.css';
+import './app.css';
 
 import AboutPage from './about';
 import BetaBanner from './beta-banner';
diff --git a/app/src/frontend/main.css b/app/src/frontend/main.css
deleted file mode 100755
index 8ea020c1..00000000
--- a/app/src/frontend/main.css
+++ /dev/null
@@ -1,213 +0,0 @@
-@import 'styles/colours.css';
-@import 'styles/content.css';
-@import 'styles/forms.css';
-@import 'styles/layout.css';
-@import 'styles/typography.css';
-
-/**
- * View/edit, maps legend
- */
-.maps-list {
-    list-style: none;
-    padding-left: 17px;
-}
-.bullet-prefix {
-    display: block;
-    position: relative;
-    clear: both;
-    /* cursor: pointer; */
-    text-decoration: none;
-    color: #222;
-    transition: background-color 0.2s;
-}
-.bullet-prefix h3 {
-    display: inline-block;
-}
-.bullet-prefix > a {
-    display: block;
-    padding: 0.6rem 0.5rem 0.5rem 2.25rem;
-    color: #222;
-}
-.bullet-prefix.active,
-.bullet-prefix:hover {
-    color: #222;
-    text-decoration: none;
-    background-color: #eeeeee;
-}
-.bullet-prefix > a::before {
-    display: block;
-    position: absolute;
-    left: 0.55rem;
-    top: 0.3rem;
-    width: 1.2rem;
-    height: 1rem;
-    text-align: center;
-    color: #7d7d7d;
-    font-size: 1.2rem;
-    content: '\25A0';
-    transition: color 0.2s;
-}
-.bullet-prefix:hover > a::before,
-.bullet-prefix.active > a::before {
-    color: #222;
-}
-.bullet-prefix:hover > a::before {
-    content: '\25BC';
-}
-.bullet-prefix.active:hover > a::before {
-    content: '\25B2';
-}
-
-.bullet-prefix .icon-buttons {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0.6rem 0.5rem 0.5rem 0;
-}
-
-.icon-button {
-    display: inline-block;
-    width: 1.8rem;
-    height: 1.8rem;
-    padding: 0;
-    outline: none;
-    border: none;
-    border-radius: 0.9rem;
-    margin: 0 0.05rem;
-
-    background-color: transparent;
-    transition: background-color 0.2s;
-
-    color: #222;
-    vertical-align: top;
-    text-align: center;
-}
-.icon-button svg {
-    transition: color 0.2s;
-    color: #222;
-    margin-top: 2px;
-    width: 1rem;
-    height: 1rem;
-    display: inline-block;
-    vertical-align: middle;
-}
-.icon-button:hover {
-    background-color: #fff;
-}
-.icon-button.edit:hover svg {
-    color: rgb(11, 225, 225);
-}
-.icon-button.help:hover svg {
-    color: rgb(0, 81, 255)
-}
-.icon-button.tooltip-hint.active svg,
-.icon-button.tooltip-hint:hover svg {
-    color: rgb(255, 11, 245);
-}
-.icon-button.close svg {
-    margin-top: -1px;
-}
-.icon-button.close:hover svg {
-    color: rgb(255, 72, 11)
-}
-.icon-button.save:hover svg {
-    color: rgb(11, 225, 72);
-}
-.section-header .icon-button {
-    float: right;
-    margin-top: -2px;
-}
-
-.data-section {
-    border-top: 1px solid #ffffff;
-}
-.data-section.inactive {
-    opacity: 0.5;
-}
-.data-section.inactive .bullet-prefix::before {
-    opacity: 0.4;
-}
-.data-section .h3 {
-    margin: 0;
-}
-.data-intro {
-    padding-left: 0.75rem;
-    font-size: 0.8333rem;
-    margin-top: 0.25rem;
-}
-.data-list {
-    margin: 0;
-    padding-left: 0.75rem;
-    padding-right: 0.5rem;
-}
-.legend .data-list {
-    padding-left: 2.25rem;
-}
-.data-section form {
-    padding: 0 0.75rem;
-}
-.data-list a {
-    color: #555;
-}
-.data-list a:focus,
-.data-list a:active,
-.data-list a:hover {
-    color: #222;
-}
-.data-list dt,
-.data-section label {
-    display: block;
-    margin: 0.5em 0 0;
-    font-size: 0.8333rem;
-    font-weight: normal;
-    text-transform: uppercase;
-    color: #555;
-}
-.data-list dd {
-    margin: 0 0 0.5rem;
-    line-height: 1.5;
-}
-.data-list .no-data {
-    color: #999;
-}
-
-/**
- * Animations for welcome-float and sidebar
- */
-.fade-enter {
-    opacity: 0;
-    z-index: 1001;
-}
-.fade-enter.fade-enter-active {
-    opacity: 1;
-    transition: opacity 500ms;
-}
-.fade-exit {
-    opacity: 1;
-}
-.fade-exit.fade-exit-active {
-    opacity: 0;
-    transition: 500ms;
-}
-
-/**
- * Sidebar could slide in, hard to make it natural if navigating between views with sidebars
- */
-.info-container.fade-enter {
-    /* transform: translateX(-100%); */
-    opacity: 0;
-    z-index: 1001;
-}
-.info-container.fade-enter.fade-enter-active {
-    /* transform: translateX(0); */
-    opacity: 1;
-    transition: transform opacity 300ms;
-}
-.info-container.fade-exit {
-    opacity: 1;
-}
-.info-container.fade-exit.fade-exit-active {
-    opacity: 0;
-    transition: 400ms;
-    transition-delay: 100ms;
-}
diff --git a/app/src/frontend/sidebar.css b/app/src/frontend/sidebar.css
index 4ace48cb..bd9a7ca3 100644
--- a/app/src/frontend/sidebar.css
+++ b/app/src/frontend/sidebar.css
@@ -1,3 +1,6 @@
+/**
+ * Sidebar layout
+ */
 .info-container {
     position: absolute;
     top: 50%;
@@ -48,6 +51,9 @@
     }
 }
 
+/**
+ * Sidebar main header
+ */
 .sidebar-header .h2 {
     display: inline-block;
 }
@@ -58,3 +64,168 @@
 .sidebar-header .icon-button:hover {
     background-color: #eee;
 }
+
+
+/**
+ * Data list section headers
+ */
+.bullet-prefix {
+    display: block;
+    position: relative;
+    clear: both;
+    text-decoration: none;
+    color: #222;
+    transition: background-color 0.2s;
+}
+.bullet-prefix h3 {
+    display: inline-block;
+}
+.bullet-prefix > a {
+    display: block;
+    padding: 0.6rem 0.5rem 0.5rem 2.25rem;
+    color: #222;
+}
+.bullet-prefix.active,
+.bullet-prefix:hover {
+    color: #222;
+    text-decoration: none;
+    background-color: #eeeeee;
+}
+.bullet-prefix > a::before {
+    display: block;
+    position: absolute;
+    left: 0.55rem;
+    top: 0.3rem;
+    width: 1.2rem;
+    height: 1rem;
+    text-align: center;
+    color: #7d7d7d;
+    font-size: 1.2rem;
+    content: '\25A0';
+    transition: color 0.2s;
+}
+.bullet-prefix:hover > a::before,
+.bullet-prefix.active > a::before {
+    color: #222;
+}
+.bullet-prefix:hover > a::before {
+    content: '\25BC';
+}
+.bullet-prefix.active:hover > a::before {
+    content: '\25B2';
+}
+.bullet-prefix .icon-buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.6rem 0.5rem 0.5rem 0;
+}
+
+/**
+ * Icon buttons
+ */
+.icon-button {
+    display: inline-block;
+    width: 1.8rem;
+    height: 1.8rem;
+    padding: 0;
+    outline: none;
+    border: none;
+    border-radius: 0.9rem;
+    margin: 0 0.05rem;
+
+    background-color: transparent;
+    transition: background-color 0.2s;
+
+    color: #222;
+    vertical-align: top;
+    text-align: center;
+}
+.icon-button svg {
+    transition: color 0.2s;
+    color: #222;
+    margin-top: 2px;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    vertical-align: middle;
+}
+.icon-button:hover {
+    background-color: #fff;
+}
+.icon-button.edit:hover svg {
+    color: rgb(11, 225, 225);
+}
+.icon-button.help:hover svg {
+    color: rgb(0, 81, 255)
+}
+.icon-button.tooltip-hint.active svg,
+.icon-button.tooltip-hint:hover svg {
+    color: rgb(255, 11, 245);
+}
+.icon-button.close svg {
+    margin-top: -1px;
+}
+.icon-button.close:hover svg {
+    color: rgb(255, 72, 11)
+}
+.icon-button.save:hover svg {
+    color: rgb(11, 225, 72);
+}
+.section-header .icon-button {
+    float: right;
+    margin-top: -2px;
+}
+
+/**
+ * Data list sections
+ */
+.data-section {
+    border-top: 1px solid #ffffff;
+}
+.data-section.inactive {
+    opacity: 0.5;
+}
+.data-section.inactive .bullet-prefix::before {
+    opacity: 0.4;
+}
+.data-section .h3 {
+    margin: 0;
+}
+.data-intro {
+    padding-left: 0.75rem;
+    font-size: 0.8333rem;
+    margin-top: 0.25rem;
+}
+.data-list {
+    margin: 0;
+    padding-left: 0.75rem;
+    padding-right: 0.5rem;
+}
+.data-section form {
+    padding: 0 0.75rem;
+}
+.data-list a {
+    color: #555;
+}
+.data-list a:focus,
+.data-list a:active,
+.data-list a:hover {
+    color: #222;
+}
+.data-list dt,
+.data-section label {
+    display: block;
+    margin: 0.5em 0 0;
+    font-size: 0.8333rem;
+    font-weight: normal;
+    text-transform: uppercase;
+    color: #555;
+}
+.data-list dd {
+    margin: 0 0 0.5rem;
+    line-height: 1.5;
+}
+.data-list .no-data {
+    color: #999;
+}
diff --git a/app/src/frontend/styles/transitions.css b/app/src/frontend/styles/transitions.css
new file mode 100644
index 00000000..7ce96fb9
--- /dev/null
+++ b/app/src/frontend/styles/transitions.css
@@ -0,0 +1,38 @@
+/**
+ * Transition animations for welcome-float and sidebar
+ */
+ .fade-enter {
+    opacity: 0;
+    z-index: 1001;
+}
+.fade-enter.fade-enter-active {
+    opacity: 1;
+    transition: opacity 500ms;
+}
+.fade-exit {
+    opacity: 1;
+}
+.fade-exit.fade-exit-active {
+    opacity: 0;
+    transition: 500ms;
+}
+
+/**
+ * Sidebar could slide in, hard to make it natural if navigating between views with sidebars
+ */
+.info-container.fade-enter {
+    opacity: 0;
+    z-index: 1001;
+}
+.info-container.fade-enter.fade-enter-active {
+    opacity: 1;
+    transition: transform opacity 300ms;
+}
+.info-container.fade-exit {
+    opacity: 1;
+}
+.info-container.fade-exit.fade-exit-active {
+    opacity: 0;
+    transition: 400ms;
+    transition-delay: 100ms;
+}