Commit 7662268d authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf Committed by Benjamin Bouvier
Browse files

[CSS] Move onboarding layout to dedicated file

parent 8dd7d9ca
......@@ -30,6 +30,7 @@
@import '~./layout.css';
@import '~./sections/shared/new-bank-form.css';
@import '~./sections/onboarding.css';
@import '~./sections/settings/all.css';
@import '~./sections/settings/alerts.css';
@import '~./sections/settings/banks.css';
......
/* Onboarding */
.wizard {
margin: auto;
width: 100%;
max-width: 800px;
padding: 1em;
padding-left: 2em;
padding-right: 2em;
overflow: auto;
flex: auto;
}
.wizard header {
margin-top: 1em;
margin-bottom: 1em;
display: block;
overflow: initial;
}
.wizard header h1 {
margin-bottom: 1em;
font-weight: initial;
}
.wizard header .locale-selector {
float: right;
position: relative;
top: -5px;
}
.wizard .wizard-menu li {
list-style-type: none;
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.accountwizard-import {
display: flex;
justify-content: space-between;
}
.accountwizard-import div.backup-password-form {
display: inline;
margin-right: 1ex;
}
.init-panes {
display: flex;
padding: 1em;
}
/* TODO: Remove once demo mode is implemented. */
.init-panes .disabled {
pointer-events: none;
}
.init-panes .disabled > * {
opacity: 0.5;
}
.init-panes > a {
flex: auto;
width: 30%;
border: 1px solid;
margin: 0.5em;
padding: 0;
position: relative;
overflow: auto;
display: flex;
flex-direction: column;
cursor: pointer;
text-align: center;
}
.init-panes > a p .fa {
font-size: 75px;
}
.init-panes > a h3 {
padding: 0;
text-align: center;
font-weight: bold;
height: 2em;
}
.init-panes > a h3 + div {
flex: auto;
}
.init-panes > a > * {
padding: 1em;
margin-bottom: 1em;
}
.init-panes > a img {
width: 100%;
margin-bottom: 2em;
}
.init-panes > a > p:last-child {
margin: 0;
text-align: center;
}
.init-panes .small-only {
display: none;
}
.init-panes h3 .fa {
margin-right: 0.5em;
}
.wizard .accountwizard-newbank .btn.danger {
/* The button is after the account wizard in the DOM so we need to translate
its vertical position to put it on the same line than the save button */
transform: translateY(-100%);
}
.wizard-content {
margin-bottom: 2em;
}
@media (max-width: 768px) {
.wizard header {
height: auto;
}
.wizard header h1 {
display: block;
}
.wizard header .locale-selector {
display: block;
width: 100%;
margin: auto;
float: none;
margin-bottom: 1em;
}
.init-panes {
display: initial;
}
.init-panes > a {
width: auto;
}
.init-panes .fa {
display: none;
}
.init-panes > a h3 {
height: auto;
margin-left: 1em;
margin-right: 1em;
}
.init-panes > a > * {
padding: auto;
margin-bottom: auto;
}
.init-panes .small-only {
display: initial;
}
}
......@@ -422,64 +422,21 @@ input.category-color {
/* Onboarding */
.wizard {
margin: auto;
width: 100%;
max-width: 800px;
padding: 1em;
padding-left: 2em;
padding-right: 2em;
overflow: auto;
flex: auto;
background-color: white;
}
.wizard header {
background-color: transparent;
color: inherit;
margin-top: 1em;
margin-bottom: 1em;
display: block;
overflow: initial;
}
.wizard header h1 {
margin-bottom: 1em;
color: inherit;
font-weight: initial;
}
.wizard header .locale-selector {
float: right;
position: relative;
top: -5px;
}
.wizard .wizard-menu li {
list-style-type: none;
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.accountwizard-import {
display: flex;
justify-content: space-between;
}
.accountwizard-import div.backup-password-form {
display: inline;
margin-right: 1ex;
}
.init-panes {
display: flex;
padding: 1em;
}
/* TODO: Remove once demo mode is implemented. */
.init-panes .disabled {
background-color: rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.init-panes .disabled > * {
......@@ -487,23 +444,9 @@ input.category-color {
}
.init-panes > a {
flex: auto;
width: 30%;
border: 1px solid #C5C5C5;
border-color: #C5C5C5;
border-radius: 2px;
margin: 0.5em;
padding: 0;
color: #444444;
position: relative;
overflow: auto;
display: flex;
flex-direction: column;
cursor: pointer;
text-align: center;
}
.init-panes > a p .fa {
font-size: 75px;
}
.init-panes > a:hover,
......@@ -511,42 +454,11 @@ input.category-color {
box-shadow: 5px 10px 5px #CCCCCC, -5px 10px 5px #CCCCCC;
}
.init-panes > a h3 {
padding: 0;
text-align: center;
font-weight: bold;
height: 2em;
}
.init-panes > a h3 + div {
flex: auto;
}
.init-panes > a > * {
padding: 1em;
margin-bottom: 1em;
}
.init-panes > a img {
width: 100%;
margin-bottom: 2em;
}
.init-panes > a > p:last-child {
margin: 0;
color: white;
text-align: center;
text-transform: uppercase;
}
.init-panes .small-only {
display: none;
}
.init-panes h3 .fa {
margin-right: 0.5em;
}
.init-panes .add-first-access-pane-button {
background-color: #00A651;
}
......@@ -559,61 +471,6 @@ input.category-color {
background-color: #DBAE34;
}
.wizard .accountwizard-newbank .btn.danger {
/* The button is after the account wizard in the DOM so we need to translate
its vertical position to put it on the same line than the save button */
transform: translateY(-100%);
}
.wizard-content {
margin-bottom: 2em;
}
@media (max-width: 768px) {
.wizard header {
height: auto;
}
.wizard header h1 {
display: block;
}
.wizard header .locale-selector {
display: block;
width: 100%;
margin: auto;
float: none;
margin-bottom: 1em;
}
.init-panes {
display: initial;
}
.init-panes > a {
width: auto;
}
.init-panes .fa {
display: none;
}
.init-panes > a h3 {
height: auto;
margin-left: 1em;
margin-right: 1em;
}
.init-panes > a > * {
padding: auto;
margin-bottom: auto;
}
.init-panes .small-only {
display: initial;
}
}
/* About section */
.support-about li {
border: 1px solid #337AB7;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment