60 lines
1.3 KiB
SCSS
60 lines
1.3 KiB
SCSS
@import "vars";
|
|
@import "mixins";
|
|
|
|
#account-forms {
|
|
z-index: 2000;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&.got-user {display: none; }
|
|
|
|
> div {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
// color: white;
|
|
position: absolute !important;
|
|
pointer-events: none;
|
|
|
|
&.active {
|
|
&#login form { @include rotateY(0deg); }
|
|
&#signup form { @include rotateY(0deg); }
|
|
&#password-reset form { @include rotateY(0deg); }
|
|
&#password-confirm form { @include rotateY(0deg); }
|
|
form {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
-webkit-perspective: 1000;
|
|
-moz-perspective: 1000;
|
|
-ms-perspective: 1000;
|
|
perspective: 1000;
|
|
@include perspective-origin(center center);
|
|
}
|
|
|
|
&#login form { @include rotateY(-180deg); }
|
|
&#signup form { @include rotateY(180deg); }
|
|
&#password form { @include rotateY(180deg); }
|
|
|
|
form {
|
|
h4 {
|
|
display: inline-block;
|
|
}
|
|
text-align: left;
|
|
display: inline-block;
|
|
width: 330px;
|
|
opacity: 0;
|
|
|
|
@include backface-visibility(hidden);
|
|
|
|
@include transition( all 0.25s ease-in-out);
|
|
@include transform-origin(center center);
|
|
}
|
|
}
|
|
} |