141 lines
2.4 KiB
SCSS
141 lines
2.4 KiB
SCSS
//
|
|
// _authentication.scss
|
|
//
|
|
|
|
|
|
.auth-page-wrapper{
|
|
.auth-page-content{
|
|
padding-bottom: $footer-height;
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
.footer{
|
|
left: 0;
|
|
background-color: transparent;
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
}
|
|
|
|
.auth-one-bg-position{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 380px;
|
|
|
|
@media (max-width: 575.98px) {
|
|
height: 280px;
|
|
}
|
|
}
|
|
|
|
.auth-one-bg{
|
|
background-image: url("../images/auth-one-bg.jpg");
|
|
background-position: center;
|
|
background-size: cover;
|
|
|
|
.bg-overlay{
|
|
background: linear-gradient(to right, darken($primary, 6%), $primary);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.shape{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
>svg {
|
|
width: 100%;
|
|
height: auto;
|
|
fill: var(--#{$prefix}body-bg);
|
|
}
|
|
}
|
|
|
|
// auth-pass-inputgroup
|
|
|
|
.auth-pass-inputgroup{
|
|
input[type="text"] + .btn .ri-eye-fill{
|
|
&:before{
|
|
content: "\ecb6";
|
|
}
|
|
}
|
|
}
|
|
|
|
.particles-js-canvas-el{
|
|
position: relative;
|
|
}
|
|
|
|
// signin card title
|
|
|
|
.signin-other-title{
|
|
position: relative;
|
|
&:after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 1px;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: 1px dashed var(--#{$prefix}border-color);
|
|
top: 10px;
|
|
}
|
|
|
|
.title{
|
|
display: inline-block;
|
|
position: relative;
|
|
z-index: 9;
|
|
background-color: var(--#{$prefix}secondary-bg);
|
|
padding: 2px 16px;
|
|
}
|
|
}
|
|
|
|
// Auth cover
|
|
|
|
.auth-bg-cover{
|
|
background: $auth-bg-cover;
|
|
|
|
> .bg-overlay{
|
|
background-image: url("../images/cover-pattern.png");
|
|
background-position: center;
|
|
background-size: cover;
|
|
opacity: 1;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.footer{
|
|
color: rgba($white, .5);
|
|
}
|
|
}
|
|
|
|
//passowrd validations
|
|
#password-contain {
|
|
display: none;
|
|
|
|
p {
|
|
padding-left: 13px;
|
|
|
|
&.valid {
|
|
color: $success;
|
|
|
|
&::before {
|
|
position: relative;
|
|
left: -8px;
|
|
content: "✔";
|
|
}
|
|
}
|
|
|
|
&.invalid {
|
|
color: $danger;
|
|
|
|
&::before {
|
|
position: relative;
|
|
left: -8px;
|
|
content: "✖";
|
|
}
|
|
}
|
|
}
|
|
} |