pure-admin-rails 2.0.0

data/app/assets/javascripts/pure_admin/tabs.js

@@ -0,0 +1,14 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.tabs = {
+  init: function() {
+    $(document).on('click', '.tabbable .nav-tabs a', function(event) {
+      event.preventDefault();
+      var tabId = $(event.currentTarget).attr('href');
+      $('.tabbable ' + tabId).show().siblings().hide();
+      $(this).parent('li').addClass('active').siblings().removeClass('active');
+    });
+  }
+};
+
+$(document).ready(PureAdmin.tabs.init);

data/app/assets/stylesheets/pure_admin.css.scss

@@ -0,0 +1,23 @@
+@import 'pure_admin/variables.css.scss';
+@import 'pure_admin/utilities.css.scss';
+@import 'pure_admin/shell.css.scss';
+@import 'pure_admin/main_menu.css.scss';
+@import 'pure_admin/side_menu.css.scss';
+@import 'pure_admin/forms.css.scss';
+@import 'pure_admin/portlets.css.scss';
+@import 'pure_admin/tables.css.scss';
+@import 'pure_admin/table_filters.css.scss';
+@import 'pure_admin/flash_messages.css.scss';
+@import 'pure_admin/pagination.css.scss';
+@import 'pure_admin/buttons.css.scss';
+@import 'pure_admin/details_panels.css.scss';
+@import 'pure_admin/breadcrumbs.css.scss';
+@import 'pure_admin/tags.css.scss';
+@import 'pure_admin/scopes.css.scss';
+@import 'pure_admin/auth.css.scss';
+@import 'pure_admin/modals.css.scss';
+@import 'pure_admin/dropdowns';
+@import 'pure_admin/tabs';
+
+// custom input css
+@import 'pure_admin/inputs/select.css.scss';

data/app/assets/stylesheets/pure_admin/_dropdowns.scss

@@ -0,0 +1,58 @@
+.dropdown {
+  &.inline {
+    display: inline-block;
+    width: auto;
+  }
+
+  &.display-as-button {
+    .pure-menu-link {
+      @extend .pure-button;
+    }
+
+    .pure-menu-has-children {
+      &.pure-menu-active {
+        & > .pure-menu-link {
+          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+
+          &:after {
+            transform: rotate(180deg);
+            padding-left: 0;
+            padding-right: 0.5em;
+            top: 0;
+          }
+        }
+      }
+
+      & > .pure-menu-link {
+        &:after {
+          display: inline-block;
+          position: relative;
+          top: -0.2em;
+          font-size: 0.9em;
+        }
+
+      }
+    }
+
+    .pure-menu-children {
+      border: 1px solid $input-border;
+      border-top: 0;
+      box-shadow: 0 1px 5px 0 $input-border;
+      font-size: 0;
+
+      .pure-menu-link {
+        width: 100%;
+        text-align: left;
+        border-width: 0;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  &.pull-right {
+    .pure-menu-children {
+      right: 0;
+      left: auto;
+    }
+  }
+}

data/app/assets/stylesheets/pure_admin/_tabs.scss

@@ -0,0 +1,76 @@
+.tabbable {
+  display: inline-block;
+  margin-bottom: $base-font-size;
+  width: 100%;
+
+  .nav-tabs {
+    margin: 0;
+    margin-bottom: -1px;
+    padding: 0;
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    > li {
+      float: left;
+      list-style: none;
+
+      &.active {
+        a {
+          background: $white;
+          border-bottom-color: transparent;
+          border-top: 2px solid $link-color;
+          box-shadow: 0 -2px 3px 0 rgba($black, 0.15);
+          color: $text-color;
+          margin-top: -1px;
+          z-index: 12;
+        }
+      }
+
+      &:last-of-type {
+        a {
+          border-right-width: 1px;
+        }
+      }
+
+      a {
+        background-color: $grey-light;
+        border: 1px solid $grey-medium;
+        border-bottom-width: 0;
+        border-right-width: 0;
+        color: lighten($text-color, 10%);
+        display: inline-block;
+        line-height: $base-font-size;
+        margin-right: -1px;
+        padding: 0.5em 1em;
+        position: relative;
+        z-index: 11;
+
+        &:hover {
+          color: $text-color;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    background: $white;
+    border: 1px solid $grey-medium;
+    padding: 0 $base-font-size;
+
+    .tab-pane {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pure_admin/auth.css.scss

@@ -0,0 +1,22 @@
+#auth {
+  width: 288px;
+  margin: 0 auto;
+  margin-top: 4em;
+
+  .portlet {
+    margin-bottom: $base-font-size;
+  }
+
+  .other-links {
+    text-align: center;
+    font-size: 0.8em;
+  }
+
+  .auth-form-checkbox {
+    margin-top: 0.7em;
+
+    input {
+      display: inline;
+    }
+  }
+}

data/app/assets/stylesheets/pure_admin/breadcrumbs.css.scss

@@ -0,0 +1,69 @@
+#breadcrumbs {
+  height: 27px;
+  border-top: 1px solid darken($menu-color, 10%);
+  border-bottom: 1px solid #cccccc;
+  background: #e7e7e7;
+  padding: 1px 16px 2px 16px;
+  line-height: 24px;
+  font-size: 0.8em;
+  color: #777777;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+          box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+
+  a {
+    color: #777777;
+    text-decoration: none;
+    font-weight: 700;
+
+    &:hover {
+      color: #555555;
+    }
+  }
+
+  .fa {
+    font-size: 14px;
+    margin-right: 2px;
+  }
+
+  .fa-angle-right {
+    margin-left: 5px;
+    margin-right: 4px;
+    color: #777777;
+    position: relative;
+    top: 1px;
+  }
+}
+
+#back-to-top {
+  width: 115px;
+  border: 1px solid #cccccc;
+  border-top-color: #e7e7e7;
+  background: #e7e7e7;
+  margin-left: -55px;
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  color: #777777;
+  font-size: 0.6em;
+  cursor: pointer;
+  z-index: 8;
+  text-align: center;
+  padding: 0.4em 0.8em;
+  text-transform: uppercase;
+  display: none;
+  -webkit-transition: all 0.1s linear;
+     -moz-transition: all 0.1s linear;
+      -ms-transition: all 0.1s linear;
+       -o-transition: all 0.1s linear;
+          transition: all 0.1s linear;
+
+  .middle {
+    display: inline-block;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+}

data/app/assets/stylesheets/pure_admin/buttons.css.scss

@@ -0,0 +1,48 @@
+.button-xsmall {
+  font-size: 70%;
+}
+
+.button-small {
+  font-size: 85%;
+}
+
+.button-large {
+  font-size: 110%;
+}
+
+.button-xlarge {
+  font-size: 125%;
+}
+
+.button-green,
+.button-red,
+.button-orange {
+  color: white;
+
+  &:hover {
+    color: white;
+  }
+}
+
+.button-green {
+  background: #339900;
+  border-color: darken(#339900, 10%);
+}
+
+.button-red {
+  background: #CC3333;
+  border-color: darken(#CC3333, 10%);
+}
+
+.button-orange {
+  background: #e49457;
+  border-color: #cb844e;
+}
+
+.button-icon-only {
+  padding: 0.5em 0.75em;
+
+  .fa {
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/pure_admin/details_panels.css.scss

@@ -0,0 +1,99 @@
+.details-panel {
+  font-size: 14px;
+  padding-bottom: $base-font-size;
+  padding: 0 $base-font-size * 0.5;
+
+  @media (min-width: 35.5em) {
+    padding: 0;
+    padding-bottom: $base-font-size;
+  }
+}
+
+.details-panel-heading {
+  width: 100%;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.details-panel-item {
+  margin: $base-font-size * 0.5 0;
+  word-wrap: break-word;
+
+  @media (min-width: 35.5em) {
+    padding-left: $base-font-size * 12;
+
+    &.not-aligned {
+      padding-left: $base-font-size;
+    }
+  }
+
+  label {
+    text-transform: uppercase;
+    font-size: $base-font-size * 0.9;
+    display: block;
+    color: #999999;
+
+    @media (min-width: 35.5em) {
+      float: left;
+      display: inline-block;
+      width: $base-font-size * 12;
+      margin-left: -$base-font-size * 12;
+      padding-right: $base-font-size;
+      text-align: right;
+      position: relative;
+    }
+  }
+
+  // Remove any top spacing to ensure a smooth line from label to content.
+  label + * {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  img {
+    vertical-align: top;
+    border: 2px solid #cccccc;
+    max-width: 100%;
+  }
+}
+
+.details-panel-controls {
+  font-size: 14px;
+  padding: $base-font-size 0;
+  border-top: 2px solid #e8e8e8;
+  margin-top: $base-font-size;
+
+  @media (min-width: 35.5em) {
+    padding-left: $base-font-size * 12;
+  }
+
+  .pure-button {
+    margin-right: $base-font-size * 0.25;
+    margin-bottom: $base-font-size * 0.6;
+  }
+}
+
+.portlet-body {
+  .details-panel {
+    padding: 0;
+    padding-top: $base-font-size;
+  }
+
+  .details-panel-controls {
+    background: #f4f4f4;
+    border-top-width: 1px;
+    margin: $base-font-size $base-font-size * -1 0 $base-font-size * -1;
+    padding: $base-font-size * 0.5 $base-font-size;
+    padding-bottom: 0;
+
+    @media (min-width: 35.5em) {
+      padding-left: $base-font-size * 13;
+
+      &.not-aligned {
+        padding-left: $base-font-size;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pure_admin/flash_messages.css.scss

@@ -0,0 +1,97 @@
+#flashes {
+  &.fixed {
+    position: absolute;
+    width: 100%;
+    padding: $base-font-size;
+    padding-top: 0;
+
+    @media (min-width: 48em) {
+      top: 106px;
+    }
+  }
+}
+
+.flash {
+  padding: 0.66em 1em;
+  margin-top: $base-font-size;
+  border: 1px solid transparent;
+  font-size: 14px;
+  position: relative;
+  cursor: pointer;
+  z-index: 11;
+  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
+          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
+
+  @media (min-width: 48em) {
+    margin-bottom: 1em;
+  }
+
+  &.with-bottom-margin {
+    margin-bottom: 1em;
+  }
+
+  &.with-top-margin {
+    margin-top: 1em;
+
+    @media (min-width: 48em) {
+      margin-top: 2em;
+    }
+  }
+
+  &.larger-margin {
+    @media (min-width: 48em) {
+      margin-bottom: 1.7em;
+    }
+
+    &.with-bottom-margin {
+      margin-bottom: 1.7em;
+    }
+  }
+
+  &.success {
+    color: $text-success;
+    background-color: $background-success;
+    border-color: $border-success;
+  }
+
+  &.notice {
+    color: $text-notice;
+    background-color: $background-notice;
+    border-color: $border-notice;
+  }
+
+  &.alert {
+    color: $text-alert;
+    background-color: $background-alert;
+    border-color: $border-alert;
+  }
+
+  &.error {
+    color: $text-error;
+    background-color: $background-error;
+    border-color: $border-error;
+  }
+
+  &.with-icon {
+    padding-left: 3em;
+
+    .fa {
+      font-size: 1.5em;
+      float: left;
+      position: relative;
+      top: -3px;
+      left: -1.5em;
+      margin-right: -2em;
+    }
+  }
+}
+
+.flash > p,
+.flash > ul {
+  margin-bottom: 0;
+}
+
+.flash > p + p {
+  margin-top: 5px;
+}