face_of_active_admin 0.0.1

data/app/assets/stylesheets/face_of_active_admin/components/_tables.scss

@@ -0,0 +1,305 @@
+// ----------------------------------- Tables
+
+table tr {
+  td {
+    vertical-align: top;
+  }
+}
+
+// --------- Index Tables
+
+table.index_table {
+  width: 100%;
+  margin-bottom: 10px;
+  border: 1px solid #d3d8dc;
+  border-spacing: 0;
+  background: #fff;
+
+  th {
+    @include section-header;
+
+    text-align: left;
+    background: #f1f5f6;
+    border: 1px #d3d8dc;
+    border-style: none solid solid none;
+    padding: 7px 10px;
+
+    @include no-shadow;
+
+    color: $skinTextColor;
+
+    a, a:link, a:visited {
+      color: $skinTextColor;
+      text-decoration: none;
+      display: block;
+      white-space: nowrap;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    &.sortable a {
+      position: relative;
+      padding-left: 20px;
+
+      &:before {
+        color: lighten($skinActiveColor, 10%);
+
+        @extend .fa;
+
+        @extend .fa-sort;
+
+        background: none;
+        position: absolute;
+        left: 5px;
+        top: 5px;
+      }
+    }
+
+    &.sorted-asc a {
+      position: relative;
+      padding-left: 20px;
+
+      &:before {
+        font-size: 1.5em;
+        color: lighten($skinActiveColor, 10%);
+
+        @extend .fa;
+
+        @extend .fa-sort-amount-asc;
+
+        background: none;
+        position: absolute;
+        left: -5px;
+        top: -3px;
+      }
+    }
+
+    &.sorted-desc a {
+      position: relative;
+      padding-left: 20px;
+
+      &:before {
+        color: lighten($skinActiveColor, 10%);
+        font-size: 1.5em;
+
+        @extend .fa;
+
+        @extend .fa-sort-amount-desc;
+
+        background: none;
+        position: absolute;
+        left: -5px;
+        top: -3px;
+      }
+    }
+
+    &.sorted-asc, &.sorted-desc {
+      background: $title-bar-background;
+
+      // @include gradient(darken($secondary-gradient-start, 5%), darken($secondary-gradient-stop, 5%));
+   
+    }
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  tr.even td {
+    background: $table-stripe-color;
+  }
+
+  tr:hover td {
+    background-color: $table-selected-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;
+    color: $skinTextTable;
+
+    a, a:link, a:visited {
+      color: $skinTextTable;
+      display: inline-block;
+      padding: 2px 3px;
+      margin: (-2px) 0;
+      transition: $link_transition_dutarion;
+
+      &:hover {
+        color: #fff;
+        background: lighten($skinActiveColor, 10%);
+      }
+    }
+
+    a.delete_link {
+      &:hover {
+        background: darken($skinActiveColor, 10%);
+      }
+    }
+  }
+}
+
+// --------- 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-weight: normal;
+    font-size: 1.2em;
+    padding: 10px 0 10px 10px;
+    font-family: $skinFontFamily;
+    text-transform: uppercase;
+    color: $primary-color;
+
+    @include text-shadow;
+  }
+
+  td {
+    padding: 10px 0 10px 10px;
+    font-family: $skinFontFamily;
+    color: $primary-color;
+
+    .empty {
+      color: #bbb;
+      font-size: 0.8em;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+    }
+
+    &:first-child {
+      width: 25%;
+    }
+  }
+}
+
+.sidebar_section .attributes_table th {
+  width: 50px;
+}
+
+//-----------------------default table styling
+
+table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+  border: 1px solid lighten($primary-color, 35%);
+
+  // Cells
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: 6px;
+        line-height: 1.5;
+        vertical-align: top;
+
+        //  border: 1px solid lighten( $primary-color, 35%);
+     
+      }
+    }
+  }
+
+  // Bottom align for column headings
+  > thead > tr {
+    > th {
+      vertical-align: bottom;
+      border-bottom: 2px solid lighten($primary-color, 35%);
+    }
+
+    > th,
+    > td {
+      border-bottom-width: 2px;
+    }
+  }
+
+  > tbody > tr:hover {
+    background-color: $table-selected-color;
+  }
+
+  // Remove top border from thead by default
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+
+  // Account for multiple tbody instances
+  > tbody + tbody {
+    border-top: 2px solid lighten($primary-color, 35%);
+  }
+
+  // Nesting
+  .table {
+    background-color: $main-background-color;
+  }
+}
+
+.table_actions {
+  text-align: center;
+
+  a.member_link {
+    text-decoration: none;
+
+    &:before {
+      font-size: 1.5em;
+      padding: 5px;
+    }
+  }
+}

data/app/assets/stylesheets/face_of_active_admin/mixins/_all.scss

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

data/app/assets/stylesheets/face_of_active_admin/mixins/_buttons.scss

@@ -0,0 +1,71 @@
+@mixin basic-button {
+  @include rounded(0);
+
+  display: inline-block;
+  font-weight: bold;
+  font-size: 1.0em;
+  font-family: $skinFontFamily;
+  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.4) 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;
+
+  @include border-colors(#d3d3d3, #c7c7c7, #c2c2c2);
+
+  color: $action-button-default-text;
+
+  &:not(.disabled) {
+    &:hover {
+      background: $action-button-hover-background;
+      color: $action-button-hover-text;
+    }
+
+    &: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;
+      color: $action-button-active-text;
+    }
+  }
+}
+
+@mixin dark-button {
+  @include default-button;
+}

data/app/assets/stylesheets/face_of_active_admin/mixins/_gradients.scss

@@ -0,0 +1,52 @@
+$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/face_of_active_admin/mixins/_icons.scss

@@ -0,0 +1,31 @@
+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/face_of_active_admin/mixins/_reset.scss

@@ -0,0 +1,214 @@
+// 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;
+    }
+  }
+}