active_admin_face 0.0.9

data/app/assets/stylesheets/active_admin_face/_header.scss

@@ -0,0 +1,283 @@
+// ----------------------------------- Header
+#header {
+  @include header-background-gradient;
+
+  background: $page-header-background-color;
+  height: 50px;
+  width: 100%;
+  position: inherit;
+  padding: 0;
+  z-index: 900;
+  border: none;
+  text-shadow: none;
+
+  // overflow: visible;
+  // display: table;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: no-wrap;
+  align-content: center;
+
+  h1 {
+    vertical-align: middle;
+    white-space: nowrap;
+    color: $page-header-text-color;
+    margin-right: 5px;
+    margin-bottom: 0px;
+    padding: 3px $horizontal-page-header-padding 0 $horizontal-page-header-padding;
+    font-size: 1.3em;
+    font-weight: normal;
+    line-height: 1.2;
+
+    //flex-basis: 160px;
+    align-self: stretch;
+
+    &.site_title {
+      background-color: $main-background-color;
+      background: $skinLogo;
+      padding-left: $logo-width;
+      color: $skinTextColor;
+      text-indent: -9999px;
+      width: $skinLogoWidth;
+    }
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        color: darken($skinTextColor, 15%);
+      }
+    }
+
+    img {
+      display: inline-block;
+      position: relative;
+
+      //top: -2px;
+   
+    }
+  }
+
+  a, a:link {
+    color: $skinTextColor;
+  }
+
+  .header-item {
+    top: 2px;
+    position: relative;
+    height: 20px;
+  }
+
+  ul.tabs {
+    display: flex;
+    align-items: center;
+    align-content: stretch;
+    justify-content: flex-start;
+    flex-flow: row wrap;
+    align-content: center;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    > li a {
+      font-size: 1.1em;
+    }
+
+    & > li {
+      display: inline-block;
+      margin-right: 2px;
+      margin-top: 3px;
+      margin-bottom: 3px;
+      position: relative;
+
+      a {
+        text-decoration: none;
+        padding: 13px 20px;
+        margin: 0;
+        position: relative;
+
+        @include rounded(10px);
+
+        transition: $link_transition_dutarion;
+      }
+
+      &.has_nested > a {
+        //TODO !!!
+        //background-position: 93% 50%;
+        background-color: $skinActiveColor;
+
+        //background: image-url('active_admin/nested_menu_arrow.gif') no-repeat calc(100% - 7px) 50%;
+        padding-right: 20px;
+      }
+
+      &.has_nested.current > a {
+        //background: $current-menu-item-background image-url('active_admin/nested_menu_arrow_dark.gif') no-repeat calc(100% - 7px) 50%;
+        padding-right: 20px;
+      }
+
+      &:hover > a {
+        color: $skinTextActiveColor;
+        background: darken($skinActiveColor, 10%);
+
+        @include rounded(0);
+
+        margin: (-10px) 0;
+      }
+
+      &.current > a {
+        color: $skinTextActiveColor;
+        background: $skinActiveColor;
+
+        @include rounded(0);
+
+        margin: (-10px) 0;
+      }
+
+      &.has_nested:hover > a {
+        // TODO!!
+        @include rounded-top(10px);
+
+        //border-bottom: 5px solid lighten($current-menu-item-background, 10%);
+        border: none;
+
+        //background: lighten($current-menu-item-background, 10%) image-url('active_admin/nested_menu_arrow_dark.gif') no-repeat calc(100% - 7px) 50%;
+
+        z-index: 1020;
+      }
+
+      /* Hover on li, display the ul */
+      &:hover ul {
+        display: block;
+      }
+
+      /* Drop down menus */
+      ul {
+        background: lighten($skinActiveColor, 20%);
+
+        //@include rounded-all(0,5px,5px,5px);
+        @include no-shadow;
+
+        @include rounded(0);
+
+        border: none;
+        position: absolute;
+        width: 120%;
+        min-width: 175px;
+        max-width: calc(100% + 20px);
+        margin-top: 5px;
+        float: left;
+        display: none;
+        padding: 3px 0px 5px 0;
+        list-style: none;
+        z-index: 1010;
+
+        li {
+          margin: 0px;
+
+          a {
+            color: $header-dropdown-menu-text-color;
+            background: none;
+            display: block;
+
+            &:hover {
+              color: #fff;
+              background: lighten($skinActiveColor, 10%);
+            }
+          }
+
+          &.current {
+            a {
+              @include rounded(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  #tabs {
+    li {
+      a {
+        padding: 3px 20px;
+      }
+    }
+  }
+
+  #utility_nav {
+    color: #aaa;
+    white-space: nowrap;
+    text-align: right;
+    background: $main-background-color;
+    margin-left: auto;
+    flex-shrink: 5;
+    position: relative;
+
+    &:before {
+      display: block;
+      content: '';
+      background: $skinActiveColor;
+      height: 3px;
+      width: 100%;
+      position: absolute;
+    }
+
+    a {
+      text-decoration: none;
+      padding: 5px 20px;
+    }
+
+    li {
+      &:hover {
+        background: $skinActiveColor;
+        transition: $link_transition_dutarion;
+
+        a::before {
+          color: lighten($skinActiveColor, 35%);
+        }
+      }
+
+      // a {
+      //   &:hover {
+      //     background: none;
+      //     color: $skinTextColor;
+      //   }
+      // }
+   
+    }
+  }
+
+  #current_user {
+    a {
+      position: relative;
+
+      &:before {
+        font-family: 'FontAwesome';
+        color: $skinActiveColor;
+        position: relative;
+        left: -7px;
+        content: "\f007";
+        font-size: 1.5em;
+      }
+    }
+  }
+}
+
+#logout {
+  a {
+    font-weight: bold;
+    text-decoration: underline;
+    position: relative;
+
+    &:before {
+      font-family: 'FontAwesome';
+      color: lighten($skinActiveColor, 20%);
+      position: relative;
+      left: -7px;
+      content: "\f08b";
+      font-size: 1.5em;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_face/_mixins.scss

@@ -0,0 +1 @@
+@import "active_admin_face/mixins/all";

data/app/assets/stylesheets/active_admin_face/_typography.scss

@@ -0,0 +1,250 @@
+// Adapted from Blueprint CSS Framework
+//
+// Copyright (c) 2007 - 2010 blueprintcss.org
+//
+// 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.
+//
+// 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.
+
+// Default font settings.  The font-size percentage is of 16px. (0.75 * 16px = 12px) */
+html {
+  font-size: 100.01%;
+}
+
+body {
+  font-size: 75%;
+  font-family: $default-font, "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  font-weight: normal;
+  color: $primary-color;
+
+  img {
+    margin: 0;
+  }
+}
+
+h1 {
+  font-size: 3em;
+  line-height: 1;
+  margin-bottom: 0.5em;
+}
+
+h2 {
+  font-size: 2em;
+  margin-bottom: 0.75em;
+}
+
+h3 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1em;
+}
+
+h4 {
+  font-size: 1.2em;
+  line-height: 1.25;
+  margin-bottom: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 1.5em;
+}
+
+h6 {
+  font-size: 1em;
+  font-weight: bold;
+}
+
+p {
+  margin: 0 0 1.5em;
+
+  .left {
+    margin: 1.5em 1.5em 1.5em 0;
+    padding: 0;
+  }
+
+  .right {
+    margin: 1.5em 0 1.5em 1.5em;
+    padding: 0;
+  }
+}
+
+.left {
+  float: left !important;
+}
+
+.right {
+  float: right !important;
+}
+
+blockquote {
+  margin: 1.5em;
+  color: #666;
+  font-style: italic;
+}
+
+strong, dfn {
+  font-weight: bold;
+}
+
+em, dfn {
+  font-style: italic;
+}
+
+sup, sub {
+  line-height: 0;
+}
+
+abbr,
+acronym {
+  border-bottom: 1px dotted #666;
+}
+
+address {
+  margin: 0 0 1.5em;
+  font-style: italic;
+}
+
+del {
+  color: #666;
+}
+
+pre {
+  margin: 1.5em 0;
+  white-space: pre;
+}
+
+pre, code, tt {
+  font: 1em 'andale mono', 'lucida console', monospace;
+  line-height: 1.5;
+}
+
+// Lists
+li ul,
+li ol {
+  margin: 0;
+}
+
+ul, ol {
+  margin: 0 1.5em 1.5em 0;
+  padding-left: 1.5em;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+dl {
+  margin: 0 0 1.5em 0;
+}
+
+dl dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 1.5em;
+}
+
+// Tables
+table {
+  margin-bottom: 1.4em;
+  width: 100%;
+}
+
+th {
+  font-weight: bold;
+}
+
+thead th {
+  background: #c3d9ff;
+}
+
+th, td, caption {
+  padding: 4px 10px 4px 5px;
+}
+
+// Helper Classes
+.small {
+  font-size: .8em;
+  margin-bottom: 1.875em;
+  line-height: 1.875em;
+}
+
+.large {
+  font-size: 1.2em;
+  line-height: 2.5em;
+  margin-bottom: 1.25em;
+}
+
+.hide {
+  display: none;
+}
+
+.quiet {
+  color: #666;
+}
+
+.loud {
+  color: #000;
+}
+
+.highlight {
+  background: #ff0;
+}
+
+.added {
+  background: #060;
+  color: #fff;
+}
+
+.removed {
+  background: #900;
+  color: #fff;
+}
+
+.first {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.last {
+  margin-right: 0;
+  padding-right: 0;
+}
+
+.top {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.bottom {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}