QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: animating authentication pages.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-10-12 17:27:48 +02:00
parent 918e174f8a
commit f4ea588039
7 changed files with 134 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/style/App.scss
View File

@@ -63,8 +63,8 @@ $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';
@import 'pages/register-wizard-page';
@import 'pages/register-organizaton';
// Views
@import 'views/filter-dropdown';

111
client/src/style/pages/authentication.scss
View File

@@ -1,12 +1,14 @@
.authentication-insider {
width: 384px;
margin: 0 auto;
margin-bottom: 40px;
margin-top: 40px;
padding-top: 80px;
&__logo-section {
text-align: center;
margin-bottom: 61px;
margin-bottom: 60px;
}
&__content {
@@ -32,11 +34,43 @@
}
}
.authTransition{
&-enter {
opacity: 0;
}
&-enter-active {
opacity: 1;
transition: opacity 250ms ease-in-out;
}
&-enter-done {
opacity: 1;
}
&-exit {
opacity: 1;
}
&-exit-active {
opacity: 0.5;
transition: opacity 250ms ease-in-out;
}
&-exit-active {
opacity: 0;
display: none;
}
}
.authentication-page {
&__goto-bigcapital {
position: fixed;
margin-top: 40px;
margin-left: 40px;
margin-top: 30px;
margin-left: 30px;
color: #777;
}
@@ -46,12 +80,6 @@
}
.bp3-form-group {
margin-bottom: 25px;
&.bp3-intent-danger {
.bp3-input {
border-color: #eea9a9;
}
}
}
.bp3-form-group.has-password-revealer {
@@ -72,16 +100,13 @@
}
&__label-section {
margin-bottom: 29px;
margin-bottom: 30px;
color: #555;
h3 {
// font-weight: 500;
font-weight: 400;
// font-size: 28px;
font-weight: 500;
font-size: 22px;
// color: #444;
color: #555555;
color: #444;
margin: 0 0 12px;
}
@@ -93,8 +118,6 @@
&__form-wrapper {
width: 100%;
// max-width: 415px;
// padding: 15px;
margin: 0 auto;
}
@@ -139,48 +162,52 @@
.checkbox {
&--remember-me {
margin: -4px 0 28px 0px;
margin: -6px 0 26px 0px;
font-size: 14px;
}
}
}
// // Register Form
// .register-form {
// // width: 690px;
// // margin: 0px auto;
// // padding: 85px 50px;
// Register form
// ----------------------------
.register-form {
// &__agreement-section {
// margin-top: -10px;
&__agreement-section {
margin-top: -10px;
// p {
// font-size: 13px;
// margin-top: -10px;
// margin-bottom: 24px;
// line-height: 1.65;
// }
// }
p {
font-size: 13px;
margin-top: -10px;
margin-bottom: 24px;
line-height: 1.65;
}
}
// &__submit-button-wrap {
// margin: 25px 0px 25px 0px;
&__submit-button-wrap {
margin: 25px 0px 25px 0px;
// .bp3-button {
// min-height: 45px;
// background-color: #0052cc;
// }
// }
// }
.bp3-button {
min-height: 45px;
background-color: #0052cc;
}
}
}
// Send reset password
// ----------------------------
.send-reset-password {
.form-group--crediential {
margin-bottom: 36px;
}
}
// Invite form.
// ----------------
.invite-form {
&__statement-section {
margin-top: -10px;
p {
font-size: 13px;
margin-bottom: 20px;

124
client/src/style/pages/register-wizard-page.scss
View File

@@ -1,128 +1,5 @@
.register-page {
.bp3-input {
min-height: 40px;
border: 1px solid #ced4da;
}
.bp3-form-group {
margin-bottom: 23px;
&.bp3-intent-danger {
.bp3-input {
border-color: #eea9a9;
}
}
}
.bp3-form-group.has-password-revealer {
.bp3-label {
display: flex;
justify-content: space-between;
}
.password-revealer {
.text {
font-size: 12px;
}
}
}
.bp3-button.bp3-fill.bp3-intent-primary {
font-size: 16px;
}
&__label-section {
margin-bottom: 29px;
color: #555;
h3 {
// font-weight: 500;
font-weight: 400;
// font-size: 28px;
font-size: 22px;
// color: #444;
color: #555555;
margin: 0 0 12px;
}
a {
text-decoration: underline;
color: #0040bd;
}
}
&__form-wrapper {
width: 100%;
// max-width: 415px;
// padding: 15px;
margin: 0 auto;
}
&__footer-links {
padding: 9px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
text-align: center;
margin-bottom: 1.2rem;
a {
color: #0052cc;
}
}
&__loading-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(252, 253, 255, 0.5);
display: flex;
justify-content: center;
}
&__submit-button-wrap {
margin: 0px 0px 24px 0px;
.bp3-button {
background-color: #0052cc;
min-height: 45px;
}
}
&-form {
width: 800px;
margin: 0 auto;
// width: 690px;
// padding: 85px 60px;
// padding: 85px 105px;
// Register Form
.register-form {
padding: 85px 105px;
&__agreement-section {
margin-top: -10px;
p {
font-size: 13px;
margin-top: -10px;
margin-bottom: 24px;
line-height: 1.65;
}
}
&__submit-button-wrap {
margin: 25px 0px 25px 0px;
.bp3-button {
min-height: 45px;
background-color: #0052cc;
}
}
}
}
}
.setup-page {
@@ -186,7 +63,6 @@
}
.setup-page-steps {
&-container {