General style updates

Author: mattvague

Gemfile

@@ -6,6 +6,7 @@ require File.expand_path('../spec/support/detect_rails_version', __FILE__)
 
 rails_version = ENV['RAILS'] || detect_rails_version || "3.1.0"
 gem 'rails',          rails_version
+gem 'bourbon'
 
 case rails_version
 when /^3\.0/

app/assets/stylesheets/active_admin/_base.css.scss

@@ -1,5 +1,7 @@
 /* Active Admin CSS */
 
+// Bourbon and it's awesome mixins
+@import "bourbon";
 
 // Reset Away!
 @include global-reset;
@@ -12,6 +14,21 @@
 @import "active_admin/components/flash_messages";
 @import "active_admin/components/date_picker";
 @import "active_admin/components/tables";
+@import "active_admin/components/blank_slates";
+@import "active_admin/components/breadcrumbs";
+@import "active_admin/components/buttons";
+@import "active_admin/components/grid";
+@import "active_admin/components/links";
+@import "active_admin/components/pagination";
+@import "active_admin/components/panels";
+@import "active_admin/components/scopes";
+@import "active_admin/components/status_tags";
+@import "active_admin/components/table_tools";
+@import "active_admin/pages/dashboard";
+@import "active_admin/pages/logged_out";
+@import "active_admin/structure/footer";
+@import "active_admin/structure/main_structure";
+@import "active_admin/structure/title_bar";
 
 body {
   font-family: Helvetica, Arial, sans-serif;
@@ -21,342 +38,4 @@ body {
   margin: 0;
   padding: 0;
   color: $text-color;
-}
-
-// ----------------------------------- Page Title Bar 
-#title_bar {
-  @include section-header;
-  @include clearfix;
-  @include box-sizing(border-box);
-  display: table;
-  width: 100%;
-  position: relative; 
-  margin: 0; 
-  padding: 10px $horizontal-page-margin; 
-
-  #titlebar_left, #titlebar_right {
-    height: 50px;
-    vertical-align: middle;
-    display: table-cell;
-  }
-  
-  #titlebar_right {
-    text-align: right;
-  }
-  
-  h2 { 
-    margin: 0;
-    padding: 0; 
-    font-size: 2.6em;
-    font-weight: bold;
-  }
-
-  .action_items { 
-    a { 
-      @include light-button; 
-      @include icon(#777, 0.8em); 
-      @include gradient(#f9f9f9, #dddbdb);
-      display: inline-block;
-      padding: .8em 1.5em .7em 1.5em;
-      border: 1px solid #f8f8f8;
-      span.icon { vertical-align: bottom; margin-right: 4px;} 
-      &:hover{ @include icon-color(#000); }
-    }
-  }
-}
-
-// ----------------------------------- Main Structure
-
-#wrapper {
-  display: table;
-  width: 100%;
-}
-
-#active_admin_content { 
-  margin: 0; 
-  padding: 25px $horizontal-page-margin; 
-  
-  #main_content_wrapper { 
-    float: left; 
-    width: 100%; 
-
-    #main_content{ 
-      margin-right: 300px; 
-    }
-  }
-
-  &.without_sidebar #main_content_wrapper #main_content{ margin-right: 0; }
-
-  #sidebar { 
-    float: left; 
-    width: $sidebar-width; 
-    margin-left: -$sidebar-width;
-  }
-}
-
-// ----------------------------------- Footer 
-#footer {
-  padding: 30px 30px;  
-  font-size: 0.8em; 
-  clear: both; 
-
-  p { 
-    padding-top: 10px
-  }
-}
-
-// ----------------------------------- Links 
-a, a:link, a:visited {
-  color: $link-color;
-  text-decoration: underline;
-}
-a:hover { text-decoration: none; }
-
-// ----------------------------------- Buttons 
-
-td, p {
-  @include icon(#B3BCC1, 0.8em);
-  span.icon { margin: 0 3px; }
-}
-
-a.member_link {
-  margin-right: 7px;
-  white-space: nowrap;
-}
-
-a.button, input[type=submit] { @include dark-button; }
-
-// ----------------------------------- Breadcrumbs 
-.breadcrumb {
-  display: block;
-  font-size: 0.9em;
-  font-weight: normal;
-  line-height: 1.0em;
-  margin-bottom: 12px;
-  text-transform: uppercase;
-
-  a, a:link {
-    color: #8a949e ;
-    text-decoration: none;
-  }
-
-  a:hover { text-decoration: underline; }
-
-  .breadcrumb_sep {
-    margin: 0 2px;
-    color: #aab2ba;
-  }
-}
-
-// ----------------------------------- Sections & Panels
-// Helper class to apply to elements to make them sections
-.section, .panel{ @include section; }
-
-// ----------------------------------- Blank Slate
-
-.blank_slate_container {
-  clear: both;
-  text-align: center;
-  
-  .blank_slate {
-    @include rounded;
-    -webkit-font-smoothing: antialiased;
-    border: 1px dashed #DADADA;
-    color: #AAA;
-    display: inline-block;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 14px 25px;
-    text-align: center;
-    
-    small {
-      display: block;
-      font-size: 0.9em;
-      font-weight: normal;
-    }
-  }
-}
-
-.admin_dashboard .blank_slate_container .blank_slate {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.with_sidebar .blank_slate_container .blank_slate {
-  margin-top: 80px;
-}
-
-// ----------------------------------- Sidebar Sections 
-.sidebar_section { @include section; }
-
-// -------------------------------------- Pagination 
-.pagination_information { 
-  float: right;
-  margin-bottom: 5px;
-  font-size: 0.95em;
-  color: #b3bcc1;
-  b { color: #5c6469; }
-}
-
-.paginated_collection_contents { 
-  clear: both;
-}
-
-.pagination { 
-  display: inline; 
-  font-size: 0.9; 
-  margin-left: 10px; 
-
-  a { @include light-button; }
-  span.page.current { @include default-button; }
-  a, span.page.current { 
-    @include rounded(0px);
-    margin-right: 4px; 
-    padding: 2px 5px;
-  }
-  span.page.current { padding-left: 7px; }
-}
-
-// -------------------------------------- Index Footer (Under Table) 
-#index_footer { padding-top: 5px; text-align: right; font-size: 0.85em; }
-
-
-
-.index_content { clear: both; }
-
-// -------------------------------------- Index as Grid 
-table.index_grid td { border: none; background: none; padding: 0 20px 20px 0; margin: 0;}
-
-
-// -------------------------------------- Logged Out 
-body.logged_out {
-  background: #e8e9ea;
-
-  #content_wrapper{
-    width: 500px;
-    margin: 70px auto;
-    #active_admin_content {
-      @include shadow;
-      background: #fff;
-      padding: 13px 30px;
-    }
-  }
-
-  h2 {
-    @include section-header;
-    @include primary-gradient;
-    @include text-shadow(#000);
-    color: #fff;
-    margin: -13px -30px 20px -30px;
-  }
-
-  #login {
-    /* Login Form */
-    form {
-      fieldset {
-        @include no-shadow;
-        background: none;
-        padding: 0;
-        li { padding: 10px 0; }
-
-        input[type=text], input[type=email], input[type=password] {
-          width: 70%;
-        }
-        &.buttons { margin-left: 20%; }
-        margin-bottom: 0;
-      }
-    }
-
-    a { float: right; margin-top: -32px; }
-  }
-
-}
-
-// -------------------------------------- Dashboard 
-table.dashboard {
-  width: 100%; 
-  td { border-bottom: none; }
-  .dashboard_section { @include section; }
-}
-
-
-// -------------------------------------- Resource Attributes Table 
-.attributes_table { overflow: hidden; }
-
-.attributes_table table {
-  th, td {
-    padding: 8px $cell-horizontal-padding 6px $cell-horizontal-padding;
-    vertical-align: top;
-    border-bottom: 1px solid #e8e8e8; 
-  }
-  th {
-    @include no-shadow;
-    @include no-gradient;
-    width: 150px;
-    font-size: 0.9em;
-    padding-left: 0;
-    text-transform: uppercase;
-    color: $primary-color;
-    @include text-shadow;
-  }
-  td {
-    .empty {
-      color: #bbb;
-      font-size: 0.8em;
-      text-transform: uppercase;
-      letter-spacing: 0.2em;
-    }
-  }
-}
-
-.sidebar_section .attributes_table th { width: 50px; }
-
-
-// -------------------------------------- Status Tags
-.status {
-  background: darken($secondary-color, 15%);
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
-  padding: 3px 5px 2px 5px;
-  font-size: 0.8em;
-
-  &.ok, &.published, &.complete, &.completed, &.green { background: #8daa92; }
-  &.warn, &.warning, &.orange { background: #e29b20; }
-  &.error, &.errored, &.red { background: #d45f53; }
-
-
-}
-
-
-// -------------------------------------- Scopes
-.scopes {
-  float: left;
-  margin-bottom: 10px;
-  font-size: 1.0em;
-
-  .scope {
-    padding: 4px 8px 3px 8px;
-    margin-right: 4px;
-    a { text-decoration: none; font-weight: bold; color: #888; }
-    a:hover { text-decoration: underline; ; }
-    &.selected { 
-      @include rounded(5px);
-      @include inset-shadow(0,1px,0,#ccc);
-      @include text-shadow;
-      background: #efefef;
-      color: #666;
-      em { font-weight: bold; font-style: normal;  
-      }
-    }
-    .count{ color: #aaa; font-size: 0.9em; }
-  }
-  .scopes_seperator { display: none; }
-}
-
-// -------------------------------------- Columns
-.columns {
-  clear: both;
-  padding: 0;
-  .column { float: left; }
-}
+}