clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-29 18:37:35 +01:00
Code Issues Releases Wiki Activity

Interim synchronization with internal repository

Browse Source 
This is an intermir commit to share what is going on with the development of the new /delta version.
This commit is contained in:
Giulio Cesare Solaroli
2014-07-28 18:07:48 +02:00
parent 6dd16d9359
commit f8da092f3d
111 changed files with 34049 additions and 28666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/delta/scss/clipperz.scss Normal file
View File

@@ -0,0 +1,35 @@
@import "core/reset";
@import "core/palette";
@import "core/parameters";
@import "core/fonts";
@import "core/flex";
@import "core/overlay";
@import "core/behavior";
@import "core/layout";
@import "style/loadingPage";
@import "style/loginPage";
@import "style/registrationPage";
@import "style/selectionPanel";
@import "style/settingsPanel";
@import "style/accountStatus";
@import "style/card";
//----------------------------------------------------------------------------
body {
font-family: "clipperz-font";
margin: 0;
padding: 0;
}
body:after {
display: none;
}
@import "core/sizes";
//@import "sizes/narrow";
//@import "sizes/wide";
//@import "sizes/extra-wide";
//@import "sizes/extra-short";

205
frontend/delta/scss/core/behavior.scss Normal file
View File

@@ -0,0 +1,205 @@
// https://github.com/h5bp/Effeckt.css
// http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
$transition-duration: 0.5s;
@mixin pageElement () {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
@include transform3d(0, 0, 0);
@include transition-duration($transition-duration);
&.left {
@include transform3d(-100%, 0, 0);
}
&.right {
@include transform3d(100%, 0, 0);
visibility: hidden;
display: none;
&.transition {
visibility: visible;
display: block;
}
}
}
//=============================================================================
@mixin sliding-panel-left ($size) {
// background-color: yellow;
width: $size;
height: 100%;
top: 0;
left: -$size;
}
@mixin sliding-panel-right ($size) {
// background-color: green;
width: $size;
height: 100%;
top: 0;
right: -$size;
}
@mixin sliding-panel ($side, $size) {
position: fixed;
z-index: 20;
overflow: scroll;
@if $side == left {
@include sliding-panel-left($size);
}
@if $side == right {
@include sliding-panel-right($size);
}
}
//.............................................................................
@mixin sliding-panel-open ($side, $size) {
@if $side == left {
left: 0px;
}
@if $side == right {
right: 0px;
}
}
//.............................................................................
@mixin sliding-panel-wrapper-open-left ($size) {
top: 0;
left: $size;
}
@mixin sliding-panel-wrapper-open-right ($size) {
top: 0;
right: $size;
}
@mixin sliding-panel-wrapper-open ($side, $size) {
@include sliding-panel-wrapper();
@if $side == left {
@include sliding-panel-wrapper-open-left($size);
}
@if $side == right {
@include sliding-panel-wrapper-open-right($size);
}
}
//.............................................................................
@mixin sliding-panel-wrapper () {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
// top: 0;
// left: 0;
// @include transition(all, $transition_time);
}
@mixin sliding-panel-container () {
width: 100%;
height: 100%;
margin: 0 auto;
}
//#############################################################################
/*
.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 ); }
}
*/
//=======================================================================
//=======================================================================
//=======================================================================

395
frontend/delta/scss/core/flex.scss Normal file
View File

@@ -0,0 +1,395 @@
// Downloaded on June 8, 2014 from https://raw.githubusercontent.com/mastastealth/sass-flex-mixin/master/flex.scss
// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// This is a set of mixins for those who want to mess around with flexbox
// using the native support of current browsers. For full support table
// check: http://caniuse.com/flexbox
//
// Basically this will use:
//
// * Fallback, old syntax (IE10, Safari, mobile webkit browsers)
// * Prefixed standard syntax (Chrome)
// * Final standards syntax (FF, IE11, Opera 12.1)
//
// This was inspired by:
//
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
//
// With help from:
//
// * http://w3.org/tr/css3-flexbox/
// * http://the-echoplex.net/flexyboxes/
// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
// * http://css-tricks.com/using-flexbox/
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
//----------------------------------------------------------------------
// Flexbox Containers
//
// The 'flex' value causes an element to generate a block-level flex
// container box.
//
// The 'inline-flex' value causes an element to generate a inline-level
// flex container box.
//
// display: flex | inline-flex
//
// http://w3.org/tr/css3-flexbox/#flex-containers
//
// (Placeholder selectors for each type, for those who rather @extend)
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
%flexbox { @include flexbox; }
//----------------------------------
@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
%inline-flex { @include inline-flex; }
//----------------------------------------------------------------------
// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
// Shorter version:
@mixin flex-dir($value: false) { @include flex-direction($value); }
//----------------------------------------------------------------------
// Flexbox Wrap
//
// The 'flex-wrap' property controls whether the flex container is single-line
// or multi-line, and the direction of the cross-axis, which determines
// the direction new lines are stacked in.
//
// Values: nowrap | wrap | wrap-reverse
// Default: nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
//----------------------------------------------------------------------
// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
//----------------------------------------------------------------------
// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property
@mixin order($int: 0) {
-webkit-box-ordinal-group: $int + 1;
-webkit-order: $int;
-moz-order: $int;
-ms-flex-order: $int;
order: $int;
}
//----------------------------------------------------------------------
// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property
@mixin flex-grow($int: 0) {
-webkit-box-flex: $int;
-webkit-flex-grow: $int;
-moz-flex-grow: $int;
-ms-flex-positive: $int;
flex-grow: $int;
}
//----------------------------------------------------------------------
// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
@mixin flex-shrink($int: 1) {
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
-ms-flex-negative: $int;
flex-shrink: $int;
}
//----------------------------------------------------------------------
// Flexbox Basis
//
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
//
// Values: Like "width"
// Default: auto
//
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
@mixin flex-basis($value: auto) {
-webkit-flex-basis: $value;
-moz-flex-basis: $value;
-ms-flex-preferred-size: $value;
flex-basis: $value;
}
//----------------------------------------------------------------------
// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property
@mixin flex($fg: 1, $fs: null, $fb: null) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so let's grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
-webkit-box-flex: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg-boxflex;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
//----------------------------------------------------------------------
// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
// Shorter version:
@mixin flex-just($value: flex-start) { @include justify-content($value); }
//----------------------------------------------------------------------
// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
//----------------------------------
// Flexbox Align Self
//
// Values: auto | flex-start | flex-end | center | baseline | stretch
// Default: auto
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
//----------------------------------------------------------------------
// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}

103
frontend/delta/scss/core/fonts.scss Normal file
View File

File diff suppressed because one or more lines are too long

289
frontend/delta/scss/core/layout.scss Normal file
View File

@@ -0,0 +1,289 @@
@import "parameters";
.page {
@include pageElement();
}
.mainPage {
// background-color: yellow;
}
.mainPage > #selectionPanel {
@include sliding-panel(left, $selectionPanelWidth);
&.open {
@include sliding-panel-open(left, $selectionPanelWidth);
}
}
#mainPanel {
// background-color: $yellow;
&.extra-wide {
@include sliding-panel-container();
.container {
@include flexbox;
}
.subpanel {
&.selection {
@include flex($selectionPanelWidth, 0);
// height: 100%;
overflow-y: scroll;
}
&.cardContent {
@include flex($cardContentPanelWidth);
@include flexbox;
@include flex-direction(column);
}
}
.selectionToggle {
.button {
display: none;
visibility: hidden;
}
}
}
&.wide, &.narrow {
.container {
@include sliding-panel-container();
}
}
&.narrow {
.column {
@include pageElement();
}
}
&.open.left {
@include sliding-panel-wrapper-open (left, $selectionPanelWidth);
@include mask();
}
&.open.right {
// @include sliding-panel-wrapper-open (right, $settingsPanelWidth);
@include mask();
}
}
#extraFeaturesPanel {
@include sliding-panel(right, $settingsPanelWidth);
&.open {
@include sliding-panel-open(right, $settingsPanelWidth);
}
}
.container {
height: 100%;
width: 100%;
}
.cardToolbarFrame {
height: 100%;
@include flexbox;
@include flex-direction(column);
.cardToolbar {
@include flex(none);
}
.cardContent {
}
}
div.cardToolbar {
// background-color: $orange;
header {
@include flexbox;
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
background-color: $clipperz-orange;
color: white;
font-size: 24pt;
div {
&.clipperz {
span.logo {
@include icon-font();
@include align-self(center);
@include flex(4);
text-align: center;
&.tag, &.search {
font-size: 14pt;
}
}
span.value {
display: inline-block;
padding-left: 5px;
font-size: 18pt;
}
}
&.selectionToggle {
@include flex(1);
.button {
text-align: left;
.label {
padding-left: 8px;
}
}
}
// &.logo {
// @include align-self(center);
// @include flex(4);
// text-align: center;
// }
&.settingsToggle {
@include flex(1);
.button {
text-align: right;
.label {
padding-right: 8px;
}
}
}
.button {
overflow: hidden;
font-size: 24pt;
@include icon-font();
vertical-align: center;
}
}
}
}
div.cardContent {
// @include flex(flex-grow); // ???
@include flexbox();
@include flex-direction(row);
div.cardListColumn.column {
@include flex($cardListWidth, 0);
overflow-y: scroll;
div.cardToolbar.narrow {
}
div.cardList {
overflow-y: scroll;
padding-bottom: 120px;
ul {
}
}
div.addCardButton {
@include icon-font();
@include border-radius(50px);
@include radial-gradient (white, rgba(0, 0, 0, 0));
position: relative;
bottom: 0px;
font-size: 75pt;
color: blue;
width: 100px;
height: 100px;
float: right;
position: absolute;
margin-left: 100px;
margin-bottom: 10px;
cursor: pointer;
}
}
div.cardDetail.column {
@include flex($cardDetailWidth);
@include flexbox();
div.view {
@include flex(auto);
@include flexbox;
@include flex-direction(column);
.cardDetailToolbar {
@include flex(none);
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
}
.content {
@include flex(auto);
overflow-y: scroll;
}
}
}
}
#cardDetailPage {
.view {
@include flexbox();
@include flex-direction(column);
height: 100%;
.cardDetailToolbar {
@include flex(none);
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
& > div {
@include flexbox();
@include flex-direction(row);
font-size: 24pt;
.back {
@include flex(auto);
cursor: pointer;
}
.cardMenuOptions {
@include flex(auto);
cursor: pointer;
}
}
}
.content {
@include flex(auto);
overflow-y: scroll;
}
}
}
.button {
cursor: pointer;
}

58
frontend/delta/scss/web/mixin.scss → frontend/delta/scss/core/mixin.scss
View File

@@ -1,10 +1,19 @@
@mixin border-radius ($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin font-feature-settings($foo, $bar) {
@mixin radial-gradient ($inner-color, $outer-color) {
background-image: -ms-radial-gradient(center, circle farthest-corner, $inner-color 0%, $outer-color 100%); /* IE10 */
background-image: -moz-radial-gradient(center, circle farthest-corner, $inner-color 0%, $outer-color 100%); /* Mozilla Firefox */
background-image: -o-radial-gradient(center, circle farthest-corner, $inner-color 0%, $outer-color 100%); /* Opera */
background-image: -webkit-radial-gradient(center, circle farthest-corner, $inner-color 0%, $outer-color 100%); /* Webkit (Chrome 11+) */
background-image: radial-gradient(center, circle farthest-corner, $inner-color 0%, $outer-color 100%); /* Proposed W3C Markup */
background-image: -webkit-gradient(radial, center center, 0, center center, 495, color-stop(0, $inner-color), color-stop(1, $outer-color)); /* Webkit (Safari/Chrome 10) */
}
@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";
@@ -13,14 +22,14 @@
font-feature-settings:"$foo","$bar";
}
@mixin icon-font() {
@mixin icon-font () {
font-family: 'clipperz-icons';
@include font-feature-settings("liga", "dlig");
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
@mixin password-font() {
@mixin password-font () {
font-family: 'clipperz-password';
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
@@ -60,10 +69,10 @@
@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;
-moz-transition: $item $time $function;
-o-transition: $item $time $function;
-ms-transition: $item $time $function;
transition: $item $time $function;
}
@mixin transform ($rotateAngle, $translateX, $translateY) {
@@ -74,6 +83,16 @@
transform: rotate( $rotateAngle) translate($translateX, $translateY);
}
@mixin transform3d ($tx, $ty, $tz) {
-webkit-transform: translate3d($tx, $ty, $tz);
transform: translate3d($tx, $ty, $tz);
}
@mixin transition-duration ($duration) {
-webkit-transition-duration: $duration;
transition-duration: $duration;
}
@mixin animation-delay ($delay) {
-webkit-animation-delay: $delay;
@@ -91,7 +110,7 @@
box-shadow: $xOffset $yOffset $size $color;
}
@mixin keyframes($name) {
@mixin keyframes ($name) {
@-webkit-keyframes #{$name} {
@content;
}
@@ -104,4 +123,21 @@
@keyframes #{$name} {
@content;
}
}
}
@mixin mask () {
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
}
}
@include keyframes(spin) {
0% { @include transform(0deg, 0, 0); }
100% { @include transform(359deg, 0, 0); }
}

2
frontend/delta/scss/web/overlay.scss → frontend/delta/scss/core/overlay.scss
View File

@@ -14,7 +14,7 @@ div.overlay {
.title {
color: #FFF;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
// font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: bold;
text-align: center;
display: block;

44
frontend/delta/scss/core/palette.scss Normal file
View File

@@ -0,0 +1,44 @@
//
// SOLARIZED palette
// http://ethanschoonover.com/solarized
//
$solarize-Background-15: #002b36;
$solarize-Background-20: #073642;
$solarize-Content-45: #586375;
$solarize-Content-50: #657b83;
$solarize-Content-60: #839496;
$solarize-Content-65: #93a1a1;
$solarize-Background-92: #eee8d5;
$solarize-Background-97: #fdf6e3;
$solarize-Accent-Yellow: #b58900;
$solarize-Accent-Orange: #cb4b16;
$solarize-Accent-Red: #dc322f;
$solarize-Accent-Magenta: #d33682;
$solarize-Accent-Violet: #6c71c4;
$solarize-Accent-Blue: #268bd2;
$solarize-Accent-Cyan: #2aa198;
$solarize-Accent-Green: #859900;
// $yellow: $solarize-Accent-Yellow;
// $orange: $solarize-Accent-Orange;
// $red: $solarize-Accent-Red;
// $magenta: $solarize-Accent-Magenta;
// $violete: $solarize-Accent-Violet;
// $blue: $solarize-Accent-Blue;
// $cyan: $solarize-Accent-Cyan;
// $green: $solarize-Accent-Green;
$clipperz-orange: #ff9900;
$clipperz-blue: #1863a1;
$terminal-green: #23ff18;
$main-color: $clipperz-orange;
$main-text-color: black;
$main-alternate-color: black;
$main-alternate-text-color: white;

15
frontend/delta/scss/core/parameters.scss Normal file
View File

@@ -0,0 +1,15 @@
//$selectionPanelWidth: 200px;
//$cardListWidth: 200px;
$selectionPanelWidth: 1;
$cardContentPanelWidth: 4;
$mainCardToolbarHeight: 48px;
$cardListWidth: 1;
$cardDetailWidth: 2;
$selectionPanelWidth: 300px;
$settingsPanelWidth: 300px;

43
frontend/delta/scss/core/reset.scss Normal file
View File

@@ -0,0 +1,43 @@
// Downloaded on June 11, 2014 from: https://gist.github.com/hcatlin/1027867
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
&:before, &:after, {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}

52
frontend/delta/scss/core/sizes.scss Normal file
View File

@@ -0,0 +1,52 @@
/*
Bootstrap CSS suggests these size breakpoints:
- Extra small devices Phones (<768px)
- Small devices Tablets (≥768px)
- Medium devices Desktops (≥992px)
- Large devices Desktops (≥1200px)
# ATTENTION
When adding a new 'size', remember to update also MQ.init invocation in main.js.
This configuration is now located in the first script included in the index_template.html file.
*/
@media only screen and (min-width: 100px) {
html {
font-family: "narrow";
}
body:after {
content: "narrow";
}
}
@media only screen and (min-width: 700px) {
html {
font-family: "wide";
}
body:after {
content: "wide";
}
}
@media only screen and (min-width: 1100px) {
html {
font-family: "extra-wide";
}
body:after {
content: "extra-wide";
}
}
@media only screen and (min-width: 100px) and (max-height: 450px) {
html {
font-family: "extra-short";
}
body:after {
content: "extra-short";
}
}

27
frontend/delta/scss/style/accountStatus.scss Normal file
View File

@@ -0,0 +1,27 @@
.accountStatus {
background-color: green;
&.FULL {
display: none;
visibility: hidden;
&.isExpiring {
display: block;
visibility: visible;
background-color: yellow;
}
}
&.TRIAL {
background-color: orange;
&.isExpiring {
background-color: red;
}
}
&.EXPIRED {
background-color: red;
}
}

270
frontend/delta/scss/style/card.scss Normal file
View File

@@ -0,0 +1,270 @@
$cardListHeight: 48px;
$faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2;
$cardToolbarBackgroundColor: brown;
div.cardList {
// background-color: $yellow;
&.loadingCard {
li.selected {
background-color: gray;
}
}
ul {
li.selected {
background-color: yellow;
}
li {
cursor: pointer;
border-bottom: 1px solid #eee;
@include flexbox();
@include flex-direction(row);
.favicon {
width: $cardListHeight;
@include flex(none);
img {
width: $faviconSize;
height: $faviconSize;
padding: $padding;
}
}
.label {
@include flex(auto);
font-size: 18pt;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: $padding;
padding-right: $padding;
}
}
}
}
div.cardList.narrow {
&.loadingCard {
li.selected {
// background-color: gray;
&:after {
color: white;
margin-right: 10px;
content: "loading";
@include animation(spin, 1s, linear, infinite);
}
}
}
ul {
li {
&:after {
content: "show detail";
@include flex(none);
@include icon-font();
height: 48px;
font-size: 24pt;
line-height: 48px;
margin-right: 25px;
}
}
}
}
$cardViewBasePadding: 10px;
#cardDetailPage, .cardDetail {
.loading {
// height: 100%;
// width: 100%;
// background-color: rgba(0,0,0,0.5);
}
.view {
.cardDetailToolbar {
ul {
@include flexbox();
@include flex-direction(row);
li {
@include flex(auto);
text-align: center;
span {
cursor: pointer;
}
}
}
&.narrow {
.back {
@include icon-font();
}
.cardMenuOptions {
@include icon-font();
text-align: right;
font-size: 18pt;
padding-right: 10px;
}
.commandMenu {
// display: none;
.commandMenuMask {
display: none;
}
.commandMenu {
display: none;
}
&.show {
.commandMenuMask {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.commandMenu {
display: block;
float: right;
position: absolute;
min-width: 200px;
top: 48px;
right: 5px;
color: black;
background-color: white;
@include box-shadow(0px, 2px, 5px, rgba(50, 50, 50, 0.75));
ul {
@include flex-direction(column);
li {
text-align: left;
font-size: 18pt;
padding: 5px 10px;
border-bottom: 1px solid black;
}
}
}
}
}
}
}
}
}
.cardDetailToolbar {
background-color: $cardToolbarBackgroundColor;
color: white;
&.narrow {
.cardMenuOptions {
margin-right: 5px;
}
}
}
.content {
.cardLabel {
font-size: 24pt;
padding: $cardViewBasePadding;
}
.cardTags {
@include flexbox();
@include flex-direction(row);
@include align-items(flex-start);
padding: $cardViewBasePadding;
.cardTag {
@include flex(none);
font-size: 14pt;
padding-right: 10px;
&:before {
content: 'tag';
@include icon-font();
font-size: 10pt;
padding-right: 4px;
}
}
}
.cardNotes {
padding: $cardViewBasePadding;
}
.cardField {
@include flexbox;
@include flex-direction(row);
.fieldValues {
@include flex(1);
padding: $cardViewBasePadding;
.fieldLabel {
color: gray;
}
.fieldValue {
font-size: 18pt;
&.hidden {
font-family: clipperz-password;
}
}
}
.fieldAction {
@include flex(none);
@include align-self(center);
}
.action {
width: 32px;
height: 32px;
@include icon-font();
font-size: 20pt;
}
}
.cardDirectLogin {
font-size: 18pt;
padding: $cardViewBasePadding;
background-color: pink;
cursor: pointer;
}
}

32
frontend/delta/scss/style/loadingPage.scss Normal file
View File

@@ -0,0 +1,32 @@
// $Loading_outer_color: $main-color;
// $Loading_inner-color: lighten($Loading_outer-color, 30%);
//
// $Loading_h1-color: lighten($Loading_inner-color, 70%);
// $Loading_h3-color: darken($Loading_outer-color, 20%);
#loadingPage {
// @include radial-gradient($Loading_inner-color, $Loading_outer-color);
background-color: $main-color;
div {
vertical-align: middle;
width: 100%;
text-align: center;
h1 {
font-size: 40pt;
font-weight: bold;
// color: $Loading_h1-color;
color: $main-alternate-text-color;
margin-top: 10%;
margin-bottom: 5px;
}
h3 {
font-size: 18pt;
// color: $Loading_h3-color;
color: $main-text-color;
margin: 0px;
}
}
}

151
frontend/delta/scss/style/loginPage.scss Normal file
View File

@@ -0,0 +1,151 @@
#loginPage {
overflow: scroll;
div.loginForm {
@include flexbox;
@include flex-direction(column);
@include align-items(stretch);
height: 100%;
text-align: center;
background-color: $main-color;
header {
@include flex(1);
@include icon-font();
font-size: 48pt;
color: $main-alternate-text-color;
}
div.form {
@include flex(4);
margin-left: auto;
margin-right: auto;
form {
position: relative;
background: $main-alternate-text-color;
// @include border-radius(10px);
padding: 20px;
margin-bottom: 50px;
/*
&:after {
content: "";
position: absolute;
top: -15px;
margin-left: 50%;
left: -15px;
border-style: solid;
border-width: 0 15px 15px;
border-color: $main-alternate-text-color transparent;
display: block;
width: 0;
z-index: 1;
}
*/
label {
display: none;
}
input {
font-family: "clipperz-font";
display: block;
// @include border-radius(4px);
padding: 5px;
margin-top: 5px;
margin-bottom: 10px;
font-size: 100%;
// box-shadow:inset 0 0 0;
font-size: 24pt;
width: 100%;
}
button {
font-family: "clipperz-font";
min-height: 48px;
min-width: 48px;
color: white;
font-size: 24pt;
font-weight: 500;
border: 0px;
padding: 10px 25px;
border: 1px solid white;
background-color: $main-color;
@include transition(background-color font-weight, 0.2s, linear);
&:hover {
};
&:disabled {
font-weight: 100;
background-color: #c0c0c0;
cursor: default;
&:hover {
};
}
}
}
}
div.registrationLink {
@include flex(1);
color: $main-alternate-text-color;
background-color: $main-alternate-color;
cursor: pointer;
font-size: 24pt;
&:before {
content: "> ";
};
a {
}
}
}
div.loginForm.extra-short {
header {
// @include flex(1);
font-size: 18pt;
}
div.form {
// @include flex(6);
form {
padding: 10px;
margin-bottom: 20px;
input {
padding: 3px;
margin-top: 3px;
margin-bottom: 5px;
font-size: 16pt;
}
button {
min-height: 20px;
font-size: 12pt;
padding: 3px 10px;
border: 1px solid white;
}
}
}
div.registrationLink {
// @include flex(2);
font-size: 14pt;
}
}
}

111
frontend/delta/scss/style/registrationPage.scss Normal file
View File

@@ -0,0 +1,111 @@
#registrationPage {
background-color: $main-alternate-color;
color: $main-alternate-text-color;
label {
display: none;
}
input {
display: block;
border: 1px solid $solarize-Background-92;
@include border-radius(6px);
padding: 5px;
margin-top: 5px;
margin-bottom: 10px;
font-size: 100%;
box-shadow:inset 0 0 0;
}
.steps {
.step {
display: none;
&.center {
display: block;
}
h1 {
color: $solarize-Accent-Blue;
font-size: 24pt;
font-weight: 700;
margin: 0px;
}
p {
color: $solarize-Content-50;
font-size: 14pt;
font-weight: 100;
margin: 0px;
}
&.TERMS_OF_SERVICE {
.checkboxBlock {
margin-top: 10px;
margin-bottom: 10px;
clear: both;
input {
display: block;
float: left;
margin: 5px;
width: 30px;
}
p {
font-size: 12pt;
font-weight: 500;
display: block;
a {
color: $solarize-Accent-Red;
}
}
}
}
.stepIndex {
text-align: center;
.stepIndexItem {
font-weight: 900;
font-size: 28pt;
display: inline;
color: lightgrey;
&.center {
color: gray;
}
}
}
.buttons {
text-align: center;
margin-top: 10px;
.button {
margin: 10px;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 80px;
font-weight: 900;
line-height: 45px;
font-size: 24px;
&.back {
background-color: lightgrey;
// &.step_-1 {
// visibility: hidden;
// }
}
&.disabled {
background-color: #c0c0c0;
cursor: default;
}
}
}
}
}
}

69
frontend/delta/scss/style/selectionPanel.scss Normal file
View File

@@ -0,0 +1,69 @@
#selections {
background-color: $main-alternate-color;
color: $main-alternate-text-color;
font-size: 18pt;
overflow: scroll;
height: 100%;
$iconColumnWidth: 40px;
ul.defaultSet {
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
li {
&.allCards:before {
content: "clipperz";
}
&.recentCards:before {
content: "recent";
}
}
}
.search {
label {
@include icon-font();
font-size: 18pt;
padding-left: 5px;
padding-right:5px;
}
input {
font-family: "clipperz-font";
color: #999;
font-size: 18pt;
width: $selectionPanelWidth - $iconColumnWidth - 10px;
}
}
ul.tagList {
padding-top: 10px;
li {
&:before {
content: "tag";
}
}
}
li {
padding-left: 35px;
text-indent: -35px;
padding-top: 7px;
padding-bottom: 7px;
cursor: pointer;
&:before {
@include icon-font();
font-weight: normal;
padding-left: 8px;
padding-right: 8px;
font-size: 14pt;
}
}
}

19
frontend/delta/scss/style/settingsPanel.scss Normal file
View File

@@ -0,0 +1,19 @@
#extraFeaturesPanel {
background-color: $main-alternate-color;
color: $main-alternate-text-color;
header {
text-align: right;
height: 48px;
font-size: 24pt;
.button {
@include icon-font();
.label {
padding-top: 8px;
padding-right: 8px;
}
}
}
}

10
frontend/delta/scss/web.scss
View File

@@ -1,10 +0,0 @@
@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
View File

@@ -1,11 +0,0 @@
@media only screen and (min-width: 480px) {
.loginForm {
font-size: 1.2em;
input {
}
button {
}
}
}

3
frontend/delta/scss/web/768.scss
View File

@@ -1,3 +0,0 @@
@media only screen and (min-width: 768px) {
}

2
frontend/delta/scss/web/992.scss
View File

@@ -1,2 +0,0 @@
@media only screen and (min-width: 992px) {
}

160
frontend/delta/scss/web/add2home.scss
View File

@@ -1,160 +0,0 @@
/**
*
* 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
View File

@@ -1,111 +0,0 @@
// 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
View File

@@ -1,96 +0,0 @@
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
View File

@@ -1,138 +0,0 @@
// --------------------------------------------------
// 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
View File

File diff suppressed because one or more lines are too long

792
frontend/delta/scss/web/style.scss
View File

File diff suppressed because one or more lines are too long