IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: wip - Login animation POC (#9879)

Browse Source
This commit is contained in:
Johannes Schill 2017-12-13 14:20:07 +01:00
parent 0be9789364
commit b8bfe51b03
3 changed files with 1337 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/angular_wrappers.ts
View File

@ -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, []);
} }

1228
public/app/core/components/Login/Login.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

108
public/sass/pages/_login.scss
View File

@ -324,4 +324,110 @@ select:-webkit-autofill:focus {
.login-form-input { .login-form-input {
min-width: 300px; min-width: 300px;
} }
} }
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;
}