Kevin Granger
126 lines
2.1 KiB
Sass
126 lines
2.1 KiB
Sass
#login
|
|
height: 100%
|
|
@include background(radial-gradient(color-stops(rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), top left),linear-gradient(top,rgba(57,173,219,.25),rgba(42,60,87,.4)),linear-gradient(left top,#670D10,#092756))
|
|
|
|
#login-header
|
|
padding-top: 40px
|
|
margin-bottom: 30px
|
|
color: white
|
|
h1, h4
|
|
margin: 0
|
|
padding: 0
|
|
|
|
#login-panel
|
|
margin: 0 auto
|
|
width: 420px
|
|
.panel
|
|
@include box-shadow(rgba(white,0.45) 0 0 0 6px)
|
|
.panel-footer
|
|
margin: 0 -20px -20px
|
|
|
|
.flip-container
|
|
@include perspective(1000px)
|
|
height: 370px
|
|
&.flip .flipper
|
|
@include rotateY(180deg)
|
|
|
|
.flipper
|
|
@include transition-duration(0.6s)
|
|
@include transform-style
|
|
position: relative
|
|
|
|
.front, .back
|
|
@include backface-visibility(hidden)
|
|
width: 420px
|
|
padding: 20px
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
|
|
.front
|
|
z-index: 2
|
|
|
|
.back
|
|
@include rotateY(180deg)
|
|
|
|
#login-footer
|
|
a
|
|
color: #A0AAB5
|
|
|
|
.animated
|
|
-webkit-animation-duration: 1s
|
|
-moz-animation-duration: 1s
|
|
-o-animation-duration: 1s
|
|
animation-duration: 1s
|
|
-webkit-animation-fill-mode: both
|
|
-moz-animation-fill-mode: both
|
|
-o-animation-fill-mode: both
|
|
animation-fill-mode: both
|
|
|
|
@-webkit-keyframes fadeInDown
|
|
0%
|
|
opacity: 0
|
|
-webkit-transform: translateY(-20px)
|
|
100%
|
|
opacity: 1
|
|
-webkit-transform: translateY(0)
|
|
|
|
@-moz-keyframes fadeInDown
|
|
0%
|
|
opacity: 0
|
|
-moz-transform: translateY(-20px)
|
|
100%
|
|
opacity: 1
|
|
-moz-transform: translateY(0)
|
|
|
|
@-o-keyframes fadeInDown
|
|
0%
|
|
opacity: 0
|
|
-o-transform: translateY(-20px)
|
|
100%
|
|
opacity: 1
|
|
-o-transform: translateY(0)
|
|
|
|
@keyframes fadeInDown
|
|
0%
|
|
opacity: 0
|
|
transform: translateY(-20px)
|
|
100%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
.animated.fadeInDown
|
|
-webkit-animation-name: fadeInDown
|
|
-moz-animation-name: fadeInDown
|
|
-o-animation-name: fadeInDown
|
|
//animation-name: fadeInDown
|
|
|
|
@-webkit-keyframes fadeIn
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|
|
|
|
@-moz-keyframes fadeIn
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|
|
|
|
@-o-keyframes fadeIn
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|
|
|
|
@keyframes fadeIn
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|
|
|
|
.animated.fadeIn
|
|
-webkit-animation-name: fadeIn
|
|
-moz-animation-name: fadeIn
|
|
-o-animation-name: fadeIn
|
|
//animation-name: fadeIn |