More scss options

Author: Mattia Roccoberton

README.md

@@ -6,7 +6,7 @@ Features:
 
 - clean UI
 - compact nested forms
-- [customizable](#customize)
+- [customizable](#customize): colors, sidebar position, compact title bar, scroll on cells
 - custom boolean input: [toggle](#toggle)
 - Blaze CSS [widgets](#blaze-widgets)
 
@@ -54,6 +54,28 @@ $height-inputs: 28px;
 $text-shadow: #000;
 ```
 
+- To move sidebar on the left add to your ActiveAdmin styles (after blaze theme import):
+
+```css
+#active_admin_content.with_sidebar {
+  @extend .sidebar_left;
+}
+```
+
+- More options:
+
+```css
+// compact title bar
+#title_bar {
+  @extend .compact_titlebar;
+}
+
+// scrollable table cells
+.index_content table {
+  @extend .scoll_cells;
+}
+```
+
 ## Custom fields
 
 ### Toggle

app/assets/stylesheets/activeadmin_blaze_theme/theme.scss

@@ -34,6 +34,41 @@ body.active_admin {
     box-shadow: initial;
     text-shadow: $text-shadow 0 1px 0;
   }
+  .compact_titlebar {
+    padding-top: 0;
+    padding-bottom: 0;
+    .breadcrumb {
+      float: left;
+      font-size: 1em;
+      line-height: initial;
+      margin: 0;
+      padding: 0;
+    }
+    #page_title {
+      font-size: 2em;
+    }
+    #titlebar_left, #titlebar_right {
+      height: 36px;
+    }
+  }
+  .sidebar_left {
+    #main_content_wrapper {
+      float: right;
+      width: calc( 100% - 300px );
+      #main_content {
+        margin-right: 0;
+      }
+    }
+    #sidebar {
+      margin-left: 0;
+    }
+  }
+  table.scoll_cells {
+    th, td {
+      max-width: 200px;
+      overflow: scroll;
+    }
+  }
 
   // forms
   form {
@@ -297,6 +332,12 @@ body.active_admin {
     }
     .site_title {
       color: $fg-menu-items;
+      img {
+        max-height: 36px;
+        max-width: 250px;
+        top: -1px;
+        vertical-align: middle;
+      }
     }
     ul.tabs {
       li > a {
@@ -463,40 +504,57 @@ body.active_admin {
     }
   }
   .index_table {
-    @extend .c-table;
-    // @extend .c-table--striped;
-    // @extend .c-table--condensed;
-    > thead {
-      @extend .c-table__head;
-      > tr {
-        @extend .c-table__row;
-        @extend .c-table__row--heading;
-        > th {
-          @extend .c-table__cell;
-          margin-bottom: 0;
-          &.col-selectable > div {
-            margin-left: auto;
-            margin-right: auto;
-          }
-        }
-      }
+    th {
+      background-image: none;
+      background-color: #eee;
+      border: 0 none;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px #fff inset;
     }
-    > tbody {
-      @extend .c-table__body;
+    tbody > tr > td:first-child {
       border-left: 1px solid $fg-table-borders;
+    }
+    tbody > tr > td {
       border-right: 1px solid $fg-table-borders;
-      > tr {
-        @extend .c-table__row;
-        > td {
-          @extend .c-table__cell;
-          &.col-selectable > div {
-            margin-left: auto;
-            margin-right: auto;
-          }
-        }
-      }
+    }
+    .col.col-selectable > div {
+      text-align: center;
     }
   }
+  // .index_table {
+  //   @extend .c-table;
+  //   // @extend .c-table--striped;
+  //   // @extend .c-table--condensed;
+  //   > thead {
+  //     @extend .c-table__head;
+  //     > tr {
+  //       @extend .c-table__row;
+  //       @extend .c-table__row--heading;
+  //       > th {
+  //         @extend .c-table__cell;
+  //         margin-bottom: 0;
+  //         &.col-selectable > div {
+  //           margin-left: auto;
+  //           margin-right: auto;
+  //         }
+  //       }
+  //     }
+  //   }
+  //   > tbody {
+  //     @extend .c-table__body;
+  //     border-left: 1px solid $fg-table-borders;
+  //     border-right: 1px solid $fg-table-borders;
+  //     > tr {
+  //       @extend .c-table__row;
+  //       > td {
+  //         @extend .c-table__cell;
+  //         &.col-selectable > div {
+  //           margin-left: auto;
+  //           margin-right: auto;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
   .panel_contents table tr:last-child {
     > td, > th {
       border-bottom: 0 none;
@@ -505,6 +563,7 @@ body.active_admin {
 
   // title bar
   #title_bar {
+    background-image: none;
     .action_items span.action_item {
       > a,
       > .dropdown_menu > a {
@@ -580,4 +639,8 @@ body.active_admin {
       }
     }
   }
+  // textarea comments
+  #active_admin_comment_body {
+    width: 100%;
+  }
 }

lib/activeadmin_blaze_theme/version.rb

@@ -1,3 +1,3 @@
 module ActiveAdminBlazeTheme
-  VERSION = "0.2.2"
+  VERSION = '0.2.4'
 end