active_material 1.4.1

data/app/assets/stylesheets/active_material/components/filter.scss

@@ -0,0 +1,61 @@
+/**
+ * Filters
+ * Filters show up as sidebars on most index pages
+ */
+
+.filter_form_field,
+.select_and_search,
+.filter_date_range {
+  @include am-textfield;
+  @include am-textfield-inline;
+
+  label {
+    @include am-textfield-label;
+    @include am-textfield-label-inline;
+  }
+
+  > select:not([multiple]) {
+    @include am-select-input;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    flex-basis: 100px;
+  }
+
+  > select[multiple] {
+    flex-basis: 100%;
+  }
+
+  > select {
+    &:last-child {
+      border-bottom-right-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+
+    + input[type="text"],
+    + input[type="number"] {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      border-left: 0;
+    }
+  }
+
+  > input.datepicker {
+    @include am-textfield-input;
+    @include am-textfield-input-inline;
+    @include am-textfield-input-date;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  > input[type="submit"] {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    margin: 0;
+  }
+}
+
+.filter_string input,
+.filter_numeric input {
+  @include am-textfield-input;
+  @include am-textfield-input-inline;
+}

data/app/assets/stylesheets/active_material/components/flash.scss

@@ -0,0 +1,13 @@
+/**
+ * Flash
+ * Notifications that appear whenever a CRUD action or error
+ * has surfaced
+ */
+
+.flash {
+  @include am-snackbar;
+
+  &.flash_alert {
+    @include am-snackbar-error;
+  }
+}

data/app/assets/stylesheets/active_material/components/footer.scss

@@ -0,0 +1,4 @@
+.footer {
+  padding: am-unit(2);
+  text-align: center;
+}

data/app/assets/stylesheets/active_material/components/forms.scss

@@ -0,0 +1,92 @@
+/**
+ * Forms
+ */
+
+fieldset.inputs {
+  margin-bottom: am-unit(2);
+
+  > ol {
+    @include am-list-blank;
+  }
+
+  > legend {
+    @include am-subheader;
+    border: 0;
+  }
+}
+
+.input {
+  @include am-textfield;
+
+  > label,
+  .label > label {
+    @include am-textfield-label;
+  }
+
+  &.string input,
+  &.stringish input,
+  &.numberic input {
+    @include am-textfield-input;
+  }
+
+  &.email input {
+    @include am-textfield-input-email;
+  }
+
+  &.password input {
+    @include am-textfield-input-password;
+  }
+
+  &.datepicker input {
+    @include am-textfield-input-date;
+  }
+
+  &.text textarea {
+    @include am-textfield-input;
+    @include am-textfield-textarea;
+  }
+
+  select + input {
+    margin-top: am-unit(2);
+  }
+
+}
+
+.field_with_errors input {
+  @include am-textfield-input-error;
+}
+
+.inline-hints {
+  @include am-textfield-hint;
+}
+
+.inline-errors {
+  @include am-textfield-hint;
+  @include am-textfield-hint-error;
+
+  + .inline-hints {
+    display: none;
+  }
+}
+
+abbr[title="required"] {
+  @include am-textfield-required;
+}
+
+fieldset.actions,
+.buttons {
+  @include am-actions-footer;
+
+  > ol {
+    @include am-list-blank;
+    @include am-list-inline;
+  }
+
+  .cancel a {
+    @include am-btn-raised;
+  }
+
+  .cancel a {
+    @include am-btn;
+  }
+}

data/app/assets/stylesheets/active_material/components/header.scss

@@ -0,0 +1,64 @@
+/**
+ * Header
+ * Encapsulates several elements related to navigation at
+ * the top of the page.
+ */
+
+.header {
+  @include am-toolbar;
+  @include am-toolbar-primary;
+  padding-right: am-unit(8);
+}
+
+.site_title {
+  @include am-toolbar-title;
+  @include am-color(text-light);
+  text-shadow: 0 1px 2px rgba(#000, 0.15);
+}
+
+#tabs {
+  flex-grow: 1;
+}
+
+.header-item {
+  @include am-toolbar-list;
+}
+
+.header-item > li {
+  @include am-toolbar-item;
+
+  > a {
+    @include am-toolbar-item-primary;
+    text-shadow: 0 1px 2px rgba(black, 0.15);
+  }
+
+  &.current > a {
+    @include am-toolbar-item-primary-active;
+  }
+}
+
+.has_nested {
+  @include am-menu;
+
+  ul {
+    @include am-menu-list;
+
+    li {
+      @include am-menu-item;
+    }
+
+    li a {
+      @include am-menu-link;
+    }
+  }
+
+  &:hover ul,
+  &:focus ul {
+    @include am-menu-list-open;
+
+    li a {
+      @include am-menu-item-open
+    }
+  }
+
+}

data/app/assets/stylesheets/active_material/components/hidden.scss

@@ -0,0 +1,3 @@
+.hidden {
+  @include am-hidden;
+}

data/app/assets/stylesheets/active_material/components/login.scss

@@ -0,0 +1,53 @@
+/**
+ * Login
+ * This screen appears if no session is active
+ */
+
+#login {
+  @include am-dialog;
+  margin: am-unit(-4) auto 0;
+  max-width: am-unit(50);
+
+  h2 {
+    @include am-hidden;
+  }
+
+  // This is the "forgot password" button
+  > a {
+    @include am-actions-footer;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  // Annoying br included for whatever reason
+  > br {
+    display: none;
+  }
+
+  .inputs {
+    margin-bottom: 0;
+  }
+
+  // Override actions, in this case the border and shadow are
+  // not applicable
+  .actions {
+    background: transparent;
+    box-shadow: none;
+    padding-top: 0;
+    box-shadow: none;
+
+    .action,
+    input[type='submit'] {
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
+
+body.logged_out {
+  @include am-fill(primary-700);
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

data/app/assets/stylesheets/active_material/components/overlay.scss

@@ -0,0 +1,8 @@
+/**
+ * Overlay
+ * Overlays appear below modal content that takes up the entire screen.
+ */
+
+.ui-widget-overlay {
+  @include am-underlay;
+}

data/app/assets/stylesheets/active_material/components/pagination.scss

@@ -0,0 +1,43 @@
+/**
+ * Pagination
+ * Typically appears on index pages, below tables
+ */
+
+.paginated_collection {
+  @include am-clearfix;
+  clear: both;
+
+  .pagination_information,
+  .download_links {
+    @include am-type-caption;
+    padding: am-unit(2);
+  }
+
+  .pagination_information {
+    float: left;
+  }
+
+  .download_links {
+    line-height: am-unit(3);
+    float: right;
+    text-align: right;
+  }
+}
+
+
+.pagination {
+  background: #fff;
+  border-bottom: 1px solid #efefef;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 am-unit(2);
+
+  .page,
+  .first,
+  .prev,
+  .next,
+  .last {
+    @include am-btn;
+    min-width: am-unit(3);
+  }
+}

data/app/assets/stylesheets/active_material/components/panels.scss

@@ -0,0 +1,38 @@
+/**
+ * Panels
+ * Stand-alone segments of content, in Material Design
+ * these could be considered Cards or pieces of paper.
+ */
+
+.panel,
+.has_many_container,
+body.index #main_content,
+body.edit #main_content > form,
+body.new #main_content > form,
+body.create #main_content > form,
+body.update #main_content > form {
+  @include am-paper;
+
+  > h3 {
+    @include am-subheader;
+  }
+
+  .header_action {
+    float: right
+  }
+
+  .row th {
+    width: 20%;
+    padding-left: am-unit(2);
+  }
+}
+
+.panel {
+  & + & {
+    margin-top: 16px;
+  }
+}
+
+.panel_well {
+  padding: 0 am-unit(2) am-unit(2);
+}

data/app/assets/stylesheets/active_material/components/photo_select.scss

@@ -0,0 +1,7 @@
+/**
+ * PhotoSelects
+ */
+
+.photo_select {
+  display: inline-block;
+}

data/app/assets/stylesheets/active_material/components/scopes.scss

@@ -0,0 +1,29 @@
+/**
+ * Scopes
+ * Theses appear above tables, providing the ability to filter rows
+ */
+
+.scopes {
+  @include am-list-blank;
+  @include am-list-inline;
+  flex-grow: 1;
+  text-align: right;
+}
+
+.scope {
+  font-size: 13px;
+  font-weight: 500;
+  margin-left: am-unit(2);
+
+  a {
+    @include am-link(secondary-text);
+  }
+
+  &.selected {
+    font-weight: bold;
+
+    a {
+      @include am-fill(primary);
+    }
+  }
+}

data/app/assets/stylesheets/active_material/components/select.scss

@@ -0,0 +1,20 @@
+/**
+ * Basic Selects
+ */
+
+.select,
+.polymorphic_select {
+
+  select:not([multiple]) {
+    @include am-select-input;
+  }
+
+}
+
+select[multiple] {
+  @include am-multiselect;
+
+  option {
+    @include am-multiselect-option;
+  }
+}

data/app/assets/stylesheets/active_material/components/sortable.scss

@@ -0,0 +1,36 @@
+////
+/// Sortable
+/// Generic styles for sortable elements. Leans on
+/// jQuery UI for the bulk of work
+/// @group sortable
+////
+
+/// The icon displayed within a sortable element's drag handle
+$am-sortable-icon: asset-url("active_material/icons/reorder.svg") !default;
+// The size of the draggable handle
+$am-sortable-handle-size: am-unit(7);
+
+.ui-sortable {
+
+  .reorder-handle-col {
+    padding: 0 0 0 am-unit(1);
+    width: $am-sortable-handle-size;
+  }
+
+  .reorder-handle {
+    background: transparent $am-sortable-icon 50% 50% no-repeat;
+    color: transparent;
+    cursor: move;
+    display: block;
+    height: $am-sortable-handle-size;
+    margin: 0 auto;
+    opacity: 0.40;
+    transition: 0.2s all;
+    width: $am-sortable-handle-size;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+}

data/app/assets/stylesheets/active_material/components/structure.scss

@@ -0,0 +1,30 @@
+/**
+ * Structure
+ * Global structural elements
+ */
+
+body {
+  @include am-fill(backdrop);
+}
+
+#active_admin_content {
+  padding: am-unit(3);
+}
+
+#sidebar {
+  margin-left: am-unit(3);
+}
+
+.with_sidebar {
+  display: flex;
+  width: 100%;
+
+  #main_content_wrapper {
+    flex-grow: 1;
+  }
+
+  #sidebar {
+    max-width: am-unit(40);
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/active_material/components/tables.scss

@@ -0,0 +1,85 @@
+/**
+ * Tables
+ */
+
+.table_tools {
+  @include am-table-header;
+}
+
+.index_table,
+.panel_contents table {
+  @include am-table;
+
+  th {
+    @include am-table-column-heading;
+
+    a {
+      @include am-table-sort;
+    }
+
+    &.sorted-asc a {
+      @include am-table-sort-asc;
+    }
+
+    &.sorted-desc a {
+      @include am-table-sort-desc;
+    }
+  }
+
+  tr {
+    @include am-table-row;
+  }
+
+  tbody tr {
+    &:hover {
+      @include am-table-row-hover;
+    }
+
+    &.selected {
+      @include am-table-row-selected;
+    }
+  }
+
+  td {
+    @include am-table-cell;
+
+  }
+
+  .col-selectable {
+    @include am-table-cell-selectable;
+
+    // ActiveAdmin wraps checkboxes in a div. This rule prevents
+    // that div from messing up vertical alignment
+    .resource_selection_cell {
+      display: inline;
+    }
+  }
+
+  td.col-actions {
+    @include am-table-cell-actions;
+
+    .table_actions {
+      @include am-menu-list;
+      @include am-menu-list-right;
+      top: 50%;
+      margin-top: am-unit(-2);
+      margin-right: am-unit(2);
+
+      a {
+        @include am-menu-link;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      .table_actions {
+        @include am-menu-list-open;
+
+        a {
+          @include am-menu-item-open;
+        }
+      }
+    }
+
+  }
+}

data/app/assets/stylesheets/active_material/components/tabs.scss

@@ -0,0 +1,25 @@
+/**
+ * Tabs
+ * Theses show up on complicated forms, such as the Exhibit edit page.
+ */
+
+.nav-tabs {
+  @include am-tabs;
+  @include am-tabs-list;
+
+  > li {
+    @include am-tabs-list-item;
+  }
+
+  > li > a {
+    @include am-tabs-btn;
+  }
+
+  > li.ui-state-active > a {
+    @include am-tabs-btn-active;
+  }
+
+  > li.tab_with_errors > a {
+    @include am-tabs-btn-error;
+  }
+}

data/app/assets/stylesheets/active_material/components/tag.scss

@@ -0,0 +1,23 @@
+/**
+ * Tags
+ * Tags show up as states within tables and other components
+ */
+
+.status_tag {
+  @include am-tag;
+
+  a & {
+    @include am-tag-pressable;
+  }
+
+  &.yes {
+    @include am-tag-success;
+  }
+}
+
+.empty {
+  color: #ccc;
+  font-size: 0.9em;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}

data/app/assets/stylesheets/active_material/components/title_bar.scss

@@ -0,0 +1,21 @@
+/**
+ * Titlebar
+ */
+
+.title_bar {
+  @include am-toolbar-title;
+  @include am-fill(white);
+  box-shadow: 0 1px 2px rgba(#000, 0.24);
+  align-items: center;
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+
+#titlebar_left {
+  flex-grow: 1;
+}
+
+#titlebar_right .action_item a {
+  @include am-btn;
+}