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 '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
||||
import './main.css';
|
||||
import './app.css';
|
||||
|
||||
import AboutPage from './about';
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
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