active_admin_face 0.0.9

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

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

data/app/assets/stylesheets/active_admin_face/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/active_admin_face/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/active_admin_face/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/active_admin_face/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;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_face/mixins/_rounded.scss

@@ -0,0 +1,42 @@
+@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/active_admin_face/mixins/_sections.scss

@@ -0,0 +1,38 @@
+@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, 1em);
+
+  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;
+  }
+}