Split main.css to app/sidebar/transitions.css
This commit is contained in:
Tom Russell
parent
3085537f33
commit
daca8e46ee
6
app/src/frontend/app.css
Executable file
6
app/src/frontend/app.css
Executable file
@ -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';
|
||||||
@ -3,7 +3,7 @@ import { Route, Switch, Link } from 'react-router-dom';
|
|||||||
import { TransitionGroup, CSSTransition } from 'react-transition-group'
|
import { TransitionGroup, CSSTransition } from 'react-transition-group'
|
||||||
|
|
||||||
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
||||||
import './main.css';
|
import './app.css';
|
||||||
|
|
||||||
import AboutPage from './about';
|
import AboutPage from './about';
|
||||||
import BetaBanner from './beta-banner';
|
import BetaBanner from './beta-banner';
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Sidebar layout
|
||||||
|
*/
|
||||||
.info-container {
|
.info-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -48,6 +51,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar main header
|
||||||
|
*/
|
||||||
.sidebar-header .h2 {
|
.sidebar-header .h2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -58,3 +64,168 @@
|
|||||||
.sidebar-header .icon-button:hover {
|
.sidebar-header .icon-button:hover {
|
||||||
background-color: #eee;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
38
app/src/frontend/styles/transitions.css
Normal file
38
app/src/frontend/styles/transitions.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user