active_material 1.4.1

data/app/assets/stylesheets/active_material/prototypes/multiselect.scss

@@ -0,0 +1,20 @@
+/**
+ * Multiselects
+ */
+
+@mixin am-multiselect {
+  border: 1px solid #d3d3d3;
+  box-shadow: inset 0 1px 2px rgba(#000, 0.1);
+  border-radius: 2px;
+  min-width: 250px;
+  max-width: 100%;
+}
+
+@mixin am-multiselect-option {
+  padding: 8px;
+  border-top: 1px solid am-color(divider);
+
+  &:first-child {
+    border-top: 0;
+  }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Select
+ * Custom select styles, taken from textfields in material design
+ */
+
+@mixin am-select {
+  border: 1px solid am-color(divider);
+  border-radius: 2px;
+  display: inline-block;
+  margin-top: am-unit(1);
+}
+
+@mixin am-select-input {
+  @include am-font-size(14);
+  background: #fafafa asset-url("active_material/icons/arrow-dropdown.svg") no-repeat calc(100% - 4px) 50%;
+  border: 1px solid #d3d3d3;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 rgba(#fff, 0.8);
+  height: am-unit(5) + 2px; // line height + border for Firefox
+  line-height: am-unit(5);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  // These rules are so that opening a select will
+  // align as closely to the open options as much as possible
+  letter-spacing: 0.01em;
+  padding: 0 am-unit(3) 0 10px;
+}
+
+@mixin am-select-input-borderless {
+  border: 0;
+  border-radius: 0;
+}
+
+@mixin am-select-unit {
+  border-left: 1px solid am-color(divider);
+  text-align: center;
+
+  &:first-child {
+    border-left: none;
+  }
+}

data/app/assets/stylesheets/active_material/prototypes/snackbar.scss

@@ -0,0 +1,47 @@
+/**
+ * Snackbars
+ * Material design notifications
+ * http://www.google.com/design/spec/components/snackbars-toasts.html
+ */
+
+$am-snackbar-background: #323232 !default;
+$am-snackbar-color: am-color(text-light) !default;
+$am-snackbar-min-width: am-unit(36) !default;
+$am-snackbar-max-width: am-unit(72) !default;
+$am-snackbar-duration: 9s !default;
+
+@keyframes am-snackbar-fade {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@mixin am-snackbar {
+  animation: 0.6s am-snackbar-fade, 0.6s am-snackbar-fade reverse $am-snackbar-duration forwards;
+  background: $am-snackbar-background;
+  border-radius: 2px;
+  bottom: 0;
+  box-shadow: 0 1px 2px rgba(#000, 0.24);
+  color: $am-snackbar-color;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: am-sp(20);
+  margin: am-unit(2);
+  min-width: $am-snackbar-min-width;
+  max-width: $am-snackbar-max-width;
+  padding: am-unit(2) am-unit(3) am-unit(1.5);
+  position: fixed;
+  text-shadow: 0 1px 1px #000;
+  z-index: $am-elevation-top;
+}
+
+@mixin am-snackbar-error {
+  background-color: am-darken(error, 25%);
+  text-shadow: 0 1px 1px am-darken(error, 65%);
+}

data/app/assets/stylesheets/active_material/prototypes/subheader.scss

@@ -0,0 +1,13 @@
+/**
+ * Subheader
+ * Used for sidebar headings and other secondary content
+ * which require title text
+ */
+
+@mixin am-subheader {
+  @include am-font-size(14);
+  @include am-color(secondary-text);
+  font-weight: 500;
+  padding: am-unit(2);
+  line-height: am-unit(2);
+}

data/app/assets/stylesheets/active_material/prototypes/table.scss

@@ -0,0 +1,116 @@
+/**
+ * Tables
+ */
+
+$am-table-background: #fff !default;
+$am-table-border-color: am-color(divider);
+
+@mixin am-table {
+  background: $am-table-background;
+  width: 100%;
+  word-break: break-word;
+}
+
+@mixin am-table-header {
+  border-bottom: 1px solid $am-table-border-color;
+  display: flex;
+  padding: am-unit(2);
+}
+
+@mixin am-table-column-heading {
+  @include am-color(secondary-text);
+  @include am-font-size(13px);
+  border-bottom: 1px solid $am-table-border-color;
+  font-weight: 600;
+  height: am-unit(6);
+  line-height: am-unit(2);
+  padding: am-unit(1) am-unit(2);
+  text-align: left;
+  white-space: nowrap;
+}
+
+@mixin am-table-sort {
+  position: relative;
+
+  &:after {
+    border: 5px solid transparent;
+    margin-left: $am-unit-type;
+    content: "";
+    margin-top: -1.5px;
+    position: absolute;
+    top: 50%;
+    right: -15px;
+    width: 0;
+    height: 0;
+  }
+}
+
+@mixin am-table-sort-asc {
+  &:after {
+    border-bottom-color: am-color(primary);
+    margin-top: -7.5px;
+  }
+}
+
+@mixin am-table-sort-desc {
+  &:after {
+    border-top-color: am-color(primary);
+  }
+}
+
+@mixin am-table-row {
+  height: am-unit(6);
+  transition: 0.12s background;
+}
+
+@mixin am-table-row-hover {
+  background: #eee;
+
+  td,
+  th {
+    box-shadow: 0 -1px 0 rgba(#000, 0.05);
+    border-bottom: 1px solid darken($am-table-border-color, 5%);
+  }
+}
+
+@mixin am-table-row-selected {
+  background: #e0e0e0;
+
+  td,
+  th {
+    box-shadow: 0 -1px 0 rgba(#000, 0.15);
+    border-bottom: 1px solid darken($am-table-border-color, 15%);
+  }
+}
+
+@mixin am-table-cell {
+  @include am-color(text);
+  @include am-font-size(13px);
+  border-bottom: 1px solid $am-table-border-color;
+  font-weight: 400;
+  padding: am-unit(1) am-unit(2);
+
+  img {
+    display: block;
+    max-width: 320px;
+  }
+}
+
+@mixin am-table-cell-selectable {
+  padding: am-unit(2) am-unit(3) am-unit(2);
+  width: 18px + am-unit(6);
+
+  [type=checkbox] {
+    display: inline-block;
+    height: 18px;
+    margin: 0;
+    vertical-align: middle;
+    width: 18px;
+  }
+}
+
+@mixin am-table-cell-actions {
+  background: asset_url("active_material/icons/more.svg") 25% 50% no-repeat;
+  position: relative;
+  width: am-unit(6);
+}

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

@@ -0,0 +1,109 @@
+/**
+ * Tabs
+ * http://www.google.com/design/spec/components/tabs.html
+ */
+
+$am-tabs-padding: 0 24px !default;
+$am-tabs-background: am-color(primary) !default;
+$am-tabs-border-width: 3px !default;
+$am-tabs-color: rgba(#fff, 0.6) !default;
+$am-tabs-color-focus: #fff !default;
+$am-tabs-font: 400 14px/16px $am-font-sans !default;
+
+@keyframes am-tabs-error-throb {
+  from {
+    text-shadow: none;
+    transform: translateY(1px);
+  }
+
+  to {
+    text-shadow: 0 0 5px rgba($am-theme-error, 0.8);
+    transform: translateY(-1px);
+  }
+}
+
+@mixin am-tabs {
+  color: $am-tabs-color;
+  background: $am-tabs-background;
+  box-shadow: inset 0 -1px 1px rgba(#000, 0.15);
+  line-height: 0;
+  margin: 0;
+  padding: $am-tabs-padding;
+}
+
+@mixin am-tabs-list {
+  list-style: none;
+}
+
+@mixin am-tabs-list-item {
+  display: inline-block;
+}
+
+@mixin am-tabs-btn {
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  font: $am-tabs-font;
+  letter-spacing: 0.08em;
+  padding: am-unit(2);
+  position: relative;
+  text-transform: uppercase;
+  transition: 0.2s color;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  &:after {
+    @include am-fill(secondary-text-light);
+    bottom: 0;
+    box-shadow: 0 -1px 1px rgba(#000, 0.1);
+    content: "";
+    height: $am-tabs-border-width;
+    left: 0;
+    position: absolute;
+    transform: translateY($am-tabs-border-width);
+    transition: 0.2s background, 0.25s transform;
+    width: 100%;
+  }
+
+  &:focus,
+  &:hover {
+    background: transparent;
+    outline: none;
+    text-decoration: none;
+
+    &:after {
+      transform: none;
+    }
+  }
+
+  &:active {
+    border: 0;
+    box-shadow: none;
+  }
+}
+
+@mixin am-tabs-btn-active {
+  color: $am-tabs-color-focus;
+
+  &:after {
+    @include am-fill(accent);
+    box-shadow: 0 -1px 1px rgba(#000, 0.1), inset 0 1px 1px rgba(#fff, 0.50);
+    transform: none;
+  }
+}
+
+@mixin am-tabs-btn-error {
+  padding-right: am-unit(5);
+
+  &:before {
+    @include am-color(error-400);
+    animation: 2s am-tabs-error-throb infinite alternate;
+    content: '\026a0';
+    font-size: 20px;
+    line-height: am-unit(2);
+    margin-top: -6px;
+    position: absolute;
+    right: am-unit(1);
+    top: 50%;
+  }
+}

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

@@ -0,0 +1,36 @@
+@mixin am-tag {
+  @include am-fill(secondary-text);
+  @include am-type-caption;
+  @include am-type-smooth;
+  border-radius: 3px;
+  color: #fff;
+  display: inline-block;
+  letter-spacing: 0.1em;
+  line-height: am-unit(2);
+  padding: am-unit(0.5) am-unit(1);
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+@mixin am-tag-pressable {
+  transition: 0.2s all;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 1px 1px rgba(#000, 0.22);
+    text-shadow: none;
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+@mixin am-tag-success {
+  @include am-fill(primary);
+}
+
+@mixin am-tag-error {
+  @include am-fill(error);
+}

data/app/assets/stylesheets/active_material/prototypes/textfield.scss

@@ -0,0 +1,137 @@
+////
+/// Textfield
+/// Character inputs, for simple form fields
+/// @group textfield
+////
+
+/// Textfield input typography.
+$am-textfield-input-type: normal am-sp(14)/24px $am-font-sans !default;
+/// Textfield label typography.
+$am-textfield-label-type: 400 am-sp(12)/am-unit(2) $am-font-sans !default;
+/// Textfield margin.
+$am-textfield-margin: am-unit(1) 0 !default;
+/// Textfield padding.
+$am-textfield-padding: am-unit(1) am-unit(2) !default;
+/// Textfield error color.
+$am-textfield-error-color: $am-theme-error !default;
+/// Textfield color.
+$am-textfield-color: rgba(#000, 0.70) !default;
+/// Textfield highlight color.
+$am-textfield-primary: am-color(primary) !default;
+/// Icon for email fields.
+$am-textfield-email-icon: asset-url("active_material/icons/email.svg") !default;
+/// Icon for password fields.
+$am-textfield-password-icon: asset-url("active_material/icons/secret.svg") !default;
+/// Icon for date fields.
+$am-textfield-date-icon: asset-url("active_material/icons/event.svg") !default;
+
+@mixin am-textfield {
+  color: $am-textfield-color;
+  margin: $am-textfield-margin;
+  padding: $am-textfield-padding;
+  position: relative;
+}
+
+@mixin am-textfield-input {
+  background: #fff;
+  border-radius: 3px;
+  border: 1px solid #d3d3d3;
+  box-shadow: inset 1px 1px 1px rgba(#222, 0.08);
+  display: block;
+  font-size: am-sp(14);
+  font-weight: normal;
+  line-height: 24px;
+  margin: 0;
+  padding: am-unit(1);
+  transition: 0.35s border-color, 0.35s box-shadow;
+  width: 100%;
+
+  &:focus {
+    border-color: am-color(primary);
+    outline: 0;
+    transition: 0.15s border-color, 0.15s box-shadow;
+  }
+}
+
+@mixin am-textfield-input-email {
+  background: #fff $am-textfield-email-icon am-unit(1) 50% no-repeat;
+  padding-left: am-unit(5);
+}
+
+@mixin am-textfield-input-password {
+  background: #fff $am-textfield-password-icon am-unit(1) 50% no-repeat;
+  padding-left: am-unit(5);
+}
+
+@mixin am-textfield-input-date {
+  background: #fff $am-textfield-date-icon am-unit(1) 50% no-repeat;
+  padding-left: am-unit(5);
+}
+
+@mixin am-textfield-textarea {
+  border-radius: 2px;
+  height: am-sp(am-unit(7));
+  padding: am-unit(1);
+}
+
+@mixin am-textfield-input-error {
+  border-color: $am-textfield-error-color;
+  box-shadow: 0 1px 0 0 $am-textfield-error-color;
+}
+
+@mixin am-textfield-label {
+  @include am-font-size(13);
+  @include am-color(secondary-text);
+  display: block;
+  line-height: 16px;
+  font-weight: 400;
+  margin-bottom: 8px;
+  position: relative;
+  transition: 0.28s all;
+  width: 100%;
+
+  .has-focus & {
+    color: $am-textfield-primary;
+  }
+}
+
+@mixin am-textfield-hint {
+  @include am-type-caption;
+  @include am-color(secondary-text);
+  margin: am-unit(1) 0 0;
+}
+
+@mixin am-textfield-hint-error {
+  @include am-type-caption;
+  color: $am-textfield-error-color;
+  display: inline-block;
+  margin: $am-unit-type 0 0;
+  vertical-align: middle;
+  transition: 0.3s all;
+
+  &:first-letter {
+    text-transform: uppercase;
+  }
+}
+
+@mixin am-textfield-required {
+  @include am-type-caption;
+  border: 0;
+  color: $am-textfield-primary;
+  margin-left: 4px;
+}
+
+@mixin am-textfield-inline {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin am-textfield-label-inline {
+  width: 100%;
+}
+
+@mixin am-textfield-input-inline {
+  flex: 1;
+  width: auto;
+}

data/app/assets/stylesheets/active_material/prototypes/toolbar.scss

@@ -0,0 +1,70 @@
+/**
+ * Toolbar
+ * A basic navigation element, primary used for top level navigation
+ */
+
+$am-toolbar-base-font-size  : am-sp(14) !default;
+$am-toolbar-title-font-size : am-sp(20) !default;
+$am-toolbar-keyline-small   : am-unit(7) !default;
+$am-toolbar-keyline-medium  : $am-toolbar-keyline-small + 8px !default;
+
+@mixin am-toolbar {
+  @include am-type-smooth;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: $am-toolbar-base-font-size;
+  position: relative;
+}
+
+@mixin am-toolbar-primary {
+  @include am-fill(primary);
+  @include am-color(text-light);
+}
+
+@mixin am-toolbar-title {
+  font-size: $am-toolbar-title-font-size;
+  font-weight: 500;
+  line-height: am-unit(2);
+  padding: am-unit(2);
+  width: 100%;
+  text-align: left;
+
+  @include am-min-breakpoint($am-breakpoint-medium) {
+    width: auto;
+  }
+}
+
+@mixin am-toolbar-list {
+  margin: 0 0 0 am-unit(2);
+  padding: 0;
+  text-align: left;
+}
+
+@mixin am-toolbar-item {
+  @include am-link-no-decoration;
+  @include am-color(text);
+  display: inline-block;
+  font-weight: 500;
+  line-height: am-unit(3);
+  margin: 0;
+}
+
+@mixin am-toolbar-item-primary {
+  @include am-link-no-decoration;
+  @include am-color(text-light);
+  display: block;
+  line-height: am-unit(2);
+  padding: am-unit(2) am-unit(1);
+  text-align: center;
+
+  &:hover,
+  &:focus {
+    @include am-color(accent);
+  }
+}
+
+@mixin am-toolbar-item-primary-active {
+  @include am-color(accent);
+  font-weight: 600;
+}

data/app/assets/stylesheets/active_material/prototypes/underlay.scss

@@ -0,0 +1,16 @@
+/**
+ * Underlay
+ * Underlays appear below modal content that takes up the entire screen.
+ */
+
+$am-underlay-background: rgba(#000, 0.54) !default;
+
+@mixin am-underlay {
+  background: $am-underlay-background;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: $am-elevation-top;
+}

data/app/assets/stylesheets/active_material/values/breakpoints.scss

@@ -0,0 +1,3 @@
+$am-breakpoint-medium      : 600px !default;
+$am-breakpoint-large       : 1024px !default;
+$am-breakpoint-extra-large : 1279px !default;