Fixed scrollbars on FF

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

View File

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

View File

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

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

View File

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

View File

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