1180b7b195
Switched from less to scss. Still no build script to update the final CSS, though. Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.
112 lines
2.1 KiB
SCSS
112 lines
2.1 KiB
SCSS
// https://github.com/h5bp/Effeckt.css
|
|
|
|
|
|
@mixin slide () {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
&.left {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
|
|
&.center {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
&.right {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
visibility: hidden;
|
|
display: none;
|
|
|
|
&.transition {
|
|
visibility: visible;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.transition {
|
|
-webkit-transition-duration: .25s;
|
|
transition-duration: .25s;
|
|
}
|
|
}
|
|
|
|
// http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
|
|
.page {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
@include slide();
|
|
}
|
|
|
|
/*
|
|
.registrationForm {
|
|
.steps {
|
|
.step {
|
|
position: absolute;
|
|
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
|
|
.slide();
|
|
}
|
|
}
|
|
}
|
|
*/
|
|
|
|
//----------------------------------------------------------------------
|
|
// tentative 3D transformations
|
|
/*
|
|
.page {
|
|
transform: rotateY( 0deg) translateZ( 100px);
|
|
|
|
&.left {
|
|
transform: rotateY( -90deg) translateZ( 100px);
|
|
}
|
|
|
|
&.center {
|
|
transform: rotateY( 0deg) translateZ( 100px);
|
|
}
|
|
|
|
&.right {
|
|
transform: rotateY( 90deg) translateZ( 100px);
|
|
}
|
|
}
|
|
|
|
#mainDiv {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
|
|
transition: transform 3s;
|
|
|
|
&.show-front { transform: translateZ( -100px ) rotateY( 0deg ); }
|
|
&.show-back { transform: translateZ( -100px ) rotateX( -180deg ); }
|
|
&.show-right { transform: translateZ( -100px ) rotateY( -90deg ); }
|
|
&.show-left { transform: translateZ( -100px ) rotateY( 90deg ); }
|
|
&.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }
|
|
&.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }
|
|
}
|
|
*/
|
|
//=======================================================================
|
|
|
|
|
|
//=======================================================================
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//========================================================
|