undercase 0.2.29

data/app/assets/stylesheets/undercase/libraries/mixins/_forms.scss

@@ -0,0 +1,33 @@
+//
+// FORM-SPECIFIC MIXINS
+//
+@mixin uc-field-style {
+  @include border-radius(3px);
+  padding: 0.4em;
+  font-family: $font-family;
+  font-size: $font-size;
+  line-height: 1.5em;
+  height: 2.3em;
+  background-color: white;
+  border: $light-border-width solid $border-color;
+  @media #{$small-tablet} {
+    font-size: $uc-form-embiggened-input-font-size;
+  }
+  &:focus {
+    border: $solid-middle-blue-2-border;
+  }
+}
+
+@mixin uc-form-flow-margin {
+  margin-bottom: $gutter * 2;
+}
+
+@mixin uc-label {
+  display: block;
+  margin-bottom: $gutter*0.5;
+  font-weight: $semibold-weight;
+  color: $dark-gray;
+  @media #{$small-tablet} {
+    font-size: $uc-form-embiggened-label-font-size;
+  }
+}

data/app/assets/stylesheets/undercase/libraries/mixins/_layout.scss

@@ -0,0 +1,23 @@
+//
+// CUSTOM RESOPNSIVE SO WE DONT HAVE TO EXTEND GROUNDWORK
+//
+@mixin groundwork-column {
+  float: left;
+  position: relative;
+}
+@mixin respond-small-tablet {
+  @include groundwork-column;
+  @if $responsive {
+    @media #{$small-tablet} {
+      width:100% !important;
+      float:none;
+      clear:both;
+    }
+  }
+}
+
+@mixin groundwork-centered {
+  float: none !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}

data/app/assets/stylesheets/undercase/libraries/mixins/_typography.scss

@@ -0,0 +1,99 @@
+//
+// REM TOOLS
+//
+@mixin font-size-px-to-rem($new-font-size, $give-line-height: false) {
+  font-size: ($new-font-size / $font-size) * 1rem;
+  @if $give-line-height {
+    line-height: ($new-font-size / $font-size) * 1.2rem;
+  }
+}
+
+//
+// ICON
+//
+@mixin icon-inline-block {
+  display: inline-block;
+  font-family: $icon-font-family;
+  font-style: normal;
+  font-weight: $normal-weight;
+  line-height: 1;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+//
+// REFACTORED TYPOGRAPHY
+//
+// type-[SIZE]-[WEIGHT]-[STYLE]
+@mixin type-x-large-normal-normal {
+  font-size: $x-large;
+  line-height: $large-line-height;
+  font-style: normal;
+  font-weight: $normal-weight;
+}
+@mixin type-x-large-normal-bold {
+  font-size: $x-large;
+  line-height: $large-line-height;
+  font-style: normal;
+  font-weight: $bold-weight;
+}
+@mixin type-huge-normal-semibold {
+  font-size: $huge;
+  line-height: $huge-line-height;
+  font-style: normal;
+  font-weight: $semibold-weight;
+}
+@mixin type-tiny-normal-semibold {
+  font-size: $small;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $semibold-weight;
+}
+@mixin type-small-normal-normal {
+  font-size: $small;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $normal-weight;
+}
+@mixin type-small-normal-semibold {
+  font-size: $small;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $semibold-weight;
+}
+@mixin type-medium-normal-normal {
+  font-size: $medium;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $normal-weight;
+}
+@mixin type-medium-normal-semibold {
+  font-size: $medium;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $semibold-weight;
+}
+@mixin type-medium-small-italic-semibold {
+  font-size: $medium-small;
+  line-height: $small-line-height;
+  font-style: italic;
+  font-weight: $semibold-weight;
+}
+@mixin type-medium-small-normal-normal {
+  font-size: $medium-small;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $normal-weight;
+}
+@mixin type-medium-small-normal-semibold {
+  font-size: $medium-small;
+  line-height: $small-line-height;
+  font-style: normal;
+  font-weight: $semibold-weight;
+}
+@mixin type-small-italic-normal {
+  font-size: $small;
+  font-style: italic;
+}
+

data/app/assets/stylesheets/undercase/patterns/_all.scss

@@ -0,0 +1,32 @@
+@import 'borders';
+@import 'box_helpers';
+@import 'buttons';
+@import 'cards';
+@import 'chevrons';
+@import 'colors';
+@import 'compass/reset';
+@import 'content_with_toolbar';
+@import 'dropdowns';
+@import 'filters';
+@import 'font_faces';
+@import 'forms';
+@import 'icons';
+@import 'inline_message';
+@import 'layout';
+@import 'length_of_time';
+@import 'links';
+@import 'lists';
+@import 'media';
+@import 'modals';
+@import 'navigation';
+@import 'pagination';
+@import 'popovers';
+@import 'quiz';
+@import 'site';
+@import 'spinners';
+@import 'tables';
+@import 'tabs';
+@import 'typography';
+@import 'horizontal_rules';
+@import 'undercase_icons/glyphs';
+@import 'person_placard';

data/app/assets/stylesheets/undercase/patterns/_borders.scss

@@ -0,0 +1,89 @@
+//
+// left border sensitive to edit mode
+//
+.uc-editable-border-left {
+  border-left: $solid-yellow-border;
+  .new &,
+  .edit & {
+    border-left: $solid-blue-border;
+  }
+}
+
+//
+// gray
+//
+.uc-border-top-gray-dotted {
+  border-top: $light-border-width dotted $light-gray;
+}
+.uc-border-bottom-gray-dotted {
+  border-bottom: $dotted-light-gray-border;
+}
+
+//
+// middle-gray
+//
+.uc-border-bottom-middle-gray {
+  border-bottom: $solid-light-gray-border;
+}
+.uc-border-bottom-middle-gray-dotted {
+  border-bottom: $dotted-middle-gray-border;
+}
+
+//
+// light gray
+//
+.uc-border--light-gray {
+  border: $solid-light-gray-border;
+}
+
+//
+// lighter-gray
+//
+.uc-border--lighter-gray {
+  border: $light-border-width solid $lighter-gray;
+}
+.uc-border-top-lighter-gray {
+  border-top: $light-border-width solid $lighter-gray;
+}
+.uc-border-bottom-lighter-gray {
+  border-bottom: $light-border-width solid $lighter-gray;
+}
+
+//
+// blue
+//
+.uc-border-bottom-blue {
+  border-bottom: $solid-middle-blue-2-border;
+}
+.uc-border-top--blue-dotted {
+  border-top: $dotted-middle-blue-2-border;
+}
+
+//
+// middle-blue-2
+//
+.uc-border-bottom-solid-middle-blue-2 {
+  border-bottom: $solid-middle-blue-2-border;
+}
+
+//
+// yellow
+//
+.uc-border-top-yellow-dotted {
+  border-top: $dotted-yellow-border;
+}
+
+//
+// TODO: Does not belong here. Make it a separate pattern
+// blue background and border on hover
+//
+.uc-border-blue-on-hover {
+  border: $light-border-width solid $white;
+  border-radius: 5px;
+  padding: $gutter/2;
+
+  &:hover {
+    border: $light-border-width solid $light-blue;
+    background-color: $hover-blue;
+  }
+}

data/app/assets/stylesheets/undercase/patterns/_box_helpers.scss

@@ -0,0 +1,39 @@
+.one-and-a-half-padded {
+  padding: $gutter*1.5;
+}
+
+.one-and-a-half-pad-top {
+  padding-top: $gutter*1.5;
+}
+
+.one-and-a-half-pad-right {
+  padding-right: $gutter*1.5;
+}
+
+.one-and-a-half-pad-bottom {
+  padding-bottom: $gutter*1.5;
+}
+
+.one-and-a-half-pad-left {
+  padding-left: $gutter*1.5;
+}
+
+.one-and-a-half-gapped {
+  margin: $gutter*1.5;
+}
+
+.one-and-a-half-gap-top {
+  margin-top: $gutter*1.5;
+}
+
+.one-and-a-half-gap-right {
+  margin-right: $gutter*1.5;
+}
+
+.one-and-a-half-gap-bottom {
+  margin-bottom: $gutter*1.5;
+}
+
+.one-and-a-half-gap-left {
+  margin-left: $gutter*1.5;
+}

data/app/assets/stylesheets/undercase/patterns/_buttons.scss

@@ -0,0 +1,110 @@
+//
+// NEW FLAT BUTTONS
+//
+.cc-button-primary {
+  @include cc-button-flat-primary(white, $medium-orange, darken($medium-orange, 5%));
+}
+.cc-button-flat-green-primary {
+  @include cc-button-flat-primary(white, #198466, darken(#198466, 7), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.08));
+}
+.cc-button-flat-gray-primary {
+  @include cc-button-flat-primary($dark-gray, $lighter-gray, $light-gray2, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.04));
+}
+@-moz-document url-prefix() {
+  a.cc-button-flat-gray-primary,
+  a.cc-button-flat-green-primary {
+    padding:11px 21px;
+  }
+}
+
+.cc-button-secondary {
+  @include cc-button-flat-secondary(white, $medium-orange, darken($medium-orange, 5%));
+}
+.cc-button-flat-blue-secondary {
+  @include cc-button-flat-secondary(white, $link-blue, $darker-blue, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.08));
+}
+.cc-button-flat-gray-secondary {
+  @include cc-button-flat-secondary($dark-gray, $lighter-gray, $light-gray2, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.04));
+}
+
+@-moz-document url-prefix() {
+  input.cc-button-flat-gray-secondary,
+  input.cc-button-flat-blue-secondary {
+    padding:3px 14px;
+  }
+}
+
+//
+// SPLIT BUTTON
+//
+.uc-button--flat-gray--split {
+  position: relative;
+  display: table;
+}
+.uc-button--flat-gray--split--left {
+  @include cc-button-flat-secondary($dark-gray, $lighter-gray, $light-gray2, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.04));
+  @include border-left-radius(3px);
+  @include border-right-radius(0px);
+  margin: 0;
+  padding: $gutter/2 $gutter;
+  display: table-cell;
+  min-width: 98px;
+  max-width: 200px;
+  overflow: hidden;
+}
+
+.uc-button--flat-gray--split--right {
+  @include cc-button-flat-secondary($dark-gray, $lighter-gray, $light-gray2, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.04));
+  @include border-left-radius(0);
+  @include border-right-radius(3px);
+  margin: 0;
+  padding: $gutter/2;
+  width: 22px;
+  min-width: 22px;
+  &:after {
+    @include icon-inline-block;
+    content: $uc-icon-caret-down;
+  }
+
+  display: table-cell;
+}
+
+//
+// LEGACY BUTTONS
+//
+.cc-button-auto {
+  @include cc-button;
+  @include cc-button-min-width;
+  .show &,
+  .index & {
+    @include cc-button-color-fade($white, $medium-orange, $medium-orange, $medium-orange, $light-orange);
+  }
+  .new &,
+  .edit & {
+    @include cc-button-color-fade($white, $blue, $blue, $blue, $middle-blue-2);  }
+}
+.cc-button-gray {
+  @include cc-button;
+  @include cc-button-min-width;
+  @include cc-button-color-fade($dark-gray, $lighter-gray, $light-gray, $lighter-gray, darken($lighter-gray,5%));
+  text-shadow: 0 0 1px $lighter-gray;
+}
+.cc-button-icon {
+  @include cc-button;
+  @include cc-button-color-fade($dark-gray, $lighter-gray, $light-gray, $lighter-gray, darken($lighter-gray,5%));
+  text-shadow: 0 0 1px $lighter-gray;
+  padding: 0 $gutter;
+  &.cc-button-icon--suffix {
+    @include border-left-radius(0);
+  }
+}
+.cc-button-wire-auto {
+  .show &,
+  .index & {
+    @include cc-button-wire($medium-orange, $white, $medium-orange);
+  }
+  .new &,
+  .edit & {
+    @include cc-button-wire($blue, $white, $blue);
+  }
+}

data/app/assets/stylesheets/undercase/patterns/_cards.scss

@@ -0,0 +1,36 @@
+// add new
+.uc-add-new-button {
+  &:before {
+    @include icon-inline-block;
+    content: $uc-icon-plus-circle;
+    padding-right: $gutter;
+    font-size: $x-large;
+    vertical-align: middle;
+  }
+}
+
+.uc-emphasized-box--blue {
+  padding: $gutter;
+  background-color: $hover-blue;
+  @include border-radius($small-border-radius);
+}
+
+.uc-emphasized-box__label {
+  font-weight: $semibold-weight;
+}
+
+.uc-card__nested-form {
+  @include border-radius($small-border-radius);
+  background-color: $sky-blue;
+  padding: $gutter;
+  border: $solid-blue-border;
+}
+.uc-card__nested-form--white {
+  @extend .uc-card__nested-form;
+  background-color: white;
+}
+
+.uc-bordered-heading {
+  border-bottom: solid 1px $light-gray;
+  margin-bottom: $gutter;
+}