undercase 0.2.29 → 0.2.57

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

@@ -14,6 +14,7 @@ $solid-yellow-border: $light-border-width solid $yellow;
 $solid-white-border: $light-border-width solid $white;
 
 $dashed-white-border: $medium-border-width dashed $white;
+$light-yellow-border: $light-border-width solid $yellow;
 $dashed-yellow-border: $light-border-width dashed $yellow;
 
 $light-border: $light-border-width solid $light-gray;

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

@@ -73,6 +73,15 @@
   border-top: $dotted-yellow-border;
 }
 
+.uc-border-bottom-yellow-dotted {
+  border-bottom: $dotted-yellow-border;
+}
+
+.uc-border-yellow-solid-wide-top {
+  border: $light-yellow-border;
+  border-top-width: $large-border-width;
+}
+
 //
 // TODO: Does not belong here. Make it a separate pattern
 // blue background and border on hover

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

@@ -3,8 +3,6 @@
 //
 
 .uc-filter {
-  border-bottom: 1px solid $lighter-gray;
-
   input[type=checkbox] { @include hide-accessible; } /* to hide the checkbox itself */
 
   input[type=checkbox]:focus + label {
@@ -12,7 +10,6 @@
   }
 
   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;
@@ -23,7 +20,7 @@
     font-family: Undercase-Icons;
     line-height: 1em;
     margin-right: $gutter/2;
-    margin-bottom: 3px;
+    margin-bottom: $gutter*0.3;
     color: $light-gray;
     float: left;
     -moz-transform: scale(1.0, 1.0); /* Adjust anti-aliasing to prevent gap inside box-shadow on Windows */
@@ -41,13 +38,15 @@
 
 .uc-filter__header {
   background-color: $lightest-gray;
-  border: 1px solid $light-gray;
+  border: $light-border-width solid $light-gray;
   border-left: none;
+  border-top: none;
   padding: $gutter;
 }
 
 .uc-filter__body {
-  border-right: 1px solid $lighter-gray;
+  border-right: $light-border-width solid $lighter-gray;
+  border-bottom: $light-border-width solid $light-gray;
 }
 
 .uc-filter-heading {
@@ -69,7 +68,7 @@
 
 .uc-filter-facets {
   > li {
-    border-top: 1px dotted $lighter-gray;
+    border-top: $light-border-width dotted $lighter-gray;
     &:first-child {
       border-top: none;
     }
@@ -77,8 +76,9 @@
 }
 
 .uc-filter-subfacets-container {
-  padding: $gutter*1.5 $gutter $gutter*0.5 $gutter*3;
-  border-top: 1px dotted $lighter-gray;
+  padding: $gutter*0.5 $gutter 0 $gutter*3;
+  margin-top: $gutter;
+  border-top: $light-border-width dotted $lighter-gray;
 }
 
 .uc-filter-subfacets {
@@ -105,7 +105,7 @@
 }
 
 .uc-filter-facets__facet__right-col {
-  border-left: 1px dotted $lighter-gray;
+  border-left: $light-border-width dotted $lighter-gray;
   position: absolute;
   width: 20%;
   top: 0;
@@ -119,3 +119,34 @@
     width: 12px;
   }
 }
+
+.uc-filter__collection {
+  &.uc-form-field {
+    margin-bottom: 0;
+  }
+
+  .uc-form-collection-item {
+    border-top: 1px dotted $lighter-gray;
+    display: block;
+    margin-left: 0;
+    padding: $gutter*1.5 $gutter;
+    &:first-child {
+      border-top: none;
+    }
+  }
+}
+
+.uc-filter__collection--show-only {
+  &.uc-form-field {
+    margin-bottom: 0;
+  }
+
+  .uc-form-collection-item {
+    display: block;
+    margin-left: 0;
+    padding: 0 0 $gutter;
+    &:last-of-type {
+      padding: 0;
+    }
+  }
+}

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

@@ -155,7 +155,6 @@ textarea {
 .uc-form-label--secondary {
   font-weight: normal;
 }
-
 //
 // FIELDSETS
 //
@@ -189,6 +188,9 @@ textarea {
   .uc-form-field {
     margin-bottom: $gutter*1.5;
   }
+  .ongoing {
+    padding-top: $gutter/2;
+  }
 }
 
 //
@@ -334,6 +336,12 @@ textarea {
   }
 }
 
+.uc-form-fieldset--secondary {
+  > legend {
+    font-weight: normal;
+  }
+}
+
 .uc-form-field-datetime-date {
   display: inline-block;
   @media #{$not-desktop} {
@@ -356,6 +364,17 @@ textarea {
   vertical-align: top;
 }
 
+.uc-form-daterange__start-fields {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.uc-form-daterange__end-fields {
+  display: inline-block;
+  vertical-align: top;
+  padding-left: $gutter*2;
+}
+
 .uc-form-field-checkbutton {
   @include border-radius(5px);
   text-transform: uppercase;

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

@@ -14,6 +14,20 @@
   @include respond-small-tablet;
 }
 
+//
+// wide sidebar layout
+//
+.uc-layout-sidebar-wide {
+  width: percentage(3 / 12);
+  @include respond-small-tablet;
+}
+.uc-layout-center-slim {
+  width: percentage(9 / 12);
+  padding-top: $gutter;
+  padding-bottom: $gutter;
+  @include respond-small-tablet;
+}
+
 //
 // split main layout column into two, or single
 //

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

@@ -21,6 +21,37 @@
   }
 }
 
+.uc-list-paired {
+  clear: both;
+  width: 100%;
+  &:after{
+    clear: both;
+    content: " ";
+    display: block;
+    font-size: 0;
+    height: 0;
+    visibility: hidden;
+  }
+  dt {
+    float: left;
+    display: inline;
+    clear: both;
+    text-align: right;
+    width: percentage(1/5);
+    color: $middle-gray;
+    padding-right: $gutter;
+    padding-bottom: $gutter/2;
+  }
+
+  dd {
+    float: left;
+    display: inline;
+    width: percentage(4/5);
+    word-wrap: break-word;
+    padding-bottom: $gutter/2;
+  }
+}
+
 .uc-list-circle {
   list-style: circle;
   li {
@@ -67,6 +98,32 @@
   }
 }
 
+//
+// LONG LIST
+//
+.uc-list-long {
+  border: $light-border-width solid $light-gray;
+  max-height: 850px;
+  overflow-y: auto;
+  > li {
+    padding: $gutter*1.5 $gutter;
+
+    clear: both;
+    width: 100%;
+    &:after{
+      clear: both;
+      content: " ";
+      display: block;
+      font-size: 0;
+      height: 0;
+      visibility: hidden;
+    }
+  }
+  > li + li {
+    border-top: $light-border-width solid $lighter-gray;
+  }
+}
+
 //
 // QUICK INFO (RIGHT SIDEBAR)
 //

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

@@ -1,5 +1,10 @@
 @import "bootstrap/popovers";
 
+.popover {
+  @include border-radius(4px);
+  width: 300px;
+}
+
 .popover-title {
   border-bottom: none;
   font-weight: $semibold-weight;

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

@@ -2,85 +2,133 @@
 // UC-TABLE
 //
 .uc-table-wrapper {
-  width: 100%;
   overflow-x: auto;
+  width: 100%;
 }
 
 .uc-table {
-  table-layout: fixed;
   border-collapse: collapse;
+  table-layout: fixed;
   width: 100%;
 
-  th {
-    position: relative;
-    vertical-align: top;
+  @media #{$not-desktop} {
+    width: 779px;
+  }
+
+  thead th {
+    background: $lightest-gray;
+    border-bottom: 1px solid $light-gray;
+    border-left: 1px solid $light-gray;
+    border-right: 1px solid $light-gray;
+    border-top: 5px solid $light-gray;
+    height: 65px;
+    min-height: 65px;
+    text-align: left;
     text-transform: uppercase;
-    font-weight: $semibold-weight;
-    padding-bottom: $gutter;
-    padding-left: $gutter*1.5;
-    a:hover {
-      cursor: pointer;
+    vertical-align: top;
+    &.active {
+      background: white;
+      border-top: 5px solid $link-blue;
+    }
+    &:hover,
+    &:focus {
+      background: white;
     }
   }
-  td {
-    vertical-align: top;
-    padding: $gutter/2 $gutter/2 $gutter/2 $gutter;
+
+  thead:after {
+    content:"";
+    display:block;
+    background-color: white;
+    height: 10px;
   }
 
-  th.align-center a.uc-icon-sort-descending,
-  th.align-center a.uc-icon-sort-ascending {
-    position: relative;
-    left: 9px;
+  tbody {
+    border: 1px solid $lighter-gray;
   }
-  > tbody tr {
+
+  tbody tr {
     &:nth-of-type(odd) {
-      background-color: $middle-yellow;
+      background-color: white;
     }
-  }
-  .edit & {
-    > tbody tr {
-      &:nth-of-type(odd) {
-        background-color: $sky-blue;
-      }
+    &:nth-of-type(even) {
+      background-color: $lightest-gray;
+      border-top: 1px solid $lighter-gray;
+      border-bottom: 1px solid $lighter-gray;
     }
   }
-}
 
-%uc-icon-sort {
-  position: absolute;
-  @include icon-inline-block;
-  margin-left: 3px;
+  tbody td, tbody th {
+    vertical-align: top;
+    padding: $gutter;
+  }
 }
-.uc-icon-sort-ascending:after {
-  @extend %uc-icon-sort;
-  content: $uc-icon-caret-up;
+
+//
+// Inner wrapper for th's
+// to be able to absolutely position things in a table cell
+// Generated by AbsolutelyPositionTableCells.js
+//
+.uc-table__th__inner-wrapper {
+  height: inherit;
+  min-height: inherit;
+  position: relative;
+  padding: $gutter/2 $gutter*2 $gutter/2 $gutter;
 }
-.uc-icon-sort-descending:after {
-  @extend %uc-icon-sort;
-  content: $uc-icon-caret-down;
+
+.uc-table__th__inner-wrapper--sortable {
+  padding: 0;
 }
 
-.uc-table--respond-small-tablet {
-  @extend .uc-table;
-  @media #{$small-tablet} {
-    width: 779px;
+.uc-table__th__inner-wrapper--sortable a {
+  display: block;
+  height: inherit;
+  min-height: inherit;
+  padding: $gutter/2 $gutter*2 $gutter/2 $gutter;
+  text-decoration: none;
+  &:after {
+    @include icon-inline-block;
+    color: $light-gray;
+    content: $uc-icon-arrows-v;
+    position: absolute;
+    right: 10px;
+    top: 7px;
+  }
+  &.descending {
+    &:after {
+      content: $uc-icon-long-arrow-up;
+      color: $link-blue;
+    }
+  }
+  &.ascending {
+    &:after {
+      content: $uc-icon-long-arrow-down;
+      color: $link-blue;
+    }
   }
 }
 
-.uc-table--respond-not-desktop {
-  @extend .uc-table;
-  @media #{$not-desktop} {
-    width: 779px;
+//
+// Table modifier for unsorted headers
+//
+.uc-table--unsorted {
+  thead:after {
+    background-color: transparent;
   }
-}
 
-.uc-table--respond-mobile {
-  @extend .uc-table;
-  @media #{$mobile} {
-    width: 480px;
+  thead th {
+    background: white;
+    border: none;
+    font-weight: $semibold-weight;
+    height: 40px;
+    min-height: 40px;
+    padding: $gutter;
   }
 }
 
+//
+// Various table column widths
+//
 .uc-table__col--tiny {
   width: 30px;
 }
@@ -108,4 +156,3 @@
 .uc-table__col--auto {
   width: auto;
 }
-