diff --git a/javascript-practice/src/styles/_main.scss b/javascript-practice/src/styles/_main.scss
index f5b1f5c..41c0039 100644
--- a/javascript-practice/src/styles/_main.scss
+++ b/javascript-practice/src/styles/_main.scss
@@ -10,6 +10,7 @@
// Components
@import './components/loader';
+@import './components/popup-form';
// Layouts
@import './layouts/header';
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/components/_popup-form.scss b/javascript-practice/src/styles/components/_popup-form.scss
new file mode 100644
index 0000000..97687ae
--- /dev/null
+++ b/javascript-practice/src/styles/components/_popup-form.scss
@@ -0,0 +1,52 @@
+.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;
+}
diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss
index 19aecd5..01addff 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,20 @@
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;