diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 366d17a60b15aaad473c911c4e6c8a8c46377744..0439767dc7a253515fca6a5a5d56723d27c99ada 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -4,11 +4,10 @@
@import "bourbon";
@import "base/grid-settings";
@import "neat";
+@import "mixins/mixins";
@import "base/base";
@import "refills/flashes";
-@import "mixins/mixins";
-
@import "layout";
@import "sidebar";
@import "show";
diff --git a/app/assets/stylesheets/base/_grid-settings.scss b/app/assets/stylesheets/base/_grid-settings.scss
index c42bdaf623ed0fc10819285ddd88ddc9f136dc50..152f7829a8247f93b967cf4bc3c0ba633a44409e 100644
--- a/app/assets/stylesheets/base/_grid-settings.scss
+++ b/app/assets/stylesheets/base/_grid-settings.scss
@@ -2,10 +2,11 @@
// Neat Overrides
// $column: 90px;
-// $gutter: 30px;
// $grid-columns: 12;
// $max-width: em(1088);
+$gutter: 2em;
+
// Neat Breakpoints
$medium-screen: em(640);
$large-screen: em(860);
diff --git a/app/assets/stylesheets/base/_tables.scss b/app/assets/stylesheets/base/_tables.scss
index 3c83189fbdbeb78b44f03da9579b18143706d39f..f430496dfcf49d68d7f786b37f0ade68bdb7336b 100644
--- a/app/assets/stylesheets/base/_tables.scss
+++ b/app/assets/stylesheets/base/_tables.scss
@@ -1,26 +1,72 @@
table {
- border-collapse: collapse;
+ border: $base-border;
+ border-collapse: separate;
+ border-radius: $base-border-radius;
margin: ($base-spacing / 2) 0;
table-layout: fixed;
width: 100%;
}
+thead {
+ background-color: $grey-0;
+}
+
th {
border-bottom: $dark-border;
- font-weight: bold;
+ color: $grey-4;
+ font-size: $small-font-size;
+ font-weight: $normal-font-weight;
+ letter-spacing: 0.0357em;
padding: ($base-spacing / 2) 0;
text-align: left;
+ text-transform: uppercase;
}
td {
border-bottom: $base-border;
+ overflow: hidden;
padding: ($base-spacing / 2) 0;
text-overflow: ellipsis;
- overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
+tr {
+ &:first-child {
+ td {
+ &:first-child {
+ border-top-left-radius: $base-border-radius;
+ }
+
+ &:last-child {
+ border-top-right-radius: $base-border-radius;
+ }
+ }
+ }
+
+ &:last-child {
+ td {
+ border-bottom: 0;
+
+ &:first-child {
+ border-bottom-left-radius: $base-border-radius;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: $base-border-radius;
+ }
+ }
+ }
+}
+
+
+td,
+th {
+ &:first-child {
+ padding-left: 1em;
+ }
+}
+
tr,
td,
th {
diff --git a/app/assets/stylesheets/base/_variables.scss b/app/assets/stylesheets/base/_variables.scss
index cca5381fc329b77f38db8c83065a0b610c23a982..00784cf9981a5092b97fdbda53c9064a8d5f7570 100644
--- a/app/assets/stylesheets/base/_variables.scss
+++ b/app/assets/stylesheets/base/_variables.scss
@@ -1,11 +1,12 @@
// Typography
-$sans-serif: $helvetica;
+$sans-serif: "Lato", $helvetica;
$serif: $georgia;
$base-font-family: $sans-serif;
$header-font-family: $base-font-family;
// Font Sizes
$base-font-size: 1em;
+$small-font-size: 0.875em;
$h1-font-size: $base-font-size * 2.25;
$h2-font-size: $base-font-size * 2;
$h3-font-size: $base-font-size * 1.75;
@@ -13,6 +14,11 @@ $h4-font-size: $base-font-size * 1.5;
$h5-font-size: $base-font-size * 1.25;
$h6-font-size: $base-font-size;
+// Font Weights
+$light-font-weight: 300;
+$normal-font-weight: 400;
+$bold-font-weight: 900;
+
// Line height
$base-line-height: 1.5;
$header-line-height: 1.25;
@@ -22,27 +28,30 @@ $base-border-radius: 3px;
$base-spacing: $base-line-height * 1em;
$base-z-index: 0;
+// Transitions
+$base-easing: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$base-timing: 0.25s;
+$base-transition: all $base-timing $base-easing;
+
// Colors
-$dark-blue: #214a63;
-$blue: #2d6586;
-$light-blue: #337799;
-$light-red: #fbe3e4;
-$light-yellow: #fff6bf;
-$light-green: #e6efc2;
+$dark-blue: #293f53;
+$blue: #2a94d6;
+$light-blue: #4eb1cb;
+$light-red: #cf5c60;
+$light-yellow: #f3ae4e;
+$light-green: #4ab471;
$form-field-background-color: #fff;
-$grey-0: #f7fcfc;
-$grey-1: #e4edf6;
+$grey-0: #f6f7f7;
+$grey-1: #dfe0e1;
$grey-2: #cfd8dc;
$grey-3: #90acad;
-$grey-4: #648687;
+$grey-4: #7b808c;
$grey-5: #4e6a68;
$grey-6: #344346;
-$grey-7: #263238;
+$grey-7: #293f54;
// Background Color
-$sidebar-active-color: $blue;
-$sidebar-hover-color: $light-blue;
$base-background-color: $dark-blue;
// Font Colors
@@ -50,11 +59,15 @@ $base-font-color: $grey-7;
$base-accent-color: $blue;
// Link Colors
-$base-link-color: $light-blue;
-$hover-link-color: $blue;
+$base-link-color: $blue;
+$hover-link-color: shade($blue, 10);
$base-button-color: $base-link-color;
$hover-button-color: $hover-link-color;
+// Sidebar Colors
+$sidebar-active-color: $base-link-color;
+$sidebar-hover-color: $hover-link-color;
+
// Flash Colors
$alert-color: $light-yellow;
$error-color: $light-red;
@@ -62,10 +75,11 @@ $notice-color: lighten($base-accent-color, 40);
$success-color: $light-green;
// Border color
-$base-border-color: $grey-2;
-$base-border: 1px solid $base-border-color;
-$dark-border-color: $grey-3;
-$dark-border: 1px solid $dark-border-color;
+$base-border-color: $grey-1;
+$base-border-size: 1px;
+$base-border: $base-border-size solid $base-border-color;
+$dark-border-color: $grey-2;
+$dark-border: $base-border-size solid $dark-border-color;
// Forms
$form-border-color: $base-border-color;
diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
index 4ca9cf16c88a53ea4f40479db17e2931fa909d10..fb140c30fc1a4fa6ce56e73fcf8b6d49850c63b9 100644
--- a/app/assets/stylesheets/components/_table.scss
+++ b/app/assets/stylesheets/components/_table.scss
@@ -1,31 +1,11 @@
-table {
- @include card(1);
-}
-
-td,
-th {
- &:first-child {
- padding-left: 1em;
- }
-}
-
-thead {
- background-color: $blue;
- color: $grey-0;
- z-index: 2;
-}
-
.table-row {
- background-color: $grey-0;
- transition: background-color 0.05s linear;
+ background-color: #fff;
+ border-left: 2px solid transparent;
+ transition: $base-transition;
&:hover {
- background-color: $grey-1;
- border-left: 2px solid $blue;
+ background-color: $grey-0;
+ border-left-color: $blue;
cursor: pointer;
-
- td:first-child {
- padding-left: calc(1em - 1px);
- }
}
}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index c26b09d8bec76ab5506126a1ead98c3932037960..d00592ab7167d522d5f5b62852a83048d372a0c8 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -20,7 +20,7 @@ body {
.content {
@include flex(1);
@include card(2);
- background-color: $grey-1;
+ background-color: $grey-0;
height: 100%;
min-height: 100%;
overflow-y: auto;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6bca026888b2a07a8e1b7925b882e51c993328ed..aba9d37fd5e79809e41dd0815392acb0016f6367 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,6 +10,7 @@
https://github.com/calebthompson/title#usage
%>
<title><%= title %></title>
+ <%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Lato:300,400,900", media: "all" %>
<%= stylesheet_link_tag :application, media: "all" %>
<%= csrf_meta_tags %>
</head>