mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
WIP/ Feature :Register wizard coding style
This commit is contained in:
elforjani3
@@ -63,12 +63,14 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
@import 'pages/exchange-rate';
|
||||
@import 'pages/customer';
|
||||
@import 'pages/billing';
|
||||
@import 'pages/register-wizard-page.scss';
|
||||
@import 'pages/register-organizaton.scss';
|
||||
|
||||
// Views
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/sidebar';
|
||||
@import 'pages/estimate';
|
||||
|
||||
|
||||
.App {
|
||||
min-width: 960px;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,28 @@
|
||||
|
||||
|
||||
.authentication-insider{
|
||||
.authentication-insider {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&__logo-section{
|
||||
&__logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&__content{
|
||||
&__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__footer{
|
||||
.auth-copyright{
|
||||
&__footer {
|
||||
.auth-copyright {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.bp3-icon-bigcapital{
|
||||
.bp3-icon-bigcapital {
|
||||
margin-top: 9px;
|
||||
|
||||
svg{
|
||||
path{
|
||||
fill: #A3A3A3;
|
||||
svg {
|
||||
path {
|
||||
fill: #a3a3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -33,54 +31,55 @@
|
||||
}
|
||||
|
||||
.authentication-page {
|
||||
|
||||
&__goto-bigcapital{
|
||||
&__goto-bigcapital {
|
||||
position: fixed;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
border: 2px solid #E3E3E3;
|
||||
min-height: 38px;
|
||||
// border: 2px solid #E3E3E3;
|
||||
}
|
||||
.bp3-form-group{
|
||||
margin-bottom: 25px;
|
||||
// .bp3-form-group{
|
||||
// margin-bottom: 25px;
|
||||
|
||||
&.bp3-intent-danger{
|
||||
.bp3-input{
|
||||
border-color: #eea9a9;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.bp3-intent-danger{
|
||||
// .bp3-input{
|
||||
// border-color: #eea9a9;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.bp3-form-group.has-password-revealer{
|
||||
|
||||
.bp3-label{
|
||||
.bp3-form-group.has-password-revealer {
|
||||
.bp3-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.password-revealer{
|
||||
.text{
|
||||
.password-revealer {
|
||||
.text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.bp3-fill.bp3-intent-primary{
|
||||
.bp3-button.bp3-fill.bp3-intent-primary {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__label-section{
|
||||
&__label-section {
|
||||
margin-bottom: 34px;
|
||||
color: #555;
|
||||
|
||||
h3{
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #444;
|
||||
|
||||
h3 {
|
||||
// font-weight: 500;
|
||||
font-weight: 400;
|
||||
// font-size: 28px;
|
||||
font-size: 22px;
|
||||
// color: #444;
|
||||
color: #555555;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
@@ -92,24 +91,24 @@
|
||||
|
||||
&__form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 415px;
|
||||
padding: 15px;
|
||||
// max-width: 415px;
|
||||
// padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__footer-links{
|
||||
&__footer-links {
|
||||
padding: 9px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
a{
|
||||
a {
|
||||
color: #0052cc;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading-overlay{
|
||||
&__loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -132,9 +131,11 @@
|
||||
// Login Form
|
||||
// ------------------------------
|
||||
.login-form {
|
||||
|
||||
.checkbox{
|
||||
&--remember-me{
|
||||
width: 690px;
|
||||
margin: 0px auto;
|
||||
padding: 85px 50px;
|
||||
.checkbox {
|
||||
&--remember-me {
|
||||
margin: -4px 0 28px 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -143,10 +144,13 @@
|
||||
|
||||
// Register Form
|
||||
.register-form {
|
||||
width: 690px;
|
||||
margin: 0px auto;
|
||||
padding: 85px 50px;
|
||||
|
||||
&__agreement-section {
|
||||
margin-top: -10px;
|
||||
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-top: -10px;
|
||||
@@ -166,7 +170,6 @@
|
||||
}
|
||||
|
||||
.invite-form {
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
p {
|
||||
@@ -176,8 +179,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-page__loading-overlay{
|
||||
.authentication-page__loading-overlay {
|
||||
background: rgba(252, 253, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,20 +34,20 @@
|
||||
.plan-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.plan-name {
|
||||
background: #3657ff;
|
||||
border-radius: 3px;
|
||||
padding: 1px 8px 1px 8px;
|
||||
padding: 2px 8px 2px 8px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 16px;
|
||||
height: 21px;
|
||||
}
|
||||
.plan-description {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 2em;
|
||||
line-height: 1.8rem;
|
||||
|
||||
&.plan-description ul {
|
||||
list-style: none;
|
||||
@@ -113,10 +113,10 @@
|
||||
.bg-title {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #666666;
|
||||
}
|
||||
.bg-message {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 23px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.license-container {
|
||||
@@ -139,9 +139,11 @@
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
}
|
||||
p {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
83
client/src/style/pages/register-organizaton.scss
Normal file
83
client/src/style/pages/register-organizaton.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.register-organizaton-form {
|
||||
width: 690px;
|
||||
margin: 0px auto;
|
||||
padding: 80px 50px;
|
||||
|
||||
.register-org-title {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
line-height: 2em;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #888888;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
.bp3-input-group {
|
||||
.bp3-input {
|
||||
position: relative;
|
||||
width: 619px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--base-currency,
|
||||
.form-group--language {
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 300px;
|
||||
min-height: 38px;
|
||||
}
|
||||
}
|
||||
.form-group--language {
|
||||
margin-left: 18px;
|
||||
}
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 619px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.form-group--time-zone {
|
||||
.bp3-text-muted {
|
||||
color: #000000;
|
||||
}
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-org-note {
|
||||
width: 618px;
|
||||
font-size: 14px;
|
||||
line-height: 2.7rem;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 3px solid #f5f5f5;
|
||||
}
|
||||
.register-org-button {
|
||||
.bp3-button {
|
||||
background-color: #0052cc;
|
||||
width: 174px;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
client/src/style/pages/register-wizard-page.scss
Normal file
125
client/src/style/pages/register-wizard-page.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Register Left Sidebar
|
||||
.wizard-left-side {
|
||||
position: fixed;
|
||||
background: #778cab;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
max-width: 25%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ffffff;
|
||||
padding: 25px;
|
||||
margin: 0px auto;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.content-logo {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
.content-title {
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
.content-org {
|
||||
font-size: 14px;
|
||||
|
||||
span > a {
|
||||
text-decoration: underline;
|
||||
color: #ffffff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
span ::after {
|
||||
border-top: 2px solid #707070;
|
||||
}
|
||||
}
|
||||
.content-contact {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wizard-right-side {
|
||||
padding-left: 25%;
|
||||
}
|
||||
|
||||
// Register Wizard Steps
|
||||
.wizard-container {
|
||||
width: 80%;
|
||||
margin: 60px auto;
|
||||
|
||||
.wizard-wrapper li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
width: 25%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 15px;
|
||||
}
|
||||
.wizard-wrapper li::before {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
content: '';
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0 auto 10px auto;
|
||||
border-radius: 50%;
|
||||
background-color: #75859c;
|
||||
}
|
||||
.wizard-wrapper li::after {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: #75859c;
|
||||
top: 6px;
|
||||
left: -50%;
|
||||
z-index: -1;
|
||||
}
|
||||
.wizard-wrapper li:first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wizard-wrapper > li.complete::before {
|
||||
background-color: #75859c;
|
||||
}
|
||||
|
||||
.wizard-wrapper > li.complete ~ li::before {
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.wizard-wrapper > li.complete ~ li::after {
|
||||
background: #ebebeb;
|
||||
}
|
||||
.wizard-wrapper > li.complete p.wizard-info {
|
||||
color: #004dd0;
|
||||
}
|
||||
}
|
||||
|
||||
// @import './billing.scss';
|
||||
|
||||
//Register Subscription form
|
||||
.register-subscription-form {
|
||||
padding-top: 50px;
|
||||
}
|
||||
Reference in New Issue
Block a user