From a38d0e040debf27a1763d3607ff11423f390fdf0 Mon Sep 17 00:00:00 2001 From: James Brooks Date: Fri, 5 Dec 2014 12:59:29 +0000 Subject: [PATCH] Tidy up SCSS, make header lighter --- app/assets/sass/main.scss | 4 ++- app/assets/sass/partials/_base.scss | 28 ------------------- app/assets/sass/partials/_sidebar.scss | 2 +- app/assets/sass/partials/_variables.scss | 28 +++++++++++++++++++ .../{all-292b675b.css => all-ff8e250e.css} | 15 ++++------ public/build/css/all.css | 15 ++++------ public/build/rev-manifest.json | 2 +- 7 files changed, 45 insertions(+), 49 deletions(-) create mode 100644 app/assets/sass/partials/_variables.scss rename public/build/css/{all-292b675b.css => all-ff8e250e.css} (99%) diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index b1d4e88d..940c5c2a 100644 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -1,3 +1,5 @@ +@import "partials/variables"; + html, body { height: 100%; } @@ -8,4 +10,4 @@ html, body { @import "partials/wrapper"; @import "partials/header"; @import "partials/sidebar"; -@import "partials/content"; \ No newline at end of file +@import "partials/content"; diff --git a/app/assets/sass/partials/_base.scss b/app/assets/sass/partials/_base.scss index 4876f8e1..1bea01d1 100644 --- a/app/assets/sass/partials/_base.scss +++ b/app/assets/sass/partials/_base.scss @@ -1,31 +1,3 @@ -$base-background-color: #f5f5f5; - -$base-font-family: "Avenir Next W01", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -$base-font-weight: 300; -$base-letter-spacing: 1px; -$base-font-size: 16px; - -$base-link-color: #ffffff; -$base-link-hover-color: #e9e9e9; - -$header-background-color: #00695C; -$header-border-color: 1px solid darken(#00695C, 10%); - -$sidebar-transition-speed: .2s; -$sidebar-background-color: #2c3e50; -$sidebar-border-color: 1px solid rgba(255, 255, 255, .1); -$sidebar-text-color: #d7dadc; -$sidebar-text-active-color: #ffffff; -$sidebar-normal-width: 250px; -$sidebar-phone-width: 75%; - -$screen-xs-max: "(max-width: 549px)"; -$screen-sm-min: "(min-width: 550px)"; -$screen-sm-max: "(max-width: 991px)"; -$screen-md-min: "(min-width: 992px)"; -$screen-md-max: "(max-width: 1199px)"; -$screen-lg-min: "(min-width: 1200px)"; - body.dashboard { font-family: $base-font-family; font-weight: $base-font-weight; diff --git a/app/assets/sass/partials/_sidebar.scss b/app/assets/sass/partials/_sidebar.scss index 12dc367f..8f04d896 100644 --- a/app/assets/sass/partials/_sidebar.scss +++ b/app/assets/sass/partials/_sidebar.scss @@ -39,7 +39,7 @@ body.dashboard { border-bottom: $sidebar-border-color; } &.active { - background: $header-background-color; + background: $sidebar-active-color; a { color: $sidebar-text-active-color; } diff --git a/app/assets/sass/partials/_variables.scss b/app/assets/sass/partials/_variables.scss new file mode 100644 index 00000000..d750e13d --- /dev/null +++ b/app/assets/sass/partials/_variables.scss @@ -0,0 +1,28 @@ +$base-background-color: #f5f5f5; + +$base-font-family: "Avenir Next W01", "Helvetica Neue", "Helvetica", "Arial", sans-serif; +$base-font-weight: 300; +$base-letter-spacing: 1px; +$base-font-size: 16px; + +$base-link-color: #ffffff; +$base-link-hover-color: #e9e9e9; + +$header-background-color: lighten(#00695C, 10%); +$header-border-color: 1px solid darken($header-background-color, 10%); + +$sidebar-transition-speed: .2s; +$sidebar-background-color: #2c3e50; +$sidebar-border-color: 1px solid rgba(255, 255, 255, .1); +$sidebar-text-color: #d7dadc; +$sidebar-text-active-color: #ffffff; +$sidebar-normal-width: 250px; +$sidebar-phone-width: 75%; +$sidebar-active-color: #00695C; + +$screen-xs-max: "(max-width: 549px)"; +$screen-sm-min: "(min-width: 550px)"; +$screen-sm-max: "(max-width: 991px)"; +$screen-md-min: "(min-width: 992px)"; +$screen-md-max: "(max-width: 1199px)"; +$screen-lg-min: "(min-width: 1200px)"; diff --git a/public/build/css/all-292b675b.css b/public/build/css/all-ff8e250e.css similarity index 99% rename from public/build/css/all-292b675b.css rename to public/build/css/all-ff8e250e.css index 61e3f098..b1378e30 100644 --- a/public/build/css/all-292b675b.css +++ b/public/build/css/all-ff8e250e.css @@ -38,23 +38,21 @@ body.dashboard .wrapper { body.dashboard .wrapper .content { -webkit-transition: margin 0.2s; transition: margin 0.2s; - margin-left: 250px; } - } + margin-left: 250px; } } body.dashboard .wrapper.active .sidebar { margin-left: 0; } @media (min-width: 550px) { body.dashboard .wrapper.active .content { -webkit-transition: margin 0.2s; transition: margin 0.2s; - margin-left: 250px; } - } + margin-left: 250px; } } body.dashboard .navbar { z-index: 999; border-radius: 0px; border: none; - border-bottom: 1px solid #00362f; - background: #00695C; + border-bottom: 1px solid #00695b; + background: #009c87; margin: 0; } body.dashboard .navbar a, body.dashboard .navbar a:active, body.dashboard .navbar a:visited { color: #ffffff; } @@ -67,7 +65,7 @@ body.dashboard .navbar { body.dashboard .navbar .navbar-toggle.collapsed span { background-color: #ffffff; } body.dashboard .navbar .navbar-collapse { - background: #00695C; } + background: #009c87; } body.dashboard .navbar a.navbar-brand { padding: 34px 21px; line-height: 0em; @@ -80,8 +78,7 @@ body.dashboard .navbar { padding-right: 10px; } body.dashboard .navbar a.navbar-brand span:before { font-family: FontAwesome; - content: "\f060"; } - } + content: "\f060"; } } body.dashboard .navbar .nav li a { height: 68px; line-height: 35px; } diff --git a/public/build/css/all.css b/public/build/css/all.css index 61e3f098..b1378e30 100644 --- a/public/build/css/all.css +++ b/public/build/css/all.css @@ -38,23 +38,21 @@ body.dashboard .wrapper { body.dashboard .wrapper .content { -webkit-transition: margin 0.2s; transition: margin 0.2s; - margin-left: 250px; } - } + margin-left: 250px; } } body.dashboard .wrapper.active .sidebar { margin-left: 0; } @media (min-width: 550px) { body.dashboard .wrapper.active .content { -webkit-transition: margin 0.2s; transition: margin 0.2s; - margin-left: 250px; } - } + margin-left: 250px; } } body.dashboard .navbar { z-index: 999; border-radius: 0px; border: none; - border-bottom: 1px solid #00362f; - background: #00695C; + border-bottom: 1px solid #00695b; + background: #009c87; margin: 0; } body.dashboard .navbar a, body.dashboard .navbar a:active, body.dashboard .navbar a:visited { color: #ffffff; } @@ -67,7 +65,7 @@ body.dashboard .navbar { body.dashboard .navbar .navbar-toggle.collapsed span { background-color: #ffffff; } body.dashboard .navbar .navbar-collapse { - background: #00695C; } + background: #009c87; } body.dashboard .navbar a.navbar-brand { padding: 34px 21px; line-height: 0em; @@ -80,8 +78,7 @@ body.dashboard .navbar { padding-right: 10px; } body.dashboard .navbar a.navbar-brand span:before { font-family: FontAwesome; - content: "\f060"; } - } + content: "\f060"; } } body.dashboard .navbar .nav li a { height: 68px; line-height: 35px; } diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json index 0829100e..f6f6dd87 100644 --- a/public/build/rev-manifest.json +++ b/public/build/rev-manifest.json @@ -1,4 +1,4 @@ { - "css/all.css": "css/all-292b675b.css", + "css/all.css": "css/all-ff8e250e.css", "js/all.js": "js/all-c84ab03b.js" } \ No newline at end of file