somewhere
This commit is contained in:
Swift
@@ -0,0 +1,257 @@
|
||||
.user-auth {
|
||||
background: url('/assets/img/auth/bg.jpg');
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 150px 15px;
|
||||
$sideWidth: 250px;
|
||||
$formBoxWidth: 800px;
|
||||
|
||||
.formBox {
|
||||
width: 100%;
|
||||
max-width: $formBoxWidth;
|
||||
position: relative;
|
||||
@extend %defaultBorderRadius;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
|
||||
.side {
|
||||
width: $sideWidth;
|
||||
height: 100%;
|
||||
background: url('/assets/img/auth/formbg.jpg');
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
background: #fff;
|
||||
margin-right: $sideWidth;
|
||||
width: calc(#{$formBoxWidth} - #{$sideWidth});
|
||||
padding: 50px 0;
|
||||
|
||||
.form_2 {
|
||||
width: 70%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnRow {
|
||||
a {
|
||||
font-size: 14px;
|
||||
color: $theme;
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.err {
|
||||
p {
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
$sideHeight: 150px;
|
||||
|
||||
.side {
|
||||
width: 100%;
|
||||
height: $sideHeight;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: $sideHeight auto 0;
|
||||
width: 100%;
|
||||
//height: call(100% - #{$sideHeight});
|
||||
|
||||
.form_2 {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.login {
|
||||
.formBox {
|
||||
.main {
|
||||
.form_2 {
|
||||
.formRow {
|
||||
input {
|
||||
-webkit-background-size: 16px;
|
||||
background-size: 16px;
|
||||
background-position: 95% 10px;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 38px;
|
||||
|
||||
&[name='email'] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,0.5)' viewBox='0 0 512 512'%3E%3Cpath d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z'/%3E%3C/svg%3E");
|
||||
background-position: 95% 11px;
|
||||
direction: ltr;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&[name='password'] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,0.5)' viewBox='0 0 448 512'%3E%3Cpath d='M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z'/%3E%3C/svg%3E");
|
||||
-webkit-background-size: 15px;
|
||||
background-size: 15px;
|
||||
direction: ltr;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.err {
|
||||
input {
|
||||
&[name='email'] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,0,0,0.5)' viewBox='0 0 512 512'%3E%3Cpath d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&[name='password'] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,0,0,0.5)' viewBox='0 0 448 512'%3E%3Cpath d='M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnRow {
|
||||
a {
|
||||
font-size: 14px;
|
||||
color: $theme;
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.register {
|
||||
.formBox {
|
||||
.main {
|
||||
.form_2 {
|
||||
.formRow {
|
||||
input {
|
||||
padding-right: 20px;
|
||||
|
||||
&[name='email'] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&[name='password'] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&[name='mobile'],
|
||||
&[name='password_confirmation'],
|
||||
&[name='national_code'] {
|
||||
direction: ltr;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.err {
|
||||
input {
|
||||
&[name='email'] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&[name='password'] {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.addressTextArea {
|
||||
textarea {
|
||||
display: block;
|
||||
width: 95%;
|
||||
max-width: 95%;
|
||||
height: 70px;
|
||||
padding-right: 20px;
|
||||
margin-right: 2.5% !important;
|
||||
resize: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
.el-input__suffix {
|
||||
right: 0;
|
||||
left: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hasValidationError {
|
||||
height: 1570px !important;
|
||||
|
||||
//@media (max-width: 992px) {
|
||||
// height: 1100px !important;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
&.reset-pass {
|
||||
.formBox {
|
||||
.main {
|
||||
padding: 100px 0;
|
||||
|
||||
&.hasMessage {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.form_2 {
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btnRow {
|
||||
button {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user