nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-22 13:38:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8 from Nez27/feat/register-page-style

Browse Source 
Add style for register page
This commit is contained in:
Loi Phan
2023-08-29 17:19:50 +07:00
committed by GitHub
parent 3f508fc9d9 561ae6b497
commit 19fc5025e3
7 changed files with 84 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/pages/register.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../styles/_main.scss" />
<title>Register - Money Lover</title> <title>Register - Money Lover</title>
</head> </head>
<body> <body>
javascript-practice/src/styles/_main.scss
+1
View File
@@ -9,6 +9,7 @@
@import './bases/typography'; @import './bases/typography';
// Components // Components
@import './components/icons';
@import './components/loader'; @import './components/loader';
@import './components/popup-form'; @import './components/popup-form';
javascript-practice/src/styles/abstracts/_variables.scss
+2
View File
@@ -10,6 +10,8 @@ $secondary-light-text-color: #00000042;
$receive-money-color: #e51c23; $receive-money-color: #e51c23;
$deducted-money-color: #039be5; $deducted-money-color: #039be5;
$background-input-color: #f5f5f5; $background-input-color: #f5f5f5;
$dark-error-color: #ce1414;
$light-error-color: #ffc3c3;
$gray: #dddddd; $gray: #dddddd;
$white: #ffffff; $white: #ffffff;
javascript-practice/src/styles/components/_icons.scss
+58
View File
@@ -0,0 +1,58 @@
.mark {
position: relative;
display: inline-block;
vertical-align: top;
width: 40px;
height: 40px;
border: 2px solid #c4cbd2;
border-radius: 100px;
&::before,
&::after {
content: '';
display: block;
position: absolute;
}
}
.check:before {
top: 16px;
left: 15px;
margin: -5px 0 0 -6px;
height: 10px;
width: 20px;
border: solid #39ca74;
border-width: 0 0 3px 3px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.error:before {
top: 6px;
left: 13px;
height: 10px;
width: 10px;
border: solid #c0392b;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.error:after {
top: 21px;
left: 13px;
height: 10px;
width: 10px;
border: solid #c0392b;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
javascript-practice/src/styles/components/_loader.scss
+5 -5
View File
@@ -13,11 +13,6 @@
opacity 0.75s, opacity 0.75s,
visibility 0.75s; visibility 0.75s;
&--hidden {
opacity: 0;
visibility: hidden;
}
&::after { &::after {
content: ''; content: '';
width: 75px; width: 75px;
@@ -37,3 +32,8 @@
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
.hidden {
opacity: 0;
visibility: hidden;
}
javascript-practice/src/styles/components/_popup-form.scss
+8 -1
View File
@@ -38,7 +38,6 @@
&__redirect-btn { &__redirect-btn {
color: $white; color: $white;
font-size: $fs-md; font-size: $fs-md;
background-color: $light-primary-color;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
padding: 15px 30px; padding: 15px 30px;
@@ -50,3 +49,11 @@
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.success .modal-box__redirect-btn {
background-color: $light-primary-color;
}
.error .modal-box__redirect-btn {
background-color: $dark-error-color;
}
javascript-practice/src/styles/pages/_login-register.scss
+9 -14
View File
@@ -17,20 +17,6 @@
padding-top: 54px; padding-top: 54px;
} }
.checkmark {
display: inline-block;
&:after {
content: '';
display: block;
width: 11px;
height: 22px;
border: solid $primary-color;
border-width: 0 10px 10px 0;
transform: rotate(45deg);
}
}
.form { .form {
@extend %margin-inline-auto; @extend %margin-inline-auto;
@@ -57,6 +43,15 @@
line-height: 48px; line-height: 48px;
} }
&__error-message {
font-size: $fs-md;
background-color: $light-error-color;
color: $dark-error-color;
padding: 15px 15px;
border-radius: 10px;
line-height: 22px;
}
&__description { &__description {
margin-top: 15px; margin-top: 15px;
color: $secondary-text-color; color: $secondary-text-color;