active_material 1.4.1

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

@@ -0,0 +1,84 @@
+/**
+ * Utility Nav
+ * Displays current user and logout information
+ */
+
+#utility_nav {
+  background: asset-url("active_material/icons/account_circle.svg") no-repeat;
+  background-size: am-unit(5);
+  width: am-unit(5);
+  height: am-unit(5);
+  margin-top: am-unit(-2.5);
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: am-unit(2);
+
+  // Increase the hit region
+  &:before {
+    content: "";
+    position: absolute;
+    width: 90px;
+    height: 50px;
+    top: 0;
+    right: -12px;
+  }
+
+  a {
+    color: #333;
+  }
+
+  #current_user,
+  #logout {
+    clip: rect(0, 0, 0, 0);
+    opacity: 0;
+    transition: 0.28s all;
+  }
+
+  &:hover {
+    #current_user,
+    #logout {
+      clip: initial;
+      opacity: 1;
+    }
+  }
+}
+
+#current_user {
+  box-shadow: 0 1px 2px rgba(#000, 0.22);
+  background: #fff;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  padding: 16px;
+  height: 56px;
+  width: 200px;
+  position: absolute;
+  right: 0;
+  top: 48px;
+
+  &:before {
+    content: "";
+    border: 7px solid transparent;
+    border-bottom-color: #fff;
+    top: -14px;
+    right: 12px;
+    position: absolute;
+  }
+}
+
+#logout {
+  border-top: 1px solid #d9d9d9;
+  box-shadow: 0 1px 2px rgba(#000, 0.22);
+  position: absolute;
+  width: 200px;
+  right: 0;
+  top: 104px;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  background: #efefef;
+  text-align: right;
+
+  a {
+    @include am-btn;
+  }
+}

data/app/assets/stylesheets/active_material/generators/functions.scss

@@ -0,0 +1,102 @@
+/// Emulates letter tracking in Adobe Photoshop, which is used for
+/// adjusting the space between letters in text.
+///
+/// Follows the guidance of https://scotch.io/quick-tips/converting-photoshop-letter-spacing-to-css.
+///
+/// @param {number} $amount - An integer value, such as 100
+/// @return {number} The amount of letter-spacing in ems.
+@function am-tracking($amount) {
+  @return ($amount / 1000) + 0em;
+}
+
+
+/// Removes units (px, em, etc...) from a given number.
+///
+/// @param {number} $number - The numeric value to strip units from.
+/// @return {number} A unitless number value.
+@function am-strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+
+/// Calculates "scalable pixel" values. This is implemented using rems.
+/// Within material design, scalable pixel values are those that respect
+/// the user's font settings.
+///
+/// According to the [Google Material Design Specification](https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-scaleable-pixels-sp-):
+/// > "Users who have larger text settings for accessibility will see
+/// > the font size matched to their text size preferences."
+///
+/// @param {number} $value - A pixel value to be converted into rems.
+/// @param {number} $baseline [16] - The assumed base font size.
+/// @return {number} Scalable pixel value in rems.
+@function am-sp($value, $baseline:16) {
+  @return (am-strip-units($value) / $baseline) + rem;
+}
+
+
+/// Calculates measurements along the base unit grid defined under $am-unit-base. This provides
+/// an easy way to align elements upon a baseline mesh grid.
+///
+/// @param {number} $step - The scale of units
+/// @return {number} A pixel value representing the number of units along the mesh grid.
+@function am-unit($step:1) {
+  @return $am-unit-base * $step;
+}
+
+
+/// Calculates measurements along the base type grid defined under $am-unit-base. This provides
+/// an easy way to align elements upon a baseline typographic mesh grid.
+///
+/// @param {number} $step - The scale of units
+/// @return {number} A pixel value representing the number of units along the typographic mesh grid.
+@function am-type-unit($step:1) {
+  @return $am-unit-type * $step;
+}
+
+
+/// Extracts a color out of the $am-color map. Throws an error if that key is not defined.
+///
+/// @param {any} $key - The desired key in $am-colors.
+/// @return {color} A color value from $am-colors.
+@function am-color ($key) {
+  @if map-has-key($am-colors, $key) {
+    @return map-get($am-colors, $key);
+  }
+
+  @error "Unknown color value '#{$key}'";
+  @return null;
+}
+
+
+/// Extracts a color out of the $am-color map and lightens it using the built-in Sass function.
+///
+/// @param {any} $key - The desired key in $am-colors.
+/// @param {number} $amount - The degree of lightness.
+/// @return {color} A lightened color value from $am-colors.
+@function am-lighten ($color, $amount) {
+  @return lighten(am-color($color), $amount);
+}
+
+
+/// Extracts a color out of the $am-color map and darkens it using the built-in Sass function.
+///
+/// @param {any} $key - The desired key in $am-colors.
+/// @param {number} $amount - The degree of darkness.
+/// @return {color} A darkened color value from $am-colors.
+@function am-darken ($color, $amount) {
+  @return darken(am-color($color), $amount);
+}
+
+/// Extracts a font family out of the $am-fonts map. Throws an error if that key is not defined.
+///
+/// @param {any} $key - The desired key in $am-colors.
+/// @return {font} A font family from $am-colors.
+@function am-font-family ($key) {
+  @if map-has-key($am-fonts, $key) {
+    @return map-get($am-fonts, $key);
+  }
+
+  @error "Unknown font value '#{$key}'";
+  @return null;
+}

data/app/assets/stylesheets/active_material/generators/mixins.scss

@@ -0,0 +1,24 @@
+/// Standard logic for management of breakpoints
+@mixin am-min-breakpoint($breakpoint) {
+  @media screen and (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+/// Assign a given font size in rems, falling back to pixel values
+/// in older browsers.
+/// @param {number} $size - Font size in pixels
+@mixin am-font-size($size) {
+  font-size: am-strip-units($size) + 0px;
+  font-size: am-sp($size);
+}
+
+/// When using the Webfont.js font loader, only show the loaded font-family
+/// when the loader indicates it is active (via the .wf-active) class.
+@mixin am-web-font($family, $fallback: sans-serif) {
+  font-family: $fallback;
+
+  .wf-active & {
+    @include am-font-family($family);
+  }
+}

data/app/assets/stylesheets/active_material/global/foundation.scss

@@ -0,0 +1,107 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+::selection {
+  @include am-fill(accent);
+  @include am-color(text-light);
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  @include am-type-body-1;
+  @include am-color(text);
+  @include am-web-font(sans);
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+b,
+strong {
+  @include am-type-body-2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font: inherit;
+  margin: 0;
+}
+
+p {
+  margin: am-type-unit(3) 0;
+}
+
+button,
+input {
+  @include am-font-family(sans);
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: 0.3s color;
+
+  &:link,
+  &:visited {
+    @include am-color(primary);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    @include am-color(accent-hover);
+    transition: 0.1s color;
+  }
+
+  &:active {
+    @include am-color(accent-active);
+    transition: 0.1s color;
+  }
+}
+
+blockquote {
+  border-left: 4px solid am-color(hint);
+  margin: am-type-unit(4) 0;
+  padding: am-type-unit(4);
+}
+
+hr {
+  border: 0;
+  border-bottom: 1px solid am-color(divider);
+  margin: am-unit(4) 0
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+hr {
+  margin: 0;
+}

data/app/assets/stylesheets/active_material/prototypes/actions-footer.scss

@@ -0,0 +1,8 @@
+@mixin am-actions-footer {
+  background: #fefefe;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  box-shadow: inset 0 1px 1px rgba(#000, 0.2);
+  display: block;
+  padding: am-unit(2);
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Avatar
+ * A circular image
+ */
+
+@import '../values/colors';
+
+$am-avatar-background: am-color(icon) !default;
+$am-avatar-box-shadow: 0 1px 2px rgba(#000, 0.2) !default;
+$am-avatar-border-radius: 50% !default;
+$am-avatar-block-level: block !default;
+
+@mixin am-avatar {
+  background: $am-avatar-background;
+  border-radius: $am-avatar-border-radius;
+  box-shadow: $am-avatar-box-shadow;
+  color: transparent;
+  display: $am-avatar-block-level;
+}

data/app/assets/stylesheets/active_material/prototypes/btn-icon.scss

@@ -0,0 +1,14 @@
+/**
+ * Button Icon
+ * A simple, reusable icon button
+ */
+
+@mixin am-btn-icon {
+  border-radius: 50%;
+  height: 40px;
+  overflow: hidden;
+  padding: 0;
+  text-indent: 100%;
+  white-space: nowrap;
+  width: 40px;
+}

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

@@ -0,0 +1,58 @@
+$am-btn-min-width: 88px !default;
+$am-btn-padding: 12px 8px !default;
+$am-btn-border-radius: 2px !default;
+$am-btn-focus-color: rgba(#999, 0.2) !default;
+$am-btn-active-color: rgba(#999, 0.4) !default;
+
+@mixin am-btn {
+  @include am-type-btn;
+  @include am-color(text);
+  background: transparent;
+  border-radius: $am-btn-border-radius;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 18px;
+  margin: 4px;
+  padding: $am-btn-padding;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  transition: 0.25s all;
+  user-select: none;
+  vertical-align: center;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    @include am-color(primary);
+    text-decoration: none;
+  }
+}
+
+@mixin am-btn-raised {
+  @include am-type-smooth;
+  @include am-fill(primary);
+  @include am-color(white);
+  box-shadow: 0 0 2px rgba(#000, 0.12);
+  font-weight: 600;
+  min-width: $am-btn-min-width;
+
+  &:focus,
+  &:hover {
+    @include am-color(text-light);
+    background: am-lighten(primary, 10%);
+    outline: none;
+  }
+
+  &:active {
+    background: am-lighten(primary, 5%);
+    box-shadow: inset 0 1px 0 rgba(#fff, 0.2);
+  }
+}
+
+@mixin am-btn-disabled {
+  opacity: 0.4;
+}

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

@@ -0,0 +1,107 @@
+////
+/// Datepicker
+/// A calendar widget
+/// @group datepicker
+////
+
+/// The width of the datepicker.
+$am-datepicker-width: am-unit(35) !default;
+/// The shadow cast below the datepicker.
+$am-datepicker-shadow: (0 1px 2px rgba(#000, 0.25), 0 -1px 1px rgba(#000, 0.12)) !default;
+/// The border radius of the picker.
+$am-datepicker-border-radius: 2px !default;
+/// The size of an individual cell in the calendar. Square.
+$am-datepicker-cell-size: am-unit(4) !default;
+
+@mixin am-datepicker {
+  background: white;
+  border-radius: $am-datepicker-border-radius;
+  box-shadow: $am-datepicker-shadow;
+  padding: 0 am-unit(1.5) am-unit(1);
+  width: $am-datepicker-width;
+}
+
+@mixin am-datepicker-header {
+  line-height: $am-datepicker-cell-size;
+  padding: am-unit(1) 0 am-unit(0.5);
+  position: relative;
+  text-align: center;
+}
+
+@mixin am-datepicker-title {
+  @include am-font-size(14px);
+  font-weight: 600;
+}
+
+@mixin am-datepicker-icon {
+  &:before {
+    @include am-font-size(am-unit(2));
+    display: inline-block;
+    height: $am-datepicker-cell-size;
+    width: $am-datepicker-cell-size;
+  }
+}
+
+@mixin am-datepicker-prev {
+  cursor: pointer;
+  float: left;
+
+  &:before {
+    @include am-datepicker-icon;
+    content: "‹";
+  }
+}
+
+@mixin am-datepicker-next {
+  cursor: pointer;
+  float: right;
+
+  &:before {
+    @include am-datepicker-icon;
+    content: "›";
+  }
+}
+
+@mixin am-datepicker-calendar {
+  @include am-font-size(12px);
+  border-collapse: collapse;
+  text-align: center;
+  width: 100%;
+}
+
+@mixin am-datepicker-calendar-heading {
+  @include am-color(secondary-text);
+  font-weight: 500;
+  padding: 0 0 am-type-unit(1);
+}
+
+@mixin am-datepicker-calendar-day {
+  height: $am-datepicker-cell-size;
+  font-weight: 500;
+  line-height: $am-datepicker-cell-size;
+  padding: 0;
+  width: $am-datepicker-cell-size;
+}
+
+@mixin am-datepicker-calendar-day-disabled {
+  opacity: 0;
+}
+
+@mixin am-datepicker-calendar-day-link {
+  @include am-link(text);
+  border-radius: 50%;
+  display: block;
+  height: inherit;
+  margin: 0 auto;
+  width: inherit;
+}
+
+@mixin am-datepicker-calendar-day-link-focus {
+  @include am-color(primary);
+  text-decoration: none;
+}
+
+@mixin am-datepicker-calendar-day-link-current {
+  @include am-fill(primary);
+  @include am-color(white);
+}

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

@@ -0,0 +1,54 @@
+////
+/// Dialog
+/// A modal that appears above all other content
+/// @group dialog
+////
+
+// Dialog background color
+$am-dialog-background: #fff !default;
+// Dialog container border-radius
+$am-dialog-border-radius: 2px !default;
+// Dialog title padding
+$am-dialog-title-padding: am-unit(4) am-unit(3) am-unit(1) !default;
+
+@keyframes am-dialog-fade {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@mixin am-dialog {
+  animation: 0.6s am-dialog-fade;
+  background: $am-dialog-background;
+  border-radius: $am-dialog-border-radius;
+  box-shadow: 0 3px 3px rgba(#000, 0.23), 0 3px 3px rgba(#000, 0.16);
+  outline: none;
+  z-index: $am-elevation-top;
+}
+
+@mixin am-dialog-title {
+  @include am-type-subheader;
+  display: block;
+  padding: $am-dialog-title-padding;
+}
+
+@mixin am-dialog-footer {
+  padding: am-unit(1) am-unit(1) 0;
+  text-align: right;
+}
+
+@mixin am-dialog-close {
+  @include am-btn-icon;
+  background: asset_url("active_material/icons/clear.svg") 50% 50% no-repeat;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

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

@@ -0,0 +1,118 @@
+////
+/// Menu
+/// A dropdown menu. Used for nested navigation and selection
+/// @group menu
+////
+
+/// Background color of the menu
+$am-menu-background: #fff !default;
+/// Border radious of the menu
+$am-menu-border-radius: 2px !default;
+/// X-axis offset of opened menu
+$am-menu-offset-x: 0 !default;
+/// Y-axis offset of opened menu
+$am-menu-offset-y: am-unit(4) !default;
+/// Padding of opened menu's container
+$am-menu-padding: am-unit(1) !default;
+/// Padding of individual menu items
+$am-menu-item-padding: am-type-unit(1) am-unit(2) !default;
+/// Transition time of menu opening
+$am-menu-transition: 0.2s !default;
+/// Transition delay when a menu opens
+$am-menu-transition-delay: 0.2s !default;
+/// Minimum allowable width of menu
+$am-menu-min-width: am-unit(14) !default;
+/// Desktop breakpoint
+$am-menu-breakpoint: 1300px !default;
+/// The size of the dropdown carot that displays next to the menu toggle
+$am-menu-carat-size: 5px !default;
+
+@mixin am-menu {
+  display: inline-block;
+  outline: 0;
+  position: relative;
+  text-align: left;
+}
+
+@mixin am-menu-carat {
+  border: $am-menu-carat-size solid transparent;
+  border-color: am-color(primary) transparent transparent;
+  content: "";
+  height: 0;
+  margin-top: $am-menu-carat-size / -2;
+  position: absolute;
+  right: -15px;
+  top: 50%;
+  width: 0;
+}
+
+@mixin am-menu-carat-muted {
+  border-top-color: am-color(hint);
+}
+
+@mixin am-menu-list {
+  background: $am-menu-background;
+  border-radius: $am-menu-border-radius;
+  box-shadow: 0 1px 1px rgba(#000, 0.24), 0 0 1.5px rgba(#000, 0.12);
+  filter: blur(1px);
+  left: $am-menu-offset-x;
+  list-style: none;
+  margin: 0;
+  min-width: $am-menu-min-width;
+  padding: $am-menu-padding 0;
+  position: absolute;
+  text-align: left;
+  top: $am-menu-offset-y;
+  transform-origin: 0 0;
+  transform: translate3d(0, -4px, 0) scaleY(0);
+  transition: $am-menu-transition all;
+  width: auto;
+  will-change: transform;
+  z-index: $am-elevation-top;
+}
+
+@mixin am-menu-list-right {
+  left: auto;
+  right: $am-menu-offset-x;
+}
+
+@mixin am-menu-item {
+  display: block;
+  margin: 0;
+  transition: $am-menu-transition all;
+}
+
+@mixin am-menu-link {
+  @include am-link(secondary-text);
+  @include am-link-no-decoration;
+  display: block;
+  font-size: 14px;
+  opacity: 0;
+  padding: $am-menu-item-padding;
+  transition: 0.28s opacity, 0.28s color;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    @include am-color(primary);
+  }
+
+  @include am-min-breakpoint($am-menu-breakpoint) {
+    font-size: 13px;
+  }
+}
+
+@mixin am-menu-button {
+  position: relative;
+}
+
+@mixin am-menu-list-open {
+  filter: none;
+  transition: $am-menu-transition all;
+  transform: translateZ(0) scale(1);
+}
+
+@mixin am-menu-item-open {
+  opacity: 1;
+  transition: $am-menu-transition opacity;
+}