From 30b5d47f06bfffda09d1bac28b5be7e35e336b92 Mon Sep 17 00:00:00 2001 From: Roberto Pasini Date: Fri, 6 Feb 2015 20:34:00 +0100 Subject: [PATCH] Fixed scrollbars on FF --- frontend/delta/scss/core/layout.scss | 22 ++++----- frontend/delta/scss/core/mixin.scss | 3 +- frontend/delta/scss/style/card.scss | 30 +++---------- frontend/delta/scss/style/dialogBox.scss | 8 ++-- frontend/delta/scss/style/selectionPanel.scss | 45 +++++++++---------- 5 files changed, 40 insertions(+), 68 deletions(-) diff --git a/frontend/delta/scss/core/layout.scss b/frontend/delta/scss/core/layout.scss index 68290b5..1f1ffb8 100644 --- a/frontend/delta/scss/core/layout.scss +++ b/frontend/delta/scss/core/layout.scss @@ -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; } } } diff --git a/frontend/delta/scss/core/mixin.scss b/frontend/delta/scss/core/mixin.scss index de0a1a0..b36956f 100644 --- a/frontend/delta/scss/core/mixin.scss +++ b/frontend/delta/scss/core/mixin.scss @@ -155,8 +155,7 @@ } @mixin overflow-scroll () { -// overflow-y: scroll; - overflow-y: auto; + overflow: scroll; -webkit-overflow-scrolling: touch; } diff --git a/frontend/delta/scss/style/card.scss b/frontend/delta/scss/style/card.scss index 06030fc..8b70d2c 100644 --- a/frontend/delta/scss/style/card.scss +++ b/frontend/delta/scss/style/card.scss @@ -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; - } - } } } diff --git a/frontend/delta/scss/style/dialogBox.scss b/frontend/delta/scss/style/dialogBox.scss index b2d8a2d..42b4492 100644 --- a/frontend/delta/scss/style/dialogBox.scss +++ b/frontend/delta/scss/style/dialogBox.scss @@ -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; } } } diff --git a/frontend/delta/scss/style/selectionPanel.scss b/frontend/delta/scss/style/selectionPanel.scss index 2d8c9f6..1a07ba6 100644 --- a/frontend/delta/scss/style/selectionPanel.scss +++ b/frontend/delta/scss/style/selectionPanel.scss @@ -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;