undercase 0.2.29

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

@@ -0,0 +1,5 @@
+.uc-rule-dotted {
+  margin: 0 0;
+  border-top: 1px dotted $light-gray;
+  border-bottom: none;
+}

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

@@ -0,0 +1,4 @@
+.uc-icon-fixed-width:before {
+  text-align: center;
+  width: 1.3em;
+}

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

@@ -0,0 +1,36 @@
+.inline-notice, .inline-pending, .inline-warning, .inline-severe, .inline-success {
+  padding: $base-spacing;
+  margin-bottom: $base-spacing;
+  border: $light-border-width solid $light-gray;
+
+  .uc-icon-times {
+    @include font-size-px-to-rem(16px);
+    color: $dark-gray;
+  }
+}
+
+.inline-notice {
+  background-color: $lighter-gray;
+  color: $dark-gray;
+}
+
+.inline-pending {
+  background-color: $sky-blue;
+  color: $dark-gray;
+}
+
+.inline-warning {
+  background-color: $lighter-red;
+  border-color: $red;
+}
+
+.inline-severe {
+  background-color: $red;
+  border-color: $red;
+  color: $white
+}
+
+.inline-success {
+  background-color: $light-green;
+  border-color: $light-gray;
+}

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

@@ -0,0 +1,57 @@
+//
+// main layout
+//
+.uc-layout-left-sidebar {
+  width: percentage(2 / 12);
+  padding-top: $gutter;
+  padding-bottom: $gutter;
+  @include respond-small-tablet;
+}
+.uc-layout-center {
+  width: percentage(10 / 12);
+  padding-top: $gutter;
+  padding-bottom: $gutter;
+  @include respond-small-tablet;
+}
+
+//
+// split main layout column into two, or single
+//
+.uc-layout-center-center {
+  width: percentage(8 / 10);
+  padding-left: $gutter;
+  padding-right: $gutter;
+  @include respond-small-tablet;
+}
+.uc-layout-center-sidebar {
+  width: percentage(2 / 10);
+  padding-right: $gutter;
+  @include respond-small-tablet;
+  @media #{$small-tablet} {
+    padding-left: $gutter;
+  }
+}
+.uc-layout-center-full {
+  width: percentage(10 / 10);
+  padding-left: $gutter;
+  padding-right: $gutter;
+  @include respond-small-tablet;
+}
+
+//
+// bigger-right-sidebar
+//
+.uc-layout-bigger-right-sidebar-center {
+  width: percentage(2 / 3);
+  padding-left: $gutter;
+  padding-right: $gutter;
+  @include respond-small-tablet;
+}
+.uc-layout-bigger-right-sidebar {
+  width: percentage(1 / 3);
+  padding-right: $gutter;
+  @include respond-small-tablet;
+  @media #{$small-tablet} {
+    padding-left: $gutter;
+  }
+}

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

@@ -0,0 +1,10 @@
+.uc-time-length,
+.uc-time-length:before {
+  font-weight: 600;
+  color: $middle-gray;
+}
+
+.uc-time-length__text {
+  @extend .uc-time-length;
+  padding-left: $gutter/2;
+}

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

@@ -0,0 +1,96 @@
+//
+// LINKS
+//
+
+.unstyled-link {
+  color: inherit;
+  fill: inherit;
+
+  &, &:hover, &:visited {
+    text-decoration: inherit;
+    @include experimental("text-decoration-style", inherit, true, false, false, false, false, true);
+  }
+}
+
+.gray-link {
+  color: $dark-gray;
+  &,
+  &:visited {
+    text-decoration: none;
+  }
+  &:hover {
+    color: $dark-gray;
+  }
+}
+
+.blue-link {
+  color: $link-blue;
+  &:visited,
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.blue-link-clean {
+  color: $link-blue;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.blue-dotted-link-caps {
+  display: inline-block;
+  text-transform: uppercase;
+  color: $blue;
+  @include font-size-px-to-rem(15px);
+  border-bottom: 1px dotted $blue;
+  margin-bottom: 5px;
+  padding-bottom: 2px;
+  cursor: default;
+  text-decoration: none;
+  &:hover {
+    border-bottom-color: transparent;
+  }
+}
+
+.cc-link-smartbar {
+  text-decoration: underline;
+  color: $middle-gray;
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+  &.dropdown:after {
+    @include icon-inline-block;
+    @include font-size-px-to-rem(16px);
+    content: $uc-icon-caret-down;
+    position: relative;
+    top: 2px;
+    margin-left: $gutter*0.7;
+    text-decoration: none;
+  }
+  .show &,
+  .index & {
+    color: $dark-gray;
+  }
+  .new &,
+  .edit & {
+    color: white;
+  }
+}
+
+.uc-link-close {
+  &:before {
+    @include icon-inline-block;
+    content: $uc-icon-times;
+    color: $link-blue;
+  }
+}
+
+.uc-link-edit {
+  &:before {
+    @include icon-inline-block;
+    content: $uc-icon-pencil;
+    color: $link-blue;
+  }
+}

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

@@ -0,0 +1,84 @@
+.uc-list-comma {
+  > * {
+    display: inline;
+  }
+
+  > *:not(:last-child):after {
+    content: ', ';
+  }
+}
+
+.uc-list-pipe {
+  > li {
+    display: inline-block;
+  }
+  > li + li {
+    &:before {
+      content: '|';
+      padding: 0 $gutter;
+      margin-left: -0.25em; //Counteract inline-block white space
+    }
+  }
+}
+
+.uc-list-circle {
+  list-style: circle;
+  li {
+    margin-top: $gutter*0.4;
+    margin-left: $gutter*2;
+  }
+}
+
+.uc-list-disc {
+  list-style: disc;
+  li {
+    margin-top: $gutter*0.4;
+    margin-left: $gutter*2;
+  }
+}
+
+.uc-list-alpha--inside {
+  list-style: lower-alpha inside;
+  li {
+    margin-top: $gutter*0.4;
+  }
+}
+
+.uc-list-alpha--outside {
+  list-style: lower-alpha outside;
+  margin-left: $gutter*1.5;
+  li{
+    margin-top: $gutter*0.4;
+  }
+}
+
+.uc-list-decimal--inside {
+  list-style: decimal inside;
+  li {
+    margin-top: $gutter*0.4;
+  }
+}
+
+.uc-list-decimal--outside {
+  list-style: decimal outside;
+  margin-left: $gutter*1.5;
+  li{
+    margin-top: $gutter*0.4;
+  }
+}
+
+//
+// QUICK INFO (RIGHT SIDEBAR)
+//
+.uc-quick-info {
+  .uc-quick-info-header {
+    border-top: 3px solid $lighter-gray;
+    border-bottom: 1px solid $lighter-gray;
+    padding: 3px 0;
+  }
+  dt {
+    margin-top: $gutter*1.5;
+    margin-bottom: 3px;
+    @extend .uc-t-body-strong;
+  }
+}

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

@@ -0,0 +1,15 @@
+//
+// Image with content beside it
+//
+.uc-media {
+  @include clearfix;
+}
+
+.uc-media__image {
+  float: left;
+  padding: 0 $gutter 0 0;
+}
+
+.uc-media__content {
+  overflow: hidden;
+}

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

@@ -0,0 +1,114 @@
+//
+// JQUERY UI OVERRIDES
+//
+div.ui-widget-overlay {
+  @include opacity(1);
+  background: $transparent-black;
+}
+
+//
+// UC-MODAL WRAPPER
+//
+.uc-modal-fixed-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.uc-modal-fixed-wrapper-frame {
+  width: auto;
+  position: relative;
+  padding: 0 0 0 0;
+  background-color: transparent;
+  border-color: transparent;
+  outline: none;
+  top: 63px;
+
+  @media #{$mobile} {
+    top: 0;
+    padding: $gutter / 2;
+  }
+  overflow-y: auto;
+
+  // JQUERY UI OVERRIDES
+  > .ui-dialog-titlebar {
+    display: none;
+  }
+  > .ui-widget-content {
+    background-image: none;
+  }
+}
+
+//
+// UC MODAL
+//
+.uc-modal {
+  @include border-radius(3px);
+  border: $solid-light-gray-border;
+  background-color: $white;
+  padding-bottom: $gutter*2.5;
+  width: percentage(6 / 12);
+  @include respond-small-tablet;
+  @include groundwork-centered;
+}
+.uc-modal-large {
+  width: percentage(8 / 12);
+  @include respond-small-tablet;
+  @include groundwork-centered;
+}
+.uc-modal-header {
+  text-transform: uppercase;
+  font-size: 20px;
+  line-height: 22px;
+  @media #{$mobile} {
+    font-size: $gigantic;
+    line-height: 26px;
+  }
+  font-weight: $extralight-weight;
+  padding: $gutter * 2;
+  color: $dark-gray;
+  .uc-modal-exception &:after {
+    @include icon-inline-block;
+    content: $uc-icon-exclamation-circle;
+    color: $red;
+    padding-left: $gutter/2;
+  }
+}
+.uc-modal-rule {
+  margin: 0 0;
+  border-top: $medium-border-width solid $lighter-gray;
+  border-bottom: none;
+  .uc-modal-exception & {
+    border-top: $medium-border-width solid $red;
+  }
+}
+.uc-modal-linked {
+  padding: $gutter*1.5 $gutter*2;
+  background-color: $lightest-gray;
+}
+
+.uc-modal-content {
+  padding: $gutter*2 $gutter*2 0 $gutter*2;
+}
+.uc-modal-rule-wrapper {
+  padding: $gutter/2 $gutter*2 0 $gutter*2;
+}
+.uc-modal-actions {
+  margin-top: $gutter*2.5;
+  input,
+  a,
+  button {
+    margin-left: $gutter*2;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+.uc-modal-links {
+  padding: $gutter*2 $gutter*2 0 $gutter*2;
+}
+.uc-modal-actions-rule {
+  margin: $gutter/2 0 0 0;
+  border-top: $light-border-width solid $lighter-gray;
+}

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

@@ -0,0 +1,224 @@
+//
+// PRIMARY-NAVIGATION
+//
+.uc-site-header {
+  background-color: $lightest-gray;
+  @media #{$not-desktop} {
+    padding-right: $gutter;
+  }
+  @media #{$mobile} {
+    padding-right: 0;
+  }
+}
+
+.uc-user-settings {
+  background-color: $middle-gray;
+  color: $white;
+  padding: $gutter/2 0;
+  text-align: right;
+  @media #{$not-desktop} {
+    padding: $gutter/2 $gutter;
+  }
+}
+
+.uc-link--has-popup {
+  color: inherit;
+  text-decoration: none;
+  &:after {
+    @include icon-inline-block;
+    @include font-size-px-to-rem(16px);
+    content: $uc-icon-caret-down;
+    padding-left: $gutter/2;
+  }
+}
+
+.uc-navigation {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  padding-right: $gutter*2;
+  @media #{$mobile} {
+    border: 0 solid $light-gray;
+    border-width: 0 1px 1px 1px;
+    padding-right: 0;
+  }
+}
+
+.uc-navigation__item {
+  display: table-cell;
+  padding-left: $gutter;
+  &:first-child {
+    padding-left: 0;
+  }
+  @media #{$mobile} {
+    padding: 0;
+    border-left: 1px solid $light-gray;
+    &:first-child {
+      border-left: none;
+    }
+  }
+}
+
+.uc-navigation__item--search {
+  display: none;
+
+  @media #{$mobile} {
+    display: block;
+  }
+}
+
+@mixin navigation-item-default-state {
+  background-color: transparent;
+  border-color: $light-gray;
+  color: $dark-gray;
+}
+
+@mixin navigation-item-active-state {
+  background-color: $hover-blue;
+  border-color: $link-blue;
+  color: $link-blue;
+}
+
+.uc-navigation__item__link {
+  border-top: 4px solid $light-gray;
+  color: $dark-gray;
+  display: block;
+  overflow: hidden;
+  padding: $gutter/2 $gutter*1.5 $gutter/2 $gutter;
+  position: relative;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  &:before {
+    @include font-size-px-to-rem(16px);
+    padding-right: $gutter/2;
+  }
+  &:hover,
+  &:focus {
+    @include navigation-item-active-state;
+  }
+  @media #{$small-tablet} {
+    padding: $gutter*1.5 $gutter;
+    text-align: center;
+    &:hover,
+    &:focus {
+      @include navigation-item-default-state;
+    }
+    &:before {
+      @include font-size-px-to-rem(26px);
+      padding-right: 0;
+    }
+  }
+  @media #{$mobile} {
+    border-bottom: 8px solid $light-gray;
+  }
+  &.active {
+    @include navigation-item-active-state;
+  }
+}
+
+.uc-navigation__item__link--has-menu {
+  &:after {
+    @include icon-inline-block;
+    content: $uc-icon-caret-down;
+    position: absolute;
+    right: $gutter;
+
+    @media #{$small-tablet} {
+      display: none;
+    }
+  }
+}
+
+.uc-navigation-text {
+  @media #{$small-tablet} {
+    display: none;
+  }
+}
+
+.uc-notification-indicator {
+  @include border-radius(2px);
+  @include font-size-px-to-rem(10px);
+  line-height: 1;
+  background-color: $light-orange;
+  padding: 1px 2px 0 2px;
+  position: absolute;
+  left: 17px;
+  top: 4px;
+  font-weight: $semibold-weight;
+  @media #{$small-tablet} {
+    @include font-size-px-to-rem(14px);
+    left: 50%;
+    top: 25%;
+  }
+}
+
+//
+// .tabs-simple
+//
+.tabs-simple {
+  padding: 0 0 !important; //override jqueryUI
+}
+.tabs-simple-tab {
+  display: inline-block;
+  margin: 0 !important; //override jqueryUI
+  padding: 0 0 0 8px !important; //override jqueryUI
+  border: none !important; //override jqueryUI
+  background: none !important; //override jqueryUI
+
+  &:first-child {
+    padding-left: 0 !important; //override jqueryUI
+  }
+  @if $responsive {
+    @media #{$small-tablet} {
+      padding-left: 0 !important; //override jqueryUI;
+    }
+  }
+  .tabs-simple-tab-four-tabs & {
+    width: percentage(1 / 4);
+    @include respond-small-tablet;
+  }
+  .tabs-simple-tab-five-tabs & {
+    width: percentage(1 / 5);
+    @include respond-small-tablet;
+  }
+  .tabs-simple-tab-six-tabs & {
+    width: percentage(1 / 6);
+    @include respond-small-tablet;
+  }
+  .ui-dialog-pointer {
+    width: 0;
+    height: 0;
+    z-index: 0;
+
+    position: absolute;
+    left: 50%;
+    bottom: -18px;
+    margin-left: -$huge-border-width;
+    border-top: 9px solid $yellow;
+    border-bottom: 9px solid transparent;
+    border-right: $huge-border-width solid transparent;
+    border-left: $huge-border-width solid transparent;
+  }
+}
+.tabs-simple-link {
+  @include border-radius(5px);
+  padding: 0 !important; //override jqueryUI
+  display: block;
+  height: 35px;
+  line-height: 35px;
+  vertical-align: middle;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: $medium-small;
+  font-weight: $semibold-weight;
+  background: $middle-yellow;
+  color: $middle-gray;
+  width: 100%;
+  &:hover,
+  .ui-state-active & {
+    color: $dark-gray;
+    background: $yellow;
+  }
+}