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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../styles/_main.scss" />
<title>Register - Money Lover</title>
</head>
<body>
javascript-practice/src/styles/_main.scss
+1
View File
@@ -9,6 +9,7 @@
@import './bases/typography';
// Components
@import './components/icons';
@import './components/loader';
@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;
$deducted-money-color: #039be5;
$background-input-color: #f5f5f5;
$dark-error-color: #ce1414;
$light-error-color: #ffc3c3;
$gray: #dddddd;
$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,
visibility 0.75s;
&--hidden {
opacity: 0;
visibility: hidden;
}
&::after {
content: '';
width: 75px;
@@ -37,3 +32,8 @@
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 {
color: $white;
font-size: $fs-md;
background-color: $light-primary-color;
border: none;
border-radius: 10px;
padding: 15px 30px;
@@ -50,3 +49,11 @@
opacity: 1;
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;
}
.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 {
@extend %margin-inline-auto;
@@ -57,6 +43,15 @@
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 {
margin-top: 15px;
color: $secondary-text-color;