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 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
// display: -webkit-box;
// display: -webkit-flex;
// display: -moz-flex;
// display: -ms-flexbox;
display: flex;
}
@ -114,10 +114,10 @@ http://jonibologna.com/flexbox-cheatsheet/
//----------------------------------
@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
// display: -webkit-inline-box;
// display: -webkit-inline-flex;
// display: -moz-inline-flex;
// display: -ms-inline-flexbox;
display: inline-flex;
}
@ -137,22 +137,22 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// @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:
@ -173,13 +173,13 @@ http://jonibologna.com/flexbox-cheatsheet/
@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;
}
// -webkit-flex-wrap: $value;
// -moz-flex-wrap: $value;
// @if $value == nowrap {
// -ms-flex-wrap: none;
// } @else {
// -ms-flex-wrap: $value;
// }
flex-wrap: $value;
}
@ -198,9 +198,9 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
// -webkit-flex-flow: $values;
// -moz-flex-flow: $values;
// -ms-flex-flow: $values;
flex-flow: $values;
}
@ -216,10 +216,10 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// -webkit-box-ordinal-group: $int + 1;
// -webkit-order: $int;
// -moz-order: $int;
// -ms-flex-order: $int;
order: $int;
}
@ -235,10 +235,10 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// -webkit-box-flex: $int;
// -webkit-flex-grow: $int;
// -moz-flex-grow: $int;
// -ms-flex-positive: $int;
flex-grow: $int;
}
@ -254,9 +254,9 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// -webkit-flex-shrink: $int;
// -moz-flex-shrink: $int;
// -ms-flex-negative: $int;
flex-shrink: $int;
}
@ -272,9 +272,9 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// -webkit-flex-basis: $value;
// -moz-flex-basis: $value;
// -ms-flex-preferred-size: $value;
flex-basis: $value;
}
@ -304,11 +304,11 @@ http://jonibologna.com/flexbox-cheatsheet/
$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;
// -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;
}
@ -331,21 +331,21 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// @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:
@ -369,18 +369,18 @@ http://jonibologna.com/flexbox-cheatsheet/
// 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;
// @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;
}
@ -393,15 +393,15 @@ http://jonibologna.com/flexbox-cheatsheet/
@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;
}
// -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;
}
@ -421,14 +421,14 @@ http://jonibologna.com/flexbox-cheatsheet/
@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;
}
// -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;
}

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

@ -179,7 +179,7 @@ input[type=text] {
.extraFeatureContent {
.extraFeature {
height: calc(100% - $mainCardToolbarHeight);
// height: calc(100% - $mainCardToolbarHeight);
}
}
@ -279,6 +279,8 @@ input[type=text] {
}
.cardContent {
@include flex(1);
@include overflow-auto();
}
}
@ -363,7 +365,7 @@ div.cardContent {
@include flexbox();
@include flex-direction(row);
height: 100%;
// height: 100%;
div.cardListColumn.column {
@include flex($cardListWidth, 0);
@ -372,7 +374,7 @@ div.cardContent {
// overflow:auto;
// @include overflow-auto;
overflow: hidden;
// height: 100%;
z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@ -382,7 +384,9 @@ div.cardContent {
&.addCard {
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() {
#mainPanel {
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
}
&.wide {
.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#mainPanel {
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
&.wide {
.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
// Chrome fix (without messing with Safari)
@supports (-webkit-appearance:none) and (R:0) {
@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
}
*/

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

@ -216,4 +216,35 @@ refer to http://www.clipperz.com.
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;
$cardListPadding: 100px;
$cardListWidth: 1;
$cardDetailWidth: 2;

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

@ -578,7 +578,7 @@ $cardViewBasePadding: 10px;
@include icon-font();
color: #aaa;
width: 20px;
width: 21px;
height: 20px;
font-size: 15pt;
margin: $iconMargin;
@ -674,7 +674,8 @@ $cardViewBasePadding: 10px;
form {
position: absolute;
bottom: calc(100% + 4px);
// bottom: calc(100% + 4px);
bottom: 4px;
left: 0;
min-width: 220px;
width: 80%;
@ -686,6 +687,20 @@ $cardViewBasePadding: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
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 {
font-size: 8pt;
color: #ccc;

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

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