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

Fixed scrollbars on FF

Browse Source
This commit is contained in:
Roberto Pasini 2015-02-06 20:34:00 +01:00
parent 967222eac8
commit 30b5d47f06
5 changed files with 40 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,6 @@
@include flexbox(); @include flexbox();
@include flex-direction(column); @include flex-direction(column);
min-height: 100%; min-height: 100%;
@include overflow-scroll;
ul.defaultSet { ul.defaultSet {
@include flex(none); @include flex(none);
@ -34,9 +33,8 @@
ul.tagList { ul.tagList {
@include flex(auto); @include flex(auto);
margin-left: 0px; margin-left: 0px;
// overflow-y: scroll;
// min-height: 100%; overflow:auto;
// @include overflow-scroll;
li { li {
// @include flexbox(); // @include flexbox();
@ -72,9 +70,8 @@
&.selection { &.selection {
@include flex($selectionPanelWidth, 0); @include flex($selectionPanelWidth, 0);
height: 100%; // height: 100%;
// overflow-y: scroll; // overflow-y: scroll;
// @include overflow-scroll;
} }
&.cardContent { &.cardContent {
@ -231,7 +228,7 @@ div.cardContent {
div.cardListColumn.column { div.cardListColumn.column {
@include flex($cardListWidth, 0); @include flex($cardListWidth, 0);
// overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto; overflow:auto;
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);
@ -240,6 +237,7 @@ div.cardContent {
} }
div.cardList { div.cardList {
// overflow-y: scroll;
padding-bottom: 120px; padding-bottom: 120px;
ul { ul {
@ -249,15 +247,13 @@ div.cardContent {
div.addCardButton { div.addCardButton {
@include icon-font(); @include icon-font();
@include border-radius(50px); @include border-radius(50px);
// @include radial-gradient (white, rgba(0, 0, 0, 0)); @include radial-gradient (white, rgba(0, 0, 0, 0));
box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9);
position: relative; position: relative;
bottom: 0px; bottom: 0px;
font-size: 75pt; font-size: 75pt;
// color: blue; // color: blue;
color: #aaa; color: #aaa;
background-color: white;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -271,8 +267,7 @@ div.cardContent {
&:hover { &:hover {
// color: $clipperz-orange; // color: $clipperz-orange;
color: $clipperz-blue; color: green;
// color: green;
// color: brown; // color: brown;
}; };
} }
@ -325,7 +320,7 @@ div.cardContent {
.content { .content {
@include flex(auto); @include flex(auto);
// overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto; overflow:auto;
} }
} }
} }
@ -374,7 +369,6 @@ div.cardContent {
.content { .content {
@include flex(auto); @include flex(auto);
// overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto;
} }
} }
} }

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

@ -155,8 +155,7 @@
} }
@mixin overflow-scroll () { @mixin overflow-scroll () {
// overflow-y: scroll; overflow: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

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

@ -1,16 +1,9 @@
// ARCHIVE - RESTORE
//
// background-color: #800;
// box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.3);
// color: #ccc;
$cardListHeight: 48px; $cardListHeight: 48px;
$faviconSize: 32px; $faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2; $padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #eee; $cardArchivedColor: #eee;
//$cardToolbarBackgroundColor: #e38800; $cardToolbarBackgroundColor: #e38800;
$cardToolbarBackgroundColor: $clipperz-blue; //$cardToolbarBackgroundColor: $clipperz-blue;
$iconMargin: 6px; $iconMargin: 6px;
$labelColor: gray; $labelColor: gray;
@ -31,10 +24,8 @@ div.cardList {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background-color: white; background-color: white;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
padding-right:40px; // prevent new lines on selection
white-space: pre-wrap;
word-wrap: break-word;
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
@ -44,8 +35,9 @@ div.cardList {
// background-color: brown; // background-color: brown;
// background-color: $clipperz-blue; // background-color: $clipperz-blue;
// color: white; // color: white;
margin-left: 50px; margin-left: 40px;
box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); padding-right: 0px; // prevent new lines on selection
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2);
} }
&.archived { &.archived {
@ -83,8 +75,6 @@ div.cardList {
} }
div.cardList.narrow { div.cardList.narrow {
@include overflow-scroll;
&.loadingCard { &.loadingCard {
li.selected { li.selected {
// background-color: gray; // background-color: gray;
@ -221,12 +211,6 @@ $cardViewBasePadding: 10px;
// box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1); // box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
} }
.cardField {
&:hover {
background-color: #eee;
}
}
} }
} }

8
frontend/delta/scss/style/dialogBox.scss
View File

@ -14,16 +14,14 @@ div.dialog {
div.answers { div.answers {
div.button { div.button {
@include border-radius(4); border: 1px solid black;
// border: 1px solid black;
margin-left: 10px; margin-left: 10px;
padding: 5px 15px; padding: 5px 10px;
background-color: #ddd;
&.isDefault { &.isDefault {
font-weight: bold; font-weight: bold;
color: white; color: white;
background-color: #666; background-color: blue;
} }
} }
} }

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

@ -2,7 +2,7 @@
background-color: $main-alternate-color; background-color: $main-alternate-color;
color: $main-alternate-text-color; color: $main-alternate-text-color;
font-size: 18pt; font-size: 18pt;
// @include overflow-scroll; @include overflow-scroll;
// height: 100%; // height: 100%;
$iconColumnWidth: 40px; $iconColumnWidth: 40px;
@ -30,15 +30,19 @@
.search { .search {
form { form {
padding:2px;
position:relative;
box-sizing:border-box;
width:95%;
input { input {
font-family: "clipperz-font"; font-family: "clipperz-font";
color: #999; color: #999;
font-size: 18pt; font-size: 18pt;
padding: 0px 30px; padding: 0px 30px;
margin: 0px 5px; margin: 0px 5px;
// width: $selectionPanelWidth - $iconColumnWidth - 10px; width: 100%;
width: $selectionPanelWidth - ($spacing * 2); box-sizing:border-box;
vertical-align: middle;
} }
label { label {
@ -46,17 +50,20 @@
font-size: 18pt; font-size: 18pt;
padding-left: $spacing; padding-left: $spacing;
// padding-right:5px; // padding-right:5px;
margin-left: -$selectionPanelWidth + $spacing; position:absolute;
top:9px;
left:9px;
color: #666; color: #666;
vertical-align: sub;
} }
.searchClear { .searchClear {
@include icon-font(); @include icon-font();
@include border-radius(4px); @include border-radius(50%);
background-color: #aaa; background-color: #aaa;
color: white; color: white;
margin-left: $selectionPanelWidth - $iconColumnWidth - 30px; position:absolute;
right:9px;
top:9px;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
font-size: 10pt; font-size: 10pt;
@ -119,28 +126,18 @@
} }
.showArchivedCards { .showArchivedCards {
padding: 10px;
font-size: 12pt; font-size: 12pt;
.label { span.count {
padding-left: 5px; background-color: gray;
font-size: 10pt;
margin-left: 10px;
padding: 0px 4px;
@include border-radius(4px);
} }
} }
} }
span.count {
background-color: gray;
font-size: 10pt;
margin-left: 10px;
padding: 0px 4px;
@include border-radius(4px);
color: white;
font-weight: 300;
vertical-align: middle;
}
//$selectionColor: yellow; //$selectionColor: yellow;
$selectionColor: $clipperz-orange; $selectionColor: $clipperz-orange;