Commit b8bfe51b by Johannes Schill

ux: wip - Login animation POC (#9879)

parent 0be97893
...@@ -2,9 +2,11 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; ...@@ -2,9 +2,11 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
import { PasswordStrength } from './components/PasswordStrength'; import { PasswordStrength } from './components/PasswordStrength';
import PageHeader from './components/PageHeader/PageHeader'; import PageHeader from './components/PageHeader/PageHeader';
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
// import { Login } from './components/Login/Login';
export function registerAngularDirectives() { export function registerAngularDirectives() {
react2AngularDirective('passwordStrength', PasswordStrength, ['password']); react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']); react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']); react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
// react2AngularDirective('login', Login, []);
} }
...@@ -324,4 +324,110 @@ select:-webkit-autofill:focus { ...@@ -324,4 +324,110 @@ select:-webkit-autofill:focus {
.login-form-input { .login-form-input {
min-width: 300px; min-width: 300px;
} }
} }
\ No newline at end of file
login-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
perspective: 1000px;
.login-bg {
width: 4%;
height: 10px;
// background: hotpink;
// border:1px solid #0F1926;
float: left;
transition: 1s ease-in-out;
z-index: 1;
transform-style: preserve-3d;
&.login-bg-flip {
transform: rotateY(180deg);
}
&:before, &:after {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
content: '';
display: block;
}
&:before {
z-index: 2;
transform: rotateY(0deg);
background-color: #215392;
}
&:after {
transform: rotateY(180deg);
background-color: rgb(25, 50, 80);
}
&:nth-child(3n+0) {
&:before {
background-color: #0f253c;
}
&:after {
background-color: blue;
}
}
&:nth-child(3n+1) {
&:before {
background-color: #102438;
}
&:after {
background-color: blue;
}
}
&:nth-child(3n+2) {
&:before {
background-color: #19314e;
}
&:after {
background-color: blue;
}
}
&:nth-child(3n+3) {
&:before {
background-color: #215392;
}
&:after {
background-color: blue;
}
}
// &:nth-child(3n+5) {
// &:before {
// background-color: hotpink;
// }
// &:after {
// background-color: blue;
// }
// }
}
}
login-bg-fx {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-image: -webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(18, 22, 29, 1) 100%);
z-index:2;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment