From 3b0bf468bd87b617eef405022fb89c5ba63e77d1 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Thu, 24 Aug 2023 10:37:13 +0700 Subject: [PATCH] Add modal popup for register page --- javascript-practice/src/pages/register.html | 10 ++- .../src/styles/abstracts/_mixin.scss | 28 +++++++- .../src/styles/abstracts/_variables.scss | 2 +- .../src/styles/bases/_placeholder.scss | 8 +++ .../src/styles/pages/_login-register.scss | 71 ++++++++++++++++++- 5 files changed, 114 insertions(+), 5 deletions(-) diff --git a/javascript-practice/src/pages/register.html b/javascript-practice/src/pages/register.html index 1d45234..3f60266 100644 --- a/javascript-practice/src/pages/register.html +++ b/javascript-practice/src/pages/register.html @@ -1,4 +1,4 @@ - + @@ -8,6 +8,14 @@ +
+
+
+

Register success!

+

Please login to continue.

+ + +
Logo web diff --git a/javascript-practice/src/styles/abstracts/_mixin.scss b/javascript-practice/src/styles/abstracts/_mixin.scss index 70b786d..a1fc14b 100644 --- a/javascript-practice/src/styles/abstracts/_mixin.scss +++ b/javascript-practice/src/styles/abstracts/_mixin.scss @@ -1 +1,27 @@ -// TODO +@mixin flex-layout( + $justify: null, + $align: null, + $direction: null, + $gap: null, + $wrap: null +) { + @if $justify != null { + justify-content: $justify; + } + + @if $align != null { + align-items: $align; + } + + @if $direction != null { + flex-direction: $direction; + } + + @if $gap != null { + gap: $gap; + } + + @if $wrap != null { + flex-wrap: $wrap; + } +} diff --git a/javascript-practice/src/styles/abstracts/_variables.scss b/javascript-practice/src/styles/abstracts/_variables.scss index 272030d..ec800bc 100644 --- a/javascript-practice/src/styles/abstracts/_variables.scss +++ b/javascript-practice/src/styles/abstracts/_variables.scss @@ -3,7 +3,7 @@ $primary-font: 'Roboto'; // Color $light-primary-color: #00bc2a; $primary-color: #2db84c; -$dark-primary-color: #009421; +$dark-primary-color: #00710f; $primary-text-color: #000; $secondary-text-color: #0000008a; $secondary-light-text-color: #00000042; diff --git a/javascript-practice/src/styles/bases/_placeholder.scss b/javascript-practice/src/styles/bases/_placeholder.scss index 0d91d28..a863206 100644 --- a/javascript-practice/src/styles/bases/_placeholder.scss +++ b/javascript-practice/src/styles/bases/_placeholder.scss @@ -5,3 +5,11 @@ %rounded { border-radius: 10px; } + +%d-flex { + display: flex; +} + +%d-absolute { + position: absolute; +} diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss index 19aecd5..770d9cd 100644 --- a/javascript-practice/src/styles/pages/_login-register.scss +++ b/javascript-practice/src/styles/pages/_login-register.scss @@ -1,12 +1,12 @@ .background { height: 100vh; - background: linear-gradient(#00710f 314px, #ebebeb -100%); + background: linear-gradient($dark-primary-color 314px, #ebebeb -100%); } .wrapper { @extend %margin-inline-auto; + @extend %d-absolute; - position: absolute; top: 0; left: 0; right: 0; @@ -17,6 +17,73 @@ 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); + } +} + +.overlay { + @extend %d-absolute; + + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.3); + z-index: 2; + opacity: 0; + pointer-events: none; +} + +.modal-box { + @extend %d-flex; + @extend %d-absolute; + @include flex-layout($direction: column, $align: center, $gap: 30px); + + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(1); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + z-index: 2; + padding: 40px 50px; + border-radius: 10px; + background-color: $white; + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; + + &__title { + font-size: $fs-2x-lg; + } + + &__message { + font-size: $fs-lg; + text-align: center; + } + + &__redirect-btn { + color: $white; + font-size: $fs-md; + background-color: $light-primary-color; + border: none; + border-radius: 10px; + padding: 15px 30px; + cursor: pointer; + } +} + +.active { + opacity: 1; + pointer-events: auto; +} + .form { @extend %margin-inline-auto;