mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2025-10-31 11:27:34 +01:00
Interim synchronization with internal repository
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
205
frontend/delta/scss/core/behavior.scss
Normal file
205
frontend/delta/scss/core/behavior.scss
Normal 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
395
frontend/delta/scss/core/flex.scss
Normal 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
103
frontend/delta/scss/core/fonts.scss
Normal file
File diff suppressed because one or more lines are too long
289
frontend/delta/scss/core/layout.scss
Normal file
289
frontend/delta/scss/core/layout.scss
Normal 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;
|
||||
}
|
||||
|
||||
143
frontend/delta/scss/core/mixin.scss
Normal file
143
frontend/delta/scss/core/mixin.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
@mixin border-radius ($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@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";
|
||||
-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 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;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
@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); }
|
||||
}
|
||||
115
frontend/delta/scss/core/overlay.scss
Normal file
115
frontend/delta/scss/core/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; }
|
||||
}
|
||||
|
||||
//========================================================
|
||||
44
frontend/delta/scss/core/palette.scss
Normal file
44
frontend/delta/scss/core/palette.scss
Normal 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
15
frontend/delta/scss/core/parameters.scss
Normal 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
43
frontend/delta/scss/core/reset.scss
Normal 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
52
frontend/delta/scss/core/sizes.scss
Normal 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";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user