active_admin_pro 0.1.0

data/app/assets/stylesheets/active_admin_pro/functions/text-color.scss

@@ -0,0 +1,35 @@
+// Get the text color to go on top of Google's material design colors
+// @see https://www.google.com/design/spec/style/color.html
+@function text-color($color) {
+  $text-color: $white;
+
+  @if $color == $amber {
+    $text-color: $black;
+  } @else if $color == $black {
+    $text-color: $white;
+  } @else if $color == $cyan {
+    $text-color: $black;
+  } @else if $color == $deep-orange {
+    $text-color: $white;
+  } @else if $color == $green {
+    $text-color: $black;
+  } @else if $color == $grey {
+    $text-color: $black;
+  } @else if $color == $light-blue {
+    $text-color: $black;
+  } @else if $color == $light-green {
+    $text-color: $black;
+  } @else if $color == $green {
+    $text-color: $black;
+  } @else if $color == $lime {
+    $text-color: $black;
+  } @else if $color == $orange {
+    $text-color: $black;
+  } @else if $color == $white {
+    $text-color: $black;
+  } @else if $color == $yellow {
+    $text-color: $black;
+  }
+
+  @return $text-color;
+}

data/app/assets/stylesheets/active_admin_pro/layout/actions/comments.scss

@@ -0,0 +1,14 @@
+body.admin_comments.index {
+  #main_content {
+    @include clearfix;
+    background-color: $white;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+    margin-bottom: 2em;
+    padding: 2em 2em 1em;
+    position: relative;
+  }
+}
+
+#active_admin_comment_body {
+  width: 100%;
+}

data/app/assets/stylesheets/active_admin_pro/layout/actions/index.scss

@@ -0,0 +1,88 @@
+$table-border-color: color($grey, 300);
+
+body.index {
+  .paginated_collection {
+    position: relative;
+  }
+
+  #main_content form {
+    padding-bottom: 1.5em;
+    position: relative;
+
+    .paginated_collection {
+      position: static;
+    }
+  }
+
+  .index_as_table {
+    overflow-x: auto;
+  }
+
+  table {
+    margin-bottom: 1em;
+    width: 100%;
+  }
+
+  #index_footer {
+    @include clearfix;
+    font-size: 0.9em;
+    left: 0;
+    margin-top: 0.5em;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+
+  .pagination {
+    border-top: 1px solid $table-border-color;
+    left: $base-font-size * 2;
+    padding: 0.9em 0 0;
+    position: absolute;
+    right: $base-font-size * 2;
+    text-align: center;
+    top: -3.45em;
+
+    @include media($mobile) {
+      left: $base-font-size;
+      right: $base-font-size;
+    }
+
+    a {
+      padding: 0.5em;
+      text-decoration: none;
+
+      &:hover,
+      &:active,
+      &.active {
+        text-decoration: underline;
+      }
+    }
+
+    .first {
+      left: 0;
+      position: absolute;
+    }
+
+    .last {
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  .pagination_information {
+    left: 0.5%;
+    position: absolute;
+    top: 100%;
+  }
+
+  .download_links {
+    position: absolute;
+    right: 0.5%;
+    top: 100%;
+
+    a {
+      display: inline-block;
+      padding: 0 1px;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/actions/show.scss

@@ -0,0 +1,25 @@
+body.show {
+  .attributes_table {
+    overflow-x: auto;
+
+    tr {
+      border-bottom: 0;
+    }
+
+    tbody th {
+      background-color: $base-background-color;
+      min-width: 140px;
+      padding: 0.66em;
+      text-align: right;
+      width: 17%;
+
+      &:after {
+        content: ":";
+      }
+    }
+
+    td {
+      padding: 0.66em;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/body.scss

@@ -0,0 +1,60 @@
+$selection-background-color: $accent-color;
+$selection-font-color: text-color($accent-color);
+
+html { // http://bit.ly/1qk2tVR
+  box-sizing: border-box;
+
+  @include selection {
+    background-color: $selection-background-color;
+    color: $selection-font-color;
+  }
+}
+
+* {
+  &,
+  &::after,
+  &::before {
+    box-sizing: inherit;
+  }
+}
+
+html,
+body {
+  background-color: $base-background-color;
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  text-rendering: optimizelegibility;
+}
+
+object[type="application/x-shockwave-flash"] {
+  display: none;
+}
+
+// Loading indicators for Turbolinks
+html.turbolinks-progress-bar::before {
+  background-color: $accent-color !important;
+  height: 4px !important;
+}
+
+body:after {
+  @include transition(background-color 1s ease);
+  background-color: rgba(0, 0, 0, 0);
+  bottom: 0;
+  content: "";
+  cursor: wait;
+  left: 999999px;
+  position: fixed;
+  top: 4px;
+  width: 100%;
+  z-index: 999999;
+}
+
+body.loading {
+  cursor: wait;
+
+  &:after {
+    background-color: rgba(color($primary-color, 900), 0.2);
+    left: 0;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/desktop/action_items.scss

@@ -0,0 +1,32 @@
+$action-item-background-color: $accent-color;
+$action-item-link-color: text-color($action-item-background-color);
+$action-item-link-color-active: $action-item-link-color;
+$action-item-link-color-hover: $action-item-link-color;
+
+@if $action-item-link-color == $white {
+  $action-item-link-color: rgba($action-item-link-color, 0.9);
+} @else {
+  $action-item-link-color: rgba($action-item-link-color, 0.6);
+}
+
+@include media($desktop) {
+  #titlebar_right {
+    @include clearfix;
+    float: right;
+    padding: 0 2em 0 0;
+
+    .action_item {
+      @include align-items(center);
+      @include display(flex);
+      @include justify-content(center);
+      float: left;
+      height: $base-font-size * 2.9;
+      margin-left: 4px;
+    }
+
+    a {
+      @include button($background-color: $accent-color, $font-color: text-color($accent-color), $active-background-color: color($accent-color, 600), $active-font-color: $white);
+      margin-top: 2px;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/desktop/actions/comments.scss

@@ -0,0 +1,10 @@
+body.admin_comments.index {
+  #main_content {
+    @include clearfix;
+    background-color: $white;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+    margin-bottom: 2em;
+    padding: 2em 2em 1em;
+    position: relative;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/desktop/active_admin_content.scss

@@ -0,0 +1,22 @@
+@include media($desktop) {
+  #active_admin_content {
+    @include align-items(stretch);
+    @include display(flex);
+    @include flex-direction(row);
+    @include justify-content(flex-start);
+    overflow: hidden;
+  }
+
+  #main_content_wrapper {
+    @include flex(10);
+    padding: (36px + ($base-font-size * 2)) $base-font-size $base-font-size ($base-font-size * 2);
+  }
+
+  #sidebar {
+    @include flex(4);
+  }
+
+  #active_admin_content.without_sidebar #main_content_wrapper {
+    padding-right: $base-font-size * 2;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/desktop/breadcrumbs.scss

@@ -0,0 +1,57 @@
+$title-background-color: $primary-color;
+$title-bar-min-height:   $base-font-size * 2.9;
+$title-font-color:       text-color($primary-color);
+
+$breadcrumb-link-color: rgba($title-font-color, 0.6);
+@if $title-font-color == $white {
+  $breadcrumb-link-color: rgba($title-font-color, 0.9);
+}
+
+@include media($desktop) {
+  #titlebar_left {
+    float: left;
+    padding: 0.8em 0 0.8em 2em;
+
+    .breadcrumb,
+    #page_title {
+      display: inline-block;
+      font-size: $base-font-size;
+      line-height: 1;
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      border-bottom: 1px dotted $breadcrumb-link-color;
+      color: $breadcrumb-link-color;
+      text-decoration: none;
+
+      &:hover {
+        border-bottom: 1px dotted $title-font-color;
+        color: rgba($breadcrumb-link-color, 1.2);
+      }
+
+      &:active,
+      &.active {
+        border-bottom: 1px dotted $title-font-color;
+        color: $title-font-color;
+      }
+    }
+
+    // Invisibly float the root link over the site title
+    a:first-of-type {
+      border-color: transparent;
+      color: transparent;
+      font-size: $base-font-size;
+      height: $title-bar-min-height;
+      left: -$navigation-width;
+      position: absolute;
+      top: 0;
+      width: $navigation-width;
+    }
+
+    .breadcrumb_sep:first-of-type {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/layout/desktop/navigation.scss

@@ -0,0 +1,197 @@
+$navigation-link-background-color-active: $accent-color;
+$navigation-link-background-color-hover:  color($primary-color, 200);
+$navigation-link-color:                   $black;
+$navigation-link-color-active:            text-color($accent-color);
+$navigation-link-color-hover:             $navigation-link-color;
+$navigation-background-color:             color($primary-color, 100);
+$navigation-base-font-size:               $base-font-size;
+$navigation-border-color:                 darken($navigation-background-color, 3%);
+$title-background-color:                  $primary-color;
+$title-font-color:                        text-color($primary-color);
+$user-links-background-color:             $primary-color;
+$user-links-font-color:                   text-color($primary-color);
+
+@include media($desktop) {
+  #header {
+    background-color: $navigation-background-color;
+    bottom: 0;
+    font-size: $navigation-base-font-size - 1px;
+    -webkit-font-smoothing: subpixel-antialiased;
+    left: 0;
+    max-width: $navigation-width;
+    min-width: $navigation-width;
+    position: fixed;
+    top: 0;
+    width: $navigation-width;
+  }
+
+  #site_title {
+    background-color: $title-background-color;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+    color: $title-font-color;
+    font-size: 1em;
+    font-weight: normal;
+    letter-spacing: 4px;
+    margin: 0;
+    min-height: $base-font-size * 2.9;
+    padding: 1em 1.5em 0.9em;
+    position: relative;
+    text-transform: uppercase;
+    white-space: nowrap;
+    z-index: 3;
+  }
+
+  #tabs {
+    @include clearfix;
+    bottom: 2.5em;
+    left: 0;
+    list-style-type: none;
+    margin: 0;
+    overflow: auto;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: $base-font-size * 2.9;
+
+    li {
+      display: block;
+      left: 0;
+      position: relative;
+      right: 0;
+    }
+
+    i.fa {
+      display: inline-block;
+      font-size: 0.89em;
+      position: relative;
+      text-align: center;
+      top: 0.04em;
+      vertical-align: top;
+      width: 1.5em;
+    }
+
+    a {
+      background-color: $navigation-background-color;
+      color: $navigation-link-color;
+      display: block;
+      font-size: 1em;
+      padding: 0.59em 1.5em 0.55em;
+      position: relative;
+      text-decoration: none;
+      vertical-align: bottom;
+      white-space: nowrap;
+      z-index: 2;
+
+      &:hover {
+        background-color: $navigation-link-background-color-hover;
+        color: $navigation-link-color-hover;
+      }
+
+      &.active {
+        background-color: $navigation-link-background-color-hover;
+        color: $navigation-link-color-hover;
+        cursor: wait;
+      }
+    }
+
+    li.current a {
+      background-color: $navigation-link-background-color-active;
+      color: $navigation-link-color-active;
+    }
+  }
+
+  #utility_nav {
+    background-color: $user-links-background-color;
+    bottom: 0;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+    height: 2.5em;
+    left: 0;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+
+    li {
+      float: right;
+      height: 100%;
+      line-height: 100%;
+      width: 50%;
+    }
+
+    a,
+    span {
+      display: block;
+      height: 100%;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      visibility: hidden;
+      width: 100%;
+    }
+  }
+
+  #current_user a:after,
+  #logout a:after {
+    @include button($background-color: $user-links-background-color, $font-color: $user-links-font-color);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    content: "\f013";
+    display: block;
+    font-family: "FontAwesome";
+    font-size: 1.2em;
+    height: 100%;
+    left: 0;
+    line-height: 100%;
+    padding-top: 0.6em;
+    position: absolute;
+    top: 0;
+    visibility: visible;
+    width: 100%;
+  }
+
+  #utility_nav #current_user {
+    position: absolute;
+    width: 100%;
+  }
+
+  #current_user a,
+  #current_user span {
+    border-top: 1px solid color($primary-color, 200);
+    color: color($primary-color, 600);
+    line-height: $base-font-size * 2;
+    padding-top: 0;
+    text-align: center;
+    top: -25px;
+    visibility: visible;
+    width: 100%;
+
+    &:before {
+      content: "\f007";
+      display: inline-block;
+      font-family: "FontAwesome";
+      font-size: 0.9em;
+      margin-right: 3px;
+    }
+
+    &:after {
+      top: 25px;
+      width: 50%;
+    }
+  }
+
+  #logout a:after {
+    border-left: 1px solid darken($user-links-background-color, 10%);
+    content: "\f08b";
+  }
+
+  #utility_nav a:hover:after {
+    background-image: linear-gradient(to bottom, lighten($user-links-background-color, 5%), darken($user-links-background-color, 3.5%));
+  }
+
+  #utility_nav a:active:after {
+    background-image: linear-gradient(to bottom, lighten($user-links-background-color, 3%), darken($user-links-background-color, 5%));
+  }
+}