mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2025-10-29 18:37:35 +01:00
Updated /delta
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.
This commit is contained in:
Giulio Cesare Solaroli
10
frontend/delta/scss/web.scss
Normal file
10
frontend/delta/scss/web.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "web/fonts";
|
||||
@import "web/overlay";
|
||||
@import "web/behavior";
|
||||
@import "web/style";
|
||||
@import "web/checkbox";
|
||||
@import "web/480";
|
||||
@import "web/768";
|
||||
@import "web/992";
|
||||
|
||||
@import "web/add2home";
|
||||
11
frontend/delta/scss/web/480.scss
Normal file
11
frontend/delta/scss/web/480.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@media only screen and (min-width: 480px) {
|
||||
.loginForm {
|
||||
font-size: 1.2em;
|
||||
|
||||
input {
|
||||
}
|
||||
button {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3
frontend/delta/scss/web/768.scss
Normal file
3
frontend/delta/scss/web/768.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
}
|
||||
2
frontend/delta/scss/web/992.scss
Normal file
2
frontend/delta/scss/web/992.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@media only screen and (min-width: 992px) {
|
||||
}
|
||||
160
frontend/delta/scss/web/add2home.scss
Normal file
160
frontend/delta/scss/web/add2home.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
*
|
||||
* Main container
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen {
|
||||
z-index:9999;
|
||||
-webkit-user-select:none;
|
||||
user-select:none;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
-webkit-touch-callout:none;
|
||||
touch-callout:none;
|
||||
width:240px;
|
||||
font-size:15px;
|
||||
padding:12px 14px;
|
||||
text-align:left;
|
||||
font-family:helvetica;
|
||||
background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
|
||||
border:1px solid #505050;
|
||||
-webkit-border-radius:8px;
|
||||
-webkit-background-clip:padding-box;
|
||||
color:#333;
|
||||
text-shadow:0 1px 0 rgba(255,255,255,0.75);
|
||||
line-height:130%;
|
||||
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
#addToHomeScreen.addToHomeIpad {
|
||||
width:268px;
|
||||
font-size:18px;
|
||||
padding:14px;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* The 'wide' class is added when the popup contains the touch icon
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen.addToHomeWide {
|
||||
width:296px;
|
||||
}
|
||||
|
||||
#addToHomeScreen.addToHomeIpad.addToHomeWide {
|
||||
width:320px;
|
||||
font-size:18px;
|
||||
padding:14px;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* The balloon arrow
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen .addToHomeArrow {
|
||||
position:absolute;
|
||||
background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
|
||||
border-width:0 1px 1px 0;
|
||||
border-style:solid;
|
||||
border-color:#505050;
|
||||
width:16px; height:16px;
|
||||
-webkit-transform:rotateZ(45deg);
|
||||
bottom:-9px; left:50%;
|
||||
margin-left:-8px;
|
||||
-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
|
||||
-webkit-border-bottom-right-radius:2px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* The balloon arrow for iPad
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen.addToHomeIpad .addToHomeArrow {
|
||||
-webkit-transform:rotateZ(-135deg);
|
||||
background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
|
||||
-webkit-box-shadow:inset -1px -1px 0 #fff;
|
||||
top:-9px; bottom:auto; left:50%;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Close button
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen .addToHomeClose {
|
||||
-webkit-box-sizing:border-box;
|
||||
position:absolute;
|
||||
right:4px;
|
||||
top:4px;
|
||||
width:18px;
|
||||
height:18px; line-height:14px;
|
||||
text-align:center;
|
||||
text-indent:1px;
|
||||
-webkit-border-radius:9px;
|
||||
background:rgba(0,0,0,0.12);
|
||||
color:#707070;
|
||||
-webkit-box-shadow:0 1px 0 #fff;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* The '+' icon, displayed only on iOS < 4.2
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen .addToHomePlus {
|
||||
font-weight:bold;
|
||||
font-size:1.3em;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* The 'share' icon, displayed only on iOS >= 4.2
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen .addToHomeShare {
|
||||
display:inline-block;
|
||||
width:18px;
|
||||
height:15px;
|
||||
background-repeat:no-repeat;
|
||||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
|
||||
background-size:18px 15px;
|
||||
text-indent:-9999em;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#addToHomeScreen .addToHomeShare.addToHomeShareOS7 {
|
||||
width:11px;
|
||||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA8CAYAAAAQTCjdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASCQAAEgkB80sG3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKjSURBVGiB7dpPiFVVHMDxz7m9NCtMyI2bEJEC25WrEkzHUXCRraIwdNE8ZxfYIlcis1ZEbGEzT1QCF4XgH1CyWhUoJKIWNRGEiCNKmkSiYTzfcfGuOokx77x3ZlS8382959zfn+/invvn3RdijHIRBrwkOINCYXEcdjpb7VyiYdBsLScwt5y6IloYdzqXo36Ro0gY9IKWo+5JwmzBt2HQnBw9ehYNazyn5TBee8Dh+Vq+CWu92GufnkTDR6ab7gDeBNHouMM/l9tXTXM0fGBmL726Fg1Dam74EsvKqR8VNowL2Yzj5f7rnnE4DHq2235diYYhhTGfC94up35T0y+6di/ITU0rKVd+sEi0P7xr2pSJOu8zvF+OzqEv7vDH/WFxt7/cshy/ticsN8sXYUht0kXDOlsF9XJ4UaEvNoz9X3zc5bKaZThbyr5jzJ4wlNY7KTgM+ES0vhz+KeiPw36fKC/ucAF9uFBOrTZm26SJCtaV27+xIo7cXdkTEhvOoh+XyxprU1qnim7CQdGK2HAyKRexYVShT3RItDElN+mkjiP2Ym+S3f01hv2EVal5WW6hU0ElmptaqJuBpXg6MbeFH2LDpU6CQ93zWIKnEvs0cayGU3glMfkOo1jQYewZzOuyz7FC95Jwo5OgUFfgeg993hh/eTqCTxOSm/iuk8DY0Ap1b2GhtHXxsfZN4j/X0fOx4auEIknEhqv4OiUn1L13Z/+xWfWVaG4q0dxUormpRHNTieamEs1NJZqbJ1Q0jHvdiJo5S2cVjSNOCHZhn3/SnuYnIvl3yomIIz7MXZMn9hydRCrR3FSiualEc1OJ5qYSzU0lmptKNDePjWgwcPePT7/g+4cp8wCW4GXaryK3tL+mLdD5x62ppllgu7bso8q/2HIbzGWdNmWnSJwAAAAASUVORK5CYII=);
|
||||
background-size:11px 15px;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* The touch icon (if available)
|
||||
*
|
||||
*/
|
||||
#addToHomeScreen .addToHomeTouchIcon {
|
||||
display:block;
|
||||
float:left;
|
||||
-webkit-border-radius:6px;
|
||||
border-radius:6px;
|
||||
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
|
||||
inset 0 0 2px rgba(255,255,255,0.9);
|
||||
box-shadow:0 1px 3px rgba(0,0,0,0.5),
|
||||
inset 0 0 2px rgba(255,255,255,0.9);
|
||||
background-repeat:no-repeat;
|
||||
width:57px; height:57px;
|
||||
-webkit-background-size:57px 57px;
|
||||
background-size:57px 57px;
|
||||
margin:0 12px 0 0;
|
||||
border:1px solid #333;
|
||||
-webkit-background-clip:padding-box;
|
||||
background-clip:padding-box;
|
||||
}
|
||||
111
frontend/delta/scss/web/behavior.scss
Normal file
111
frontend/delta/scss/web/behavior.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
// 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 ); }
|
||||
}
|
||||
*/
|
||||
//=======================================================================
|
||||
|
||||
|
||||
//=======================================================================
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//========================================================
|
||||
96
frontend/delta/scss/web/checkbox.scss
Normal file
96
frontend/delta/scss/web/checkbox.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
div.checkbox {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
@include border-radius(4px);
|
||||
border: 2px solid white;
|
||||
background-color: white;
|
||||
width: 80px;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
|
||||
&:before {
|
||||
content: "ON";
|
||||
padding-left: 9px;
|
||||
line-height: 32px;
|
||||
color: $solarize-Accent-Cyan;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "OFF";
|
||||
// padding-left: 12px;
|
||||
padding-left: 25px;
|
||||
line-height: 32px;
|
||||
color: $solarize-Accent-Cyan;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
|
||||
label.check {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
@include border-radius(3px);
|
||||
background-color: $solarize-Accent-Magenta;
|
||||
border: 1px solid $solarize-Accent-Magenta;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label.check {
|
||||
top: 0px;
|
||||
left: 38px;
|
||||
@include animation(labelON, .2s, ease-in, 1);
|
||||
}
|
||||
|
||||
input[type=checkbox] + label.check {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
@include animation(labelOFF, .2s, ease-in, 1);
|
||||
}
|
||||
|
||||
label.info {
|
||||
position: absolute;
|
||||
color: white;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
line-height: 32px;
|
||||
width: 200px;
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(labelON) {
|
||||
0% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(labelOFF) {
|
||||
0% {
|
||||
top: 0px;
|
||||
left: 38px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
138
frontend/delta/scss/web/flexbox.scss
Normal file
138
frontend/delta/scss/web/flexbox.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
// --------------------------------------------------
|
||||
// Flexbox LESS mixins
|
||||
// The spec: http://www.w3.org/TR/css3-flexbox
|
||||
//
|
||||
// Other info:
|
||||
// - http://philipwalton.github.io/solved-by-flexbox/
|
||||
// --------------------------------------------------
|
||||
|
||||
// Flexbox display
|
||||
// flex or inline-flex
|
||||
.flex-display(@display: flex) {
|
||||
display: ~"-webkit-@{display}";
|
||||
display: ~"-moz-@{display}";
|
||||
display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
|
||||
display: ~"-ms-@{display}"; // IE11
|
||||
display: @display;
|
||||
}
|
||||
|
||||
// The 'flex' shorthand
|
||||
// - applies to: flex items
|
||||
// <positive-number>, initial, auto, or none
|
||||
.flex(@columns: initial) {
|
||||
-webkit-flex: @columns;
|
||||
-moz-flex: @columns;
|
||||
-ms-flex: @columns;
|
||||
flex: @columns;
|
||||
}
|
||||
|
||||
// Flex Flow Direction
|
||||
// - applies to: flex containers
|
||||
// row | row-reverse | column | column-reverse
|
||||
.flex-direction(@direction: row) {
|
||||
-webkit-flex-direction: @direction;
|
||||
-moz-flex-direction: @direction;
|
||||
-ms-flex-direction: @direction;
|
||||
flex-direction: @direction;
|
||||
}
|
||||
|
||||
// Flex Line Wrapping
|
||||
// - applies to: flex containers
|
||||
// nowrap | wrap | wrap-reverse
|
||||
.flex-wrap(@wrap: nowrap) {
|
||||
-webkit-flex-wrap: @wrap;
|
||||
-moz-flex-wrap: @wrap;
|
||||
-ms-flex-wrap: @wrap;
|
||||
flex-wrap: @wrap;
|
||||
}
|
||||
|
||||
// Flex Direction and Wrap
|
||||
// - applies to: flex containers
|
||||
// <flex-direction> || <flex-wrap>
|
||||
.flex-flow(@flow) {
|
||||
-webkit-flex-flow: @flow;
|
||||
-moz-flex-flow: @flow;
|
||||
-ms-flex-flow: @flow;
|
||||
flex-flow: @flow;
|
||||
}
|
||||
|
||||
// Display Order
|
||||
// - applies to: flex items
|
||||
// <integer>
|
||||
.flex-order(@order: 0) {
|
||||
-webkit-order: @order;
|
||||
-moz-order: @order;
|
||||
-ms-order: @order;
|
||||
order: @order;
|
||||
}
|
||||
|
||||
// Flex grow factor
|
||||
// - applies to: flex items
|
||||
// <number>
|
||||
.flex-grow(@grow: 0) {
|
||||
-webkit-flex-grow: @grow;
|
||||
-moz-flex-grow: @grow;
|
||||
-ms-flex-grow: @grow;
|
||||
flex-grow: @grow;
|
||||
}
|
||||
|
||||
// Flex shr
|
||||
// - applies to: flex itemsink factor
|
||||
// <number>
|
||||
.flex-shrink(@shrink: 1) {
|
||||
-webkit-flex-shrink: @shrink;
|
||||
-moz-flex-shrink: @shrink;
|
||||
-ms-flex-shrink: @shrink;
|
||||
flex-shrink: @shrink;
|
||||
}
|
||||
|
||||
// Flex basis
|
||||
// - the initial main size of the flex item
|
||||
// - applies to: flex itemsnitial main size of the flex item
|
||||
// <width>
|
||||
.flex-basis(@width: auto) {
|
||||
-webkit-flex-basis: @width;
|
||||
-moz-flex-basis: @width;
|
||||
-ms-flex-basis: @width;
|
||||
flex-basis: @width;
|
||||
}
|
||||
|
||||
// Axis Alignment
|
||||
// - applies to: flex containers
|
||||
// flex-start | flex-end | center | space-between | space-around
|
||||
.justify-content(@justify: flex-start) {
|
||||
-webkit-justify-content: @justify;
|
||||
-moz-justify-content: @justify;
|
||||
-ms-justify-content: @justify;
|
||||
justify-content: @justify;
|
||||
}
|
||||
|
||||
// Packing Flex Lines
|
||||
// - applies to: multi-line flex containers
|
||||
// flex-start | flex-end | center | space-between | space-around | stretch
|
||||
.align-content(@align: stretch) {
|
||||
-webkit-align-content: @align;
|
||||
-moz-align-content: @align;
|
||||
-ms-align-content: @align;
|
||||
align-content: @align;
|
||||
}
|
||||
|
||||
// Cross-axis Alignment
|
||||
// - applies to: flex containers
|
||||
// flex-start | flex-end | center | baseline | stretch
|
||||
.align-items(@align: stretch) {
|
||||
-webkit-align-items: @align;
|
||||
-moz-align-items: @align;
|
||||
-ms-align-items: @align;
|
||||
align-items: @align;
|
||||
}
|
||||
|
||||
// Cross-axis Alignment
|
||||
// - applies to: flex items
|
||||
// auto | flex-start | flex-end | center | baseline | stretch
|
||||
.align-self(@align: auto) {
|
||||
-webkit-align-self: @align;
|
||||
-moz-align-self: @align;
|
||||
-ms-align-self: @align;
|
||||
align-self: @align;
|
||||
}
|
||||
81
frontend/delta/scss/web/fonts.scss
Normal file
81
frontend/delta/scss/web/fonts.scss
Normal file
File diff suppressed because one or more lines are too long
107
frontend/delta/scss/web/mixin.scss
Normal file
107
frontend/delta/scss/web/mixin.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
@mixin border-radius ($radius) {
|
||||
border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin font-feature-settings($foo, $bar) {
|
||||
-webkit-font-feature-settings:"$foo","$bar";
|
||||
-moz-font-feature-settings:"$foo=1, $bar=1";
|
||||
-moz-font-feature-settings:"$foo","$bar";
|
||||
-ms-font-feature-settings:"$foo","$bar";
|
||||
-o-font-feature-settings:"$foo","$bar";
|
||||
font-feature-settings:"$foo","$bar";
|
||||
}
|
||||
|
||||
@mixin icon-font() {
|
||||
font-family: 'clipperz-icons';
|
||||
@include font-feature-settings("liga", "dlig");
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering:optimizeLegibility;
|
||||
}
|
||||
|
||||
@mixin password-font() {
|
||||
font-family: 'clipperz-password';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering:optimizeLegibility;
|
||||
}
|
||||
|
||||
@mixin animation ($animation, $duration, $timing-function:linear, $iteration-count:1, $fill-mode:none) {
|
||||
-webkit-animation-name: $animation;
|
||||
-webkit-animation-duration: $duration;
|
||||
-webkit-animation-timing-function: $timing-function;
|
||||
-webkit-animation-iteration-count: $iteration-count;
|
||||
-webkit-animation-fill-mode: $fill-mode;
|
||||
|
||||
-moz-animation-name: $animation;
|
||||
-moz-animation-duration: $duration;
|
||||
-moz-animation-timing-function: $timing-function;
|
||||
-moz-animation-iteration-count: $iteration-count;
|
||||
-moz-animation-fill-mode: $fill-mode;
|
||||
|
||||
-ms-animation-name: $animation;
|
||||
-ms-animation-duration: $duration;
|
||||
-ms-animation-timing-function: $timing-function;
|
||||
-ms-animation-iteration-count: $iteration-count;
|
||||
-ms-animation-fill-mode: $fill-mode;
|
||||
|
||||
-o-animation-name: $animation;
|
||||
-o-animation-duration: $duration;
|
||||
-o-animation-timing-function: $timing-function;
|
||||
-o-animation-iteration-count: $iteration-count;
|
||||
-o-animation-fill-mode: $fill-mode;
|
||||
|
||||
animation-name: $animation;
|
||||
animation-duration: $duration;
|
||||
animation-timing-function: $timing-function;
|
||||
animation-iteration-count: $iteration-count;
|
||||
animation-fill-mode: $fill-mode;
|
||||
}
|
||||
|
||||
@mixin transition ($item, $time, $function) {
|
||||
-webkit-transition: $item $time $function;
|
||||
-moz-transition: $item $time $function;
|
||||
-o-transition: $item $time $function;
|
||||
-ms-transition: $item $time $function;
|
||||
transition: $item $time $function;
|
||||
}
|
||||
|
||||
@mixin transform ($rotateAngle, $translateX, $translateY) {
|
||||
-webkit-transform: rotate( $rotateAngle) translate($translateX, $translateY);
|
||||
-moz-transform: rotate( $rotateAngle) translate($translateX, $translateY);
|
||||
-ms-transform: rotate( $rotateAngle) translate($translateX, $translateY);
|
||||
-o-transform: rotate( $rotateAngle) translate($translateX, $translateY);
|
||||
transform: rotate( $rotateAngle) translate($translateX, $translateY);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-delay ($delay) {
|
||||
-webkit-animation-delay: $delay;
|
||||
-moz-animation-delay: $delay;
|
||||
-ms-animation-delay: $delay;
|
||||
-o-animation-delay: $delay;
|
||||
animation-delay: $delay;
|
||||
}
|
||||
|
||||
@mixin box-shadow ($xOffset, $yOffset, $size, $color) {
|
||||
-webkit-box-shadow: $xOffset $yOffset $size $color;
|
||||
-moz-box-shadow: $xOffset $yOffset $size $color;
|
||||
-ms-box-shadow: $xOffset $yOffset $size $color;
|
||||
-o-box-shadow: $xOffset $yOffset $size $color;
|
||||
box-shadow: $xOffset $yOffset $size $color;
|
||||
}
|
||||
|
||||
@mixin keyframes($name) {
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@-ms-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
115
frontend/delta/scss/web/overlay.scss
Normal file
115
frontend/delta/scss/web/overlay.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
@import "mixin";
|
||||
|
||||
div.overlay {
|
||||
z-index: 99999;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
@include border-radius(20px);
|
||||
|
||||
.title {
|
||||
color: #FFF;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
margin-left: -64px;
|
||||
margin-top: -64px;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
@include icon-font();
|
||||
font-size: 96pt;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.ios-overlay-show {
|
||||
@include animation(ios-overlay-show, 750ms);
|
||||
}
|
||||
|
||||
|
||||
&.ios-overlay-hide {
|
||||
@include animation(ios-overlay-hide, 750ms, linear, 1, forwards);
|
||||
}
|
||||
|
||||
// http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
|
||||
div.spinner {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 50% !important;
|
||||
top: 40% !important;
|
||||
|
||||
margin-left: -50px;
|
||||
margin-top: -50px;
|
||||
|
||||
// display: inline-block;
|
||||
display: block;
|
||||
|
||||
div {
|
||||
width: 12%;
|
||||
height: 26%;
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
left: 44.5%;
|
||||
top: 37%;
|
||||
opacity: 0;
|
||||
@include animation(overlay-spin, 1s, linear, infinite);
|
||||
@include border-radius(50px);
|
||||
@include box-shadow(0, 0, 3px, rgba(0,0,0,0.2));
|
||||
}
|
||||
|
||||
div.bar01 {@include transform( 0deg, 0, -142%); @include animation-delay(-0.00000s);}
|
||||
div.bar02 {@include transform( 30deg, 0, -142%); @include animation-delay(-0.91670s);}
|
||||
div.bar03 {@include transform( 60deg, 0, -142%); @include animation-delay(-0.83300s);}
|
||||
div.bar04 {@include transform( 90deg, 0, -142%); @include animation-delay(-0.75000s);}
|
||||
div.bar05 {@include transform(120deg, 0, -142%); @include animation-delay(-0.66700s);}
|
||||
div.bar06 {@include transform(150deg, 0, -142%); @include animation-delay(-0.58330s);}
|
||||
div.bar07 {@include transform(180deg, 0, -142%); @include animation-delay(-0.50000s);}
|
||||
div.bar08 {@include transform(210deg, 0, -142%); @include animation-delay(-0.41667s);}
|
||||
div.bar09 {@include transform(240deg, 0, -142%); @include animation-delay(-0.33300s);}
|
||||
div.bar10 {@include transform(270deg, 0, -142%); @include animation-delay(-0.25000s);}
|
||||
div.bar11 {@include transform(300deg, 0, -142%); @include animation-delay(-0.16670s);}
|
||||
div.bar12 {@include transform(330deg, 0, -142%); @include animation-delay(-0.08330s);}
|
||||
}
|
||||
}
|
||||
|
||||
//========================================================
|
||||
|
||||
@include keyframes(overlay-spin) {
|
||||
from {opacity: 1;}
|
||||
to {opacity: 0.25;}
|
||||
}
|
||||
|
||||
@include keyframes(ios-overlay-show) {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@include keyframes(ios-overlay-hide) {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
//========================================================
|
||||
792
frontend/delta/scss/web/style.scss
Normal file
792
frontend/delta/scss/web/style.scss
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user