From 2f0562b8719aeadbc6471326e07323783634227f Mon Sep 17 00:00:00 2001
From: Kukushkin Alexey <domio.art@gmail.com>
Date: Wed, 20 Apr 2016 22:22:10 +0300
Subject: [PATCH] remove font-smoothing; add shadow mixins; add shadow for
 modal; restyle issue filter; change font-weights for buttons, card, headers
 and inputs

---
 src/board/views/filter.html | 136 +++++++++++----------------------
 src/scss/_buttons.scss      |  15 ++++
 src/scss/_card.scss         |  18 +++--
 src/scss/_filter-block.scss |  90 ++++++++++++++++++++++
 src/scss/_input.scss        |  18 +++++
 src/scss/_mixins.scss       |  45 +++++++++++
 src/scss/_modal.scss        |   4 +
 src/scss/_settings.scss     | 147 ++++++++++++++++++------------------
 src/scss/app.scss           |  70 ++++++++++-------
 templates/index.html        |   1 -
 10 files changed, 340 insertions(+), 204 deletions(-)
 create mode 100644 src/scss/_buttons.scss
 create mode 100644 src/scss/_filter-block.scss
 create mode 100644 src/scss/_input.scss
 create mode 100644 src/scss/_mixins.scss

diff --git a/src/board/views/filter.html b/src/board/views/filter.html
index 738466c..cd96295 100644
--- a/src/board/views/filter.html
+++ b/src/board/views/filter.html
@@ -1,89 +1,37 @@
-<div id="filter-block" class="small-12 medium-6 large-3 columns">
-    <style>
-        #filter-block {
-            position: fixed;
-            overflow-y: scroll;
-            top: 45px;
-            bottom: 0;
-            right: 0;
-            background: #edeff0;
-            box-shadow: 0 0 6px rgba(0, 0, 0, .4);
-        }
-        
-        #filter-block .side-nav {
-            padding: 0;
-        }
-        
-        #filter-block hr {
-            margin: 0.75rem 0;
-        }
-        
-        #filter-block .side-nav li {
-            margin: 0;
-        }
-        
-        #filter-block .side-nav a {
-            padding: 0.2375rem 0.175rem;
-        }
-        
-        #filter-block .side-nav a:hover {
-            background: #259CC3;
-            color: #fff;
-        }
-        
-        #filter-block .side-nav .fa-check {
-            visibility: hidden;
-        }
-        
-        #filter-block .side-nav li.active a {
-            color: #008CBA;
-        }
-        
-        #filter-block .side-nav li.active a:hover {
-            color: #fff;
-        }
-        
-        #filter-block .side-nav li.active .fa-check {
-            visibility: visible;
-        }
-    </style>
-
-    <div class="row collapse">
-        <h4 style="margin-top: 10px;">
+<div id="filter-block" class="small-12 medium-6 large-3">
+    <div class="row">
+        <h3 style="margin-top: 10px;" class="small-12 columns">
             Filter cards
-        </h4>
+        </h3>
     </div>
-
-    <hr/>
-
     <form>
-        <div class="row collapse">
+        <div class="row">
             <div class="small-12 medium-12 large-12 columns">
-                <input type="text" placeholder="type to filter" data-ng-model="query" style="margin-bottom: 0" />
+                <input type="text" placeholder="type to filter" data-ng-model="query" style="margin-bottom: 0"/>
             </div>
         </div>
     </form>
-
-    <hr/>
-
-    <h5>
-        Labels
-    </h5>
+    <div class="row">
+        <h4 class="small-12 columns" style="margin-top: 20px;">
+            Labels
+        </h4>
+    </div>
     <div class="row collapse">
         <ul class="side-nav">
             <li data-ng-class="{active: contains(filter.tags, '~')}">
                 <a href="#" data-ng-click="filter.apply('~')">
-                    <i class="fa fa-check"></i>&nbsp;
+                    <i class="fa fa-check"></i>
                     <span class="medium-text-left">
                         No label
                     </span>
                 </a>
             </li>
-            <li data-ng-repeat="label in filter.labels|filter:query" data-ng-class="{active: contains(filter.tags, '~'+label.name)}">
+            <li data-ng-repeat="label in filter.labels|filter:query"
+                data-ng-class="{active: contains(filter.tags, '~'+label.name)}">
                 <a href="#" data-ng-click="filter.apply('~'+label.name)">
-                    <i class="fa fa-check"></i>&nbsp;
-                    <span class="label medium-text-left" style="background-color: {{label.color}}">
-                        {{label.name}}
+                    <i class="fa fa-check"></i>
+                    <span class="label medium-text-left" style="background-color: {{ label.color }}">
+                        {{ label.name }}
                     </span>
                 </a>
             </li>
@@ -91,25 +39,27 @@
     </div>
 
     <hr/>
-
-    <h5>
-        Milestones
-    </h5>
+    <div class="row">
+        <h4 class="small-12 columns">
+            Milestones
+        </h4>
+    </div>
     <div class="row collapse">
         <ul class="side-nav">
             <li data-ng-class="{active: contains(filter.tags, '^')}">
                 <a href="#" data-ng-click="filter.apply('^')">
-                    <i class="fa fa-check"></i>&nbsp;
+                    <i class="fa fa-check"></i>
                     <span class="medium-text-left">
                         No milestone
                     </span>
                 </a>
             </li>
-            <li data-ng-repeat="milestone in filter.milestones|filter:query" data-ng-class="{active: contains(filter.tags, '^'+milestone.id)}">
+            <li data-ng-repeat="milestone in filter.milestones|filter:query"
+                data-ng-class="{active: contains(filter.tags, '^'+milestone.id)}">
                 <a href="#" data-ng-click="filter.apply('^'+milestone.id)">
-                    <i class="fa fa-check"></i>&nbsp;
+                    <i class="fa fa-check"></i>
                     <span class="medium-text-left">
-                        {{milestone.title}}
+                        {{ milestone.title }}
                     </span>
                 </a>
             </li>
@@ -117,36 +67,38 @@
     </div>
 
     <hr/>
-
-    <h5>
-        Users
-    </h5>
+    <div class="row">
+        <h4 class="small-12 columns">
+            Users
+        </h4>
+    </div>
     <div class="row collapse">
         <ul class="side-nav">
             <li data-ng-class="{active: contains(filter.tags, '@')}">
                 <a href="#" data-ng-click="filter.apply('@')">
-                    <i class="fa fa-check"></i>&nbsp;
+                    <i class="fa fa-check"></i>
                     <span class="medium-text-left">
                         No user
                     </span>
                 </a>
             </li>
-            <li data-ng-repeat="user in filter.users|filter:query" data-ng-class="{active: contains(filter.tags, '@'+user.id)}">
+            <li data-ng-repeat="user in filter.users|filter:query"
+                data-ng-class="{active: contains(filter.tags, '@'+user.id)}">
                 <a href="#" data-ng-click="filter.apply('@'+user.id)">
-                    <i class="fa fa-check"></i>&nbsp;
+                    <i class="fa fa-check"></i>
                     <span class="meduim-text-left">
-                    <img data-ng-src="{{user.avatar_url}}" width="24" height="24" style="border-radius: 50%"/>&nbsp;
-                        {{user.name}}
+                    <img data-ng-src="{{ user.avatar_url }}" width="32" height="32" style="border-radius: 50%"/>&nbsp;
+                        {{ user.name }}
                     </span>
                 </a>
             </li>
         </ul>
     </div>
-
-    <hr/>
-    <div class="row collapse">
-        <a href="#" class="button expand" data-ng-click="filter.clear()">
-            Clear filters
-        </a>
+    <div class="row">
+        <div class="small-12 medium-12 large-12 columns">
+            <a href="#" class="button expand" data-ng-click="filter.clear()">
+                Clear filters
+            </a>
+        </div>
     </div>
 </div>
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
new file mode 100644
index 0000000..c4b4e3e
--- /dev/null
+++ b/src/scss/_buttons.scss
@@ -0,0 +1,15 @@
+@import "foundation/functions";
+
+.button {
+    font-weight: 300;
+    letter-spacing: rem-calc(0.5);
+    &.secondary {
+        font-weight: 400;
+    }
+    &.tiny {
+        .fa {
+            font-size: rem-calc(14);
+        }
+    }
+}
+
diff --git a/src/scss/_card.scss b/src/scss/_card.scss
index 10e852f..811d4b9 100644
--- a/src/scss/_card.scss
+++ b/src/scss/_card.scss
@@ -1,9 +1,10 @@
+@import "foundation/functions";
 body{
     pre{
         display: block;
-        padding: 9.5px;
+        padding: rem-calc(9.5);
         margin: 0 0 10px;
-        font-size: 13px;
+        font-size: rem-calc(13);
         line-height: 1.42857143;
         color: #333;
         background-color: #f5f5f5;
@@ -36,11 +37,11 @@ body{
 }
 
 .card-andon{
-    font-size: 11px;
-    line-height: 22px;
+    font-size: rem-calc(11);
+    line-height: rem-calc(22);
     border-radius: 50%;
-    width: 20px;
-    height: 20px;
+    width: rem-calc(20);
+    height: rem-calc(20);
     text-align: center;
     vertical-align: middle;
     display: block;
@@ -94,7 +95,7 @@ body{
                 display: inline-block;
             }
             .author-name{
-                font-weight: bold;
+                font-weight: 500;
             }
             p{
                 display: inherit;
@@ -171,7 +172,8 @@ body{
                 }
             }
             .date {
-                margin-top: 10px;
+                margin-top: rem-calc(5);
+                line-height: 1;
             }
             &:before{
                 content: "";
diff --git a/src/scss/_filter-block.scss b/src/scss/_filter-block.scss
new file mode 100644
index 0000000..4cb0af8
--- /dev/null
+++ b/src/scss/_filter-block.scss
@@ -0,0 +1,90 @@
+@import "mixins";
+@import "foundation/functions";
+
+$filter-block-color: #fff;
+$filter-block-background: #2f4050;
+$filter-block-link-color: #0274cb;
+#filter-block {
+    position: fixed;
+    overflow-y: scroll;
+    top: 45px;
+    bottom: 0;
+    right: 0;
+    background: $filter-block-background;
+    @include shadow-6dp;
+    h1, h2, h3, h4, h5 {
+        color: $filter-block-color;
+        font-weight: 200;
+        letter-spacing: rem-calc(0.5);
+    }
+    hr {
+        border-color: rgba($filter-block-color, 0.2);
+        margin: rem-calc(6) 0 rem-calc(14) 0;
+    }
+
+    input {
+        border-color: $filter-block-background;
+        padding-left: ($column-gutter / 2);
+        padding-right: ($column-gutter / 2);
+    }
+    .button {
+        margin-top: rem-calc(20);
+    }
+    .side-nav {
+        padding: 0;
+        li {
+            margin: 0;
+            .fa-check {
+                display: none;
+                position: absolute;
+                left: 8px;
+                top: 50%;
+                margin-top: -7px;
+            }
+            &.active {
+                .fa-check {
+                    display: block;
+                }
+                a {
+                    color: rgba($filter-block-color, 0.8);
+                    box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
+                    &:hover {
+                        color: $filter-block-color;
+                        &:before {
+                            background: rgba(#000, 0.4);
+                        }
+                    }
+                    &:before {
+                        background: rgba(#000, 0.2);
+                    }
+                }
+            }
+        }
+        a {
+            position: relative;
+            padding: rem-calc(5 10 5 30);
+            font-weight: 200;
+            color: rgba($filter-block-color, 0.7);
+            cursor: pointer;
+            span, i {
+                position: relative;
+                z-index: 1;
+            }
+            &:before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+            &:hover {
+                color: $filter-block-color;
+                &:before {
+                    background: rgba(#000, 0.4);
+                }
+            }
+        }
+    }
+
+}
diff --git a/src/scss/_input.scss b/src/scss/_input.scss
new file mode 100644
index 0000000..862eadc
--- /dev/null
+++ b/src/scss/_input.scss
@@ -0,0 +1,18 @@
+$placeholder-font-weight: 300 !default;
+::-webkit-input-placeholder {
+    font-weight: $placeholder-font-weight;
+}
+
+::-moz-placeholder {
+    font-weight: $placeholder-font-weight;
+}
+
+/* Firefox 19+ */
+:-moz-placeholder {
+    font-weight: $placeholder-font-weight;
+}
+
+/* Firefox 18- */
+:-ms-input-placeholder {
+    font-weight: $placeholder-font-weight;
+}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
new file mode 100644
index 0000000..997830d
--- /dev/null
+++ b/src/scss/_mixins.scss
@@ -0,0 +1,45 @@
+$shadow-key-umbra-opacity: 0.2;
+$shadow-key-penumbra-opacity: 0.11;
+$shadow-ambient-shadow-opacity: 0.12;
+
+@mixin focus-shadow() {
+    box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
+}
+
+@mixin shadow-2dp() {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+    0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+@mixin shadow-3dp() {
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+    0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+@mixin shadow-4dp() {
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+    0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+@mixin shadow-6dp() {
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+    0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+@mixin shadow-8dp() {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+    0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp() {
+    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0  6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+    0  8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-24dp() {
+    box-shadow: 0  9px 46px  8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+    0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+    0 24px 38px  3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
\ No newline at end of file
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index 9bdd6c9..25003a6 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -1,3 +1,4 @@
+@import "mixins";
 body{
     &.modal-open{
         overflow: hidden;
@@ -11,6 +12,9 @@ body{
             display: block;
             background-color: transparent;
         }
+        .body-modal{
+            @include shadow-8dp;
+        }
         @media only screen and (max-width: $row-width) {
             .body-modal{
               background-color: $white;
diff --git a/src/scss/_settings.scss b/src/scss/_settings.scss
index 552a056..ffc570f 100644
--- a/src/scss/_settings.scss
+++ b/src/scss/_settings.scss
@@ -88,15 +88,14 @@ $row-width: rem-calc(1000);
 // Global
 
 // We use these to define default font weights
-// $font-weight-normal: normal !default;
-// $font-weight-bold: bold !default;
+$font-weight-normal: 400;
+$font-weight-bold: 500;
 
 // We use these to control various global styles
 // $body-bg: $white;
 // $body-font-color: $jet;
-$body-font-family: 'Roboto', sans-serif;
-// $font-weight-normal:normal;
-// $body-font-weight: $font-weight-normal;
+$body-font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$body-font-weight: $font-weight-normal;
 // $body-font-style: normal;
 
 // We use this to control font-smoothing
@@ -109,42 +108,42 @@ $body-font-family: 'Roboto', sans-serif;
 // $last-child-float: $opposite-direction;
 
 // We use these as default colors throughout
- $primary-color: #008CBA;
- $secondary-color: #e7e7e7;
- $alert-color: #f04124;
- $success-color: #43AC6A;
- $warning-color: #f08a24;
- $info-color: #a0d3e8;
-
-    $key-color-1: #b39ddb;
-    $key-color-2: #ffa726;
-    $key-color-3: #00bcd4;
-    $key-color-4: #9ccc65;
-    $key-color-5: #ff8a65;
-    $key-color-6: #4fc3f7;
-    $key-color-7: #9575cd;
-    $key-color-8: #fdd835;
-    $key-color-9: #e05055;
-
-$white       : #FFFFFF;
- $ghost       : #FAFAFA;
- $snow        : #F9F9F9;
- $vapor       : #F6F6F6;
- $white-smoke : #F5F5F5;
- $silver      : #EFEFEF;
- $smoke       : #EEEEEE;
- $gainsboro   : #DDDDDD;
- $iron        : #CCCCCC;
- $base        : #AAAAAA;
- $aluminum    : #999999;
- $jumbo       : #888888;
- $monsoon     : #777777;
- $steel       : #666666;
- $charcoal    : #555555;
- $tuatara     : #444444;
- $oil         : #333333;
- $jet         : #222222;
- $black       : #000000;
+$primary-color: #0274cb;
+$secondary-color: #e7e7e7;
+$alert-color: #f04124;
+$success-color: #43AC6A;
+$warning-color: #f08a24;
+$info-color: #a0d3e8;
+
+$key-color-1: #b39ddb;
+$key-color-2: #ffa726;
+$key-color-3: #00bcd4;
+$key-color-4: #9ccc65;
+$key-color-5: #ff8a65;
+$key-color-6: #4fc3f7;
+$key-color-7: #9575cd;
+$key-color-8: #fdd835;
+$key-color-9: #e05055;
+
+$white: #FFFFFF;
+$ghost: #FAFAFA;
+$snow: #F9F9F9;
+$vapor: #F6F6F6;
+$white-smoke: #F5F5F5;
+$silver: #EFEFEF;
+$smoke: #EEEEEE;
+$gainsboro: #DDDDDD;
+$iron: #CCCCCC;
+$base: #AAAAAA;
+$aluminum: #999999;
+$jumbo: #888888;
+$monsoon: #777777;
+$steel: #666666;
+$charcoal: #555555;
+$tuatara: #444444;
+$oil: #333333;
+$jet: #222222;
+$black: #000000;
 
 // We use these to make sure border radius matches unless we want it different.
 // $global-radius: 3px;
@@ -158,11 +157,11 @@ $white       : #FFFFFF;
 // d. Media Query Ranges
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
- $small-range: (0em, 30em);
- $medium-range: (30.063em, 64em);
- $large-range: (64.063em, 90em);
- $xlarge-range: (90.063em, 120em);
- $xxlarge-range: (120.063em, 99999999em);
+$small-range: (0em, 30em);
+$medium-range: (30.063em, 64em);
+$large-range: (64.063em, 90em);
+$xlarge-range: (90.063em, 120em);
+$xxlarge-range: (120.063em, 99999999em);
 
 // $screen: "only screen";
 
@@ -223,19 +222,19 @@ $h6-font-size: 0.9rem;
 // $h1-font-reduction: rem-calc(10) !default;
 // $h2-font-reduction: rem-calc(10) !default;
 // $h3-font-reduction: rem-calc(5) !default;
- $h4-font-reduction: 0 !default;
+$h4-font-reduction: 0 !default;
 // $h5-font-reduction: 0 !default;
 // $h6-font-reduction: 0 !default;
 
 // These control how subheaders are styled.
 // $subheader-line-height: 1.4;
 // $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
-// $subheader-font-weight: $font-weight-normal;
+$subheader-font-weight: initial;
 // $subheader-top-margin: .2rem;
 // $subheader-bottom-margin: .5rem;
 
 // A general <small> styling
- $small-font-size: 80%;
+$small-font-size: 80%;
 // $small-font-color: scale-color($header-font-color, $lightness: 35%);
 
 // We use these to style paragraphs
@@ -262,7 +261,7 @@ $paragraph-font-size: 0.9rem;
 // We use these to style anchors
 // $anchor-text-decoration: none;
 // $anchor-text-decoration-hover: none;
-// $anchor-font-color: $primary-color;
+$anchor-font-color: #0391fd;
 // $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
 
 // We use these to style the <hr> element
@@ -552,7 +551,7 @@ $f-dropdown-font-color: $charcoal;
 $f-dropdown-font-size: rem-calc(14);
 $f-dropdown-list-padding: rem-calc(5, 10);
 $f-dropdown-line-height: rem-calc(18);
-$f-dropdown-list-hover-bg: $smoke  ;
+$f-dropdown-list-hover-bg: $smoke;
 $dropdown-mobile-default-float: 0;
 
 // We use this to control the styles for when the dropdown has custom content.
@@ -629,15 +628,15 @@ $f-dropdown-content-padding: rem-calc(20);
 // $input-font-color: rgba(0,0,0,0.75);
 // $input-font-size: rem-calc(14);
 // $input-bg-color: $white;
- $input-focus-bg-color: #FFF;
+$input-focus-bg-color: #FFF;
 // $input-border-color: scale-color($white, $lightness: -20%);
- $input-focus-border-color: #008CBA;
+$input-focus-border-color: #008CBA;
 // $input-border-style: solid;
 // $input-border-width: 1px;
 // $input-border-radius: $global-radius;
 // $input-disabled-bg: $gainsboro;
 // $input-disabled-cursor: $cursor-default-value;
- $input-box-shadow: none;
+$input-box-shadow: none;
 
 // We use these to style the fieldset border and spacing.
 // $fieldset-border-style: solid;
@@ -1363,39 +1362,39 @@ $reveal-overlay-bg: rgba($black, .45);
 // $include-html-top-bar-classes: $include-html-classes;
 
 // Background color for the top bar
- $topbar-bg-color: #259CC3;
- $topbar-bg: $topbar-bg-color;
+$topbar-bg-color: #0274cb;
+$topbar-bg: $topbar-bg-color;
 
 // Height and margin
 // $topbar-height: 45px;
 // $topbar-margin-bottom: 0;
 
 // Controlling the styles for the title in the top bar
-// $topbar-title-weight: $font-weight-normal;
+$topbar-title-weight: 300;
 // $topbar-title-font-size: rem-calc(17);
 
 // Style the top bar dropdown elements
- $topbar-dropdown-bg: $topbar-bg-color;
- $topbar-dropdown-link-color: $white;
- $topbar-dropdown-link-bg: $topbar-bg-color;
-// $topbar-dropdown-link-weight: $font-weight-normal;
+$topbar-dropdown-bg: $topbar-bg-color;
+$topbar-dropdown-link-color: $white;
+$topbar-dropdown-link-bg: $topbar-bg-color;
+$topbar-dropdown-link-weight: $topbar-title-weight;
 // $topbar-dropdown-toggle-size: 5px;
 // $topbar-dropdown-toggle-color: $white;
 // $topbar-dropdown-toggle-alpha: 0.4;
 
 // Set the link colors and styles for top-level nav
- $topbar-link-color: $white;
- $topbar-link-color-hover: $white;
- $topbar-link-color-active: $white;
- $topbar-link-color-active-hover: $white;
- $topbar-link-weight: normal;
- $topbar-link-font-size: rem-calc(14);
- $topbar-link-hover-lightness: -10%; // Darken by 10%
- $topbar-link-bg: $topbar-bg-color;
- $topbar-link-bg-color-hover: #1A6D88;
- $topbar-link-bg-hover: #1A6D88;
- $topbar-link-bg-active: $topbar-bg-color;
- $topbar-link-bg-active-hover: $topbar-bg-color;
+$topbar-link-color: $white;
+$topbar-link-color-hover: $white;
+$topbar-link-color-active: $white;
+$topbar-link-color-active-hover: $white;
+$topbar-link-weight: 300;
+$topbar-link-font-size: rem-calc(14);
+$topbar-link-hover-lightness: -10%; // Darken by 10%
+$topbar-link-bg: $topbar-bg-color;
+$topbar-link-bg-color-hover: #013b66;
+$topbar-link-bg-hover: #013b66;
+$topbar-link-bg-active: $topbar-bg-color;
+$topbar-link-bg-active-hover: $topbar-bg-color;
 // $topbar-link-font-family: $body-font-family;
 // $topbar-link-text-transform: none;
 // $topbar-link-padding: $topbar-height / 3;
@@ -1408,7 +1407,7 @@ $reveal-overlay-bg: rgba($black, .45);
 // $topbar-dropdown-label-font-weight: $font-weight-bold;
 // $topbar-dropdown-label-font-size: rem-calc(10);
 // $topbar-dropdown-label-bg: $oil;
- $topbar-dropdown-link-bg-hover: #1A6D88;
+$topbar-dropdown-link-bg-hover: #013b66;
 
 // Top menu icon styles
 // $topbar-menu-link-transform: uppercase;
diff --git a/src/scss/app.scss b/src/scss/app.scss
index afe88f9..0fe748a 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -1,3 +1,5 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,500italic,500,300italic,300&subset=latin,cyrillic-ext,cyrillic);
+@import "foundation/functions";
 @import "normalize";
 @import "settings";
 @import "foundation";
@@ -7,18 +9,26 @@
 @import "avatars";
 @import "modal";
 @import "card";
+@import "mixins";
 @import "mdeditor";
 @import "datepicker";
 @import "top-bar";
 @import "emoji";
+@import "filter-block";
+@import "buttons";
+@import "input";
 
 body {
     @extend body;
     height: auto;
     background: #ececec;
-    font-weight: 300;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    letter-spacing: rem-calc(0.5);
+}
+
+h1, h2, h3 {
+    &, &.subheader{
+        font-weight: 300;
+    }
 }
 
 input.todo-field {
@@ -44,7 +54,7 @@ textarea, input {
             color: $steel;
         }
     }
-    .checkline{
+    .checkline {
         margin-bottom: 1rem;
     }
     input[type="text"][disabled] {
@@ -56,6 +66,7 @@ textarea, input {
 
 .label {
     letter-spacing: 1px;
+    box-shadow: 0 1px 2px -1px rgba(#000, 0.6);
 }
 
 .board-stage {
@@ -92,32 +103,33 @@ textarea, input {
     right: 0px;
 }
 
-.as-sortable-item {
-    border: none !important;
-    border-radius: 0 !important;
-    margin: 0 !important;
-    border-bottom: solid 1px #bbb !important;
-    &:last-child{
-        margin-bottom: -1px !important;
+.as-sortable {
+    &-item {
+        border: none !important;
+        border-radius: 0 !important;
+        margin: 0 !important;
+        border-bottom: solid 1px #bbb !important;
+        &:last-child {
+            margin-bottom: -1px !important;
+        }
+        background: #fff !important;
+    }
+    &-dragging {
+        @include shadow-4dp;
+    }
+    &-placeholder {
+        margin: 0 !important;
+        border: none !important;
+        background: rgba(0, 0, 0, 0.45);
+        height: auto !important;
+        bottom: 0;
+        z-index: 10 !important;
+        position: absolute !important;
+        top: 0 !important;
+        width: auto !important;
+        left: 0;
+        right: 0;
     }
-}
-
-.as-sortable-item {
-    background: #fff !important;
-}
-
-.as-sortable-placeholder {
-    margin: 0 !important;
-    border: none !important;
-    background: rgba(0, 0, 0, 0.45);
-    height: auto !important;
-    bottom: 0;
-    z-index: 10 !important;
-    position: absolute !important;
-    top: 0 !important;
-    width: auto !important;
-    left: 0;
-    right: 0;
 }
 
 #issues-list {
diff --git a/templates/index.html b/templates/index.html
index 67e764c..494321d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,7 +17,6 @@
     <link rel="stylesheet" href="/{{ .Version }}/assets/css/app.css">
     <link rel="stylesheet" href="/{{ .Version }}/assets/css/ng-sortable.min.css">
     <link rel="stylesheet" href="/{{ .Version }}/assets/css/loading-bar.css">
-    <link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext' rel='stylesheet' type='text/css'>
 </head>
 
 <body>
-- 
GitLab