flattened_active_admin 0.0.2

data/app/assets/stylesheets/flattened_active_admin/components/_table_tools.css.scss

@@ -0,0 +1,64 @@
+.table_tools {
+  @include clearfix;
+  margin-bottom: 16px;
+}
+
+.table_tools .dropdown_menu {
+  float: left;
+}
+
+a.table_tools_button, .table_tools .dropdown_menu_button {
+  @include light-button;
+  @include border-colors(#d9d9d9, #d0d0d0, #c5c5c5);
+  font-size: 0.9em;
+  padding: 4px 14px 4px;
+  margin: 0;
+
+  &:not(.disabled) {
+    &:hover {
+      background: #FFF;
+    }
+
+    &:active {
+      @include border-colors(#d7d7d7, #c8c8c8, #c3c3c3);
+      box-shadow: 0 1px 1px 0 rgba(0,0,0,0.17) inset;
+      // @include gradient(#FFFFFF, #E8E8E8);
+    }
+  }
+}
+
+.table_tools_segmented_control {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    float: left;
+
+    a {
+      border-width: 1px .5px 1px .5px;
+      border-radius: 0;
+    }
+
+    &:first-child a {
+      border-left-width: 1px;
+      border-radius: 12px 0 0 12px;
+    }
+
+    &:last-child a {
+      border-right-width: 1px;
+      border-radius: 0 12px 12px 0;
+    }
+
+    &.selected a {
+      @include gradient(#F0F0F0, #FDFDFD);
+      box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
+      cursor: default;
+
+      &:hover {
+        @include gradient(#F0F0F0, #FDFDFD);
+      }
+    }
+
+  }
+}

data/app/assets/stylesheets/flattened_active_admin/components/_tables.css.scss

@@ -0,0 +1,110 @@
+//= depend_on_asset "active_admin/orderable.png"
+// ----------------------------------- Tables
+
+table tr {
+  td {
+    vertical-align: top;
+  }
+}
+
+// --------- Index Tables
+
+table.index_table {
+  width: 100%;
+  margin-bottom: 10px;
+  border: 0;
+  border-spacing: 0;
+
+  th {
+    @include section-header;
+    border-right: none;
+    text-align: left;
+    padding-left: $cell-horizontal-padding;
+    padding-right: $cell-horizontal-padding;
+
+    a, a:link, a:visited {
+      color: $section-header-text-color;
+      text-decoration: none;
+      display: block;
+      white-space: nowrap;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    &.sortable a {
+      background: image-url('active_admin/orderable.png') no-repeat 0 4px; padding-left: 13px;
+    }
+
+    &.sorted-asc a { background-position: 0 -27px; }
+    &.sorted-desc a {  background-position: 0 -56px;}
+
+    &.sorted-asc, &.sorted-desc {
+      background: $title-bar-background; // @include gradient(darken($secondary-gradient-start, 5%), darken($secondary-gradient-stop, 5%));
+    }
+
+    &:last-child {
+      border-right: solid 1px #d4d4d4;
+    }
+
+  }
+
+  tr.even td { background: $table-stripe-color; }
+
+  tr.selected td {
+    background: $table-selected-color;
+  }
+
+  td {
+    padding: 10px $cell-horizontal-padding 8px $cell-horizontal-padding;
+    border-bottom: 1px solid #e8e8e8;
+    vertical-align: top;
+  }
+}
+
+// --------- Tables inside Panels
+
+.panel_contents table {
+  margin-top: 5px;
+  th {
+    padding-top: 10px;
+    background: none;
+    color: $primary-color;
+    @include no-shadow;
+    text-transform: uppercase;
+    border-bottom: 1px solid #ccc;
+  }
+  tr.odd td { background: darken($table-stripe-color, 3%); }
+  tr.even td { background: $table-stripe-color; }
+}
+
+// -------------------------------------- Resource Attributes Table
+.attributes_table { overflow: hidden; }
+
+.attributes_table table {
+  col.even { background: $table-stripe-color; }
+  col.odd  { background: darken($table-stripe-color, 3%); }
+  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; }

data/app/assets/stylesheets/flattened_active_admin/mixins/_all.css.scss

@@ -0,0 +1,11 @@
+@import "flattened_active_admin/mixins/variables";
+@import "flattened_active_admin/mixins/reset";
+@import "flattened_active_admin/mixins/gradients";
+@import "flattened_active_admin/mixins/shadows";
+@import "flattened_active_admin/mixins/icons";
+@import "flattened_active_admin/mixins/rounded";
+@import "flattened_active_admin/mixins/buttons";
+@import "flattened_active_admin/mixins/sections";
+@import "flattened_active_admin/mixins/utilities";
+@import "flattened_active_admin/mixins/typography";
+@import "bourbon";

data/app/assets/stylesheets/flattened_active_admin/mixins/_buttons.css.scss

@@ -0,0 +1,64 @@
+@mixin basic-button {
+  @include rounded(200px);
+  display: inline-block;
+  font-weight: bold;
+  font-size: 1.0em;
+  @include sans-family;
+  line-height: 12px;
+  margin-right: 3px;
+  padding: 7px 16px 6px;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+}
+
+@mixin default-button {
+  @include basic-button;
+  background: $primary-color;
+  // @include text-shadow(#000);
+  // box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0px rgba(255,255,255, 0.2) inset;
+  border: solid 1px #686868;
+  color: #efefef;
+
+  &:not(.disabled) {
+    &:hover{
+      background: darken($primary-color, 10%)
+    }
+
+    &:active {
+      box-shadow: 0 1px 3px rgba(0,0,0,0.40) inset, 0 1px 0 0px #FFF;
+      @include gradient(lighten($primary-color, 8%), darken($primary-color, 17%));
+    }
+  }
+}
+
+@mixin light-button {
+  @include basic-button;
+  background: $action-button-default-background;
+  border: solid 1px #c7c7c7;
+  @include border-colors(#d3d3d3, #c7c7c7, #c2c2c2);
+  @include text-shadow;
+  color: $primary-color;
+
+  &:not(.disabled) {
+    &:hover {
+      background: $action-button-hover-background;
+    }
+
+    &:active {
+      box-shadow: 0 1px 2px rgba(0,0,0,0.22) inset, 0 1px 0 0px #EEE;
+      @include border-colors(#c2c2c2, #b9b9b9, #b7b7b7);
+      background: $action-button-active-background;
+    }
+  }
+
+}
+
+@mixin dark-button {
+  @include default-button;
+}

data/app/assets/stylesheets/flattened_active_admin/mixins/_gradients.css.scss

@@ -0,0 +1,47 @@
+$secondary-gradient-start: #efefef !default;
+$secondary-gradient-stop: #dfe1e2 !default;
+
+@mixin gradient($start, $end){
+  background: $start;
+  background: -webkit-linear-gradient(-90deg, $start, $end);
+  background: -moz-linear-gradient(-90deg, $start, $end);
+  background: linear-gradient(-90deg, $start, $end);
+  // IE 6 & 7
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($end)}');
+  // IE 8
+  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($end)}');
+}
+
+@mixin header-background-gradient {
+  background: $page-header-background-color;
+}
+
+@mixin title-bar-gradient {
+  background: $title-bar-background;
+}
+
+@mixin primary-gradient {
+  // background: $secondary-color;
+  @include gradient(lighten($primary-color, 5%), darken($primary-color, 7%));
+  border-bottom: 1px solid darken($primary-color, 11%);
+}
+
+// @mixin secondary-gradient {
+//   @include gradient($secondary-gradient-start, $secondary-gradient-stop);
+// }
+
+@mixin highlight-gradient {
+  @include gradient(#75a1c2, #608cb4);
+}
+
+@mixin reverse-highlight-gradient {
+  @include gradient(#608cb4, #75a1c2);
+}
+
+@mixin no-gradient {
+  background: none;
+  // IE 6 & 7
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  // IE 8
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
+}

data/app/assets/stylesheets/flattened_active_admin/mixins/_icons.css.scss

@@ -0,0 +1,20 @@
+span.icon { vertical-align: middle; display: inline-block; }
+span.icon svg { vertical-align: baseline; }
+
+
+@mixin icon-color ($color) {
+  span.icon svg {
+    path, polygon, rect, circle { fill: $color !important; }
+  }
+}
+
+@mixin icon-size ($size) {
+  span.icon { width: $size; height: $size; }
+}
+
+@mixin icon($color, $size) {
+  @include icon-color($color);
+  @include icon-size($size);
+}
+
+@include icon-size(0.8em);

data/app/assets/stylesheets/flattened_active_admin/mixins/_reset.css.scss

@@ -0,0 +1,165 @@
+// FROM The Compass Framework (compass-style.org)
+//
+// Copyright (c) 2009 Christopher M. Eppstein
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software. No attribution is required by
+// products that make use of this software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+// Except as contained in this notice, the name(s) of the above copyright holders
+// shall not be used in advertising or otherwise to promote the sale, use or other
+// dealings in this Software without prior written authorization.
+//
+// Contributors to this project agree to grant all rights to the copyright holder
+// of the primary product. Attribution is maintained in the source control history
+// of the product.
+//
+// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+//
+// *Please Note*: tables still need `cellspacing="0"` in the markup.
+@mixin global-reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, font, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td {
+    @include reset-box-model;
+    @include reset-font; }
+  body {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset all elements within some selector scope. To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+//
+// *Please Note*: tables still need `cellspacing="0"` in the markup.
+@mixin nested-reset {
+  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  pre, a, abbr, acronym, address, code, del, dfn, em, img,
+  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
+    @include reset-box-model;
+    @include reset-font; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset the box model measurements.
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0; }
+
+// Reset the font and vertical alignment.
+@mixin reset-font {
+  font: {
+    weight: inherit;
+    style: inherit;
+    size: 100%;
+    family: inherit; };
+  vertical-align: baseline; }
+
+// Resets the outline when focus.
+// For accessibility you need to apply some styling in its place.
+@mixin reset-focus {
+  outline: 0; }
+
+// Reset a body element.
+@mixin reset-body {
+  line-height: 1;
+  color: black;
+  background: white; }
+
+// Reset the list style of an element.
+@mixin reset-list-style {
+  list-style: none; }
+
+// Reset a table
+@mixin reset-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle; }
+
+// Reset a table cell (`th`, `td`)
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+// Reset a quotation (`q`, `blockquote`)
+@mixin reset-quotation {
+  quotes: "" "";
+  &:before, &:after {
+    content: ""; } }
+
+// Resets the border.
+@mixin reset-image-anchor-border {
+  border: none; }
+
+// Unrecognized elements are displayed inline.
+// This reset provides a basic reset for html5 elements
+// so they are rendered correctly in browsers that don't recognize them
+// and reset in browsers that have default styles for them.
+@mixin reset-html5 {
+  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+    @include reset-box-model;
+    display: block; } }
+
+// Resets the display of inline and block elements to their default display
+// according to their tag type. Elements that have a default display that varies across
+// versions of html or browser are not handled here, but this covers the 90% use case.
+// Usage Example:
+//
+//     // Turn off the display for both of these classes
+//     .unregistered-only, .registered-only
+//       display: none
+//     // Now turn only one of them back on depending on some other context.
+//     body.registered
+//       +reset-display(".registered-only")
+//     body.unregistered
+//       +reset-display(".unregistered-only")
+@mixin reset-display($selector: "", $important: false) {
+  #{append-selector(elements-of-type("inline"), $selector)} {
+    @if $important {
+      display: inline !important; }
+    @else {
+      display: inline; } }
+  #{append-selector(elements-of-type("block"), $selector)} {
+    @if $important {
+      display: block !important; }
+    @else {
+      display: block; } } }

data/app/assets/stylesheets/flattened_active_admin/mixins/_rounded.css.scss

@@ -0,0 +1,43 @@
+@mixin rounded($radius: 3px) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin rounded-all($top-left:3px, $top-right:3px, $bottom-right:3px, $bottom-left:3px) {
+  border-top-right-radius: $top-right;
+  -moz-border-radius-topright: $top-right;
+  -webkit-border-top-right-radius: $top-right;
+
+  border-top-left-radius: $top-left;
+  -moz-border-radius-topleft: $top-left;
+  -webkit-border-top-left-radius: $top-left;
+
+  border-bottom-right-radius: $bottom-right;
+  -moz-border-radius-bottomright: $bottom-right;
+  -webkit-border-bottom-right-radius: $bottom-right;
+
+  border-bottom-left-radius: $bottom-left;
+  -moz-border-radius-bottomleft: $bottom-left;
+  -webkit-border-bottom-left-radius: $bottom-left;
+}
+
+@mixin rounded-top($radius: 3px) {
+  @include rounded(0);
+  border-top-right-radius: $radius;
+  border-top-left-radius: $radius;
+  -moz-border-radius-topright: $radius;
+  -moz-border-radius-topleft: $radius;
+  -webkit-border-top-right-radius: $radius;
+  -webkit-border-top-left-radius: $radius;
+}
+
+@mixin rounded-bottom($radius: 3px) {
+  @include rounded(0);
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+  -moz-border-radius-bottomright: $radius;
+  -moz-border-radius-bottomleft: $radius;
+  -webkit-border-bottom-right-radius: $radius;
+  -webkit-border-bottom-left-radius: $radius;
+}

data/app/assets/stylesheets/flattened_active_admin/mixins/_sections.css.scss

@@ -0,0 +1,31 @@
+@mixin section-header {
+  border-left: solid 1px #cdcdcd;
+  background: $title-bar-background;
+  font-size: 1.0em;
+  font-weight: bold;
+  line-height: 18px;
+  margin-bottom: 0.5em;
+  color: $section-header-text-color;
+  @include icon($section-header-text-color, 1.0em);
+
+  padding: 5px 10px 3px 10px;
+}
+
+@mixin section-background {
+  background: #fafafa;
+  @include rounded(4px);
+}
+
+@mixin section {
+  @include section-background;
+  margin-bottom: 20px;
+
+  > h3 { @include section-header; }
+
+  > div { padding: 3px $section-padding $section-padding $section-padding; }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid #E8E8E8;
+  }
+}

data/app/assets/stylesheets/flattened_active_admin/mixins/_shadows.css.scss

@@ -0,0 +1,22 @@
+@mixin shadow($x: 0, $y: 1px, $blur: 2px, $color: rgba(0,0,0,0.37)) {
+  box-shadow: $x $y $blur $color;
+  -moz-box-shadow: $x $y $blur $color;
+  -webkit-box-shadow: $x $y $blur $color;
+}
+
+@mixin no-shadow {
+  box-shadow: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
+@mixin inset-shadow($x: 0, $y: 1px, $blur: 2px, $color: #aaa) {
+  box-shadow: inset $x $y $blur $color;
+  -moz-box-shadow: inset $x $y $blur $color;
+  -webkit-box-shadow: inset $x $y $blur $color;
+}
+
+@mixin text-shadow($color: #fff, $x: 0, $y: 1px, $blur: 0) {
+  text-shadow: $color $x $y $blur;
+}
+

data/app/assets/stylesheets/flattened_active_admin/mixins/_typography.scss

@@ -0,0 +1,3 @@
+@mixin sans-family {
+  font-family: Helvetica, Arial, sans-serif;
+}

data/app/assets/stylesheets/flattened_active_admin/mixins/_utilities.scss

@@ -0,0 +1,26 @@
+@mixin clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    content: "";
+    clear: both;
+    height: 0;
+  }
+}
+
+@mixin box-sizing($value: border-box) {
+  -moz-box-sizing: $value;
+  -webkit-box-sizing: $value;
+  -o-box-sizing: $value;
+  -ms-box-sizing: $value;
+  box-sizing: $value;
+}
+
+
+@mixin border-colors($top, $sides, $bottom) {
+  border-color: $sides;
+  border-top-color: $top;
+  border-right-color: $sides;
+  border-bottom-color: $bottom;
+  border-left-color: $sides;
+}

data/app/assets/stylesheets/flattened_active_admin/mixins/_variables.css.scss

@@ -0,0 +1,45 @@
+// Variables used throughout Active Admin.
+// They can be overridden by your own
+
+// Colors
+$body-background-color: #FFF !default;
+$title-bar-background: #efefef !default;
+$primary-color: #5E6469 !default;
+$secondary-color: #f0f0f0 !default;
+$current-menu-item-background: lighten($primary-color, 12%) !default;
+$hover-menu-item-background: lighten($primary-color, 12%) !default;
+$table-stripe-color: lighten($primary-color, 57%) !default;
+$table-selected-color: #d9e4ec !default;
+$error-color: #932419 !default;
+$blank-slate-primary-color: #AAA !default;
+$breadcrumbs-color: #8a949e !default;
+$breadcrumbs-separator-color: #aab2ba !default;
+$required-field-marker-color: #aaa !default;
+$page-header-background-color: #5E6469 !default;
+
+// Text
+$text-color: #323537 !default;
+$link-color: #38678b !default;
+$header-dropdown-menu-text-color: #cdcdcd !default;
+$section-header-text-color: $primary-color !default;
+$page-header-text-color: #cdcdcd !default;
+$form-label-color: $section-header-text-color !default;
+
+
+
+// // Buttons
+$action-button-default-background: #fbfbfb !default;
+$action-button-hover-background: #FFF !default;
+$action-button-active-background: #fafafa !default;
+
+// Sizes
+$border-width: 1px !default;
+$horizontal-page-margin: 30px !default;
+$sidebar-width: 270px !default;
+$cell-padding: 5px 10px 3px 10px !default;
+$cell-horizontal-padding: 12px !default;
+$section-padding: 15px !default;
+$text-input-horizontal-padding: 10px !default;
+$text-input-total-padding: $text-input-horizontal-padding * 2 + $border-width * 2;
+
+$blank-slate-border: 1px dashed #DADADA !default;