workarea-admin 3.4.12

data/app/assets/stylesheets/workarea/admin/components/_release_select.scss

@@ -0,0 +1,70 @@
+/*------------------------------------*\
+    #RELEASE-SELECT
+\*------------------------------------*/
+
+$release-select-icon-size: 24px !default;
+
+$release-select-icon-active-color:       $red !default;
+$release-select-emphasize-bg-color:      $red !default;
+$release-select-emphasize-color:         $white !default;
+$release-select-emphasize-border-color:  $red !default;
+
+$release-select-input-max-width:  160px !default;
+
+
+.release-select {
+    position: relative;
+}
+
+.release-select--active {}
+
+    .release-select__container {
+        display: table;
+
+        .release-select--emphasize & {
+            background: $release-select-emphasize-bg-color;
+            border: 1px solid $release-select-emphasize-border-color;
+            border-radius: 5px;
+        }
+    }
+
+        .release-select__container-cell {
+            display: table-cell;
+            padding: $spacing-unit;
+
+            + .release-select__container-cell {
+                padding-right: ($spacing-unit * 2);
+            }
+        }
+
+            .release-select__icon {
+                width: $release-select-icon-size;
+                height: $release-select-icon-size;
+                vertical-align: middle;
+
+                .release-select--active & {
+                    fill: $release-select-icon-active-color;
+                }
+
+                .release-select--emphasize & {
+                    fill: $release-select-emphasize-color;
+                }
+            }
+
+            .release-select__label {}
+
+            .release-select__input {
+                max-width: $release-select-input-max-width;
+                font-size: $font-size;
+                line-height: 1;
+            }
+
+            .release-select__link {
+                margin-left: $spacing-unit;
+
+                .release-select--active & {}
+
+                .release-select--emphasize & {
+                    color: $release-select-emphasize-color;
+                }
+            }

data/app/assets/stylesheets/workarea/admin/components/_search_form.scss

@@ -0,0 +1,78 @@
+/*------------------------------------*\
+    #SEARCH-FORM
+\*------------------------------------*/
+
+$search-form-width:  275px !default;
+$search-form-input-bg-color:  $off-white !default;
+
+$search-form-icon-size:     16px !default;
+$search-form-icon-spacing:  8px !default;
+
+$search-form-major-height:        $global-header-height !default;
+$search-form-major-icon-size:     26px !default;
+$search-form-major-icon-spacing:  16px !default;
+
+
+/**
+ * 1. provides positioning context for `.search-form__button`
+ */
+.search-form {
+    position: relative; /* [1] */
+    width: $search-form-width;
+    margin: 0;
+}
+
+.search-form--major {
+    width: 100%;
+}
+
+.search-form--with-margin {
+    margin-bottom: $vertical-margin;
+}
+
+    .search-form__input {
+        @include text-box-image('icons/search.svg', left, $search-form-icon-size, $search-form-icon-spacing);
+        padding-top:    $spacing-unit;
+        padding-right:  $spacing-unit;
+        padding-bottom: $spacing-unit;
+        width:  100%;
+        background-color: $search-form-input-bg-color;
+        border: 0;
+        border-radius: $global-border-radius;
+
+        .search-form--major & {
+            @include text-box-image('icons/search.svg', left, $search-form-major-icon-size, $search-form-major-icon-spacing);
+            height: $search-form-major-height;
+        }
+
+        .header & {
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        &:focus {
+            @include focus-ring;
+        }
+    }
+
+    /**
+     * 1. negate the styles from `base/forms.scss`
+     */
+    .search-form__button {
+        @extend %button-reset;
+        @extend %image-replacement;
+        position: absolute;
+        top:    0;
+        bottom: 0;
+        left:  0;
+        width: $search-form-icon-size + ($search-form-icon-spacing * 2);
+        cursor: pointer;
+
+        .search-form--major & {
+            width: $search-form-major-icon-size + ($search-form-major-icon-spacing * 2);
+        }
+
+        &[disabled] {
+            background-color: transparent;
+        }
+    }

data/app/assets/stylesheets/workarea/admin/components/_secondary_nav.scss

@@ -0,0 +1,16 @@
+/*------------------------------------*\
+    #SECONDARY-NAV
+\*------------------------------------*/
+
+$secondary-nav-border-color: $light-gray !default;
+
+.secondary-nav {
+    @extend %list-reset;
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    font-size: 1.25rem;
+    margin-bottom: $spacing-unit * 4;
+    border-bottom: 2px solid $secondary-nav-border-color;
+    padding-bottom: $spacing-unit;
+}

data/app/assets/stylesheets/workarea/admin/components/_state.scss

@@ -0,0 +1,35 @@
+/*------------------------------------*\
+    #STATE
+\*------------------------------------*/
+
+$state-pending-color: $green !default;
+$state-done-color: $gray !default;
+$state-danger-color: $red !default;
+$state-indicator-size: 0.8em !default;
+
+.state {
+    &::before {
+        display: inline-block;
+        margin: 0.2em 0.2em 0 0;
+        width: $state-indicator-size;
+        height: $state-indicator-size;
+        background: none;
+        border-radius: 100%;
+        vertical-align: text-top;
+        content: '';
+    }
+}
+
+.state--pending::before { background-color: $state-pending-color; }
+
+.state--danger::before { background-color: $state-danger-color; }
+
+.state--done {
+    &::before {
+        margin-top: 0;
+        color: $state-done-color;
+        background: none;
+        content: '✓';
+        vertical-align: baseline;
+    }
+}

data/app/assets/stylesheets/workarea/admin/components/_style_guide.scss

@@ -0,0 +1,134 @@
+/*------------------------------------*\
+    #STYLE-GUIDE
+\*------------------------------------*/
+
+$style-guide-nav-width:  20% !default;
+
+$style-guide-menu-button-shadow:  0 0 8px $shadow-color !default;
+
+$style-guide-grid-dark:           $off-black !default;
+$style-guide-grid-light:          darken($white, 5%) !default;
+$style-guide-grid-bg-color:       $white !default;
+
+$style-guide-color-outline:       1px solid $off-black !default;
+
+%style-guide-bg-grid {
+    background-size:     8px 8px;
+    background-color:    $style-guide-grid-bg-color;
+    background-image:    linear-gradient(45deg, $style-guide-grid-light 25%, transparent 25%, transparent 75%, $style-guide-grid-light 75%, $style-guide-grid-light 100%), linear-gradient(45deg, $style-guide-grid-light 25%, transparent 25%, transparent 75%, $style-guide-grid-light 75%, $style-guide-grid-light 100%);
+    background-position: 0 0, 4px 4px;
+}
+
+/**
+ * 1. due to the way placeholder images work, we must negate this rule set up
+ *    in `base/_images.scss`
+ */
+.style-guide {
+    @extend %clearfix;
+    padding: ($spacing-unit * 2) $spacing-unit;
+
+    code {
+        font-weight: bold;
+    }
+
+    img[width], img[height] { /* [1] */
+        max-width: 100%;
+    }
+}
+
+    .style-guide__nav {
+        position: fixed;
+        margin: 0;
+        width: $style-guide-nav-width;
+        height: 100vh;
+        float: left;
+        overflow-y: auto;
+    }
+
+        .style-guide__link {}
+
+        .style-guide__link--active {
+            font-weight: bold;
+        }
+
+
+    .style-guide__main {
+        margin-left: $style-guide-nav-width;
+        padding-left: $spacing-unit * 2;
+    }
+
+        .style-guide__section {
+            margin:  $vertical-margin 0;
+            padding: ($spacing-unit * 2) 0;
+        }
+
+            .style-guide__subsection {
+                margin:  $vertical-margin 0;
+                padding: $spacing-unit * 2;
+            }
+
+
+                /**
+                 * 1. allows components with margins to be clearly shown
+                 */
+
+                .style-guide__example-block {
+                    @extend %style-guide-bg-grid;
+                    display: inline-block; /* [1] */
+                    margin-bottom: $vertical-margin;
+                    width: 100%; /* [1] */
+                }
+
+                .style-guide__code-block {
+                    display: block;
+                    margin-bottom: $vertical-margin;
+
+                    > code { /* [3] */
+                        display: block;
+                        padding: 16px;
+                        font-weight: normal;
+                        overflow: auto;
+                    }
+                }
+
+
+                .style-guide__color {
+                    @extend %style-guide-bg-grid;
+                    display: block;
+                    position: relative;
+                    width:  100px;
+                    height: 100px;
+                }
+
+                    .style-guide__color-swatch {
+                        position: absolute;
+                        top:    0;
+                        right:  0;
+                        bottom: 0;
+                        left:   0;
+                        outline: $style-guide-color-outline;
+                    }
+
+                    .style-guide__color-swatch--black { background: $black; }
+                    .style-guide__color-swatch--off-black { background: $off-black; }
+                    .style-guide__color-swatch--blue { background: $blue; }
+                    .style-guide__color-swatch--bright-blue { background: $bright-blue; }
+                    .style-guide__color-swatch--green { background: $green; }
+                    .style-guide__color-swatch--bright-green { background: $bright-green; }
+                    .style-guide__color-swatch--red { background: $red; }
+                    .style-guide__color-swatch--dark-gray { background: $dark-gray; }
+                    .style-guide__color-swatch--gray { background: $gray; }
+                    .style-guide__color-swatch--light-gray { background: $light-gray; }
+                    .style-guide__color-swatch--off-white { background: $off-white; }
+                    .style-guide__color-swatch--white { background: $white; }
+                    .style-guide__color-swatch--orange { background: $orange; }
+
+                    .style-guide__color-swatch--transparent { background: $transparent; }
+                    .style-guide__color-swatch--font-color { background: $font-color; }
+                    .style-guide__color-swatch--background-color { background: $background-color; }
+                    .style-guide__color-swatch--border-color { background: $border-color; }
+                    .style-guide__color-swatch--focus-ring-color { background: $focus-ring-color; }
+                    .style-guide__color-swatch--shadow-color { background: $shadow-color; }
+
+
+            .style-guide__unit-test {}

data/app/assets/stylesheets/workarea/admin/components/_summary.scss

@@ -0,0 +1,199 @@
+/*------------------------------------*\
+    #SUMMARY
+\*------------------------------------*/
+
+$summary-size:  200px !default;
+
+$summary-bg-color:                  $white !default;
+$summary-box-shadow-color:          $gray !default;
+$summary-selected-box-shadow:       $green !default;
+
+$summary-inactive-opacity:          0.75 !default;
+
+$summary-hover-border-color:       $off-black !default;
+
+$summary-type-color:     $off-black !default;
+$summary-type-bg-color:  $light-gray !default;
+
+$summary-name-incative-color: $off-black !default;
+
+$summary-info-color:              $dark-gray !default;
+$summary-info-color-inactive:     $red !default;
+$summary-info-bg-color:           $white !default;
+$summary-info-bottom-offset:      $spacing-unit * 3 !default;
+$summary-info-height:             $spacing-unit * 4 !default;
+$summary-info-height--multi-line: 52px !default;
+$summary-info-border-color:       $border-color !default;
+
+/**
+ * 1. provides positioning context for `.summary__checkbox`
+ */
+.summary {
+    @include global-box-shadow($summary-box-shadow-color, tight);
+    display: block;
+    position: relative; /* [1] */
+    margin: 0 ($spacing-unit * 1.5) ($spacing-unit * 3);
+    width: $summary-size;
+    height: $summary-size;
+    text-align: center;
+    background: $summary-bg-color;
+    border-radius: $global-border-radius;
+    transition: box-shadow $global-transition-speed;
+
+    &:hover {
+        @include global-box-shadow;
+    }
+}
+
+.summary--inactive {
+    opacity: $summary-inactive-opacity;
+    transition: opacity $global-transition-speed;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.summary--selected {
+    @include global-box-shadow($summary-selected-box-shadow);
+}
+
+    .summary__type {
+        @extend %truncate;
+        @include center($to: horizontal);
+        display: none;
+        top: 0;
+        padding: $spacing-unit ($spacing-unit * 3);
+        max-width: 100%;
+        color: $summary-type-color;
+        font-size: $font-size + 1px;
+        background-color: $summary-type-bg-color;
+        border-radius: 0 0 $global-border-radius $global-border-radius;
+
+        .view--mixed-results & {
+            display: inline-block;
+        }
+    }
+
+    .summary__type--template {
+        display: inline-block;
+
+        .view--mixed-results & {
+            display: none;
+        }
+    }
+
+    /**
+     * 1. provide positioning context for `.summary__image`
+     * 2. ensures `.summary__image` does not exceed it's rounded boundary
+     */
+    .summary__image-container {
+        position: relative; /* [1] */
+        width:  $summary-size;
+        height: $summary-size;
+        border-radius: $global-border-radius;
+        overflow: hidden; /* [2] */
+    }
+
+        .summary__image {
+            @include center;
+            display: block;
+            opacity: 0.5;
+        }
+
+    .summary__name {
+        @extend %truncate;
+        @include center;
+        display: block;
+        padding: 0 $spacing-unit;
+        width: 100%;
+        font-size: 16px;
+        font-weight: bold;
+
+        .summary:hover & {
+            text-decoration: underline;
+        }
+
+        .summary--inactive & {
+            color: $summary-name-incative-color;
+        }
+    }
+
+    .summary__info-container {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding: $spacing-unit;
+        height: $summary-info-height;
+        background-color: $summary-info-bg-color;
+        border-top: 1px solid $summary-info-border-color;
+        border-radius: 0 0 $global-border-radius $global-border-radius;
+        overflow: hidden;
+    }
+
+    .summary__info-container--multi-line {
+        .summary:hover & {
+            height: $summary-info-height--multi-line;
+        }
+    }
+
+        /**
+         * 1. toggle between primary and secondary information on summary hover
+         * 2. Secondary summary info - displays on hover
+         */
+        .summary__info {
+            @extend %truncate;
+            display: block;
+            padding: 0 ($spacing-unit / 2);
+            color: $summary-info-color;
+            font-size: $font-size - 2px;
+            transform: translateY(0);
+
+            p {
+                margin: 0;
+            }
+
+            .summary:hover & {  /* [1] */
+                max-height: 0;
+                transform: translateY(120%);
+            }
+
+            & + & { /* [2] */
+                transform: translateY($summary-info-bottom-offset);
+
+                .summary:hover & {
+                    max-height: none;
+                    transform: translateY(0);
+                }
+            }
+        }
+
+            .summary__info-text-inactive {
+                color: $summary-info-color-inactive;
+            }
+
+    /**
+     * 1. visibility controlled via JavaScript. The default state of this
+     *    element is hidden.
+     */
+    .summary__checkbox { /* [1] */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+        .summary__checkbox-label {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        .summary__checkbox-input {
+            position: absolute;
+            top: $spacing-unit;
+            left: $spacing-unit;
+        }