face_of_active_admin 0.0.1

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

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

@@ -0,0 +1,22 @@
+@mixin select_arrow {
+  background-image: none;
+  apperance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  // arrow type 1
+  // background: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(45deg, transparent 50%, lighten($skinActiveColor, 20%) 50%), linear-gradient(135deg, lighten($skinActiveColor, 20%) 50%, transparent 50%), linear-gradient(to right, $main-background-color, $main-background-color);
+  // background-position: calc(100% - 14px) calc(1em - 3px), calc(100% - 7px) calc(1em - 3px), calc(100% - 14px) calc(1em - 3px), calc(100% - 4px) calc(1em - 3px), 100% 0;
+  // background-size: 7px 7px, 7px 7px, 10px 10px, 10px 10px, 9999px 9999px;
+
+  //arrow type 2
+  // background: linear-gradient(135deg, transparent 50%, $main-background-color 50%), linear-gradient(135deg, transparent 50%, lighten($skinActiveColor, 20%) 50%), linear-gradient(225deg, transparent 50%, $main-background-color 50%), linear-gradient(225deg, transparent 50%, lighten($skinActiveColor, 20%) 50%), linear-gradient(to right, $main-background-color, $main-background-color);
+  // background-position: calc(100% - 9px) calc(1em - 2px), calc(100% - 10px) calc(1em - 5px), calc(100% - 22px) calc(1em - 2px), calc(100% - 19px) calc(1em - 5px), 100% 0;
+  // background-size: 10px 10px,12px 12px,10px 10px,12px 12px, 9999px 9999px;
+  background: linear-gradient(to right, lighten($skinActiveColor, 20%), lighten($skinActiveColor, 20%)), linear-gradient(to right, lighten($skinActiveColor, 20%), lighten($skinActiveColor, 20%)), linear-gradient(to right, lighten($skinActiveColor, 20%), lighten($skinActiveColor, 20%)), linear-gradient(to right, $main-background-color, $main-background-color);
+  background-position: calc(100% - 10px) calc(.5em), calc(100% - 10px) calc(1em), calc(100% - 10px) calc(1.5em), 100% 0;
+  background-size: 20px 4px,20px 4px,20px 4px,9999px 9999px;
+
+  // background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="SVG  namespace" version="1.1" width="270px" height="240px"><polygon points="5 235 135 10 265 235" fill="%23f00"/></svg>');
+  background-repeat: no-repeat;
+}

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

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

@@ -0,0 +1,17 @@
+@mixin clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    content: "";
+    clear: both;
+    height: 0;
+  }
+}
+
+@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/face_of_active_admin/mixins/_variables.scss

@@ -0,0 +1,69 @@
+// Variables used throughout Active Admin.
+// They can be overridden by your own
+
+// Height priority settings
+$skinTextColor: #1e2a33 !default;
+$skinTextActiveColor: #fff !default;
+$skinTextTable: #7f8c8d !default;
+$skinActiveColor: #DC3D24 !default;
+$skinHeaderBck: #232B2B !default;
+$skinHeaderTextColor: #FFFFFF !default;
+$skinFontFamily: "Source Sans Pro", Helvetica, Arial, sans-serif !default;
+$panelHeaderBck: darken($skinHeaderBck, 10%) !default;
+$panelHeaderTextColor: #FFFFFF !default;
+$skinLogo: url("face_of_active_admin/logo.jpg") no-repeat 0 0 !default;
+$skinLogoWidth: auto !default;
+
+// Low priority settings
+// Colors
+$body-background-color: #ecf0f1 !default;
+$main-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: $secondary-color !default;
+$table-selected-color: lighten($skinActiveColor, 35%) !default;
+$error-color: #932419 !default;
+$blank-slate-primary-color: #7f8c8d !default;
+$breadcrumbs-color: #8a949e !default;
+$breadcrumbs-separator-color: #aab2ba !default;
+$required-field-marker-color: #aaa !default;
+$page-header-background-color: #ecf0f1 !default;
+$table-header-color: lighten($skinHeaderBck, 70%) !default;
+
+// Text
+$default-font: "Helvetica Neue" !default;
+$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;
+$action-button-default-text: $primary-color !default;
+$action-button-hover-text: $primary-color !default;
+$action-button-active-text: $primary-color !default;
+$link_transition_dutarion: 0.3s !default;
+
+// Sizes
+$title-bar-font-weight: bold !default;
+$border-width: 1px !default;
+$horizontal-page-padding: 30px !default;
+$horizontal-page-header-padding: 15px !default;
+$logo-width: 100px !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;
+
+@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&subset=latin,latin-ext);

data/app/assets/stylesheets/face_of_active_admin/pages/_logged_out.scss

@@ -0,0 +1,96 @@
+body.logged_out {
+  background: #e8e9ea;
+  height: 100%;
+
+  #footer {
+    display: none;
+  }
+
+  #content_wrapper {
+    width: 500px;
+    margin: 150px auto;
+
+    #active_admin_content {
+      @include shadow;
+
+      background: #fff;
+      padding: 13px 30px;
+      padding-bottom: 0;
+    }
+  }
+
+  h2 {
+    @include section-header;
+
+    @include primary-gradient;
+
+    @include text-shadow(#000);
+
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: none;
+    color: #fff;
+    margin: -13px -30px 20px -30px;
+  }
+
+  #login {
+    /* Login Form */
+    form {
+      fieldset {
+        border: none;
+
+        @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;
+      }
+    }
+
+    > h2 {
+      background: $panelHeaderBck;
+      font-family: $skinFontFamily;
+      color: #fff;
+
+      @include no-shadow;
+
+      @include rounded(0);
+
+      padding: 8px 15px;
+    }
+
+    fieldset.actions {
+      background: #f1f5f6;
+      margin: 0 -30px -17px;
+      padding: 6px 30px;
+    }
+
+    a {
+      float: right;
+      margin-top: -25px;
+    }
+  }
+
+  .flash {
+    background: #F2ECBF;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 15px;
+    border-bottom: 1px solid #DEDE8B;
+    text-shadow: none;
+  }
+}

data/app/assets/stylesheets/face_of_active_admin/print.scss

@@ -0,0 +1,283 @@
+/* Active Admin Print Stylesheet */
+
+// Set colors used elsewhere
+$primary-color: black;
+$text-color: black;
+
+// Reset
+@import "flattened_active_admin/mixins/reset";
+
+@include global-reset;
+
+// Partials
+@import "flattened_active_admin/typography";
+
+body {
+  font-family: $default-font, Helvetica, Arial, sans-serif;
+  line-height: 150%;
+  font-size: 72%;
+  background: #fff;
+  width: 99%;
+  margin: 0;
+  padding: .5%;
+  color: $text-color;
+}
+
+a {
+  color: $text-color;
+  text-decoration: none;
+}
+
+h3 {
+  font-weight: bold;
+  margin-bottom: .5em;
+}
+
+// Header
+#header {
+  float: left;
+
+  #tabs, .tabs, #utility_nav {
+    display: none;
+  }
+
+  h1 {
+    font-weight: bold;
+  }
+}
+
+.flashes {
+  display: none;
+}
+
+#title_bar {
+  float: right;
+
+  h2 {
+    line-height: 2em;
+    margin: 0;
+  }
+
+  .breadcrumb, #titlebar_right {
+    display: none;
+  }
+}
+
+// Content
+#active_admin_content {
+  border-top: thick solid black;
+  clear: both;
+  margin-top: 2em;
+  padding-top: 3em;
+}
+
+// Footer
+#footer {
+  display: none;
+}
+
+// Tables
+.table_tools {
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+
+    li {
+      display: none;
+      padding: 0;
+      margin-bottom: 1em;
+
+      &.scope.selected, &.index.selected {
+        display: block;
+
+        &:before {
+          content: "Showing ";
+        }
+
+        a {
+          font-weight: bold;
+        }
+
+        span {
+          display: inline-block;
+          font-weight: normal;
+          font-size: .9em;
+        }
+      }
+    }
+  }
+}
+
+table {
+  margin-bottom: 1.5em;
+  text-align: left;
+  width: 100%;
+
+  thead {
+    display: table-header-group;
+
+    th {
+      background: none;
+      border-bottom: medium solid black;
+      font-weight: bold;
+
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+
+  th, td {
+    padding: .5em 1em;
+
+    .member_link {
+      display: none;
+    }
+  }
+
+  td {
+    border-bottom: thin solid black;
+  }
+
+  tr {
+    page-break-inside: avoid;
+  }
+}
+
+// Index
+#index_footer, .pagination_information {
+  display: none;
+}
+
+.index_grid {
+  td {
+    border: none;
+    text-align: center;
+    vertical-align: middle;
+
+    img {
+      max-width: 1in;
+    }
+  }
+}
+
+// Show
+.panel {
+  border-bottom: thick solid #ccc;
+  margin-bottom: 3em;
+  padding-bottom: 2em;
+  page-break-inside: avoid;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.comments {
+  form {
+    display: none;
+  }
+
+  .active_admin_comment {
+    border-top: thin solid black;
+    padding-top: 1em;
+
+    .active_admin_comment_meta {
+      h4 {
+        font-size: 1em;
+        font-weight: bold;
+        float: left;
+        margin-right: .5em;
+        margin-bottom: 0;
+      }
+
+      span {
+        font-size: .9em;
+        font-style: italic;
+        vertical-align: top;
+      }
+    }
+
+    .active_admin_comment_body {
+      clear: both;
+      margin-bottom: 1em;
+    }
+  }
+}
+
+// Attribute Tables
+.attributes_table {
+  border-top: medium solid black;
+
+  th {
+    border-bottom: thin solid black;
+    vertical-align: top;
+
+    &:after {
+      content: ':';
+    }
+  }
+
+  td {
+    img {
+      max-height: 4in;
+      max-width: 6in;
+    }
+  }
+}
+
+// Sidebars
+#filters_sidebar_section {
+  display: none;
+}
+
+// Forms
+form {
+  fieldset {
+    border-top: thick solid #ccc;
+    padding-top: 2em;
+    margin-bottom: 2em;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .buttons, abbr {
+    display: none;
+  }
+
+  ol {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      border-top: thin solid black;
+      margin: 0;
+      padding: 1em 0;
+      overflow: hidden;
+
+      &.password, &.hidden {
+        display: none;
+      }
+
+      label {
+        font-weight: bold;
+        float: left;
+        width: 20%;
+      }
+
+      input, textarea, select {
+        background: none;
+        border: 0;
+        font: Arial, Helvetica, sans-serif;
+      }
+
+      input[type=file] {
+        display: none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/face_of_active_admin/structure/_footer.scss

@@ -0,0 +1,28 @@
+#footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 15px 30px;
+  font-size: 0.8em;
+  color: $skinTextTable;
+  border-top: 1px solid #d3d8dc;
+  clear: both;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// -------------------------------------- Index Footer (Under Table)
+#index_footer {
+  padding-top: 5px;
+  text-align: right;
+  font-size: 0.85em;
+}
+
+.index_content {
+  clear: both;
+}

data/app/assets/stylesheets/face_of_active_admin/structure/_main_structure.scss

@@ -0,0 +1,86 @@
+#wrapper {
+  width: 100%;
+}
+
+.index #wrapper {
+  display: table;
+}
+
+#active_admin_content {
+  @include clearfix;
+
+  margin: 0;
+  padding: $horizontal-page-padding;
+
+  #main_content_wrapper {
+    float: left;
+    width: 100%;
+
+    #main_content {
+      margin-right: 300px;
+
+      table {
+        th {
+          background: $table-header-color;
+        }
+      }
+    }
+  }
+
+  &.without_sidebar #main_content_wrapper #main_content {
+    margin-right: 0;
+  }
+
+  #sidebar {
+    float: left;
+    width: $sidebar-width;
+    margin-left: -$sidebar-width;
+  }
+
+  .table_tools {
+    height: 30px;
+  }
+
+  a.table_tools_button, .table_tools .dropdown_menu_button {
+    @include rounded(0);
+
+    @include no-shadow;
+
+    transition: $link_transition_dutarion;
+    color: $skinTextColor;
+    background: #fff;
+    padding: 7px 15px;
+    font-weight: normal;
+    text-shadow: none;
+  }
+
+  .table_tools_segmented_control li {
+    a {
+      @include rounded(0);
+
+      @include no-shadow;
+
+      color: $skinTextColor;
+      background: #fff;
+      padding: 7px 15px;
+      font-weight: normal;
+      text-shadow: none;
+      border-color: #d3d8dc;
+
+      span.count {
+        color: $skinActiveColor;
+      }
+    }
+
+    &.selected {
+      a {
+        color: #fff;
+        background-color: $skinActiveColor;
+
+        span.count {
+          color: #fff;
+        }
+      }
+    }
+  }
+}