undercase 0.2.29

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

@@ -0,0 +1,98 @@
+$border-radius--chevrons: 30px;
+
+.uc-chevrons {
+  @include border-radius($border-radius--chevrons);
+  border: $light-border-width solid $lighter-gray;
+  display: table;
+  height: 46px;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+
+  > li + li {
+    border-left: 1px solid $lighter-gray;
+  }
+}
+
+.uc-chevrons__item {
+  @include font-size-px-to-rem($small, true);
+  color: $middle-gray;
+  display: table-cell;
+  font-weight: $semibold-weight;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  // IE fix
+  // overflow hidden on uc-chevrons does not work in IE
+  &:first-child {
+    @include border-left-radius($border-radius--chevrons);
+  }
+  &:last-child {
+    @include border-right-radius($border-radius--chevrons);
+  }
+  @media #{$small-tablet} {
+    @include border-radius($border-radius--chevrons);
+    @include font-size-px-to-rem($font-size, true);
+  }
+}
+
+.uc-chevrons__item--past {
+  background-color: $lighter-gray2;
+  @media #{$small-tablet} {
+    display: none;
+  }
+}
+
+.uc-chevrons__item--present {
+  background-color: $sky-blue;
+  color: $dark-gray;
+  font-weight: $semibold-weight;
+}
+
+.uc-chevrons__item--future {
+  @media #{$small-tablet} {
+    display: none;
+  }
+}
+
+.uc-chevrons__item__content {
+  position: relative;
+  padding: $gutter/2 $gutter;
+
+  &:after {
+    @include icon-inline-block;
+    margin-top: -7px; // half the font-size of the content to center the icon
+    padding-right: $gutter/2;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    @media #{$small-tablet} {
+      padding-right: $gutter*3;
+    }
+  }
+}
+
+.uc-chevrons__item--past .uc-chevrons__item__content {
+  padding-right: $gutter*2;
+
+  &:after {
+    content: $uc-icon-check;
+  }
+}
+
+.uc-chevrons__item:not(:last-child).uc-chevrons__item--present .uc-chevrons__item__content {
+  padding-right: $gutter*2;
+
+  &:after {
+    content: $uc-icon-arrow-right;
+  }
+}
+
+.uc-chevrons-placeholder {
+  display: none;
+
+  @media #{$small-tablet} {
+    display: inline-block;
+  }
+}

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

@@ -0,0 +1,34 @@
+//
+// COLOR CLASSES
+//
+.c-red {
+  color: $red;
+}
+.c-yellow {
+  color: $yellow;
+}
+.c-middle-gray {
+  color: $middle-gray;
+}
+.c-blue {
+  color: $blue;
+}
+
+//
+// BACKGROUND COLOR CLASSES
+//
+.bc-white {
+  background-color: white;
+}
+.bc-gray {
+  background-color: $light-gray;
+}
+.bc-lightest-gray {
+  background-color: $lightest-gray;
+}
+.bc-lighter-gray2 {
+  background-color: $lighter-gray2;
+}
+.bc-hover-blue {
+  background-color: $hover-blue;
+}

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

@@ -0,0 +1,23 @@
+.content-with-toolbar {
+  position: relative;
+
+  .toolbar {
+    position: absolute;
+    top: 3px;
+    right: 0;
+
+    a {
+      margin: 0 $gutter/4 0 $gutter*1.85;
+
+      &:hover,
+      &:hover:before,
+      &:hover:after {
+        color: $button-blue;
+      }
+    }
+
+    .uc-link-close, .uc-link-edit {
+      font-size: $medium+2;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+// from https://github.com/twbs/bootstrap-sass/blob/44d139e896a2bc1bd623f9cbcb714465ff3ed11f/vendor/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
+@mixin nav-divider($color: #e5e5e5) {
+  height: $medium-border-width;
+  margin: (($line-height-computed / 2) - 1) $gutter*2;
+  overflow: hidden;
+  background-color: $color;
+}
+
+// from https://github.com/twbs/bootstrap-sass/blob/44d139e896a2bc1bd623f9cbcb714465ff3ed11f/vendor/assets/stylesheets/bootstrap/mixins/_reset-filter.scss
+@mixin reset-filter() {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+
+// Load bootstrap dropdown styles
+@import "bootstrap/dropdowns";
+
+.dropdown-menu {
+  a {
+    text-decoration: none;
+  }
+}
+
+// set things up for drawing a triangle
+.dropdown-menu {
+  margin-top: $popover-arrow-outer-width;
+}
+// add triangle pointing up at the top of the menu
+.dropdown-arrow {
+  @include transform(rotate(-45deg));
+  background: $white;
+  border-right: 1px solid $light-gray;
+  border-top: 1px solid $light-gray;
+  height: 15px;
+  width: 15px;
+  position: absolute;
+  top: -8px;
+  left: 2 * $popover-arrow-outer-width;
+  z-index: -1;
+}
+// right aligned dropdown
+.dropdown-menu.right {
+  right: 0;
+  left: auto;
+
+  .dropdown-arrow {
+    right: 2 * $popover-arrow-outer-width;
+    left: auto;
+  }
+}

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

@@ -0,0 +1,121 @@
+//
+// Filters
+//
+
+.uc-filter {
+  border-bottom: 1px solid $lighter-gray;
+
+  input[type=checkbox] { @include hide-accessible; } /* to hide the checkbox itself */
+
+  input[type=checkbox]:focus + label {
+    color: $link-blue;
+  }
+
+  input[type=checkbox]:focus + label:before {
+    /* outline: 1px dotted $middle-gray; */
+    box-shadow: 0 0 1px 2px $button-blue;
+    @include border-radius(3px);
+    color: $button-blue;
+  }
+
+  input[type=checkbox] + label:before {
+    @include font-size-px-to-rem($icon-size);
+    font-family: Undercase-Icons;
+    line-height: 1em;
+    margin-right: $gutter/2;
+    margin-bottom: 3px;
+    color: $light-gray;
+    float: left;
+    -moz-transform: scale(1.0, 1.0); /* Adjust anti-aliasing to prevent gap inside box-shadow on Windows */
+  }
+
+  input[type=checkbox] + label:before {
+    content: "\f105"; /* unchecked icon */
+  }
+
+  input[type=checkbox]:checked + label:before {
+    content: "\f104"; /* checked icon */
+    color: $link-blue;
+  }
+}
+
+.uc-filter__header {
+  background-color: $lightest-gray;
+  border: 1px solid $light-gray;
+  border-left: none;
+  padding: $gutter;
+}
+
+.uc-filter__body {
+  border-right: 1px solid $lighter-gray;
+}
+
+.uc-filter-heading {
+  color: $middle-gray;
+  line-height: 1.14;
+  text-transform: uppercase;
+}
+
+.uc-filter-heading__category {
+  @include font-size-px-to-rem(15px);
+  display: block;
+  font-weight: 600;
+}
+
+.uc-filter-clear {
+  display: none;
+  float: right;
+}
+
+.uc-filter-facets {
+  > li {
+    border-top: 1px dotted $lighter-gray;
+    &:first-child {
+      border-top: none;
+    }
+  }
+}
+
+.uc-filter-subfacets-container {
+  padding: $gutter*1.5 $gutter $gutter*0.5 $gutter*3;
+  border-top: 1px dotted $lighter-gray;
+}
+
+.uc-filter-subfacets {
+  > li {
+    margin-bottom: $gutter;
+  }
+}
+
+.uc-filter-facets__facet {
+  position: relative;
+}
+
+.uc-filter-facets__facet__left-col {
+  padding: $gutter*1.5 $gutter;
+  width: 80%;
+}
+
+.uc-filter-facets__facet__left-col--no-subfacets {
+  padding: $gutter*1.5 $gutter;
+}
+
+.uc-filter-facets__facet__left-col.uc-form-field--boolean {
+  margin-bottom: 0;
+}
+
+.uc-filter-facets__facet__right-col {
+  border-left: 1px dotted $lighter-gray;
+  position: absolute;
+  width: 20%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  &:before {
+    display: block;
+    font-size: 18px;
+    padding-top: $gutter*1.5;
+    margin: 0 auto;
+    width: 12px;
+  }
+}

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

@@ -0,0 +1,32 @@
+//
+// mixin for bullet proof font declaration syntax
+//
+@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
+  @font-face {
+    font-family: '#{$font-family}';
+    src: url(font-path('#{$font-family}/#{$font-filename}.eot'));
+          src: url(font-path('#{$font-family}/#{$font-filename}.eot?#iefix')) format('embedded-opentype'),
+          url(font-path('#{$font-family}/#{$font-filename}.woff')) format('woff'),
+          url(font-path('#{$font-family}/#{$font-filename}.ttf')) format('truetype'),
+          url(font-path('#{$font-family}/#{$font-filename}.svg##{$font-family}')) format('svg');
+    font-weight: $font-weight;
+    font-style: $font-style;
+    font-stretch: $font-stretch;
+  }
+}
+
+@include declare-font-face(FontAwesome, 'fontawesome-webfont');
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-extralight-webfont', $extralight-weight);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-extralight-webfont', $extralight-weight, italic);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-light-webfont', $light-weight);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-light-webfont', $light-weight, italic);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-regular-webfont', normal);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-it-webfont', normal, italic);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-semibold-webfont', $semibold-weight);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-semiboldit-webfont', $semibold-weight, italic);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-bold-webfont', bold);
+@include declare-font-face(Source-Sans-Pro, 'sourcesanspro-boldit-webfont', bold, italic);
+@include declare-font-face(Undercase-Icons, 'Undercase-Icons');
+// @include declare-font-face('Source Sans Pro', 'sourcesanspro-black-webfont', 800);
+// @include declare-font-face('Source Sans Pro', 'sourcesanspro-blackit-webfont', 800, italic);
+

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

@@ -0,0 +1,617 @@
+//
+// Local Variables
+//
+$uc-form--search-height: 58px;
+
+.uc-form-flow-margin {
+  @include uc-form-flow-margin;
+}
+
+//
+// UNDERCASE FORM
+//
+input,
+select,
+textarea {
+  @include uc-field-style;
+  display: block;
+  width: 100%;
+  @media #{$tablet} {
+    max-width: 369px;
+  }
+  margin: 0;
+}
+
+select,
+textarea,
+[type=text],
+[type=password],
+[type=search],
+[type=email],
+[type=date],
+[type=time],
+[type=number] {
+  &[disabled] {
+    background-color: $lightest-gray;
+    border: $light-border-width solid $light-gray4;
+    color: $light-gray;
+  }
+}
+
+[type=radio],
+[type=checkbox],
+[type=file] {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  height: auto;
+  line-height: normal;
+  width: auto;
+}
+
+[type=radio],
+[type=checkbox] {
+  cursor: pointer;
+}
+
+[disabled] {
+  cursor: default;
+}
+
+.uc-form__input--full-width {
+  max-width: none;
+}
+
+option {
+  padding: $gutter/2 $gutter;
+  &:after {
+    content: "\A0"
+  }
+}
+
+optgroup {
+  padding: $gutter/2 0 $gutter/2 $gutter;
+  font-family: inherit;
+  font-weight: $semibold-weight;
+  font-style: normal;
+  color: $dark-gray;
+}
+
+.uc-select--initial-width {
+  width: initial;
+}
+
+.uc-select--multiple-options {
+  height: initial;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  margin-right: $gutter;
+  margin-left: 1px;
+  padding: 0;
+}
+
+textarea {
+  height: 100px;
+}
+
+::-moz-placeholder {
+  color: $middle-gray;
+}
+
+.uc-nest {
+  padding-left: $gutter*3;
+  margin-top: $gutter;
+}
+
+.uc-fieldset-buttons {
+  text-align: center;
+
+  input,
+  a,
+  button {
+    margin-left: $gutter*2;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+//
+// LABELS AND LEGENDS
+//
+[type=checkbox]:hover + label,
+[type=radio]:hover + label,
+[type=checkbox] + label:hover,
+[type=radio] + label:hover {
+  color: $link-blue;
+  cursor: pointer;
+  [disabled] {
+    cursor: default;
+    color: inherit;
+  }
+}
+
+[type=checkbox][disabled] + label,
+[type=radio][disabled] + label {
+  cursor: default;
+  color: $middle-gray;
+}
+
+.uc-form-label {
+  @include uc-label;
+}
+.uc-form-legend {
+  @include uc-label;
+}
+.uc-form__legend--heading {
+  @extend .uc-t-h3;
+  @extend .uc-bordered-heading;
+  width: 100%;
+}
+.uc-form-label--secondary {
+  font-weight: normal;
+}
+
+//
+// FIELDSETS
+//
+.uc-form-fieldset-radio-with-clear {
+  fieldset {
+    float: right;
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+  }
+  a {
+    @extend .blue-link;
+    float: right;
+  }
+  .uc-form-collection-item {
+    display: inline-block;
+    padding-left: $gutter * 2;
+  }
+}
+
+.uc-form-fieldset-checkbox-list {
+  @include uc-form-flow-margin;
+
+}
+
+.uc-form__fieldset--grouped {
+  margin-bottom: $gutter/2;
+  > legend {
+    margin-bottom: $gutter;
+  }
+  .uc-form-field {
+    margin-bottom: $gutter*1.5;
+  }
+}
+
+//
+// INPUT COLLECTIONS
+//
+.uc-form-fieldset-collection{
+  @include uc-form-flow-margin;
+
+}
+
+.uc-form-collection-item {
+  margin-bottom: $gutter / 2;
+  margin-left: $gutter * 2.2;
+
+  input[type="radio"],
+  input[type="checkbox"]{
+    margin-left:  -($gutter * 2.2);
+  }
+  @media #{$not-desktop} {
+    margin-bottom: $gutter;
+  }
+  .uc-form-fieldset-collection & {
+    display: block;
+  }
+  .uc-form-fieldset-collection--horizontal & {
+    display: inline-block;
+    margin-left: $gutter * 2.5;
+    &:first-of-type {
+      margin-left: 0;
+    }
+    input[type="radio"],
+    input[type="checkbox"]{
+      margin-left: 1px;
+    }
+  }
+  .uc-form-fieldset-collection--breathe & {
+    padding-top: $gutter;
+    padding-bottom: $gutter;
+    padding-left: $gutter;
+    margin-bottom: 0;
+  }
+  input {
+    display: inline-block;
+    width: auto;
+    margin-right: $gutter;
+    @media #{$not-desktop} {
+      margin-top: $gutter / 2;
+    }
+  }
+  label {
+    padding-top: 1px;
+    vertical-align: bottom;
+    @media #{$small-tablet} {
+      font-size: $uc-form-embiggened-input-font-size; // should follow input size increase
+    }
+  }
+}
+.uc-form-fieldset-collection--horizontal-question {
+  @extend .uc-form-fieldset-collection--horizontal;
+  margin-bottom: 0;
+
+  .uc-form-legend {
+    width: 30%;
+    float: left;
+    text-align: right;
+    padding-right: $gutter;
+    color: $middle-gray;
+    font-weight: normal;
+  }
+}
+
+//
+// NESTED FIELDS
+//
+.uc-form__fieldset--with-nested-collection {
+  @include uc-form-flow-margin;
+
+  & .uc-form-fieldset-collection {
+  margin-bottom: 0;
+  }
+}
+
+.uc-form-field--nested {
+  margin-left: $gutter*2.5;
+}
+
+//
+// CUSTOM FIELDS
+//
+.uc-form-field {
+  @include uc-form-flow-margin;
+}
+
+.uc-form-field--collective-inputs {
+  margin-bottom: $gutter;
+}
+.uc-form-field--boolean {
+  margin-bottom: $gutter/2;
+  @media #{$not-desktop} {
+    margin-bottom: $gutter;
+  }
+
+  > label {
+    display: inline;
+    font-weight: $normal-weight;
+    margin-bottom: 0;
+    @media #{$small-tablet} {
+      font-size: $uc-form-embiggened-input-font-size;
+    }
+  }
+}
+
+.uc-form-field--boolean--solo {
+  input[type="checkbox"] {
+    margin-right: $gutter / 2;
+  }
+}
+
+.uc-form-field-date {
+  max-width: 126px;
+  @media #{$not-desktop} {
+    max-width: 150px;
+  }
+
+  @media #{$desktop} {
+    input {
+      background-image: image-url('icons/calendar_datepicker.svg');
+      background-repeat: no-repeat;
+      background-position: 95% center;
+      background-size: 18px;
+    }
+  }
+}
+.uc-form-field-time {
+  max-width: 90px;
+  @media #{$not-desktop} {
+    max-width: 110px;
+  }
+}
+.uc-form-fieldset-datetime {
+  legend {
+    @include uc-label;
+  }
+}
+
+.uc-form-field-datetime-date {
+  display: inline-block;
+  @media #{$not-desktop} {
+    display: block;
+  }
+}
+.uc-form-field-datetime-time {
+  display: inline-block;
+  padding-left: $gutter;
+
+  @media #{$not-desktop} {
+    display: block;
+    margin-top: $gutter;
+    padding-left: 0;
+  }
+}
+.uc-form-field-datetime-timezone {
+  padding: 0.5em;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.uc-form-field-checkbutton {
+  @include border-radius(5px);
+  text-transform: uppercase;
+  position: relative;
+  border: $solid-yellow-border;
+  background-color: $white;
+  display: inline-block;
+  padding-left: $gutter * 3;
+  padding-right: $gutter;
+  line-height: 29px;
+  vertical-align: baseline;
+  text-align: center;
+  cursor: pointer;
+  background-position: 5px center;
+
+  &.current {
+    background-color: $yellow;
+  }
+
+  &.hard-left {
+    margin-left: 0;
+  }
+
+  input[type=checkbox] {
+    position: absolute;
+    left: 10px;
+    top: 8px;
+  }
+
+  .edit & {
+    border: $solid-blue-border;
+    color: $dark-gray;
+  }
+  @media #{$mobile} {
+    margin-bottom: $gutter;
+    width: 100%;
+  }
+  & + & {
+    @media #{$not-mobile} {
+      margin-left: $gutter/2;
+    }
+  }
+}
+
+//
+// ERRORS
+//
+.uc-asterisk-required {
+  &:before {
+    @include icon-inline-block;
+    content: $uc-icon-asterisk;
+    color: $red;
+    padding-right: $gutter / 2;
+    font-size: $small;
+  }
+}
+
+label.required,
+legend.required,
+fieldset.required legend {
+  &:after {
+    @include icon-inline-block;
+    content: $uc-icon-asterisk;
+    color: $red;
+    margin-left: $gutter / 2;
+    font-size: $small;
+  }
+}
+
+.uc-form-field,
+.uc-form-fieldset-collection {
+  .error {
+    @extend .uc-error;
+    display: block;
+    padding-top: $gutter / 2;
+  }
+}
+
+.uc-error {
+  color: $red;
+}
+
+//
+// uc-form__inline
+//
+.uc-form__inline__fields {
+  position: relative;
+  input,
+  select {
+    display: inline-block;
+    margin: 0;
+    padding-top: .3em;
+    padding-left: .5em;
+    padding-right: .5em;
+  }
+}
+
+.uc-form__inline__fields--with-prefix {
+  @extend .uc-form__inline__fields;
+  padding-left: 140px;
+}
+.uc-form__inline__fields--with-prefix-and-suffix {
+  @extend .uc-form__inline__fields;
+  padding-left: 140px;
+  padding-right: 34px;
+}
+.uc-form__inline__fields--with-prefix-and-suffix--search {
+  @media #{$mobile} {
+    padding-left: 62px;
+    padding-right: 70px;
+    border-bottom: 8px solid $light-gray;
+  }
+}
+
+.uc-form__inline__fields--with-suffix {
+  @extend .uc-form__inline__fields;
+  padding-right: 34px;
+}
+
+.uc-form__inline__fields__prefix {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 140px;
+  overflow: hidden;
+  height: 2.3em;
+  @media #{$small-tablet} {
+    font-size: $uc-form-embiggened-input-font-size;
+  }
+  &:after{
+    @include icon-inline-block;
+    content: $uc-icon-caret-down;
+    position: absolute;
+    top: 7px;
+    right: 8px;
+    pointer-events: none;
+    font-size: 1.3em;
+  }
+}
+
+.uc-form__inline__fields__prefix--search {
+  @media #{$mobile} {
+    background-color: $white;
+    border: 1px solid $light-gray;
+    border-right: 0;
+    padding: $gutter*1.5 $gutter;
+    width: 62px;
+    height: $uc-form--search-height;
+    &:before {
+      @include icon-inline-block;
+      content: $uc-icon-search;
+      @include font-size-px-to-rem(26px);
+    }
+    &:after {
+      position: static;
+    }
+  }
+}
+
+.uc-form__inline__fields__prefix__select {
+  @include border-right-radius(0);
+  @include border-left-radius(3px);
+  @include appearance(none);
+  background-color: $lighter-gray; // to override .uc-form select
+  line-height: 1.75em;
+  white-space: nowrap;
+  width: 200px; // to override .uc-form-field coming from simple-form
+}
+
+.uc-form__inline__fields__prefix__select--search {
+  @media #{$mobile} {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.uc-form-field--search {
+  margin-bottom: 0;
+  @media #{$mobile} {
+    > input {
+      height: $uc-form--search-height;
+      border-left: 0;
+      border-right: 0;
+    }
+  }
+}
+
+.uc-form__inline__fields__fill {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  input {
+    @include appearance(none);
+    @include border-radius(0); // to override .uc-form input
+    width: 100%;
+  }
+}
+.uc-form__inline__fields__suffix {
+  @include border-right-radius(3px);
+  @include border-left-radius(0);
+  background-color: $lighter-gray;
+  border-bottom: 1px solid $light-gray;
+  border-left: 1px solid $light-gray;
+  border-right: 1px solid $light-gray;
+  border-top: 1px solid $light-gray;
+  cursor: pointer;
+  color: $dark-gray;
+  display: inline-block;
+  height: 2.3em;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-shadow: none;
+  text-transform: none;
+  top: 0;
+  vertical-align: top;
+  width: 35px;
+
+  @media #{$small-tablet} {
+    font-size: $uc-form-embiggened-input-font-size;
+  }
+}
+
+.uc-form__inline__fields__suffix--search {
+  @media #{$mobile} {
+    width: 70px;
+    height: $uc-form--search-height;
+    line-height: $uc-form--search-height;
+    font-size: 1rem;
+    @include border-radius(0);
+  }
+}
+
+.uc-form__inline__fields__suffix--search__go {
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  @media #{$mobile} {
+    display: none;
+  }
+}
+
+.uc-form__inline__fields__suffix--search__cancel {
+  display: none;
+  @media #{$mobile} {
+    display: block;
+    line-height: $uc-form--search-height;
+    text-decoration: none;
+  }
+}
+