383 lines
9.7 KiB
SCSS
383 lines
9.7 KiB
SCSS
|
@use '../utils' as *;
|
||
|
|
|
||
|
|
/*----------------------------------------*/
|
||
|
|
/* 20. LOGIN CSS
|
||
|
|
/*----------------------------------------*/
|
||
|
|
.sign{
|
||
|
|
&__wrapper{
|
||
|
|
padding: 50px 70px;
|
||
|
|
padding-bottom: 45px;
|
||
|
|
margin: 0 30px;
|
||
|
|
|
||
|
|
@include border-radius(10px);
|
||
|
|
@include box-shadow(0px 40px 80px 0px rgba(2, 2, 26, 0.14));
|
||
|
|
z-index: 11;
|
||
|
|
|
||
|
|
@media #{$xs}{
|
||
|
|
margin: 0;
|
||
|
|
padding: 30px 20px;
|
||
|
|
padding-bottom: 25px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__shape{
|
||
|
|
& img{
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
&.man-1{
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
z-index: -1;
|
||
|
|
transform: translateX(-50%) translateY(-50%);
|
||
|
|
}
|
||
|
|
&.man-2{
|
||
|
|
right: 24%;
|
||
|
|
top: 65%;
|
||
|
|
}
|
||
|
|
&.circle{
|
||
|
|
right: 32%;
|
||
|
|
top: 38%;
|
||
|
|
animation: signCircle 5s linear 0s infinite alternate;
|
||
|
|
-webkit-animation: signCircle 5s linear 0s infinite alternate;
|
||
|
|
@media #{$xxl}{
|
||
|
|
right: 25%;
|
||
|
|
}
|
||
|
|
@media #{$xl}{
|
||
|
|
right: 22%;
|
||
|
|
}
|
||
|
|
@media #{$lg}{
|
||
|
|
right: 11%;
|
||
|
|
}
|
||
|
|
@media #{$md}{
|
||
|
|
right: 4%;
|
||
|
|
}
|
||
|
|
@media #{$sm}{
|
||
|
|
right: 2%;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.dot{
|
||
|
|
right: 34%;
|
||
|
|
top: 43%;
|
||
|
|
animation: signDot 5s linear 0s infinite alternate;
|
||
|
|
-webkit-animation: signDot 5s linear 0s infinite alternate;
|
||
|
|
@media #{$xxl}{
|
||
|
|
right: 29%;
|
||
|
|
}
|
||
|
|
@media #{$xl}{
|
||
|
|
right: 26%;
|
||
|
|
}
|
||
|
|
@media #{$lg}{
|
||
|
|
right: 18%;
|
||
|
|
}
|
||
|
|
@media #{$md}{
|
||
|
|
right: 5%;
|
||
|
|
}
|
||
|
|
@media #{$sm}{
|
||
|
|
right: 3%;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bg{
|
||
|
|
left: 33%;
|
||
|
|
top: 26%;
|
||
|
|
opacity: .06;
|
||
|
|
max-width: 100%;
|
||
|
|
animation: signBg 5s linear 0s infinite alternate;
|
||
|
|
-webkit-animation: signBg 5s linear 0s infinite alternate;
|
||
|
|
@media #{$md}{
|
||
|
|
left: 10%;
|
||
|
|
}
|
||
|
|
@media #{$sm}{
|
||
|
|
left: 0%;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.zigzag{
|
||
|
|
left: 32%;
|
||
|
|
top: 43%;
|
||
|
|
animation: signZigzag 5s linear 0s infinite alternate;
|
||
|
|
-webkit-animation: signZigzag 5s linear 0s infinite alternate;
|
||
|
|
@media #{$xxl}{
|
||
|
|
left: 24%;
|
||
|
|
}
|
||
|
|
@media #{$xl}{
|
||
|
|
left: 23%;
|
||
|
|
}
|
||
|
|
@media #{$lg}{
|
||
|
|
left: 11%;
|
||
|
|
}
|
||
|
|
@media #{$md}{
|
||
|
|
left: 3%;
|
||
|
|
}
|
||
|
|
@media #{$sm}{
|
||
|
|
left: 2%;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.flower{
|
||
|
|
bottom: 13%;
|
||
|
|
right: 30%;
|
||
|
|
@media #{$xxl}{
|
||
|
|
right: 24%;
|
||
|
|
}
|
||
|
|
@media #{$xl}{
|
||
|
|
right: 24%;
|
||
|
|
}
|
||
|
|
@media #{$lg}{
|
||
|
|
right: 12%;
|
||
|
|
}
|
||
|
|
@media #{$md}{
|
||
|
|
right: 3%;
|
||
|
|
}
|
||
|
|
@media #{$sm}{
|
||
|
|
right: 1%;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
right: 1%;
|
||
|
|
bottom: 3%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__header{
|
||
|
|
padding: 0 35px;
|
||
|
|
@media #{$sm}{
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
& p{
|
||
|
|
margin-bottom: 0;
|
||
|
|
// color: $grey-9;
|
||
|
|
position: relative;
|
||
|
|
padding: 0 40px;
|
||
|
|
display: inline-block;
|
||
|
|
& span{
|
||
|
|
position: absolute;
|
||
|
|
top: 40%;
|
||
|
|
left: 0;
|
||
|
|
@include transform(translateY(-50%));
|
||
|
|
&:last-child{
|
||
|
|
left: auto;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& a{
|
||
|
|
&:hover{
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__social{
|
||
|
|
display: block;
|
||
|
|
height: 50px;
|
||
|
|
// background: $grey-11;
|
||
|
|
@include border-radius(6px);
|
||
|
|
position: relative;
|
||
|
|
line-height: 52px;
|
||
|
|
padding-left: 23px;
|
||
|
|
z-index: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 16px;
|
||
|
|
&::after{
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
left: -55%;
|
||
|
|
top: 45%;
|
||
|
|
@include transform(translateY(-50%));
|
||
|
|
height: 220px;
|
||
|
|
width: 220px;
|
||
|
|
background: #3360bd;
|
||
|
|
@include border-radius(50%);
|
||
|
|
z-index: -1;
|
||
|
|
@media #{$xs}{
|
||
|
|
left: -62%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& i{
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
font-size: 16px;
|
||
|
|
margin-right: 50px;
|
||
|
|
@media #{$xs}{
|
||
|
|
margin-right: 35px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
&::after{
|
||
|
|
width: 100%;
|
||
|
|
height: 150%;
|
||
|
|
left: 0;
|
||
|
|
@include border-radius(6px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.g-plus{
|
||
|
|
&::after{
|
||
|
|
background: #e93e30;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__form{
|
||
|
|
& h5{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
color:var(--tp-common-black);
|
||
|
|
margin-bottom: 11px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__input{
|
||
|
|
position: relative;
|
||
|
|
&-wrapper{
|
||
|
|
|
||
|
|
}
|
||
|
|
& input{
|
||
|
|
width: 100%;
|
||
|
|
height: 60px;
|
||
|
|
line-height: 52px;
|
||
|
|
padding: 0 50px;
|
||
|
|
font-size: 14px;
|
||
|
|
border: 2px solid #ccc;
|
||
|
|
// background: $grey-12;
|
||
|
|
color:var(--tp-common-black);
|
||
|
|
@include border-radius(6px);
|
||
|
|
&::placeholder{
|
||
|
|
// color: $grey-13;
|
||
|
|
}
|
||
|
|
&:focus{
|
||
|
|
outline: none;
|
||
|
|
background: var(--tp-common-white);
|
||
|
|
border-color: var(--tp-theme-primary);
|
||
|
|
@include box-shadow(0px 1px 4px 0px rgba(8, 0, 42, 0.2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& i{
|
||
|
|
position: absolute;
|
||
|
|
top: 51%;
|
||
|
|
@include transform(translateY(-50%));
|
||
|
|
left: 25px;
|
||
|
|
font-size: 14px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__agree{
|
||
|
|
& input{
|
||
|
|
margin: 0;
|
||
|
|
appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
display: block;
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid #ccc ;
|
||
|
|
outline: none;
|
||
|
|
@include border-radius(4px);
|
||
|
|
&:checked{
|
||
|
|
position: relative;
|
||
|
|
background-color: var(--tp-theme-primary);
|
||
|
|
border-color: transparent;
|
||
|
|
&::after{
|
||
|
|
box-sizing: border-box;
|
||
|
|
content: '\f00c';
|
||
|
|
position: absolute;
|
||
|
|
font-family: var(--tp-ff-fontawesome);
|
||
|
|
font-size: 10px;
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
top: 46%;
|
||
|
|
left: 50%;
|
||
|
|
@include transform(translate(-50%, -50%));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& label{
|
||
|
|
padding-left: 10px;
|
||
|
|
font-size: 14px;
|
||
|
|
&:hover{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
& a{
|
||
|
|
color:var(--tp-common-black);
|
||
|
|
font-weight: 500;
|
||
|
|
&:hover{
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__forgot{
|
||
|
|
& a{
|
||
|
|
&:hover{
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__new{
|
||
|
|
& p{
|
||
|
|
margin-bottom: 0;
|
||
|
|
& a{
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes signDot{
|
||
|
|
0%{
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
-moz-transform: translateY(0);
|
||
|
|
-ms-transform: translateY(0);
|
||
|
|
-o-transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100%{
|
||
|
|
transform: translateY(50px);
|
||
|
|
-webkit-transform: translateY(50px);
|
||
|
|
-moz-transform: translateY(50px);
|
||
|
|
-ms-transform: translateY(50px);
|
||
|
|
-o-transform: translateY(50px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes signZigzag{
|
||
|
|
0%{
|
||
|
|
transform: translateY(0);
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
-moz-transform: translateY(0);
|
||
|
|
-ms-transform: translateY(0);
|
||
|
|
-o-transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100%{
|
||
|
|
transform: translateY(50px);
|
||
|
|
-webkit-transform: translateY(50px);
|
||
|
|
-moz-transform: translateY(50px);
|
||
|
|
-ms-transform: translateY(50px);
|
||
|
|
-o-transform: translateY(50px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes signCircle{
|
||
|
|
0%{
|
||
|
|
@include transform(rotate(0deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
100%{
|
||
|
|
@include transform(rotate(360deg));
|
||
|
|
}
|
||
|
|
}
|