// Organize css/sass + backward compatibility WIP

2013-11-05 12:32:41 +01:00
parent 1a7aa020f6
commit eb383e580e
37 changed files with 240 additions and 121 deletions
@@ -0,0 +1,122 @@
+#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
+	margin: 0 0 60px 0
+	color: white
+
+#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(preserve-3d)
+		position: relative
+
+	.front, .back
+		@include backface-visibility(hidden)
+		width: 420px
+		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