@sc-360-v2/storefront-cms-library 0.2.62 → 0.2.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +12 -12
  2. package/dist/builder.js +1 -1
  3. package/dist/form-preview.scss +112 -0
  4. package/dist/globals.scss +94 -94
  5. package/dist/login.scss +496 -504
  6. package/dist/types/builder/elements/category-details/index.d.ts +2 -0
  7. package/dist/types/builder/elements/code/index.d.ts +2 -0
  8. package/dist/types/builder/elements/common.d.ts +2 -0
  9. package/dist/types/builder/elements/container/index.d.ts +2 -0
  10. package/dist/types/builder/elements/embed/index.d.ts +2 -0
  11. package/dist/types/builder/elements/grid/index.d.ts +2 -0
  12. package/dist/types/builder/elements/layouter/index.d.ts +2 -0
  13. package/dist/types/builder/elements/layouter-item/index.d.ts +2 -0
  14. package/dist/types/builder/elements/light-box-v2/index.d.ts +2 -0
  15. package/dist/types/builder/elements/lightbox/index.d.ts +2 -0
  16. package/dist/types/builder/elements/productDetails/index.d.ts +2 -0
  17. package/dist/types/builder/elements/repeater/index.d.ts +4 -0
  18. package/dist/types/builder/elements/section/index.d.ts +1 -0
  19. package/dist/types/builder/elements/stack/index.d.ts +2 -0
  20. package/dist/types/builder/enums/index.d.ts +20 -0
  21. package/dist/types/builder/tools/element-edit/contactUs.d.ts +1 -0
  22. package/dist/types/builder/tools/element-edit/productOptions.d.ts +15 -1
  23. package/dist/types/builder/tools/element-edit/repeater.d.ts +3 -1
  24. package/dist/types/builder/tools/element-edit/search.d.ts +2 -1
  25. package/dist/widget.scss +1 -0
  26. package/package.json +1 -1
package/dist/login.scss CHANGED
@@ -1,124 +1,160 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @import "./functions.scss";
4
3
 
5
- .element__center {
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- }
4
+ [data-div-type="element"] {
5
+ &[data-element-type="login"],
6
+ &[data-element-type="resetPassword"],
7
+ &[data-element-type="forgotPassword"] {
8
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ //height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
10
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
11
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
12
+ position: relative;
10
13
 
11
- .logn__main__div {
12
- height: var(--_height-100-dvh);
13
- max-height: var(--_height-100-dvh);
14
- overflow: clip;
15
- width: 100%;
16
- position: var(--_p-relative);
17
-
18
- & > div {
19
- &.loader {
20
- position: var(--_p-absolute);
21
- z-index: var(--_higher-zIndex);
22
- background: var(--_base-white);
23
- border-radius: 50%;
24
- display: var(--_d-flex);
25
- align-items: center;
26
- justify-content: center;
27
- --_sf-in-sz: 1.2;
28
- width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
29
- height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
30
- --_sf-img-sz: 80px;
31
-
32
- left: 50%;
33
- top: 50%;
34
- transform: translate(-50%, -50%);
35
- overflow: clip;
36
-
37
- &::before {
38
- animation: shine 1.5s infinite;
39
- background: linear-gradient(
40
- to right,
41
- rgba(255, 255, 255, 0) 0%,
42
- rgba(255, 255, 255, 0.8) 100%
43
- );
44
- content: "";
45
- display: block;
46
- height: 90px;
47
- left: -80%;
48
- position: absolute;
49
- top: 0px;
50
- transform: skewX(-45deg);
51
- width: 70%;
52
- z-index: 2;
53
- }
14
+ & > .wrapper {
15
+ // display: flex;
16
+ // align-items: center;
17
+ // justify-content: center;
18
+ width: 100%;
19
+ height: 100%;
20
+ }
54
21
 
55
- & > img {
56
- // z-index: 3;
57
- width: var(--_sf-img-sz);
58
- height: var(--_sf-img-sz);
22
+ // & form {
23
+ // width: 100%;
24
+ // height: 100%;
25
+ // }
26
+
27
+ &[data-widget-border="true"] {
28
+ .search-wrapper {
29
+ border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
30
+ border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
31
+ border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
59
32
  }
60
33
  }
61
- &.wrapper {
62
- display: var(--_d-grid);
63
- --_col-count: 2;
64
- --_col-gap: 0px;
65
- grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
66
34
 
67
- & > div {
35
+ &[data-widget-shadow="false"] {
36
+ --_show-shadow: none;
37
+ }
38
+
39
+ &[data-show-shadow="false"] {
40
+ --_show-shadow: none;
41
+ }
42
+
43
+ .auth-container {
44
+ .logn__main__div {
45
+ height: var(--_height-100-dvh);
46
+ max-height: var(--_height-100-dvh);
47
+ overflow: clip;
68
48
  width: 100%;
69
- &.left__div {
70
- display: var(--_d-flex);
71
- background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
72
- background-size: 75%;
73
- height: 100%;
74
- align-items: center;
75
- img {
76
- width: 100%;
77
- object-fit: cover;
78
- }
49
+ position: var(--_p-relative);
50
+
51
+ & > div {
52
+ &.loader {
53
+ position: var(--_p-absolute);
54
+ z-index: var(--_higher-zIndex);
55
+ background: var(--_base-white);
56
+ border-radius: 50%;
57
+ display: var(--_d-flex);
58
+ align-items: center;
59
+ justify-content: center;
60
+ --_sf-in-sz: 1.2;
61
+ width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
62
+ height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
63
+ --_sf-img-sz: 80px;
64
+
65
+ left: 50%;
66
+ top: 50%;
67
+ transform: translate(-50%, -50%);
68
+ overflow: clip;
69
+
70
+ &::before {
71
+ animation: shine 1.5s infinite;
72
+ background: linear-gradient(
73
+ to right,
74
+ rgba(255, 255, 255, 0) 0%,
75
+ rgba(255, 255, 255, 0.8) 100%
76
+ );
77
+ content: "";
78
+ display: block;
79
+ height: 90px;
80
+ left: -80%;
81
+ position: absolute;
82
+ top: 0px;
83
+ transform: skewX(-45deg);
84
+ width: 70%;
85
+ z-index: 2;
86
+ }
79
87
 
80
- & > div {
81
- &.left__box__parent {
82
- max-width: 65%;
83
- margin-inline: auto;
84
- display: var(--_d-flex);
85
- flex-direction: column;
86
- --_sf-gp: var(--_gap-24);
87
- gap: calc(var(--_sf-gp) * 1.25);
88
-
89
- & > div {
90
- &.box {
91
- display: var(--_d-flex);
92
- color: var(--_base-white);
93
- --_sf-img-size: 50px;
94
- // --_sf-gp: var(--_gap-24);
95
- gap: var(--_sf-gp);
96
-
97
- &::before {
98
- content: "";
99
- background: var(--_sf-img) no-repeat center center / cover;
100
- width: var(--_sf-img-size);
101
- height: var(--_sf-img-size);
102
- }
88
+ & > img {
89
+ // z-index: 3;
90
+ width: var(--_sf-img-sz);
91
+ height: var(--_sf-img-sz);
92
+ }
93
+ }
94
+ &.wrapper {
95
+ display: var(--_d-grid);
96
+ --_col-count: 2;
97
+ --_col-gap: 0px;
98
+ grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
99
+
100
+ & > div {
101
+ width: 100%;
102
+ &.left__div {
103
+ display: var(--_d-flex);
104
+ background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
105
+ background-size: 75%;
106
+ height: 100%;
107
+ align-items: center;
108
+ img {
109
+ width: 100%;
110
+ object-fit: cover;
111
+ }
103
112
 
104
- & > div {
113
+ & > div {
114
+ &.left__box__parent {
115
+ max-width: 65%;
116
+ margin-inline: auto;
105
117
  display: var(--_d-flex);
106
118
  flex-direction: column;
107
- row-gap: calc(var(--_sf-gp) * 0.5);
108
- align-items: flex-start;
109
- flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
110
-
111
- & > p {
112
- color: var(--_base-white);
113
- margin: 0;
114
-
115
- &.title {
116
- font-weight: var(--_fw-400);
117
- font-size: var(--_fs-24);
118
- }
119
- &.desc {
120
- font-size: var(--_fs-16);
121
- line-height: 1.6;
119
+ --_sf-gp: var(--_gap-24);
120
+ gap: calc(var(--_sf-gp) * 1.25);
121
+
122
+ & > div {
123
+ &.box {
124
+ display: var(--_d-flex);
125
+ color: var(--_base-white);
126
+ --_sf-img-size: 50px;
127
+ // --_sf-gp: var(--_gap-24);
128
+ gap: var(--_sf-gp);
129
+
130
+ &::before {
131
+ content: "";
132
+ background: var(--_sf-img) no-repeat center center / cover;
133
+ width: var(--_sf-img-size);
134
+ height: var(--_sf-img-size);
135
+ }
136
+
137
+ & > div {
138
+ display: var(--_d-flex);
139
+ flex-direction: column;
140
+ row-gap: calc(var(--_sf-gp) * 0.5);
141
+ align-items: flex-start;
142
+ flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
143
+
144
+ & > p {
145
+ color: var(--_base-white);
146
+ margin: 0;
147
+
148
+ &.title {
149
+ font-weight: var(--_fw-400);
150
+ font-size: var(--_fs-24);
151
+ }
152
+ &.desc {
153
+ font-size: var(--_fs-16);
154
+ line-height: 1.6;
155
+ }
156
+ }
157
+ }
122
158
  }
123
159
  }
124
160
  }
@@ -128,436 +164,392 @@
128
164
  }
129
165
  }
130
166
  }
131
- }
132
- }
133
- }
134
167
 
135
- // General Container Styles
136
- .loginContainer {
137
- display: flex;
138
- justify-content: center;
139
- align-items: center;
140
- height: 100vh;
141
- background-color: var(--_base-white);
142
- }
143
-
144
- // Login Box
145
- .loginBox {
146
- padding: 20px;
147
- // border: 1px solid #ddd;
148
- border-radius: 8px;
149
- background-color: #fff;
150
- width: 500px;
151
- @media only screen and (max-width: 768px) {
152
- width: 350px;
153
- }
154
- }
168
+ // General Container Styles
169
+ .loginContainer {
170
+ display: flex;
171
+ justify-content: center;
172
+ align-items: center;
173
+ }
155
174
 
156
- // Title Styles
157
- .title {
158
- // text-align: center;
159
- color: var(--_gray-900);
160
- font-size: 24px;
161
- margin-bottom: 8px;
162
- }
163
- .desc {
164
- font-size: 14px;
165
- color: var(--_gray-500);
166
- }
167
- .sso_verify {
168
- border: 1px solid red;
169
- }
175
+ // Login Box
176
+ .loginBox {
177
+ width: 100%;
178
+ }
170
179
 
171
- .form_fields {
172
- margin-top: 36px;
173
- }
180
+ // Title Styles
181
+ .title {
182
+ // text-align: center;
183
+ color: var(--_gray-900);
184
+ font-size: 24px;
185
+ margin-bottom: 8px;
186
+ }
187
+ .desc {
188
+ font-size: 14px;
189
+ color: var(--_gray-500);
190
+ }
191
+ .sso_verify {
192
+ border: 1px solid red;
193
+ }
174
194
 
175
- // Form Group (For Email and Password)
176
- .field__group {
177
- position: relative;
178
- .input__label {
179
- display: flex;
180
- align-items: center;
181
- gap: 4px;
182
- margin-bottom: 4px;
183
- }
184
- .input__field {
185
- position: relative;
186
- svg {
187
- width: 20px;
188
- height: 20px;
189
- }
190
- .placeholder_icon_start {
191
- position: absolute;
192
- z-index: 10;
193
- top: 9px;
194
- left: 10px;
195
- }
196
- .placeholder_icon_end {
197
- position: absolute;
198
- right: 10px;
199
- z-index: 10;
200
- top: 50%;
201
- transform: translateY(-50%);
202
- }
195
+ .form_fields {
196
+ margin-top: 36px;
197
+ }
203
198
 
204
- input {
205
- padding-left: 38px;
206
- }
207
- }
208
- .view__icon {
209
- position: absolute;
210
- right: 10px;
211
- top: 35px;
212
- svg {
213
- width: 18px;
214
- height: 18px;
215
- }
216
- }
217
- }
199
+ // Form Group (For Email and Password)
200
+ .field__group {
201
+ // margin-bottom: 16px;
202
+ position: relative;
203
+ .input__label {
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 4px;
207
+ margin-bottom: 4px;
208
+ }
209
+ .input__field {
210
+ position: relative;
211
+ svg {
212
+ width: 20px;
213
+ height: 20px;
214
+ }
215
+ .placeholder_icon_start {
216
+ position: absolute;
217
+ z-index: 10;
218
+ top: 9px;
219
+ left: 10px;
220
+ }
221
+ .placeholder_icon_end {
222
+ position: absolute;
223
+ right: 10px;
224
+ z-index: 10;
225
+ top: 50%;
226
+ transform: translateY(-50%);
227
+ }
218
228
 
219
- // Input Field Styles
220
- .inputField {
221
- width: 100%;
222
- padding: 10px;
223
- border-radius: 6px;
224
- border: 1px solid var(--_gray-300) !important;
225
- font-size: 14px;
226
- transition:
227
- background-color 0.2s,
228
- color 0.2s,
229
- border-color 0.2s,
230
- box-shadow 0.2s;
231
- &:focus {
232
- box-shadow:
233
- 0px 1px 2px rgba(16, 24, 40, 0.02),
234
- 0px 0px 0px 2px var(--_primary-100) !important;
235
- border: 1px solid var(--_primary-300) !important;
236
- }
237
- }
229
+ input {
230
+ padding-left: 38px;
231
+ }
232
+ }
233
+ .view__icon {
234
+ position: absolute;
235
+ right: 10px;
236
+ top: 35px;
237
+ svg {
238
+ width: 18px;
239
+ height: 18px;
240
+ }
241
+ }
242
+ }
238
243
 
239
- // Invalid Input Field
240
- .invalid {
241
- border-color: var(--_error-300) !important;
242
- outline: 2px solid #fee4e2;
243
- }
244
+ // Input Field Styles
245
+ .inputField {
246
+ width: 100%;
247
+ padding: 10px;
248
+ border-radius: 6px;
249
+ border: 1px solid var(--_gray-300) !important;
250
+ font-size: 14px;
251
+ transition:
252
+ background-color 0.2s,
253
+ color 0.2s,
254
+ border-color 0.2s,
255
+ box-shadow 0.2s;
256
+ &:focus {
257
+ box-shadow:
258
+ 0px 1px 2px rgba(16, 24, 40, 0.02),
259
+ 0px 0px 0px 2px var(--_primary-100) !important;
260
+ border: 1px solid var(--_primary-300) !important;
261
+ }
262
+ }
244
263
 
245
- // Error Text Styles
246
- .errorText {
247
- display: flex;
248
- align-items: center;
249
- gap: 4px;
250
- font-size: 12px;
251
- color: red;
252
- svg {
253
- display: flex;
254
- width: 13px;
255
- height: 13px;
256
- path {
257
- stroke: var(--_error-500);
258
- }
259
- }
260
- }
264
+ // Invalid Input Field
265
+ .invalid {
266
+ border-color: var(--_error-300) !important;
267
+ outline: 2px solid #fee4e2;
268
+ }
261
269
 
262
- // Submit Button
263
- .submitButton {
264
- width: 100%;
265
- padding: 12px;
266
- background-color: var(--_primary-500);
267
- color: #fff;
268
- border-radius: 6px;
269
- border: none;
270
- cursor: pointer;
271
- margin-top: 16px;
272
- display: flex;
273
- align-items: center;
274
- justify-content: center;
275
- &:has(svg) {
276
- gap: 8px;
277
- }
278
- svg {
279
- display: flex;
280
- path {
281
- stroke: var(--_base-white);
282
- }
283
- }
270
+ // Error Text Styles
271
+ .errorText {
272
+ display: flex;
273
+ align-items: center;
274
+ gap: 4px;
275
+ font-size: 12px;
276
+ color: red;
277
+ svg {
278
+ display: flex;
279
+ width: 13px;
280
+ height: 13px;
281
+ path {
282
+ stroke: var(--_error-500);
283
+ }
284
+ }
285
+ }
284
286
 
285
- &:disabled {
286
- background-color: var(--_primary-100);
287
- cursor: not-allowed;
288
- }
289
- }
290
- .mt__32 {
291
- margin-top: 32px !important;
292
- }
293
- .mt__48 {
294
- margin-top: 48px !important;
295
- }
287
+ // Submit Button
288
+ .submitButton {
289
+ width: 100%;
290
+ padding: 12px;
291
+ background-color: var(--_primary-500);
292
+ color: #fff;
293
+ border-radius: 6px;
294
+ border: none;
295
+ cursor: pointer;
296
+ margin-top: 16px;
297
+ display: flex;
298
+ align-items: center;
299
+ justify-content: center;
300
+ &:has(svg) {
301
+ gap: 8px;
302
+ }
303
+ svg {
304
+ display: flex;
305
+ path {
306
+ stroke: var(--_base-white);
307
+ }
308
+ }
296
309
 
297
- // Loading Icon
298
- .loadingIcon {
299
- margin-left: 8px;
300
- }
310
+ &:disabled {
311
+ background-color: var(--_primary-100);
312
+ cursor: not-allowed;
313
+ }
314
+ }
315
+ .mt__32 {
316
+ margin-top: 32px !important;
317
+ }
318
+ .mt__48 {
319
+ margin-top: 48px !important;
320
+ }
301
321
 
302
- // Forgot Password Section
303
- .forgotPassword {
304
- display: flex;
305
- align-items: center;
306
- justify-content: space-between;
307
- margin-top: 20px;
308
- .remember_block {
309
- display: flex;
310
- align-items: center;
311
- gap: 6px;
312
- }
313
- }
314
- .flex_center {
315
- display: flex;
316
- justify-content: center;
317
- align-items: center;
318
- gap: 8px;
319
- font-weight: 600;
320
- margin-top: 20px;
321
- width: 100%;
322
- color: var(--_primary-400);
323
- svg {
324
- display: flex;
325
- path {
326
- stroke: var(--_primary-400);
327
- }
328
- }
329
- }
322
+ // Loading Icon
323
+ .loadingIcon {
324
+ margin-left: 8px;
325
+ }
330
326
 
331
- .psw__contain {
332
- margin-bottom: 24px;
333
- .psw_status {
334
- display: flex;
335
- align-items: center;
336
- justify-content: space-between;
337
- .step {
338
- width: 20%;
339
- height: 3px;
340
- border-radius: 4px;
341
- background-color: var(--_gray-300);
342
- &.active {
343
- background-color: var(--_success-600);
327
+ // Forgot Password Section
328
+ .forgotPassword {
329
+ display: flex;
330
+ align-items: center;
331
+ justify-content: space-between;
332
+ margin-top: 20px;
333
+ .remember_block {
334
+ display: flex;
335
+ align-items: center;
336
+ gap: 6px;
337
+ }
344
338
  }
345
- }
346
- }
347
- .psw_content {
348
- background-color: var(--_gray-50);
349
- padding: 16px;
350
- border-radius: 6px !important;
351
- height: 100px;
352
- overflow-y: auto;
353
- margin-top: 20px;
354
- .title {
355
- font-size: 14px;
356
- font-weight: 600;
357
- color: var(--_gray-700);
358
- margin-bottom: 16px;
359
- }
360
- ul {
361
- li {
362
- color: var(--_gray-700);
363
- font-size: 14px;
364
- & > span {
365
- display: inline-flex;
339
+ .flex_center {
340
+ display: flex;
341
+ justify-content: center;
342
+ align-items: center;
343
+ gap: 8px;
344
+ font-weight: 600;
345
+ margin-top: 20px;
346
+ width: 100%;
347
+ color: var(--_primary-400);
348
+ svg {
349
+ display: flex;
350
+ path {
351
+ stroke: var(--_primary-400);
352
+ }
366
353
  }
367
- &:not(:last-child) {
368
- margin-bottom: 8px;
354
+ }
355
+
356
+ .psw__contain {
357
+ margin-bottom: 24px;
358
+ .psw_status {
359
+ display: flex;
360
+ align-items: center;
361
+ justify-content: space-between;
362
+ .step {
363
+ width: 20%;
364
+ height: 3px;
365
+ border-radius: 4px;
366
+ background-color: var(--_gray-300);
367
+ &.active {
368
+ background-color: var(--_success-600);
369
+ }
370
+ }
371
+ }
372
+ .psw_content {
373
+ background-color: var(--_gray-50);
374
+ padding: 16px;
375
+ border-radius: 6px !important;
376
+ height: 100px;
377
+ overflow-y: auto;
378
+ margin-top: 20px;
379
+ .title {
380
+ font-size: 14px;
381
+ font-weight: 600;
382
+ color: var(--_gray-700);
383
+ margin-bottom: 16px;
384
+ }
385
+ ul {
386
+ li {
387
+ color: var(--_gray-700);
388
+ font-size: 14px;
389
+ & > span {
390
+ display: inline-flex;
391
+ }
392
+ &:not(:last-child) {
393
+ margin-bottom: 8px;
394
+ }
395
+ }
396
+ }
369
397
  }
370
398
  }
371
- }
372
- }
373
- }
374
399
 
375
- // password reset successfully
376
- .reset_password_success {
377
- display: flex;
378
- justify-content: center;
379
- flex-direction: column;
380
- align-items: center;
381
-
382
- .rounded_icon {
383
- @extend .element__center;
384
- width: 40px;
385
- height: 40px;
386
- background-color: var(--_gray-200);
387
- border-radius: 50%;
388
- margin-bottom: 24px;
389
- }
390
- }
400
+ // password reset successfully
401
+ .reset_password_success {
402
+ display: flex;
403
+ justify-content: center;
404
+ flex-direction: column;
405
+ align-items: center;
391
406
 
392
- // Forgot Password Button
393
- .forgotPasswordButton {
394
- background: none;
395
- border: none;
396
- color: var(--_primary-400);
397
-
398
- font-weight: 600;
399
- cursor: pointer;
400
- font-size: 14px;
401
- padding: 8px 16px;
402
- border-radius: 6px;
403
- &:hover {
404
- background-color: var(--_primary-25);
405
- color: var(--_primary-700);
406
- }
407
- }
407
+ // .rounded_icon {
408
+ // @extend .element__center;
409
+ // width: 40px;
410
+ // height: 40px;
411
+ // background-color: var(--_gray-200);
412
+ // border-radius: 50%;
413
+ // margin-bottom: 24px;
414
+ // }
415
+ }
408
416
 
409
- @keyframes shine {
410
- 100% {
411
- left: 125%;
412
- }
413
- }
417
+ // Forgot Password Button
418
+ .forgotPasswordButton {
419
+ background: none;
420
+ border: none;
421
+ color: var(--_primary-400);
414
422
 
415
- .reset_password {
416
- form {
417
- label {
418
- display: block;
419
- margin-bottom: 4px;
420
- }
421
- .formGroup {
422
- &:not(:last-child) {
423
- margin-bottom: 16px;
423
+ font-weight: 600;
424
+ cursor: pointer;
425
+ font-size: 14px;
426
+ padding: 8px 16px;
427
+ border-radius: 6px;
428
+ &:hover {
429
+ background-color: var(--_primary-25);
430
+ color: var(--_primary-700);
431
+ }
424
432
  }
425
- }
426
- .to_be_filled {
427
- display: grid;
428
- grid-template-columns: 50% 50%;
429
- gap: 4px;
430
- margin-top: 10px;
431
- margin-bottom: 16px;
432
- li {
433
- padding: 4px 10px;
434
- background-color: var(--_gray-100);
435
- color: var(--_gray-700);
436
- border-radius: 40px;
437
- display: flex;
438
- align-items: center;
439
- gap: 5px;
440
- font-size: 12px;
441
- &.active {
442
- background-color: var(--_success-50);
443
- color: var(--_success-700);
444
- svg {
445
- path {
446
- stroke: var(--_success-700);
433
+
434
+ @keyframes shine {
435
+ 100% {
436
+ left: 125%;
437
+ }
438
+ }
439
+
440
+ .reset_password {
441
+ form {
442
+ label {
443
+ display: block;
444
+ margin-bottom: 4px;
445
+ }
446
+ .formGroup {
447
+ &:not(:last-child) {
448
+ margin-bottom: 16px;
447
449
  }
448
450
  }
451
+ .to_be_filled {
452
+ display: grid;
453
+ grid-template-columns: 50% 50%;
454
+ gap: 4px;
455
+ margin-top: 10px;
456
+ margin-bottom: 16px;
457
+ li {
458
+ padding: 4px 10px;
459
+ background-color: var(--_gray-100);
460
+ color: var(--_gray-700);
461
+ border-radius: 40px;
462
+ display: flex;
463
+ align-items: center;
464
+ gap: 5px;
465
+ font-size: 12px;
466
+ &.active {
467
+ background-color: var(--_success-50);
468
+ color: var(--_success-700);
469
+ svg {
470
+ path {
471
+ stroke: var(--_success-700);
472
+ }
473
+ }
474
+ }
475
+
476
+ button {
477
+ svg {
478
+ path {
479
+ stroke: var(--_gray-500);
480
+ }
481
+ }
482
+ }
483
+ }
484
+ }
485
+ }
486
+
487
+ .to_be_filled {
488
+ display: flex;
489
+ }
490
+ .error {
491
+ color: var(--_error-500);
492
+ &::first-letter {
493
+ text-transform: uppercase;
494
+ }
449
495
  }
496
+ }
450
497
 
451
- button {
498
+ // common styles
499
+ .btn__primary {
500
+ border-radius: 6px;
501
+ width: 100%;
502
+ height: 48px;
503
+ font-weight: 600;
504
+ color: var(--_base-white);
505
+ background-color: var(--_primary-500);
506
+ margin-top: 48px;
507
+ font-size: 16px;
508
+ display: flex;
509
+ justify-content: center;
510
+ align-items: center;
511
+ gap: 8px;
512
+ & > span {
513
+ display: flex;
452
514
  svg {
453
515
  path {
454
- stroke: var(--_gray-500);
516
+ stroke: var(--_base-white);
455
517
  }
456
518
  }
457
519
  }
458
520
  }
459
- }
460
- }
461
-
462
- .to_be_filled {
463
- display: flex;
464
- }
465
- .error {
466
- color: var(--_error-500);
467
- &::first-letter {
468
- text-transform: uppercase;
469
- }
470
- }
471
- }
472
-
473
- .single_sign_on {
474
- display: flex;
475
- flex-direction: column;
476
- justify-content: center;
477
- align-items: center;
478
- .redirect_section,
479
- .auth_failed_section {
480
- position: absolute;
481
- top: 50%;
482
- left: 50%;
483
- transform: translate(-50%, -50%);
484
- max-width: 500px;
485
- height: auto;
486
- justify-content: center;
487
- display: flex;
488
- align-items: center;
489
- flex-direction: column;
490
- .section_title {
491
- font-size: 18px;
492
- margin-bottom: 4px;
493
- }
494
- .section_txt {
495
- font-size: 14px;
496
- text-align: center;
497
- }
498
- .logo_brand {
499
- margin-top: 20px;
500
- }
501
- }
502
- .copyright_text {
503
- position: fixed;
504
- bottom: 10px;
505
- text-align: center;
506
- }
507
- }
508
-
509
- // common styles
510
- .btn__primary {
511
- border-radius: 6px;
512
- width: 100%;
513
- height: 48px;
514
- font-weight: 600;
515
- color: var(--_base-white);
516
- background-color: var(--_primary-500);
517
- margin-top: 48px;
518
- font-size: 16px;
519
- display: flex;
520
- justify-content: center;
521
- align-items: center;
522
- gap: 8px;
523
- & > span {
524
- display: flex;
525
- svg {
526
- path {
527
- stroke: var(--_base-white);
521
+ .section__title {
522
+ font-size: 24px;
523
+ font-weight: 600;
524
+ margin-bottom: 8px;
525
+ color: var(--_gray-900);
526
+ }
527
+ .section__desc {
528
+ font-size: 14px;
529
+ color: var(--_gray-500);
530
+ }
531
+ .text__center {
532
+ text-align: center;
528
533
  }
529
- }
530
- }
531
- }
532
- .section__title {
533
- font-size: 24px;
534
- font-weight: 600;
535
- margin-bottom: 8px;
536
- color: var(--_gray-900);
537
- }
538
- .section__desc {
539
- font-size: 14px;
540
- color: var(--_gray-500);
541
- }
542
- .text__center {
543
- text-align: center;
544
- }
545
534
 
546
- .rounded__fill {
547
- @extend .element__center;
548
- width: 60px;
549
- height: 60px;
550
- background-color: var(--_success-50);
551
- border-radius: 50%;
552
- margin-bottom: 24px;
553
- svg {
554
- width: 26px;
555
- height: 26px;
556
- path {
557
- stroke: var(--_success-600);
535
+ // .rounded__fill {
536
+ // @extend .element__center;
537
+ // width: 60px;
538
+ // height: 60px;
539
+ // background-color: var(--_success-50);
540
+ // border-radius: 50%;
541
+ // margin-bottom: 24px;
542
+ // svg {
543
+ // width: 26px;
544
+ // height: 26px;
545
+ // path {
546
+ // stroke: var(--_success-600);
547
+ // }
548
+ // }
549
+ // &.remove__bg {
550
+ // background-color: transparent;
551
+ // }
552
+ // }
558
553
  }
559
554
  }
560
- &.remove__bg {
561
- background-color: transparent;
562
- }
563
555
  }