clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved SCSS layout and minor issues

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-08-18 17:29:29 +02:00
parent a53767d5c0
commit a2f3ee038e
8 changed files with 199 additions and 921 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

814
frontend/delta/css/clipperz.css
View File

File diff suppressed because it is too large Load Diff

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

196
frontend/delta/scss/core/flex.scss
View File

@ -102,10 +102,10 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flexbox { @mixin flexbox {
display: -webkit-box; // display: -webkit-box;
display: -webkit-flex; // display: -webkit-flex;
display: -moz-flex; // display: -moz-flex;
display: -ms-flexbox; // display: -ms-flexbox;
display: flex; display: flex;
} }
@ -114,10 +114,10 @@ http://jonibologna.com/flexbox-cheatsheet/
//---------------------------------- //----------------------------------
@mixin inline-flex { @mixin inline-flex {
display: -webkit-inline-box; // display: -webkit-inline-box;
display: -webkit-inline-flex; // display: -webkit-inline-flex;
display: -moz-inline-flex; // display: -moz-inline-flex;
display: -ms-inline-flexbox; // display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
} }
@ -137,22 +137,22 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#flex-direction-property // http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) { @mixin flex-direction($value: row) {
@if $value == row-reverse { // @if $value == row-reverse {
-webkit-box-direction: reverse; // -webkit-box-direction: reverse;
-webkit-box-orient: horizontal; // -webkit-box-orient: horizontal;
} @else if $value == column { // } @else if $value == column {
-webkit-box-direction: normal; // -webkit-box-direction: normal;
-webkit-box-orient: vertical; // -webkit-box-orient: vertical;
} @else if $value == column-reverse { // } @else if $value == column-reverse {
-webkit-box-direction: reverse; // -webkit-box-direction: reverse;
-webkit-box-orient: vertical; // -webkit-box-orient: vertical;
} @else { // } @else {
-webkit-box-direction: normal; // -webkit-box-direction: normal;
-webkit-box-orient: horizontal; // -webkit-box-orient: horizontal;
} // }
-webkit-flex-direction: $value; // -webkit-flex-direction: $value;
-moz-flex-direction: $value; // -moz-flex-direction: $value;
-ms-flex-direction: $value; // -ms-flex-direction: $value;
flex-direction: $value; flex-direction: $value;
} }
// Shorter version: // Shorter version:
@ -173,13 +173,13 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flex-wrap($value: nowrap) { @mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback. // No Webkit Box fallback.
-webkit-flex-wrap: $value; // -webkit-flex-wrap: $value;
-moz-flex-wrap: $value; // -moz-flex-wrap: $value;
@if $value == nowrap { // @if $value == nowrap {
-ms-flex-wrap: none; // -ms-flex-wrap: none;
} @else { // } @else {
-ms-flex-wrap: $value; // -ms-flex-wrap: $value;
} // }
flex-wrap: $value; flex-wrap: $value;
} }
@ -198,9 +198,9 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flex-flow($values: (row nowrap)) { @mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback. // No Webkit Box fallback.
-webkit-flex-flow: $values; // -webkit-flex-flow: $values;
-moz-flex-flow: $values; // -moz-flex-flow: $values;
-ms-flex-flow: $values; // -ms-flex-flow: $values;
flex-flow: $values; flex-flow: $values;
} }
@ -216,10 +216,10 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#order-property // http://w3.org/tr/css3-flexbox/#order-property
@mixin order($int: 0) { @mixin order($int: 0) {
-webkit-box-ordinal-group: $int + 1; // -webkit-box-ordinal-group: $int + 1;
-webkit-order: $int; // -webkit-order: $int;
-moz-order: $int; // -moz-order: $int;
-ms-flex-order: $int; // -ms-flex-order: $int;
order: $int; order: $int;
} }
@ -235,10 +235,10 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#flex-grow-property // http://w3.org/tr/css3-flexbox/#flex-grow-property
@mixin flex-grow($int: 0) { @mixin flex-grow($int: 0) {
-webkit-box-flex: $int; // -webkit-box-flex: $int;
-webkit-flex-grow: $int; // -webkit-flex-grow: $int;
-moz-flex-grow: $int; // -moz-flex-grow: $int;
-ms-flex-positive: $int; // -ms-flex-positive: $int;
flex-grow: $int; flex-grow: $int;
} }
@ -254,9 +254,9 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#flex-shrink-property // http://w3.org/tr/css3-flexbox/#flex-shrink-property
@mixin flex-shrink($int: 1) { @mixin flex-shrink($int: 1) {
-webkit-flex-shrink: $int; // -webkit-flex-shrink: $int;
-moz-flex-shrink: $int; // -moz-flex-shrink: $int;
-ms-flex-negative: $int; // -ms-flex-negative: $int;
flex-shrink: $int; flex-shrink: $int;
} }
@ -272,9 +272,9 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property // http://www.w3.org/TR/css3-flexbox/#flex-basis-property
@mixin flex-basis($value: auto) { @mixin flex-basis($value: auto) {
-webkit-flex-basis: $value; // -webkit-flex-basis: $value;
-moz-flex-basis: $value; // -moz-flex-basis: $value;
-ms-flex-preferred-size: $value; // -ms-flex-preferred-size: $value;
flex-basis: $value; flex-basis: $value;
} }
@ -304,11 +304,11 @@ http://jonibologna.com/flexbox-cheatsheet/
$fg-boxflex: nth($fg, 1); $fg-boxflex: nth($fg, 1);
} }
-webkit-box-flex: $fg-boxflex; // -webkit-box-flex: $fg-boxflex;
-webkit-flex: $fg $fs $fb; // -webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg-boxflex; // -moz-box-flex: $fg-boxflex;
-moz-flex: $fg $fs $fb; // -moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb; // -ms-flex: $fg $fs $fb;
flex: $fg $fs $fb; flex: $fg $fs $fb;
} }
@ -331,21 +331,21 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#justify-content-property // http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) { @mixin justify-content($value: flex-start) {
@if $value == flex-start { // @if $value == flex-start {
-webkit-box-pack: start; // -webkit-box-pack: start;
-ms-flex-pack: start; // -ms-flex-pack: start;
} @else if $value == flex-end { // } @else if $value == flex-end {
-webkit-box-pack: end; // -webkit-box-pack: end;
-ms-flex-pack: end; // -ms-flex-pack: end;
} @else if $value == space-between { // } @else if $value == space-between {
-webkit-box-pack: justify; // -webkit-box-pack: justify;
-ms-flex-pack: justify; // -ms-flex-pack: justify;
} @else { // } @else {
-webkit-box-pack: $value; // -webkit-box-pack: $value;
-ms-flex-pack: $value; // -ms-flex-pack: $value;
} // }
-webkit-justify-content: $value; // -webkit-justify-content: $value;
-moz-justify-content: $value; // -moz-justify-content: $value;
justify-content: $value; justify-content: $value;
} }
// Shorter version: // Shorter version:
@ -369,18 +369,18 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#align-items-property // http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) { @mixin align-items($value: stretch) {
@if $value == flex-start { // @if $value == flex-start {
-webkit-box-align: start; // -webkit-box-align: start;
-ms-flex-align: start; // -ms-flex-align: start;
} @else if $value == flex-end { // } @else if $value == flex-end {
-webkit-box-align: end; // -webkit-box-align: end;
-ms-flex-align: end; // -ms-flex-align: end;
} @else { // } @else {
-webkit-box-align: $value; // -webkit-box-align: $value;
-ms-flex-align: $value; // -ms-flex-align: $value;
} // }
-webkit-align-items: $value; // -webkit-align-items: $value;
-moz-align-items: $value; // -moz-align-items: $value;
align-items: $value; align-items: $value;
} }
@ -393,15 +393,15 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin align-self($value: auto) { @mixin align-self($value: auto) {
// No Webkit Box Fallback. // No Webkit Box Fallback.
-webkit-align-self: $value; // -webkit-align-self: $value;
-moz-align-self: $value; // -moz-align-self: $value;
@if $value == flex-start { // @if $value == flex-start {
-ms-flex-item-align: start; // -ms-flex-item-align: start;
} @else if $value == flex-end { // } @else if $value == flex-end {
-ms-flex-item-align: end; // -ms-flex-item-align: end;
} @else { // } @else {
-ms-flex-item-align: $value; // -ms-flex-item-align: $value;
} // }
align-self: $value; align-self: $value;
} }
@ -421,14 +421,14 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin align-content($value: stretch) { @mixin align-content($value: stretch) {
// No Webkit Box Fallback. // No Webkit Box Fallback.
-webkit-align-content: $value; // -webkit-align-content: $value;
-moz-align-content: $value; // -moz-align-content: $value;
@if $value == flex-start { // @if $value == flex-start {
-ms-flex-line-pack: start; // -ms-flex-line-pack: start;
} @else if $value == flex-end { // } @else if $value == flex-end {
-ms-flex-line-pack: end; // -ms-flex-line-pack: end;
} @else { // } @else {
-ms-flex-line-pack: $value; // -ms-flex-line-pack: $value;
} // }
align-content: $value; align-content: $value;
} }

56
frontend/delta/scss/core/layout.scss
View File

@ -179,7 +179,7 @@ input[type=text] {
.extraFeatureContent { .extraFeatureContent {
.extraFeature { .extraFeature {
height: calc(100% - $mainCardToolbarHeight); // height: calc(100% - $mainCardToolbarHeight);
} }
} }
@ -279,6 +279,8 @@ input[type=text] {
} }
.cardContent { .cardContent {
@include flex(1);
@include overflow-auto();
} }
} }
@ -363,7 +365,7 @@ div.cardContent {
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
height: 100%; // height: 100%;
div.cardListColumn.column { div.cardListColumn.column {
@include flex($cardListWidth, 0); @include flex($cardListWidth, 0);
@ -372,7 +374,7 @@ div.cardContent {
// overflow:auto; // overflow:auto;
// @include overflow-auto; // @include overflow-auto;
overflow: hidden; overflow: hidden;
// height: 100%;
z-index: 5; z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1); box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@ -382,7 +384,9 @@ div.cardContent {
&.addCard { &.addCard {
div.cardList { div.cardList {
padding-bottom: 100px; .cardListInnerWrapper {
padding-bottom: #{$cardListPadding};
}
} }
} }
@ -602,40 +606,20 @@ div.dialogBox {
} }
} }
div.helpBox {
/* Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset. */ }
//@include fixHeighHack ($mainCardToolbarHeight /*, $cardListPadding*/)
/*
// Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset.
@-moz-document url-prefix() { @-moz-document url-prefix() {
#mainPanel { @include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
&.wide {
.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
} }
@media screen and (-webkit-min-device-pixel-ratio:0) { // Chrome fix (without messing with Safari)
#mainPanel { @supports (-webkit-appearance:none) and (R:0) {
&.extra-wide { @include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
.subpanel {
&.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
&.wide {
.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
} }
*/

31
frontend/delta/scss/core/mixin.scss
View File

@ -216,4 +216,35 @@ refer to http://www.clipperz.com.
background-size: 3px 3px; background-size: 3px 3px;
} }
@mixin fixHeighHack ($offsetHeight /*, $padding*/) {
/*
#mainPanel {
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - #{$offsetHeight});
}
}
}
&.wide {
.cardContent {
height: calc(100% - #{$offsetHeight});
}
}
}
div.cardContent {
div.cardListColumn.column {
&.addCard {
height: calc(100% + #{$offsetHeight});
}
div.cardList {
// height: calc(100% - #{$padding} - #{$offsetHeight});
height: calc(100% - #{$offsetHeight});
}
}
}
*/
}

1
frontend/delta/scss/core/parameters.scss
View File

@ -29,6 +29,7 @@ $cardContentPanelFlexWidth: 4;
$mainCardToolbarHeight: 48px; $mainCardToolbarHeight: 48px;
$cardListPadding: 100px;
$cardListWidth: 1; $cardListWidth: 1;
$cardDetailWidth: 2; $cardDetailWidth: 2;

19
frontend/delta/scss/style/card.scss
View File

@ -578,7 +578,7 @@ $cardViewBasePadding: 10px;
@include icon-font(); @include icon-font();
color: #aaa; color: #aaa;
width: 20px; width: 21px;
height: 20px; height: 20px;
font-size: 15pt; font-size: 15pt;
margin: $iconMargin; margin: $iconMargin;
@ -674,7 +674,8 @@ $cardViewBasePadding: 10px;
form { form {
position: absolute; position: absolute;
bottom: calc(100% + 4px); // bottom: calc(100% + 4px);
bottom: 4px;
left: 0; left: 0;
min-width: 220px; min-width: 220px;
width: 80%; width: 80%;
@ -686,6 +687,20 @@ $cardViewBasePadding: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
font-size: 9pt; font-size: 9pt;
$arrowSize: 5px;
&:after {
content:'';
position:absolute;
top:100%;
left:10%;
margin-left: 0px;
width:0;
height:0;
border-top:$arrowSize solid $passwordBaloonColor;
border-left:$arrowSize solid transparent;
border-right:$arrowSize solid transparent;
}
span { span {
font-size: 8pt; font-size: 8pt;
color: #ccc; color: #ccc;

1
frontend/delta/scss/style/selectionPanel.scss
View File

@ -209,6 +209,7 @@ refer to http://www.clipperz.com.
.showArchivedCards { .showArchivedCards {
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
border-top: 1px dotted #333;
padding: 10px; padding: 10px;
font-size: 10pt; font-size: 10pt;