@visns-studio/visns-components 5.6.7 → 5.6.8
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.
- package/package.json +1 -1
- package/src/components/crm/auth/Login.jsx +51 -39
- package/src/components/crm/auth/Reset.jsx +11 -5
- package/src/components/crm/auth/Verify.jsx +11 -5
- package/src/components/crm/auth/styles/Login.module.scss +110 -39
- package/src/components/crm/auth/styles/Reset.module.scss +51 -46
- package/src/components/crm/auth/styles/Verify.module.scss +51 -46
package/package.json
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
85
85
|
},
|
|
86
86
|
"name": "@visns-studio/visns-components",
|
|
87
|
-
"version": "5.6.
|
|
87
|
+
"version": "5.6.8",
|
|
88
88
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
89
89
|
"main": "src/index.js",
|
|
90
90
|
"files": [
|
|
@@ -28,20 +28,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
const renderSsoButton = () => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
display: 'block',
|
|
37
|
-
textAlign: 'center',
|
|
38
|
-
width: '100%',
|
|
39
|
-
}}
|
|
40
|
-
>
|
|
41
|
-
OR
|
|
42
|
-
</span>
|
|
43
|
-
</div>
|
|
44
|
-
) : null;
|
|
31
|
+
if (!providers || providers.length === 0) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
let content = <div className={styles.divider}>OR</div>;
|
|
45
36
|
|
|
46
37
|
if (providers) {
|
|
47
38
|
providers.forEach((provider) => {
|
|
@@ -51,13 +42,12 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
51
42
|
<>
|
|
52
43
|
{content}
|
|
53
44
|
<div
|
|
54
|
-
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}
|
|
45
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
55
46
|
>
|
|
56
47
|
<button
|
|
57
|
-
className={styles.
|
|
48
|
+
className={styles.ssoButton}
|
|
58
49
|
onClick={(e) => {
|
|
59
50
|
e.preventDefault();
|
|
60
|
-
|
|
61
51
|
window.location.href =
|
|
62
52
|
'/auth/azure';
|
|
63
53
|
}}
|
|
@@ -66,10 +56,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
66
56
|
src={
|
|
67
57
|
'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
|
|
68
58
|
}
|
|
69
|
-
width="
|
|
70
|
-
height="
|
|
71
|
-
|
|
72
|
-
|
|
59
|
+
width="18px"
|
|
60
|
+
height="18px"
|
|
61
|
+
alt="Microsoft logo"
|
|
62
|
+
/>
|
|
63
|
+
Sign in with Microsoft
|
|
73
64
|
</button>
|
|
74
65
|
</div>
|
|
75
66
|
</>
|
|
@@ -182,6 +173,17 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
182
173
|
alt="CRM"
|
|
183
174
|
className={styles.loginlogo}
|
|
184
175
|
/>
|
|
176
|
+
<h2
|
|
177
|
+
style={{
|
|
178
|
+
textAlign: 'center',
|
|
179
|
+
marginBottom: '1.5rem',
|
|
180
|
+
color: '#111827',
|
|
181
|
+
fontWeight: '600',
|
|
182
|
+
fontSize: '1.5rem',
|
|
183
|
+
}}
|
|
184
|
+
>
|
|
185
|
+
Sign in to your account
|
|
186
|
+
</h2>
|
|
185
187
|
<div
|
|
186
188
|
className={`${styles.formItem} ${styles.fwItem}`}
|
|
187
189
|
>
|
|
@@ -232,9 +234,10 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
232
234
|
>
|
|
233
235
|
<div className={styles.rememberMeContainer}>
|
|
234
236
|
<div
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
237
|
+
style={{
|
|
238
|
+
display: 'flex',
|
|
239
|
+
alignItems: 'center',
|
|
240
|
+
}}
|
|
238
241
|
>
|
|
239
242
|
<input
|
|
240
243
|
type="checkbox"
|
|
@@ -246,13 +249,28 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
246
249
|
styles.rememberMeCheckbox
|
|
247
250
|
}
|
|
248
251
|
/>
|
|
252
|
+
<label
|
|
253
|
+
htmlFor="rememberMe"
|
|
254
|
+
className={
|
|
255
|
+
styles.rememberMeLabel
|
|
256
|
+
}
|
|
257
|
+
>
|
|
258
|
+
Remember me
|
|
259
|
+
</label>
|
|
260
|
+
</div>
|
|
261
|
+
<div>
|
|
262
|
+
<Link
|
|
263
|
+
to="/reset"
|
|
264
|
+
style={{
|
|
265
|
+
color: 'var(--primary-color, #4f46e5)',
|
|
266
|
+
textDecoration: 'none',
|
|
267
|
+
fontWeight: '500',
|
|
268
|
+
fontSize: '0.875rem',
|
|
269
|
+
}}
|
|
270
|
+
>
|
|
271
|
+
Forgot password?
|
|
272
|
+
</Link>
|
|
249
273
|
</div>
|
|
250
|
-
<label
|
|
251
|
-
htmlFor="rememberMe"
|
|
252
|
-
className={styles.rememberMeLabel}
|
|
253
|
-
>
|
|
254
|
-
Remember me
|
|
255
|
-
</label>
|
|
256
274
|
</div>
|
|
257
275
|
</div>
|
|
258
276
|
<div
|
|
@@ -263,17 +281,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
|
|
|
263
281
|
type="submit"
|
|
264
282
|
disabled={isLoading}
|
|
265
283
|
>
|
|
266
|
-
{isLoading
|
|
284
|
+
{isLoading
|
|
285
|
+
? 'Signing in...'
|
|
286
|
+
: 'Sign in'}
|
|
267
287
|
</button>
|
|
268
288
|
</div>
|
|
269
|
-
<div
|
|
270
|
-
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
|
|
271
|
-
>
|
|
272
|
-
<span>
|
|
273
|
-
Forgot your password?{' '}
|
|
274
|
-
<Link to="/reset">Click Here</Link>
|
|
275
|
-
</span>
|
|
276
|
-
</div>
|
|
277
289
|
{renderSsoButton()}
|
|
278
290
|
</div>
|
|
279
291
|
</Reveal>
|
|
@@ -53,11 +53,17 @@ const Reset = ({ logo }) => {
|
|
|
53
53
|
alt="CRM"
|
|
54
54
|
className={styles.loginlogo}
|
|
55
55
|
/>
|
|
56
|
-
<
|
|
57
|
-
|
|
56
|
+
<h2
|
|
57
|
+
style={{
|
|
58
|
+
textAlign: 'center',
|
|
59
|
+
marginBottom: '1.5rem',
|
|
60
|
+
color: '#111827',
|
|
61
|
+
fontWeight: '600',
|
|
62
|
+
fontSize: '1.5rem',
|
|
63
|
+
}}
|
|
58
64
|
>
|
|
59
|
-
|
|
60
|
-
</
|
|
65
|
+
Forgot your password?
|
|
66
|
+
</h2>
|
|
61
67
|
<div
|
|
62
68
|
className={`${styles.formItem} ${styles.fwItem}`}
|
|
63
69
|
>
|
|
@@ -89,7 +95,7 @@ const Reset = ({ logo }) => {
|
|
|
89
95
|
type="submit"
|
|
90
96
|
tabIndex="2"
|
|
91
97
|
>
|
|
92
|
-
Reset
|
|
98
|
+
Send Reset Link
|
|
93
99
|
</button>
|
|
94
100
|
</div>
|
|
95
101
|
</div>
|
|
@@ -107,11 +107,17 @@ const Verify = ({ logo }) => {
|
|
|
107
107
|
alt="CRM"
|
|
108
108
|
className={styles.loginlogo}
|
|
109
109
|
/>
|
|
110
|
-
<
|
|
111
|
-
|
|
110
|
+
<h2
|
|
111
|
+
style={{
|
|
112
|
+
textAlign: 'center',
|
|
113
|
+
marginBottom: '1.5rem',
|
|
114
|
+
color: '#111827',
|
|
115
|
+
fontWeight: '600',
|
|
116
|
+
fontSize: '1.5rem',
|
|
117
|
+
}}
|
|
112
118
|
>
|
|
113
|
-
|
|
114
|
-
</
|
|
119
|
+
Reset your password
|
|
120
|
+
</h2>
|
|
115
121
|
<div
|
|
116
122
|
className={`${styles.formItem} ${styles.fwItem}`}
|
|
117
123
|
>
|
|
@@ -154,7 +160,7 @@ const Verify = ({ logo }) => {
|
|
|
154
160
|
type="submit"
|
|
155
161
|
tabIndex="3"
|
|
156
162
|
>
|
|
157
|
-
|
|
163
|
+
Set New Password
|
|
158
164
|
</button>
|
|
159
165
|
</div>
|
|
160
166
|
</div>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
-
margin-bottom:
|
|
5
|
+
margin-bottom: 1rem;
|
|
6
6
|
|
|
7
7
|
.fi__label {
|
|
8
8
|
position: relative;
|
|
@@ -13,11 +13,13 @@
|
|
|
13
13
|
.fi__span {
|
|
14
14
|
position: absolute;
|
|
15
15
|
transition: all 200ms;
|
|
16
|
-
opacity:
|
|
16
|
+
opacity: 0.7;
|
|
17
17
|
left: 0;
|
|
18
18
|
transform-origin: top left;
|
|
19
19
|
cursor: text;
|
|
20
20
|
padding: 0 1rem;
|
|
21
|
+
font-size: 0.9rem;
|
|
22
|
+
color: #6b7280;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.fi__div {
|
|
@@ -25,8 +27,8 @@
|
|
|
25
27
|
opacity: 0.8;
|
|
26
28
|
left: 0;
|
|
27
29
|
padding: 19px 13px;
|
|
28
|
-
border-radius:
|
|
29
|
-
border: 1px solid
|
|
30
|
+
border-radius: 0.5rem;
|
|
31
|
+
border: 1px solid #e5e7eb;
|
|
30
32
|
box-shadow: none;
|
|
31
33
|
}
|
|
32
34
|
|
|
@@ -58,10 +60,10 @@
|
|
|
58
60
|
.loginlogo {
|
|
59
61
|
display: block;
|
|
60
62
|
width: 100%;
|
|
61
|
-
max-width:
|
|
63
|
+
max-width: 150px;
|
|
62
64
|
height: auto;
|
|
63
65
|
margin: 0 auto;
|
|
64
|
-
padding-bottom:
|
|
66
|
+
padding-bottom: 1.5rem;
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.logincontainer {
|
|
@@ -70,15 +72,20 @@
|
|
|
70
72
|
display: grid;
|
|
71
73
|
place-items: center;
|
|
72
74
|
padding: 1rem;
|
|
75
|
+
background-color: #f9fafb;
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
.login {
|
|
76
|
-
width:
|
|
77
|
-
padding:
|
|
79
|
+
width: 28rem;
|
|
80
|
+
padding: 2rem;
|
|
78
81
|
margin: 0;
|
|
79
82
|
display: grid;
|
|
80
83
|
grid-template-columns: 1fr;
|
|
81
|
-
gap:
|
|
84
|
+
gap: 1rem;
|
|
85
|
+
background-color: white;
|
|
86
|
+
border-radius: 0.75rem;
|
|
87
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
88
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
82
89
|
|
|
83
90
|
> .formItem {
|
|
84
91
|
padding: 0;
|
|
@@ -87,9 +94,10 @@
|
|
|
87
94
|
position: absolute;
|
|
88
95
|
width: 18px;
|
|
89
96
|
height: 18px;
|
|
90
|
-
right:
|
|
91
|
-
top:
|
|
92
|
-
opacity: 0.
|
|
97
|
+
right: 14px;
|
|
98
|
+
top: 14px;
|
|
99
|
+
opacity: 0.4;
|
|
100
|
+
color: #6b7280;
|
|
93
101
|
}
|
|
94
102
|
}
|
|
95
103
|
|
|
@@ -110,24 +118,29 @@
|
|
|
110
118
|
.forgotten span {
|
|
111
119
|
display: block;
|
|
112
120
|
text-align: center;
|
|
113
|
-
color:
|
|
121
|
+
color: #6b7280;
|
|
114
122
|
padding: 1rem 0;
|
|
123
|
+
font-size: 0.875rem;
|
|
115
124
|
|
|
116
125
|
a {
|
|
117
|
-
color: var(--
|
|
126
|
+
color: var(--primary-color, #4f46e5);
|
|
118
127
|
text-decoration: none;
|
|
128
|
+
font-weight: 500;
|
|
129
|
+
|
|
130
|
+
&:hover {
|
|
131
|
+
text-decoration: underline;
|
|
132
|
+
}
|
|
119
133
|
}
|
|
120
134
|
}
|
|
121
135
|
|
|
122
136
|
.rememberMeContainer {
|
|
123
137
|
display: flex;
|
|
124
138
|
align-items: center;
|
|
125
|
-
justify-content:
|
|
139
|
+
justify-content: space-between;
|
|
126
140
|
width: 100%;
|
|
127
|
-
padding: 0.
|
|
128
|
-
margin-bottom: 0.75rem;
|
|
141
|
+
padding: 0 0.25rem;
|
|
129
142
|
box-sizing: border-box;
|
|
130
|
-
margin-top: -0.
|
|
143
|
+
margin-top: -0.5rem;
|
|
131
144
|
}
|
|
132
145
|
|
|
133
146
|
.rememberMeCheckboxWrapper {
|
|
@@ -140,18 +153,19 @@
|
|
|
140
153
|
.rememberMeLabel {
|
|
141
154
|
cursor: pointer;
|
|
142
155
|
user-select: none;
|
|
143
|
-
color:
|
|
144
|
-
font-size: 0.
|
|
156
|
+
color: #6b7280;
|
|
157
|
+
font-size: 0.875rem;
|
|
145
158
|
white-space: nowrap;
|
|
146
159
|
}
|
|
147
160
|
|
|
148
161
|
.rememberMeCheckbox {
|
|
149
|
-
/* Use the browser's default checkbox but with some styling */
|
|
150
162
|
width: 16px;
|
|
151
163
|
height: 16px;
|
|
152
164
|
cursor: pointer;
|
|
153
165
|
position: relative;
|
|
154
|
-
accent-color: var(--primary-color);
|
|
166
|
+
accent-color: var(--primary-color, #4f46e5);
|
|
167
|
+
border-radius: 0.25rem;
|
|
168
|
+
margin-right: 0.5rem;
|
|
155
169
|
}
|
|
156
170
|
|
|
157
171
|
.lcontainer {
|
|
@@ -159,11 +173,12 @@
|
|
|
159
173
|
display: flex;
|
|
160
174
|
align-items: center;
|
|
161
175
|
justify-content: center;
|
|
176
|
+
background-color: #f9fafb;
|
|
162
177
|
}
|
|
163
178
|
|
|
164
179
|
.lwrap {
|
|
165
180
|
display: grid;
|
|
166
|
-
grid-template-columns:
|
|
181
|
+
grid-template-columns: 1fr;
|
|
167
182
|
}
|
|
168
183
|
|
|
169
184
|
.aside {
|
|
@@ -178,33 +193,89 @@
|
|
|
178
193
|
width: max-content;
|
|
179
194
|
display: inline-block;
|
|
180
195
|
position: relative;
|
|
181
|
-
padding: 0.
|
|
196
|
+
padding: 0.75rem 1rem;
|
|
182
197
|
cursor: pointer;
|
|
183
|
-
font-size:
|
|
184
|
-
|
|
198
|
+
font-size: 0.875rem;
|
|
199
|
+
font-weight: 500;
|
|
200
|
+
color: white;
|
|
185
201
|
text-decoration: none;
|
|
186
202
|
overflow: hidden;
|
|
187
|
-
background: var(--primary-color);
|
|
188
|
-
border: 1px solid
|
|
189
|
-
border-radius:
|
|
203
|
+
background: var(--primary-color, #4f46e5);
|
|
204
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
205
|
+
border-radius: 0.5rem;
|
|
190
206
|
outline: none;
|
|
191
|
-
transition: all 0.2s
|
|
207
|
+
transition: all 0.2s ease;
|
|
208
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
192
209
|
|
|
193
210
|
&:hover {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
211
|
+
background: #4338ca;
|
|
212
|
+
border-color: #4338ca;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
&:focus {
|
|
216
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
197
217
|
}
|
|
198
218
|
}
|
|
199
219
|
|
|
200
220
|
input:not(:placeholder-shown) + .fi__span,
|
|
201
221
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
202
222
|
select:not(:placeholder-shown) + .fi__span {
|
|
203
|
-
transform: translateY(-135%) translateX(10px) scale(0.
|
|
223
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
204
224
|
opacity: 1;
|
|
205
225
|
padding: 0;
|
|
206
|
-
background:
|
|
207
|
-
font-weight:
|
|
208
|
-
transition: all 0.
|
|
209
|
-
color:
|
|
226
|
+
background: white;
|
|
227
|
+
font-weight: 500;
|
|
228
|
+
transition: all 0.3s ease;
|
|
229
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Add divider styling for the OR section */
|
|
233
|
+
.divider {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
text-align: center;
|
|
237
|
+
margin: 1rem 0;
|
|
238
|
+
color: #9ca3af;
|
|
239
|
+
font-size: 0.875rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.divider::before,
|
|
243
|
+
.divider::after {
|
|
244
|
+
content: '';
|
|
245
|
+
flex: 1;
|
|
246
|
+
border-bottom: 1px solid #e5e7eb;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.divider::before {
|
|
250
|
+
margin-right: 1rem;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.divider::after {
|
|
254
|
+
margin-left: 1rem;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* SSO button styling */
|
|
258
|
+
.ssoButton {
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
justify-content: center;
|
|
262
|
+
width: 100%;
|
|
263
|
+
padding: 0.75rem 1rem;
|
|
264
|
+
background-color: white;
|
|
265
|
+
border: 1px solid #e5e7eb;
|
|
266
|
+
border-radius: 0.5rem;
|
|
267
|
+
font-size: 0.875rem;
|
|
268
|
+
font-weight: 500;
|
|
269
|
+
color: #374151;
|
|
270
|
+
transition: all 0.2s ease;
|
|
271
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
272
|
+
|
|
273
|
+
&:hover {
|
|
274
|
+
background-color: #f9fafb;
|
|
275
|
+
border-color: #d1d5db;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
img {
|
|
279
|
+
margin-right: 0.5rem;
|
|
280
|
+
}
|
|
210
281
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
+
margin-bottom: 1rem;
|
|
5
6
|
|
|
6
7
|
h1 {
|
|
7
8
|
text-align: center;
|
|
8
|
-
font-size: 1.
|
|
9
|
+
font-size: 1.5rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
color: #111827;
|
|
12
|
+
margin-bottom: 1.5rem;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.fi__label {
|
|
@@ -17,11 +21,13 @@
|
|
|
17
21
|
.fi__span {
|
|
18
22
|
position: absolute;
|
|
19
23
|
transition: all 200ms;
|
|
20
|
-
opacity: 0.
|
|
24
|
+
opacity: 0.7;
|
|
21
25
|
left: 0;
|
|
22
26
|
transform-origin: top left;
|
|
23
27
|
cursor: text;
|
|
24
28
|
padding: 0 1rem;
|
|
29
|
+
font-size: 0.9rem;
|
|
30
|
+
color: #6b7280;
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
.fi__div {
|
|
@@ -29,8 +35,8 @@
|
|
|
29
35
|
opacity: 0.8;
|
|
30
36
|
left: 0;
|
|
31
37
|
padding: 19px 13px;
|
|
32
|
-
border-radius:
|
|
33
|
-
border: 1px solid
|
|
38
|
+
border-radius: 0.5rem;
|
|
39
|
+
border: 1px solid #e5e7eb;
|
|
34
40
|
box-shadow: none;
|
|
35
41
|
}
|
|
36
42
|
|
|
@@ -64,29 +70,10 @@
|
|
|
64
70
|
.loginlogo {
|
|
65
71
|
display: block;
|
|
66
72
|
width: 100%;
|
|
67
|
-
max-width:
|
|
73
|
+
max-width: 150px;
|
|
68
74
|
height: auto;
|
|
69
75
|
margin: 0 auto;
|
|
70
|
-
padding-bottom:
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.logincontainer {
|
|
74
|
-
min-height: 100vh;
|
|
75
|
-
flex-grow: 1;
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-content: center;
|
|
80
|
-
flex-wrap: wrap;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.loginlogo {
|
|
84
|
-
display: block;
|
|
85
|
-
width: 100%;
|
|
86
|
-
max-width: 200px;
|
|
87
|
-
height: auto;
|
|
88
|
-
margin: 0 auto;
|
|
89
|
-
padding-bottom: 1rem;
|
|
76
|
+
padding-bottom: 1.5rem;
|
|
90
77
|
}
|
|
91
78
|
|
|
92
79
|
.logincontainer {
|
|
@@ -95,15 +82,20 @@
|
|
|
95
82
|
display: grid;
|
|
96
83
|
place-items: center;
|
|
97
84
|
padding: 1rem;
|
|
85
|
+
background-color: #f9fafb;
|
|
98
86
|
}
|
|
99
87
|
|
|
100
88
|
.login {
|
|
101
|
-
width:
|
|
102
|
-
padding:
|
|
89
|
+
width: 28rem;
|
|
90
|
+
padding: 2rem;
|
|
103
91
|
margin: 0;
|
|
104
92
|
display: grid;
|
|
105
93
|
grid-template-columns: 1fr;
|
|
106
|
-
gap:
|
|
94
|
+
gap: 1rem;
|
|
95
|
+
background-color: white;
|
|
96
|
+
border-radius: 0.75rem;
|
|
97
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
98
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
107
99
|
|
|
108
100
|
> .formItem {
|
|
109
101
|
padding: 0;
|
|
@@ -112,9 +104,10 @@
|
|
|
112
104
|
position: absolute;
|
|
113
105
|
width: 18px;
|
|
114
106
|
height: 18px;
|
|
115
|
-
right:
|
|
116
|
-
top:
|
|
117
|
-
opacity: 0.
|
|
107
|
+
right: 14px;
|
|
108
|
+
top: 14px;
|
|
109
|
+
opacity: 0.4;
|
|
110
|
+
color: #6b7280;
|
|
118
111
|
}
|
|
119
112
|
}
|
|
120
113
|
|
|
@@ -149,11 +142,12 @@
|
|
|
149
142
|
display: flex;
|
|
150
143
|
align-items: center;
|
|
151
144
|
justify-content: center;
|
|
145
|
+
background-color: #f9fafb;
|
|
152
146
|
}
|
|
153
147
|
|
|
154
148
|
.lwrap {
|
|
155
149
|
display: grid;
|
|
156
|
-
grid-template-columns:
|
|
150
|
+
grid-template-columns: 1fr;
|
|
157
151
|
}
|
|
158
152
|
|
|
159
153
|
.aside {
|
|
@@ -168,27 +162,38 @@
|
|
|
168
162
|
width: max-content;
|
|
169
163
|
display: inline-block;
|
|
170
164
|
position: relative;
|
|
171
|
-
padding: 0.
|
|
165
|
+
padding: 0.75rem 1rem;
|
|
172
166
|
cursor: pointer;
|
|
173
|
-
font-size:
|
|
174
|
-
|
|
167
|
+
font-size: 0.875rem;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
color: white;
|
|
175
170
|
text-decoration: none;
|
|
176
171
|
overflow: hidden;
|
|
177
|
-
background: var(--primary-color);
|
|
178
|
-
border: 1px solid
|
|
179
|
-
border-radius:
|
|
172
|
+
background: var(--primary-color, #4f46e5);
|
|
173
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
174
|
+
border-radius: 0.5rem;
|
|
180
175
|
outline: none;
|
|
181
|
-
transition: all 0.2s
|
|
182
|
-
|
|
176
|
+
transition: all 0.2s ease;
|
|
177
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
178
|
+
|
|
179
|
+
&:hover {
|
|
180
|
+
background: #4338ca;
|
|
181
|
+
border-color: #4338ca;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:focus {
|
|
185
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
186
|
+
}
|
|
183
187
|
}
|
|
184
188
|
|
|
185
189
|
input:not(:placeholder-shown) + .fi__span,
|
|
186
190
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
187
191
|
select:not(:placeholder-shown) + .fi__span {
|
|
188
|
-
transform: translateY(-
|
|
192
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
189
193
|
opacity: 1;
|
|
190
194
|
padding: 0;
|
|
191
|
-
background:
|
|
192
|
-
font-weight:
|
|
193
|
-
transition: all 0.
|
|
194
|
-
|
|
195
|
+
background: white;
|
|
196
|
+
font-weight: 500;
|
|
197
|
+
transition: all 0.3s ease;
|
|
198
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
199
|
+
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
+
margin-bottom: 1rem;
|
|
5
6
|
|
|
6
7
|
h1 {
|
|
7
8
|
text-align: center;
|
|
8
|
-
font-size: 1.
|
|
9
|
+
font-size: 1.5rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
color: #111827;
|
|
12
|
+
margin-bottom: 1.5rem;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.fi__label {
|
|
@@ -17,11 +21,13 @@
|
|
|
17
21
|
.fi__span {
|
|
18
22
|
position: absolute;
|
|
19
23
|
transition: all 200ms;
|
|
20
|
-
opacity: 0.
|
|
24
|
+
opacity: 0.7;
|
|
21
25
|
left: 0;
|
|
22
26
|
transform-origin: top left;
|
|
23
27
|
cursor: text;
|
|
24
28
|
padding: 0 1rem;
|
|
29
|
+
font-size: 0.9rem;
|
|
30
|
+
color: #6b7280;
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
.fi__div {
|
|
@@ -29,8 +35,8 @@
|
|
|
29
35
|
opacity: 0.8;
|
|
30
36
|
left: 0;
|
|
31
37
|
padding: 19px 13px;
|
|
32
|
-
border-radius:
|
|
33
|
-
border: 1px solid
|
|
38
|
+
border-radius: 0.5rem;
|
|
39
|
+
border: 1px solid #e5e7eb;
|
|
34
40
|
box-shadow: none;
|
|
35
41
|
}
|
|
36
42
|
|
|
@@ -64,29 +70,10 @@
|
|
|
64
70
|
.loginlogo {
|
|
65
71
|
display: block;
|
|
66
72
|
width: 100%;
|
|
67
|
-
max-width:
|
|
73
|
+
max-width: 150px;
|
|
68
74
|
height: auto;
|
|
69
75
|
margin: 0 auto;
|
|
70
|
-
padding-bottom:
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.logincontainer {
|
|
74
|
-
min-height: 100vh;
|
|
75
|
-
flex-grow: 1;
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-content: center;
|
|
80
|
-
flex-wrap: wrap;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.loginlogo {
|
|
84
|
-
display: block;
|
|
85
|
-
width: 100%;
|
|
86
|
-
max-width: 200px;
|
|
87
|
-
height: auto;
|
|
88
|
-
margin: 0 auto;
|
|
89
|
-
padding-bottom: 1rem;
|
|
76
|
+
padding-bottom: 1.5rem;
|
|
90
77
|
}
|
|
91
78
|
|
|
92
79
|
.logincontainer {
|
|
@@ -95,15 +82,20 @@
|
|
|
95
82
|
display: grid;
|
|
96
83
|
place-items: center;
|
|
97
84
|
padding: 1rem;
|
|
85
|
+
background-color: #f9fafb;
|
|
98
86
|
}
|
|
99
87
|
|
|
100
88
|
.login {
|
|
101
|
-
width:
|
|
102
|
-
padding:
|
|
89
|
+
width: 28rem;
|
|
90
|
+
padding: 2rem;
|
|
103
91
|
margin: 0;
|
|
104
92
|
display: grid;
|
|
105
93
|
grid-template-columns: 1fr;
|
|
106
|
-
gap:
|
|
94
|
+
gap: 1rem;
|
|
95
|
+
background-color: white;
|
|
96
|
+
border-radius: 0.75rem;
|
|
97
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
98
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
107
99
|
|
|
108
100
|
> .formItem {
|
|
109
101
|
padding: 0;
|
|
@@ -112,9 +104,10 @@
|
|
|
112
104
|
position: absolute;
|
|
113
105
|
width: 18px;
|
|
114
106
|
height: 18px;
|
|
115
|
-
right:
|
|
116
|
-
top:
|
|
117
|
-
opacity: 0.
|
|
107
|
+
right: 14px;
|
|
108
|
+
top: 14px;
|
|
109
|
+
opacity: 0.4;
|
|
110
|
+
color: #6b7280;
|
|
118
111
|
}
|
|
119
112
|
}
|
|
120
113
|
|
|
@@ -149,11 +142,12 @@
|
|
|
149
142
|
display: flex;
|
|
150
143
|
align-items: center;
|
|
151
144
|
justify-content: center;
|
|
145
|
+
background-color: #f9fafb;
|
|
152
146
|
}
|
|
153
147
|
|
|
154
148
|
.lwrap {
|
|
155
149
|
display: grid;
|
|
156
|
-
grid-template-columns:
|
|
150
|
+
grid-template-columns: 1fr;
|
|
157
151
|
}
|
|
158
152
|
|
|
159
153
|
.aside {
|
|
@@ -168,27 +162,38 @@
|
|
|
168
162
|
width: max-content;
|
|
169
163
|
display: inline-block;
|
|
170
164
|
position: relative;
|
|
171
|
-
padding: 0.
|
|
165
|
+
padding: 0.75rem 1rem;
|
|
172
166
|
cursor: pointer;
|
|
173
|
-
font-size:
|
|
174
|
-
|
|
167
|
+
font-size: 0.875rem;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
color: white;
|
|
175
170
|
text-decoration: none;
|
|
176
171
|
overflow: hidden;
|
|
177
|
-
background: var(--primary-color);
|
|
178
|
-
border: 1px solid
|
|
179
|
-
border-radius:
|
|
172
|
+
background: var(--primary-color, #4f46e5);
|
|
173
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
174
|
+
border-radius: 0.5rem;
|
|
180
175
|
outline: none;
|
|
181
|
-
transition: all 0.2s
|
|
182
|
-
|
|
176
|
+
transition: all 0.2s ease;
|
|
177
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
178
|
+
|
|
179
|
+
&:hover {
|
|
180
|
+
background: #4338ca;
|
|
181
|
+
border-color: #4338ca;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:focus {
|
|
185
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
186
|
+
}
|
|
183
187
|
}
|
|
184
188
|
|
|
185
189
|
input:not(:placeholder-shown) + .fi__span,
|
|
186
190
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
187
191
|
select:not(:placeholder-shown) + .fi__span {
|
|
188
|
-
transform: translateY(-
|
|
192
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
189
193
|
opacity: 1;
|
|
190
194
|
padding: 0;
|
|
191
|
-
background:
|
|
192
|
-
font-weight:
|
|
193
|
-
transition: all 0.
|
|
194
|
-
|
|
195
|
+
background: white;
|
|
196
|
+
font-weight: 500;
|
|
197
|
+
transition: all 0.3s ease;
|
|
198
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
199
|
+
}
|