Skip to content

Commit 4ef97d5

Browse files
dntrung044dntrung044
committed
login_register_ui
1 parent 99687a2 commit 4ef97d5

File tree

3 files changed

+466
-211
lines changed

3 files changed

+466
-211
lines changed

‎public/teamplate/css/auth.css

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
2+
3+
.inner {
4+
padding: 36px 30px 48px;
5+
border-radius: 15px;
6+
background-color: #fff;
7+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
8+
}
9+
10+
@media (max-width: 768px) {
11+
.inner {
12+
border-radius: 0;
13+
}
14+
}
15+
16+
.inner .title {
17+
text-transform: uppercase;
18+
font-size: 22px;
19+
text-align: center;
20+
margin-bottom: 1rem;
21+
color: #333;
22+
letter-spacing: 2px;
23+
}
24+
25+
/* input */
26+
.form-control {
27+
border: 1px solid #ccc;
28+
display: block;
29+
width: 100%;
30+
height: 40px;
31+
padding: 0 29px;
32+
border-radius: 20px;
33+
background: none;
34+
}
35+
36+
.form-control:focus {
37+
border: 1px solid #6c757d;
38+
}
39+
40+
.form-control.is-invalid {
41+
border: 2px solid #dc3545 !important;
42+
background-color: #ffe6e6;
43+
}
44+
.form-group .btn-outline-secondary {
45+
border: 1px solid #ccc;
46+
border-radius: 20px;
47+
}
48+
49+
50+
.input_field {
51+
border-radius: 20px;
52+
padding: 5px;
53+
display: flex;
54+
align-items: center;
55+
cursor: pointer;
56+
border: 1px solid #ccc;
57+
color: #008bfc
58+
}
59+
.input_field:focus {
60+
border: 1px solid #6c757d;
61+
}
62+
.input_field.is-invalid {
63+
border: 2px solid #dc3545 !important;
64+
background-color: #ffe6e6;
65+
}
66+
67+
.no_border {
68+
border: none;
69+
outline: none;
70+
box-shadow: none;
71+
width: 100%
72+
}
73+
/* input */
74+
75+
/* login with */
76+
.bordert {
77+
border-top: 1px solid #aaa;
78+
position: relative
79+
}
80+
81+
.bordert:after {
82+
content: "Hoặc đăng nhập bằng";
83+
position: absolute;
84+
top: -13px;
85+
left: 36%;
86+
background-color: #fff;
87+
padding: 0px 8px
88+
}
89+
90+
.icon_social {
91+
width: 40px;
92+
height: 40px;
93+
object-fit: cover;
94+
border-radius: 50%;
95+
position: relative
96+
}
97+
/* login with */
98+
99+
/* button auth*/
100+
.btn.btn-primary.bt_auth {
101+
margin-top: 20px;
102+
border-radius: 15px
103+
}
104+
105+
/* button auth*/
106+
107+
/* checkbox */
108+
.custom-control {
109+
position: relative;
110+
display: block;
111+
min-height: 1.5rem;
112+
padding-left: 1.5rem;
113+
}
114+
115+
.custom-control.overflow-checkbox .overflow-control-input {
116+
display: none;
117+
}
118+
119+
.custom-control.overflow-checkbox .overflow-control-input:checked~.overflow-control-indicator::after {
120+
-webkit-transform: rotateZ(45deg) scale(1);
121+
-ms-transform: rotate(45deg) scale(1);
122+
transform: rotateZ(45deg) scale(1);
123+
top: -6px;
124+
left: 5px;
125+
}
126+
127+
.custom-control.overflow-checkbox .overflow-control-input:checked~.overflow-control-indicator::before {
128+
opacity: 1;
129+
}
130+
131+
.custom-control.overflow-checkbox .overflow-control-input:disabled~.overflow-control-indicator {
132+
opacity: .5;
133+
border: 2px solid #ccc;
134+
}
135+
136+
.custom-control.overflow-checkbox .overflow-control-input:disabled~.overflow-control-indicator:after {
137+
border-bottom: 4px solid #ccc;
138+
border-right: 4px solid #ccc;
139+
}
140+
141+
.custom-control.overflow-checkbox .overflow-control-indicator {
142+
border-radius: 3px;
143+
display: inline-block;
144+
position: absolute;
145+
top: 4px;
146+
left: 0;
147+
width: 18px;
148+
height: 18px;
149+
border: 2px solid #444;
150+
}
151+
152+
.custom-control.overflow-checkbox input:invalid+.overflow-control-indicator {
153+
border: 2px solid #dc3545 !important;
154+
}
155+
156+
.custom-control.overflow-checkbox .overflow-control-indicator::after {
157+
content: '';
158+
display: block;
159+
position: absolute;
160+
width: 18px;
161+
height: 18px;
162+
-webkit-transition: .3s;
163+
-o-transition: .3s;
164+
transition: .3s;
165+
-webkit-transform: rotateZ(90deg) scale(0);
166+
-ms-transform: rotate(90deg) scale(0);
167+
transform: rotateZ(90deg) scale(0);
168+
width: 10px;
169+
border-bottom: 4px solid #ffe100;
170+
border-right: 4px solid #ffe100;
171+
border-radius: 3px;
172+
top: -2px;
173+
left: 2px;
174+
}
175+
176+
.custom-control.overflow-checkbox .overflow-control-indicator::before {
177+
content: '';
178+
display: block;
179+
position: absolute;
180+
width: 18px;
181+
height: 18px;
182+
-webkit-transition: .3s;
183+
-o-transition: .3s;
184+
transition: .3s;
185+
width: 10px;
186+
border-right: 7px solid #fff;
187+
border-radius: 3px;
188+
-webkit-transform: rotateZ(45deg) scale(1);
189+
-ms-transform: rotate(45deg) scale(1);
190+
transform: rotateZ(45deg) scale(1);
191+
top: -4px;
192+
left: 5px;
193+
opacity: 0;
194+
}
195+
196+
.custom-control a {
197+
text-decoration: underline #fbd652;
198+
color: #333;
199+
}
200+
/* checkbox */

0 commit comments

Comments
 (0)