// login flip

This commit is contained in:
Kevin Granger
2013-10-14 16:34:02 +02:00
parent 6d3a15ef5b
commit 3f22a6b6c9
4 changed files with 124 additions and 130 deletions
+37 -27
View File
@@ -9566,41 +9566,51 @@ textarea {
font-size: 1.5em; }
/* line 1, admin-theme/_admin-login.sass */
.flip-container {
perspective: 1000; }
/* line 4, admin-theme/_admin-login.sass */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg); }
#login-panel {
margin: 0 auto;
width: 420px; }
/* line 5, admin-theme/_admin-login.sass */
#login-panel .flip-container {
height: 500px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px; }
/* line 8, admin-theme/_admin-login.sass */
.flip-container, .front, .back {
width: 420px;
height: 420px; }
/* line 14, admin-theme/_admin-login.sass */
.flipper {
transition: 0.6s;
#login-panel .flip-container.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg); }
/* line 13, admin-theme/_admin-login.sass */
#login-panel .flipper {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative; }
/* line 19, admin-theme/_admin-login.sass */
.front, .back {
/* line 18, admin-theme/_admin-login.sass */
#login-panel .front, #login-panel .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0; }
/* line 26, admin-theme/_admin-login.sass */
.front {
/* line 24, admin-theme/_admin-login.sass */
#login-panel .front {
z-index: 2; }
/* line 29, admin-theme/_admin-login.sass */
.back {
transform: rotateY(180deg); }
/* line 32, admin-theme/_admin-login.sass */
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
/* line 27, admin-theme/_admin-login.sass */
#login-panel .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg); }
/* line 1, admin-theme/_admin-carrier-wizard.sass */
@@ -1,35 +1,28 @@
.flip-container
perspective: 1000
.flip-container:hover .flipper,
.flip-container.hover .flipper
transform: rotateY(180deg)
.flip-container,
.front,
.back
#login-panel
margin: 0 auto
width: 420px
height: 420px
.flipper
transition: 0.6s
transform-style: preserve-3d
position: relative
.flip-container
height: 500px
@include perspective(1000px)
&.flip .flipper
@include rotateY(180deg)
.front,
.back
backface-visibility: hidden
position: absolute
top: 0
left: 0
.flip-container, .front, .back
.front
z-index: 2
.flipper
@include transition-duration(0.6s)
@include transform-style(preserve-3d)
position: relative
.back
transform: rotateY(180deg)
.front, .back
@include backface-visibility(hidden)
position: absolute
top: 0
left: 0
.flip-container:hover .flipper,
.flip-container.hover .flipper,
.flip-container.flip .flipper
transform: rotateY(180deg)
.front
z-index: 2
.back
@include rotateY(180deg)