workarea-admin 3.4.12

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

@@ -0,0 +1,62 @@
+/*------------------------------------*\
+    #SVG-ICON
+\*------------------------------------*/
+
+// TODO: v4 use explicit pixel values
+$svg-icon-size:              $spacing-unit * 3;
+$svg-icon-small-size:        $spacing-unit * 2;
+$svg-icon-large-size:        $spacing-unit * 4;
+$svg-icon-extra-large-size:  $spacing-unit * 6;
+
+
+.svg-icon {
+    display: inline-block;
+    width: $svg-icon-size;
+    height: $svg-icon-size;
+    vertical-align: middle;
+}
+
+/**
+ * Display modifiers
+ */
+.svg-icon--block {
+    display: block;
+}
+
+
+/**
+ * Size Modifiers
+ */
+.svg-icon--small {
+    width: $svg-icon-small-size;
+    height: $svg-icon-small-size;
+}
+
+.svg-icon--large {
+    width: $svg-icon-large-size;
+    height: $svg-icon-large-size;
+}
+
+.svg-icon--extra-large {
+    width: $svg-icon-extra-large-size;
+    height: $svg-icon-extra-large-size;
+}
+
+
+/**
+ * Color Modifiers
+ */
+.svg-icon--black { fill: $black; }
+.svg-icon--off-black { fill: $off-black; }
+.svg-icon--blue { fill: $blue; }
+.svg-icon--bright-blue { fill: $bright-blue; }
+.svg-icon--green { fill: $green; }
+.svg-icon--bright-green { fill: $bright-green; }
+.svg-icon--red { fill: $red; }
+.svg-icon--dark-gray { fill: $dark-gray; }
+.svg-icon--gray { fill: $gray; }
+.svg-icon--light-gray { fill: $light-gray; }
+.svg-icon--off-white { fill: $off-white; }
+.svg-icon--white { fill: $white; }
+
+.svg-icon--link-color { fill: $link-color; }

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #TABS
+\*------------------------------------*/
+
+.tabs {}
+
+    /**
+     * 1. injected via JavaScript
+     */
+    .tabs__menu {}
+
+        .tabs__menu-item {}
+
+            .tabs__menu-link {}
+
+    .tabs__panel {
+        display: none;
+    }
+
+        .tabs__heading {
+            display: none;
+        }

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

@@ -0,0 +1,95 @@
+/*------------------------------------*\
+    #TAKEOVER
+\*------------------------------------*/
+
+$takeover-bg-color:  $background-color !default;
+
+$takeover-content-top-offset:         $global-header-height + ($spacing-unit * 4) !default;
+$takeover-content-horizontal-offset:  ($spacing-unit * 2) !default;
+
+$takeover-content-width:   calc(100vw - #{$takeover-content-horizontal-offset * 2}) !default;
+
+
+@keyframes takeover-fade-in-from-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(300px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes takeover-fade-out-from-bottom {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(300px);
+    }
+}
+
+@keyframes takeover-fade-in-from-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes takeover-fade-out-from-top {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-100px);
+    }
+}
+
+
+.takeover {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, takeover);
+    background: $takeover-bg-color;
+    animation: takeover-fade-in-from-bottom $global-transition-speed;
+}
+
+
+.takeover--removing {
+    animation: takeover-fade-out-from-bottom $global-transition-speed;
+}
+
+.takeover--from-top {
+    animation: takeover-fade-in-from-top $global-transition-speed;
+
+    &.takeover--removing {
+        animation: takeover-fade-out-from-top $global-transition-speed;
+    }
+}
+
+    .takeover__content {
+        position: absolute;
+        top: $takeover-content-top-offset;
+        right: $takeover-content-horizontal-offset;
+        bottom: 0;
+        left: $takeover-content-horizontal-offset;
+        padding-bottom: $spacing-unit * 10;
+        width: $takeover-content-width;
+        overflow: auto;
+    }

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

@@ -0,0 +1,97 @@
+/*------------------------------------*\
+    #TEXT-BOX
+\*------------------------------------*/
+
+$text-box-color:                $dark-gray !default;
+$text-box-bg-color:             $light-gray !default;
+$text-box-focus-bg-color:       $white !default;
+
+$text-box-small-width:          $spacing-unit * 10 !default;
+$text-box-medium-width:         ($text-box-small-width * 2) !default;
+$text-box-wide-width:           ($text-box-small-width * 4) !default;
+
+$text-box-i18n-gap:             ($spacing-unit * 3) !default;
+
+$text-box-multi-line-height:    250px !default;
+
+$text-box-i18n-max-width:       140px !default;
+
+$number-input-spinner-width:    25px !default;
+
+
+/**
+ * 1. when `.text-box` is found within a table, differentiate it from it's
+ *    background on hover.
+ * 2. when the class `.i18n` is present within it's ancestor tree, an icon
+ *    shows up, which reduces the input's content zone. We provide
+ *    a gap width to fix that.
+ */
+.text-box {
+    padding: $spacing-unit;
+    width: 100%;
+    color: $text-box-color;
+    background: $text-box-bg-color;
+    border: 0;
+    border-radius: $global-border-radius;
+
+    &:focus {
+        @include focus-ring;
+        background-color: $text-box-focus-bg-color;
+    }
+
+    tr:hover & { /* [1] */
+        background-color: $text-box-focus-bg-color;
+    }
+}
+
+.text-box--small {
+    max-width: $text-box-small-width;
+
+    &[type=number] {
+        max-width: ($text-box-small-width + $number-input-spinner-width);
+    }
+}
+
+.text-box--medium { max-width: $text-box-medium-width; }
+.text-box--wide { max-width: $text-box-wide-width; }
+
+.text-box--multi-line { height: $text-box-multi-line-height; }
+.text-box--tall-multi-line { height: $text-box-multi-line-height * 2; }
+
+.text-box--code { font-family: $monospace-font-family; }
+
+
+/**
+ * 1. the i18n icon should not appear unless there is a class of `.i18n` within
+ *    it's ancestor tree.
+ */
+.text-box--i18n {
+    .i18n & { /* [1] */
+        @include text-box-image('i18n.svg');
+    }
+
+    .i18n &.text-box--small {
+        max-width: ($text-box-small-width + $text-box-i18n-gap);
+    }
+
+    .i18n &.text-box--small[type=number] {
+        max-width: ($text-box-small-width + $number-input-spinner-width + $text-box-i18n-gap);
+    }
+
+    .i18n &.text-box--medium {
+        max-width: ($text-box-medium-width + $text-box-i18n-gap);
+    }
+
+    .i18n &.text-box--wide {
+        max-width: ($text-box-wide-width + $text-box-i18n-gap);
+    }
+}
+
+// TODO: v4 Remove
+.text-box--valid {
+    @include text-box-image('valid.svg', right);
+}
+
+.text-box--invalid {
+    @include text-box-image('invalid.svg', right);
+}

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

@@ -0,0 +1,73 @@
+/*------------------------------------*\
+    #TEXT-BUTTON
+\*------------------------------------*/
+
+$text-button-color: $off-black !default;
+$text-button-hover-color: $dark-gray !default;
+
+$text-button-create-color: $green !default;
+$text-button-create-hover-color: $bright-green !default;
+
+$text-button-destroy-color: $bright-red !default;
+$text-button-destroy-hover-color: $red !default;
+
+$text-button-font-size: 1em !default;
+$text-button-icon-size: 1.3em !default;
+
+
+.text-button {
+    @extend %button-reset;
+    color: $text-button-color;
+    font-weight: bold;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        color: $text-button-hover-color;
+        text-decoration: none;
+    }
+}
+
+.text-button--create {
+    color: $text-button-create-color;
+
+    &:hover {
+        color: $text-button-create-hover-color;
+    }
+}
+
+.text-button--destroy {
+    color: $text-button-destroy-color;
+
+    &:hover {
+        color: $text-button-destroy-hover-color;
+    }
+}
+
+
+    .text-button__icon {
+        width: $text-button-icon-size;
+        height: $text-button-icon-size;
+        fill: $text-button-color;
+        vertical-align: text-top;
+
+        .text-button:hover & {
+            fill: $text-button-hover-color;
+        }
+
+        .text-button--create & {
+            fill: $text-button-create-color;
+        }
+
+        .text-button--create:hover & {
+            fill: $text-button-create-hover-color;
+        }
+
+        .text-button--destroy & {
+            fill: $text-button-destroy-color;
+        }
+
+        .text-button--destroy:hover & {
+            fill: $text-button-destroy-hover-color;
+        }
+    }

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

@@ -0,0 +1,159 @@
+/*------------------------------------*\
+    #TOGGLE-BUTTON
+\*------------------------------------*/
+
+$toggle-button-color:       $white !default;
+$toggle-button-bg-color:    $blue !default;
+$toggle-button-note-color:  $dark-gray !default;
+
+$toggle-button-label-border-color:  $border-color !default;
+
+$toggle-button-status-positive-color:  $green !default;
+$toggle-button-status-negative-color:  $red !default;
+
+
+.toggle-button {
+    display: block;
+}
+
+.toggle-button--inline {
+    display: inline-block;
+}
+
+    /**
+     * 1. provides positiioning context for `.toggle-button__label`
+     * 2. height + vertical margin = `.text-box` height
+     */
+
+    .toggle-button__switch {
+        display: inline-block;
+        position: relative; /* [1] */
+        margin: 4px 0; /* [2] */
+        width:  56px;
+        height: 24px;
+        vertical-align: middle;
+    }
+
+        /**
+         * 1. if `.toggle-button__input` is not checked, hide `.toggle-button__label`
+         * 2. if `.toggle-button__input` is checked, show `.toggle-button__label`
+         * 3. if focused, apply focus ring to the label since the input is visually hidden
+         */
+
+        .toggle-button__input {
+            @extend %visually-hidden;
+
+            &:not(:checked) + .toggle-button__label { /* [1] */
+                visibility: hidden;
+            }
+
+            &:checked + .toggle-button__label { /* [2] */
+                visibility: visible;
+            }
+
+            &:focus + .toggle-button__label { /* [3] */
+                @include focus-ring;
+            }
+        }
+
+        .toggle-button__input--positive {}
+        .toggle-button__input--negative {}
+
+        /**
+         * 1. dimension matches `.toggle-button__switch`
+         * 2. disallow text highlighting
+         * 3. styling for the toggle
+         * 4. moving toggle left to right based on `.toggle-button__input:checked` state
+         */
+
+        .toggle-button__label {
+            position: absolute;
+            top:     0;
+            right:   0;
+            bottom:  0;
+            left:    0;
+            margin:  0;
+            padding: 0 0 0 8px;
+            color: $toggle-button-color;
+            font-size:   12px;
+            font-weight: bold;
+            line-height: 24px; /* [1] */
+            text-transform: uppercase;
+            border: 1px solid $toggle-button-label-border-color;
+            border-radius: 12px;
+            cursor: pointer;
+            user-select: none; /* [2] */
+            -webkit-touch-callout: none; /* [2] */
+
+            &:after { /* [3] */
+                position: absolute;
+                width:  22px;
+                height: 22px;
+                background: $toggle-button-color;
+                border-radius: 100%;
+                content: '';
+                transition: left $global-transition-speed,
+                            transform $global-transition-speed;
+            }
+        }
+
+        .toggle-button__label--positive {
+            background: $toggle-button-status-positive-color;
+
+            &:after { /* [3] */
+                left: 0;
+                transform: translateX(0%);
+
+                .toggle-button__input:checked + & { /* [4] */
+                    left: 100%;
+                    transform: translateX(-100%);
+                }
+            }
+        }
+
+        .toggle-button__label--negative {
+            padding-left: 28px;
+            background: $toggle-button-status-negative-color;
+
+            &:after { /* [3] */
+                left: 100%;
+                transform: translateX(-100%);
+
+                .toggle-button__input:checked + & { /* [4] */
+                    left: 0;
+                    transform: translateX(0);
+                }
+            }
+        }
+
+    /**
+     * 1. hidden by default on page load
+     * 2. placeholder for various other modifiers
+     */
+
+    .toggle-button__more {
+        display: none; /* [1] */
+        margin: 3px 0 0;
+    }
+
+    .toggle-button__more--active {} /* [2] */
+
+    .toggle-button__more--to-right {
+        margin: 0 0 0 8px;
+        vertical-align: middle;
+
+        &.toggle-button__more--active { display: inline-block; }
+    }
+
+    .toggle-button__more--below {
+        &.toggle-button__more--active { display: block; }
+    }
+
+        /**
+         * 1. styling to match `.value__note {}`
+         */
+
+        .toggle-button__note { /* [1] */
+            color: $toggle-button-note-color;
+            font-size: 12px;
+        }