From 87e487c7633029e81b73edb6ffce1b83796404e5 Mon Sep 17 00:00:00 2001 From: EnesAlili Date: Fri, 17 Jun 2016 21:10:22 +0100 Subject: [PATCH] UI CSS tweaks --- app/app/styles/color.scss | 2 +- app/app/styles/view/document/content.scss | 17 +++++++---------- app/app/styles/view/document/toolbar.scss | 3 +-- app/app/styles/view/document/wysiwyg.scss | 20 ++++++++++++-------- app/app/styles/view/layout.scss | 9 +++++---- app/app/styles/view/page-documents.scss | 14 +++++++------- app/app/styles/widget/widget-avatar.scss | 2 -- app/app/styles/widget/widget-button.scss | 10 +++++----- app/app/styles/widget/widget-chip.scss | 8 ++++---- 9 files changed, 42 insertions(+), 43 deletions(-) diff --git a/app/app/styles/color.scss b/app/app/styles/color.scss index 5e7204e1..196c6461 100644 --- a/app/app/styles/color.scss +++ b/app/app/styles/color.scss @@ -9,7 +9,7 @@ // // https://documize.com $color-off-white: #f5f5f5; -$color-off-black: #4c4c4c; +$color-off-black: #333333; $color-black: #000000; $color-white: #ffffff; $color-primary: #2180cc; diff --git a/app/app/styles/view/document/content.scss b/app/app/styles/view/document/content.scss index 48730ce6..b6491edb 100644 --- a/app/app/styles/view/document/content.scss +++ b/app/app/styles/view/document/content.scss @@ -4,10 +4,6 @@ .attachment-zone { margin: 20px 0 30px 0; - padding: 10px; - background-color: $color-off-white; - border: 1px solid $color-border2; - border-radius: 2px; > .list { margin: 0; @@ -15,9 +11,11 @@ > .item { color: $color-off-black; - margin: 0px 5px; + margin-top: 10px; padding: 0; list-style-type: none; + border-bottom: 1px solid $color-gray2; + padding-bottom: 10px; > .icon { vertical-align: text-top; @@ -93,22 +91,21 @@ .no-sections { text-align: center; opacity: 0.4; - + > .box { padding: 35px; display: inline-block; margin: 0 20px; - + > .message { font-size: 14px; color: $color-off-black; margin-top: 20px; } - + > .regular-button { cursor: default !important; } - + } } - diff --git a/app/app/styles/view/document/toolbar.scss b/app/app/styles/view/document/toolbar.scss index ec519549..bdeee1f2 100644 --- a/app/app/styles/view/document/toolbar.scss +++ b/app/app/styles/view/document/toolbar.scss @@ -3,9 +3,8 @@ width: 100%; margin: 0; padding: 40px 40px 20px 40px; - background-color: darken($color-off-white, 3%); + background-color: $color-off-white; color: $color-gray; - border: 1px solid $color-border2; > .meta-data { margin: 0; diff --git a/app/app/styles/view/document/wysiwyg.scss b/app/app/styles/view/document/wysiwyg.scss index a39bcf69..6647b272 100644 --- a/app/app/styles/view/document/wysiwyg.scss +++ b/app/app/styles/view/document/wysiwyg.scss @@ -1,7 +1,8 @@ .wysiwyg { // font-size: 1rem; - font-size: 15px; - line-height: 30px; + font-size: 16px; + line-height: 31px; + color: #3c3c3c; table { @@ -18,7 +19,7 @@ p { margin: 0 !important; - padding: 0 !important; + padding: 0 !important; } } } @@ -40,20 +41,23 @@ h1 { - font-size: 2.5em; + font-size: 2.3em; font-weight: bold; - margin: 0 0 10px 0; + color:$color-off-black; + margin-bottom: 20px; + margin-top: 0; } h2 { font-size: 2rem; margin: 30px 0 20px 0; + font-family: open_sansregular; } h3 { - font-size: 1.8rem; + font-size: 1.6rem; margin: 30px 0 20px 0; } @@ -73,8 +77,8 @@ { .page-title { - color: $color-primary; - font-weight: bold; + color:$color-off-black; + font-family: open_sansregular; } } diff --git a/app/app/styles/view/layout.scss b/app/app/styles/view/layout.scss index 741ac8cd..54439c7e 100644 --- a/app/app/styles/view/layout.scss +++ b/app/app/styles/view/layout.scss @@ -84,7 +84,7 @@ font-size: 1rem; font-style: normal; line-height: 2.6rem; - font-family: Tahoma, 'courier', 'arial'; + font-family: open_sansregular; } &:before { @@ -96,7 +96,7 @@ margin: 0; padding: 0; color: $color-white; - padding: 20px 0 0 0; + padding: 20px 0 0 0; > .option { list-style: none; @@ -118,14 +118,14 @@ .dual-box { background-color: $color-off-white; - color: $color-off-black; + color: $color-gray; height: 45px; border: 1px solid $color-border2; border-radius: 4px; width: 100%; padding: 0 10px; cursor: pointer; - display: inline-block; + display: inline-block; &:hover { @extend .z-depth-tiny; @@ -159,5 +159,6 @@ .dual-box-white { background-color: $color-white; + color: $color-off-black; } } diff --git a/app/app/styles/view/page-documents.scss b/app/app/styles/view/page-documents.scss index 6d238821..4708b660 100644 --- a/app/app/styles/view/page-documents.scss +++ b/app/app/styles/view/page-documents.scss @@ -34,7 +34,7 @@ > .item { list-style-type: none; list-style: none; - margin: 0 0 3px 0; + margin: 0 0 5px 0; padding: 0; } } @@ -101,14 +101,14 @@ } > .title { - font-size: 16px; - font-weight: bold; - margin-bottom: 8px; + font-size: 18px; + margin-bottom: 10px; } > .snippet { color: $color-gray; - font-size: 13px; + font-size: 14px; + line-height: 24px; } > .tags { @@ -117,7 +117,7 @@ margin-top: 8px; .tag { - background-color: $color-off-white; + background-color: $color-white; color: $color-stroke; text-decoration: none; display: inline-block; @@ -128,7 +128,7 @@ transition: 0.2s all ease; &:hover { - background-color: $color-white; + background-color: $color-off-white; } } } diff --git a/app/app/styles/widget/widget-avatar.scss b/app/app/styles/widget/widget-avatar.scss index 0a0a1bba..9dd983be 100644 --- a/app/app/styles/widget/widget-avatar.scss +++ b/app/app/styles/widget/widget-avatar.scss @@ -7,7 +7,6 @@ text-align: center; height: 35px; width: 35px; - font-family: Tahoma, 'courier', 'arial'; } .avatar-large { @@ -21,5 +20,4 @@ letter-spacing: 1px; text-align: center; margin: 0 auto; - font-family: Tahoma, 'courier', 'arial'; } diff --git a/app/app/styles/widget/widget-button.scss b/app/app/styles/widget/widget-button.scss index aea3036e..ffe0a484 100644 --- a/app/app/styles/widget/widget-button.scss +++ b/app/app/styles/widget/widget-button.scss @@ -125,7 +125,7 @@ transition: .2s ease-out; border-radius: 2px; display: inline-block; - height: 33px; + height: 32px; line-height: 34px; font-size: 0.9em; outline: 0; @@ -134,9 +134,9 @@ -webkit-tap-highlight-color: transparent; color: $color-white; cursor: pointer; - border: none; - @extend .no-select; - + border: none; + @extend .no-select; + > .name { vertical-align: top; display: inline-block; @@ -166,7 +166,7 @@ .button-transparent { background-color: transparent; color: $color-gray; - border: 1px solid $color-gray; + border: 1px solid $color-gray; } .flat-button { diff --git a/app/app/styles/widget/widget-chip.scss b/app/app/styles/widget/widget-chip.scss index 0cda7e47..c0577cc3 100644 --- a/app/app/styles/widget/widget-chip.scss +++ b/app/app/styles/widget/widget-chip.scss @@ -1,11 +1,11 @@ .chip { display: inline-block; - background-color: $color-chip; border-radius: 15px; + border: 1px solid $color-border; padding: 0; height: 25px; line-height: 0; - margin-right: 10px; + margin-right: 5px; &:hover { cursor: pointer; @@ -16,14 +16,14 @@ display: inline-block; font-weight: 400; font-size: 12px; - color: $color-off-white; + color: $color-stroke; padding: 12px 10px 0 10px; letter-spacing: 0.7px; line-height: 0; } > i.material-icons { - color: $color-off-white; + color: $color-stroke; font-size: 13px; margin: 13px 8px 0 0; padding: 0;