undercase 0.2.29

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

@@ -0,0 +1,231 @@
+//
+// HEADINGS
+//
+h1 {
+  @extend .uc-t-h1;
+}
+h2 {
+  @extend .uc-t-h2;
+}
+h3 {
+  @extend .uc-t-h3;
+}
+h4 {
+  @extend .uc-t-h4;
+}
+
+//
+// OTHER HTML ELEMENTS
+//
+strong {
+  @extend .uc-t-body-strong;
+}
+
+//
+// RANDO
+//
+.notification-indicator {
+  @include border-radius(2px);
+  background-color: $yellow;
+  position: absolute;
+  bottom: 6px;
+  right: 20px;
+  padding: 3px 6px;
+  margin-right: $small-spacing;
+  font-size: $small;
+  font-weight: $semibold-weight;
+  color: $dark-gray;
+  float: right;
+  line-height: 1em;
+  &:empty {
+    display: none;
+  }
+}
+
+%cc-emphasis {
+  color: $dark-gray;
+  padding: 1px 5px;
+  display: inline-block;
+}
+.cc-emphasis-low {
+  @extend %cc-emphasis;
+  background-color: $white;
+}
+.cc-emphasis-medium {
+  @extend %cc-emphasis;
+  background-color: $lighter-gray;
+}
+.cc-emphasis-high {
+  @extend %cc-emphasis;
+  background-color: $sky-blue;
+}
+.cc-emphasis-critical {
+  @extend %cc-emphasis;
+  background-color: $lighter-red;
+}
+
+//
+// TYPOGRAPHY HELPERS
+//
+.type-italic {
+  font-style: italic;
+}
+.type-bold {
+  font-weight: $semibold-weight;
+}
+.type-uppercase {
+  text-transform: uppercase;
+}
+.type-clear-text-transform{
+  text-transform: none !important; //used to override until .card em is refactored
+}
+
+//
+// FROM MIXINS
+//
+.type-x-large-normal-normal {
+  @include type-x-large-normal-normal;
+}
+.type-x-large-normal-bold {
+  @include type-x-large-normal-bold;
+}
+.type-huge-normal-semibold {
+  @include type-huge-normal-semibold;
+}
+.type-tiny-normal-semibold {
+  @include type-tiny-normal-semibold;
+}
+.type-small-normal-normal {
+  @include type-small-normal-normal;
+}
+.type-small-normal-semibold {
+  @include type-small-normal-semibold;
+}
+.type-medium-normal-normal {
+  @include type-medium-normal-normal;
+}
+.type-medium-normal-semibold {
+  @include type-medium-normal-semibold;
+}
+.type-medium-small-italic-semibold {
+  @include type-medium-small-italic-semibold;
+}
+.type-medium-small-normal-normal {
+  @include type-medium-small-normal-normal;
+}
+.type-medium-small-normal-semibold {
+  @include type-medium-small-normal-semibold;
+}
+.type-small-italic-normal {
+  @include type-small-italic-normal;
+}
+
+//
+// NEW DESIGN TYPE CLASSES
+//
+.type-body {
+  @include font-size-px-to-rem(14px, true);
+  font-weight: $normal-weight;
+  em {
+    font-weight: $semibold-weight;
+  }
+}
+.type-thin-caps-heading {
+  text-transform: uppercase;
+  font-size: 20px;
+  font-weight: $extralight-weight;
+  color: $dark-gray;
+}
+
+
+//
+// NEW HEADINGS
+//
+.uc-t-h1 {
+  font-size: 1.286rem;
+  font-weight: 600;
+  line-height: 2.143rem;
+}
+.uc-t-h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.643rem;
+}
+.uc-t-h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 1.429rem;
+}
+.uc-t-h4 {
+  font-size: 1rem;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 1.714rem;
+}
+.uc-t-thin-header-placeholder {
+  font-size: 1.429rem;
+  font-weight: 300;
+  text-transform: uppercase;
+  line-height: 2.143rem;
+}
+
+.uc-t-body-p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.286rem;
+}
+
+.uc-t-body-small {
+  font-size: 0.9286rem;
+}
+
+.uc-t-body-em {
+  font-style: italic;
+  font-weight: normal;
+  color: $middle-gray;
+  vertical-align: inherit;
+}
+
+.uc-t-body-strong {
+  font-weight: 600;
+  vertical-align: inherit;
+}
+
+.uc-t-body-underline  {
+  text-decoration: underline;
+  vertical-align: inherit;
+}
+
+.uc-t-body-uppercase {
+  text-transform: uppercase;
+}
+
+.uc-t-body-large-thin-placeholder {
+  font-size: 1.286rem;
+  font-weight: 300;
+  line-height: 2rem;
+}
+
+.uc-t-links-page-banner {
+  font-size: 1.286rem;
+  font-weight: 600;
+  line-height: 2.143em;
+  // on hover, underline disappears
+}
+
+.uc-t-links-general {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.286rem;
+  // on hover, underline disappears
+}
+
+.uc-t-links-navigational {
+  font-size: 1rem;
+  font-weight: 400;
+  text-decoration: none;
+  line-height: 1.286rem;
+  // on hover, underline appears
+}
+

data/app/assets/stylesheets/undercase/patterns/undercase_icons/glyphs.scss

@@ -0,0 +1,28 @@
+.uc-icon-calendar_datepicker:before {
+  font-family: Undercase-Icons;
+  content: "\f103";
+}
+.uc-icon-checkbox-selected:before {
+  font-family: Undercase-Icons;
+  content: "\f104";
+}
+.uc-icon-checkbox-unselected:before {
+  font-family: Undercase-Icons;
+  content: "\f105";
+}
+.uc-icon-double-arrow-left:before {
+  font-family: Undercase-Icons;
+  content: "\f106";
+}
+.uc-icon-double-arrow-right:before {
+  font-family: Undercase-Icons;
+  content: "\f107";
+}
+.uc-icon-focus-child:before {
+  font-family: Undercase-Icons;
+  content: "\f101";
+}
+.uc-icon-master-profile:before {
+  font-family: Undercase-Icons;
+  content: "\f102";
+}

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

@@ -0,0 +1,6 @@
+//
+// STYLESHEETS ONLY FOR USE ON NEW FRONTEND PAGES
+//
+@import 'cards';
+@import 'links';
+@import 'warnings';

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

@@ -0,0 +1,248 @@
+//
+// CARD
+//
+.uc-card {
+  .show &,
+  .index & {
+    background-color: $light-yellow;
+  }
+
+  .edit &,
+  .new & {
+    background-color: $hover-blue;
+  }
+
+  margin-bottom: $gutter * 2;
+}
+
+
+//
+// CARD HEADER
+//
+.uc-card__header {
+  padding: $gutter*0.4 $gutter;
+  position: relative;
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
+  .show &,
+  .index & {
+    background-color: $middle-dark-yellow;
+  }
+
+  .edit &,
+  .new & {
+    background-color: $blue;
+    color: $white;
+  }
+}
+
+.uc-card__header__corner-links {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: $gutter/2 $gutter;
+  font-size: $medium-small;
+
+  .edit & a,
+  .new & a{
+    color: inherit;
+  }
+
+  > li {
+    float: left;
+  }
+
+  > li:not(.hidden) + li {
+    &:before {
+      content: '|';
+      padding: 0 $gutter/2;
+    }
+  }
+}
+
+
+//
+// CARD OTHER
+//
+.uc-card__subheading {
+  position: relative;
+}
+
+.uc-card__nested-form--list {
+  li + li {
+    padding-top: $gutter / 2;
+  }
+}
+
+
+//
+// tabs
+//
+.uc-tabs {
+  margin-bottom: $gutter * 2;
+}
+
+.uc-tabs--blue__tab {
+  display: inline-block;
+  position: relative;
+
+  &.current:after {
+    content: "";
+    position: absolute;
+    margin-left: 50%;
+    bottom: -10px;
+    left: -10px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid $blue;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+  }
+  @media #{$mobile} {
+    width: 100%;
+  }
+  & + & {
+    margin-left: $gutter;
+    @media #{$mobile} {
+      margin-left: 0;
+      margin-top: $gutter * 1.5;
+    }
+  }
+}
+
+.uc-tabs--blue__tab__link {
+  @include border-radius(5px);
+  display: block;
+  text-decoration: none;
+  padding: $gutter $gutter*2;
+  color: $link-blue;
+  background-color: $sky-blue;
+  text-transform: uppercase;
+  font-weight: $semibold-weight;
+  &:hover{
+    color: $white;
+    background: $blue;
+    cursor: pointer;
+  }
+  .current & {
+    color: $white;
+    background-color: $blue;
+  }
+}
+
+
+//
+// mini-tabs
+//
+.uc-mini-tabs {
+  position: absolute;
+  top: 0;
+  right: $gutter;
+  @media #{$mobile} {
+    position: relative;
+    right: 0;
+    left: $gutter;
+    margin-top: $gutter;
+  }
+}
+
+.uc-mini-tabs__tab {
+  display: inline-block;
+}
+
+.uc-mini-tabs__tab__link {
+  padding: $gutter/2 $gutter;
+  top: 1px;
+  position: relative;
+  border-top: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  @media #{$mobile} {
+    display: inline-block;
+  }
+
+  .current & {
+    @include border-radius(5px 5px 0 0);
+    border-color: $blue;
+    border-bottom: none;
+    background: $sky-blue;
+    z-index: 1;
+  }
+}
+
+
+//
+// expando
+//
+.uc-expando {
+  @include uc-form-flow-margin;
+}
+
+.uc-expando-header {
+  cursor: pointer;
+  @extend .uc-bordered-heading;
+
+  padding-bottom: $gutter/2;
+
+  .uc-card__nested-form--white:not(.open) & {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  h3 {
+    display: inline-block;
+  }
+
+  &:before {
+    @include icon-inline-block;
+    margin-right: $gutter/2;
+    content: $uc-icon-caret-right;
+    @include font-size-px-to-rem(16px);
+  }
+  .open &:before {
+    content: $uc-icon-caret-down;
+  }
+}
+
+.uc-expando-header--filters {
+  cursor: pointer;
+  &:hover {
+    background-color: $hover-blue;
+    color: $link-blue;
+  }
+  &:before {
+    @include icon-inline-block;
+    content: $uc-icon-angle-down;
+  }
+  .open &:before {
+    content: $uc-icon-angle-up;
+  }
+}
+
+.uc-expando-header--subsection {
+  border-top: 1px dotted $light-gray;
+  color: $link-blue;
+  cursor: pointer;
+  margin-top: $gutter;
+  padding-top: $gutter/2;
+  &:before {
+    @include font-size-px-to-rem(16px);
+    @include icon-inline-block;
+    content: $uc-icon-caret-right;
+    margin-right: $gutter/2;
+  }
+  .open &:before {
+    content: $uc-icon-caret-down;
+  }
+}
+
+.uc-expando-contents {
+  display: none;
+  .open & {
+    display: block;
+  }
+}