workarea-admin 3.4.12

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

@@ -0,0 +1,46 @@
+/*------------------------------------*\
+    #DATA-PAIRS
+\*------------------------------------*/
+
+$data-pairs-border-color:  $border-color !default;
+
+
+/**
+ * 1. element class name ommitted to avoid redundancy
+ * 2. various types of content will be found wrapped in paragraph tags within
+ *    tables
+ */
+
+.data-pairs {
+    margin-bottom: $vertical-margin;
+    border-collapse: collapse;
+
+    th,
+    td { /* [1] */
+        padding: $spacing-unit ($spacing-unit * 2);
+        border-bottom: 1px solid $data-pairs-border-color;
+        vertical-align: top;
+    }
+
+    th { /* [1] */
+        @extend %text;
+        @extend %text--small;
+        font-weight: bold;
+        text-transform: uppercase;
+        white-space: nowrap;
+    }
+
+    p { /* [2] */
+        margin: 0;
+    }
+
+    p + p { /* [2] */
+        margin-top: $spacing-unit;
+    }
+}
+
+    .data-pairs__name {
+        &:after {
+            content: ':';
+        }
+    }

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

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    #DATE-MARKER
+\*------------------------------------*/
+
+$date-marker-min-width:        50px !default;
+$date-marker-background-color: $light-gray !default;
+$date-marker-month-font-size:  12px !default;
+$date-marker-day-font-size:    20px !default;
+
+.date-marker {
+    position: relative;
+    margin-top: $spacing-unit;
+    margin-right: $horizontal-margin;
+    padding: $spacing-unit;
+    min-width: $date-marker-min-width;
+    float: right;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    background-color: $date-marker-background-color;
+}
+
+.date-marker--no-date {
+    padding: 0;
+}
+
+    .date-marker__annotation {
+        @include center($to: vertical);
+        right: $date-marker-min-width + $horizontal-margin;
+        text-align: right;
+        white-space: nowrap;
+    }
+
+    .date-marker__month {
+        font-size: $date-marker-month-font-size;
+    }
+
+    .date-marker__day {
+        margin-bottom: 0;
+        font-size: $date-marker-day-font-size;
+    }
+

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

@@ -0,0 +1,105 @@
+/*------------------------------------*\
+    #DIRECT-UPLOAD
+\*------------------------------------*/
+
+$direct-upload-color: $font-color !default;
+$direct-upload-bg-color: $off-white !default;
+$direct-upload-border-color: $blue !default;
+
+$direct-upload-active-color: $white !default;
+$direct-upload-active-bg-color: $blue !default;
+
+$direct-upload-processing-color: $white !default;
+$direct-upload-processing-bg-color: $bright-blue !default;
+$direct-upload-processing-border-color: $bright-blue !default;
+
+$direct-upload-fail-color: $white !default;
+$direct-upload-fail-bg-color: $bright-red !default;
+$direct-upload-fail-border-color: $bright-red !default;
+
+$direct-upload-success-color: $white !default;
+$direct-upload-success-bg-color: $bright-green !default;
+$direct-upload-success-border-color: $bright-green !default;
+
+$direct-upload-table-bg-color: $white !default;
+$direct-upload-table-row-success-color: $green !default;
+$direct-upload-table-row-failure-color: $red !default;
+
+
+.direct-upload {
+    position: relative;
+    background: $direct-upload-bg-color;
+    border: 2px solid $direct-upload-border-color;
+    padding: $spacing-unit * 4;
+    margin: 0 auto $spacing-unit * 4;
+    color: $direct-upload-color;
+    text-align: center;
+    border-radius: $global-border-radius;
+    transition: background $global-transition-speed ease-out,
+                color $global-transition-speed ease-out,
+                border-color $global-transition-speed ease-out,
+}
+
+.direct-upload--active {
+    color: $direct-upload-active-color;
+    background-color: $direct-upload-active-bg-color;
+}
+
+.direct-upload--processing {
+    color: $direct-upload-processing-color;
+    background-color: $direct-upload-processing-bg-color;
+    border-color: $direct-upload-processing-border-color;
+}
+
+.direct-upload--fail {
+    color: $direct-upload-fail-color;
+    background-color: $direct-upload-fail-bg-color;
+    border-color: $direct-upload-fail-border-color;
+}
+
+.direct-upload--success {
+    color: $direct-upload-success-color;
+    background-color: $direct-upload-success-bg-color;
+    border-color: $direct-upload-success-border-color;
+}
+
+
+    .direct-upload__content {}
+
+        .direct-upload__heading {
+            @extend %heading;
+            @extend %heading--2;
+        }
+
+        .direct-upload__info {}
+
+
+        .direct-upload__table {
+            width: 75%;
+            margin: ($spacing-unit * 2) auto 0;
+            padding: $spacing-unit ($spacing-unit * 3);
+            background: $direct-upload-table-bg-color;
+            border-radius: $global-border-radius;
+        }
+
+            .direct-upload__table-row {}
+
+            .direct-upload__table-row--success {}
+            .direct-upload__table-row--failure {}
+            .direct-upload__table-row--pending {}
+
+                .direct-upload__table-cell {
+                    .direct-upload__table-row--success & {
+                        color: $direct-upload-table-row-success-color;
+                    }
+
+                    .direct-upload__table-row--failure & {
+                        color: $direct-upload-table-row-failure-color;
+                    }
+                }
+
+                .direct-upload__table-cell--file-name {}
+
+                .direct-upload__table-cell--file-status {
+                    text-align: right;
+                }

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

@@ -0,0 +1,41 @@
+/*------------------------------------*\
+    #DISCOUNT
+\*------------------------------------*/
+
+.discount {}
+
+    .discount__rules {}
+
+        .discount__node-line {
+            margin: $spacing-unit 0;
+        }
+
+            .discount__node-group {
+                display: inline;
+            }
+
+                .discount__node {
+                    display: inline-block;
+                    margin: 3px;
+                }
+
+            .discount__rules-fields {
+                display: inline;
+                margin: 0;
+            }
+
+                .discount__rules-legend {
+                    margin: 0;
+                }
+
+                .discount__rules-heading {
+                    @extend %visually-hidden;
+                }
+
+                .discount__optional-node-group {
+                    display: none;
+                }
+
+                .discount__optional-node-group--visible {
+                    display: inline;
+                }

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

@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    #EXPANDABLE
+\*------------------------------------*/
+
+$expandable-element-gradient-color: $white !default;
+$expandable-button-color: $link-color !default;
+
+.expandable {}
+
+.expandable--expanded {}
+
+    .expandable__element {
+        position: relative;
+        overflow: hidden;
+
+        &::after {
+            display: block;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            content: '';
+            background: linear-gradient(
+                to bottom,
+                rgba($expandable-element-gradient-color, 0) 50%,
+                rgba($expandable-element-gradient-color, 1) 100%
+            );
+        }
+
+        .expandable--expanded &::after {
+            display: none;
+        }
+    }
+
+    .expandable__button {
+        @extend %button-reset;
+        color: $expandable-button-color;
+        cursor: pointer;
+
+        &::before, &::after {
+            content: '↓';
+        }
+
+        .expandable--expanded & {
+            display: none;
+        }
+    }

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

@@ -0,0 +1,184 @@
+/*------------------------------------*\
+    #HEADER
+\*------------------------------------*/
+
+$header-bg-color:  $white !default;
+
+$header-search-form-bg-color:  $off-white !default;
+
+$header-logo-height:  32px !default;
+$header-logo-color:   $off-white;
+
+$header-menu-button-bg-color:  $blue !default;
+$header-menu-button-size:      $global-header-height !default;
+
+$header-menu-icon-color:  $white !default;
+$header-menu-icon-size:   40px !default;
+
+$header-action-border-color:  $border-color !default;
+
+$header-action-link-color:           $off-black !default;
+$header-action-link-bg-color:        $white !default;
+$header-action-link-hover-bg-color:  $off-white !default;
+
+$header-alert-width: 56px;
+$header-alert-bg-color: $white !default;
+
+$header-alert-icon-color:  $red !default;
+$header-alert-icon-size:   24px !default;
+
+.header {
+    @extend %clearfix;
+    @include global-box-shadow;
+    position: fixed;
+    top: 0;
+    z-index: index($components, header);
+    width: 100%;
+    height: $global-header-height;
+    background: $header-bg-color;
+
+    .admin-toolbar & {
+        position: relative;
+        box-shadow: none;
+    }
+}
+
+.header--takeover {
+    box-shadow: none;
+}
+
+
+    .header__logo {
+        display: none;
+
+        .header--takeover & {
+            @include center;
+            display: block;
+            height: $header-logo-height;
+            fill: $header-logo-color;
+        }
+    }
+
+
+    .header__menu-button {
+        @extend %button-reset;
+        position: relative; /* [1] */
+        width:  $header-menu-button-size;
+        height: $header-menu-button-size;
+        float: left;
+        background: $header-menu-button-bg-color;
+        cursor: pointer;
+    }
+
+    .header__menu-button--open {
+        .header--takeover & {
+            display: none;
+        }
+    }
+
+    .header__menu-button--close {
+        display: none;
+
+        .header--takeover & {
+            display: block;
+        }
+    }
+
+        .header__menu-icon {
+            @include center;
+            width:  $header-menu-icon-size;
+            height: $header-menu-icon-size;
+            fill: $header-menu-icon-color;
+        }
+
+
+    .header__contents {
+        display: flex;
+
+        .header--takeover & {
+            display: none;
+        }
+    }
+
+
+        .header__search-form {
+            width: 100%;
+            background: $header-search-form-bg-color;
+        }
+
+
+        .header__action {
+            display: inline-block;
+            height: $global-header-height;
+            white-space: nowrap;
+            border-left: 1px solid $header-action-border-color;
+            vertical-align: top;
+        }
+
+            .header__action-link {
+                @extend %button-reset;
+                @extend %heading;
+                @extend %heading--5;
+                @extend %heading--no-margin;
+                padding: 0 ($spacing-unit * 2);
+                line-height: $global-header-height;
+                white-space: nowrap;
+                background: $header-action-link-bg-color;
+                cursor: pointer;
+                transition: background-color $global-transition-speed ease-out;
+
+                &:hover {
+                    text-decoration: none;
+                    background-color: $header-action-link-hover-bg-color;
+                }
+            }
+
+            .header__action-link-text {
+                display: none;
+
+                @include respond-to($medium-breakpoint) {
+                    display: inline-block;
+                }
+            }
+
+
+            .header__user-menu {
+                display: table;
+                height: $global-header-height;
+                line-height: 1;
+                text-align: left;
+                background: $header-action-link-bg-color;
+                transition: background-color $global-transition-speed ease-out;
+
+                &:hover {
+                    background-color: $header-action-link-hover-bg-color;
+                }
+            }
+
+                .header__user-menu-cell {
+                    display: table-cell;
+                    padding: 0 ($spacing-unit * 2);
+                    vertical-align: middle;
+
+                    + .header__user-menu-cell {
+                        display: none;
+                        padding-left: 0;
+
+                        @include respond-to($medium-breakpoint) {
+                            display: table-cell;
+                        }
+                    }
+                }
+
+        .header__alert {
+            width: $header-alert-width;
+            background: $header-alert-bg-color;
+            position: relative;
+        }
+
+            .header__alert-icon {
+                @include center;
+                width:  $header-alert-icon-size;
+                height: $header-alert-icon-size;
+                fill: $header-alert-icon-color;
+            }