workarea-admin 3.4.12

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

@@ -0,0 +1,400 @@
+/*------------------------------------*\
+    #MENU-EDITOR
+\*------------------------------------*/
+
+$menu-editor-width:             325px !default;
+$menu-editor-menu-gutter:       $spacing-unit * 4 !default;
+$menu-editor-border-color:      $border-color !default;
+$menu-editor-bg-color:          $white !default;
+
+$menu-editor-child-indicator-color:             $off-black !default;
+$menu-editor-child-indicator-triangle-size:     6px 0 6px 4px !default;
+$menu-editor-child-indicator-vertical-offset:   18px !default;
+$menu-editor-child-indicator-horizontal-offset: -18px !default;
+
+$menu-editor-head-label-color:  $dark-gray !default;
+$menu-editor-list-bg-color:     $light-gray !default;
+
+$menu-editor-link-color:        $blue !default;
+$menu-editor-link-active-color: $white !default;
+
+$menu-editor-list-item-heading-color:       $gray !default;
+$menu-editor-list-item-bg-color:            $white !default;
+$menu-editor-list-item-border-color:        $transparent !default;
+$menu-editor-list-item-added-color:         $white !default;
+$menu-editor-list-item-added-bg-color:      $green !default;
+$menu-editor-active-list-item-color:        $white !default;
+$menu-editor-active-list-item-bg-color:     $off-black !default;
+$menu-editor-hover-list-item-border-color:  $off-black !default;
+
+$menu-editor-link-text-max-length:  140px !default;
+
+$menu-editor-icon-color:        $gray !default;
+$menu-editor-icon-color-add:    $green !default;
+$menu-editor-icon-color-active: $off-black !default;
+$menu-editor-icon-size:         16px !default;
+$menu-editor-icon-size-parent:  24px !default;
+$menu-editor-icon-size-add:     32px !default;
+
+
+/**
+ * Animations
+ */
+
+@keyframes slidein {
+    from {
+        transform: translateX($menu-editor-menu-gutter * -1);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+
+.menu-editor {
+    padding-bottom: $spacing-unit * 3;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.menu-editor--full-width {}
+
+    .menu-editor__breadcrumb-builder {
+        margin-bottom: $spacing-unit * 3;
+    }
+
+    /**
+     * 1. Context for absolutely positioned CSS triangle child indicator
+     * 2. CSS triangle child indicator
+     * 3. remove gutter when UI is used within `.content-editor`
+     */
+    .menu-editor__menu {
+        display: inline-block;
+        position: relative; /* [1] */
+        width: $menu-editor-width;
+        text-align: left;
+        background: $menu-editor-bg-color;
+        border: 1px solid $menu-editor-border-color;
+        border-radius: $global-border-radius;
+        vertical-align: top;
+
+        & + & {
+            margin-left: $menu-editor-menu-gutter;
+        }
+
+        & + &:before { /* [2] */
+            position: absolute;
+            top: $menu-editor-child-indicator-vertical-offset;
+            left: $menu-editor-child-indicator-horizontal-offset;
+            width: 0;
+            height: 0;
+            border-color: transparent transparent transparent $menu-editor-child-indicator-color;
+            border-style: solid;
+            border-width: $menu-editor-child-indicator-triangle-size;
+            content: '';
+        }
+
+        .menu-editor--full-width & {
+            width: 100%;
+        }
+
+        .content-editor & {
+            margin-right: 0; /* [3] */
+        }
+    }
+
+    .menu-editor__menu--wide {
+        margin: 0;
+        width: 100%;
+    }
+
+    .menu-editor__menu--animate {
+        animation-duration: 0.15s;
+        animation-name: slidein;
+    }
+
+    /**
+     * Menu Editor Header Area
+     */
+
+    .menu-editor__head {
+        position: relative;
+        padding: $spacing-unit;
+    }
+
+        .menu-editor__heading {
+            text-align: center;
+        }
+
+        .menu-editor__sort-by-menu {
+            text-align: right;
+        }
+
+        .menu-editor__head-label {
+            color: $menu-editor-head-label-color;
+            font-size: $font-size + 4px;
+            font-weight: bold;
+            display: inline-block;
+        }
+
+        .menu-editor__head-label--truncated {
+            @extend %truncate;
+            max-width: $menu-editor-link-text-max-length;
+            top: $spacing-unit;
+        }
+
+        .menu-editor__head-actions {
+            @include center($to: vertical);
+            right: $horizontal-margin;
+        }
+
+            .menu-editor__head-link {}
+            .menu-editor__head-link-text {}
+
+    /**
+     * List of Menu Items
+     */
+
+    .menu-editor__menu-list {
+        margin:  0;
+        padding: $spacing-unit 0;
+        width: 100%;
+        white-space: nowrap;
+        background-color: $menu-editor-list-bg-color;
+        border-collapse: collapse;
+        border-radius: 0 0 $global-border-radius $global-border-radius;
+        list-style: none;
+    }
+
+        .menu-editor__list-item {
+            position: relative;
+            margin: $spacing-unit * 2;
+            background-color: $menu-editor-list-item-bg-color;
+            border: 1px solid $menu-editor-list-item-border-color;
+            border-radius: $global-border-radius;
+
+            &:hover {
+                border-color: $menu-editor-hover-list-item-border-color;
+            }
+        }
+
+        .menu-editor__list-item--active {
+            background-color: $menu-editor-active-list-item-bg-color;
+        }
+
+        .menu-editor__list-item--added {
+            background-color: $menu-editor-list-item-added-bg-color;
+            cursor: move;
+        }
+
+            .menu-editor__menu-link {
+                @extend %break-word;
+                display: block;
+                padding: $spacing-unit;
+                padding-right: $spacing-unit * 2;
+                color: $menu-editor-link-color;
+                font-weight: bold;
+                text-transform: none;
+                white-space: normal;
+
+                &:hover {
+                    text-decoration: none;
+                }
+
+                .menu-editor__list-item--active & {
+                    color: $menu-editor-link-active-color;
+                }
+
+                .menu-editor__list-item--added & {
+                    color: $menu-editor-list-item-added-color;
+                }
+            }
+
+            .menu-editor__menu-link--draggable {
+                position: relative;
+            }
+
+
+                .menu-editor__link-grip {
+                    @include center($to: vertical);
+                }
+
+                .menu-editor__menu-link-text {
+                    @extend %truncate;
+                    display: inline-block;
+                    max-width: $menu-editor-link-text-max-length;
+                    vertical-align: middle;
+                }
+
+            .menu-editor__control {
+                @include center($to: vertical);
+                right: $menu-editor-icon-size-parent;
+                margin: 0;
+                list-style: none;
+                opacity: 0;
+                transition: opacity $global-transition-speed ease-in-out;
+
+                .menu-editor__list-item:hover & ,
+                .menu-editor__list-item--active & {
+                    opacity: 1;
+                }
+            }
+
+                .menu-editor__control-item {
+                    display: inline-block;
+                    line-height: 1;
+                    vertical-align: middle;
+
+                    & + & {
+                        margin-left: $spacing-unit;
+                    }
+                }
+
+                    .menu-editor__control-link {
+                        cursor: pointer;
+                    }
+
+        .menu-editor__list-item--placeholder {
+            padding: $spacing-unit;
+            text-align: center;
+
+            .menu-editor__list-item + & {
+                display: none;
+            }
+        }
+
+        /**
+         * 1. Creates a dotted line behind the button
+         * 2. -25% transform aligns button on the dotted line
+         */
+        .menu-editor__add-item {
+            position: absolute;
+            top: $vertical-margin * -1;
+            left: 0;
+            width: 100%;
+            height: $spacing-unit * 2;
+            text-align: center;
+
+            &:before { /* [1] */
+                display: block;
+                position: relative;
+                top: 50%;
+                margin: 0 auto;
+                width: 80%;
+                border-top: 2px dotted $white;
+                opacity: 0;
+                content: '';
+                transition: opacity $global-transition-speed ease-in-out;
+            }
+
+            &:hover:before {
+                opacity: 1;
+            }
+        }
+
+            .menu-editor__add-item-button {
+                position: absolute;
+                left: 50%;
+                border-radius: 50%;
+                opacity: 0;
+                transform: translate(-50%, -25%); /* [2] */
+                transition: opacity $global-transition-speed ease-in-out;
+
+                .menu-editor__add-item:hover & {
+                    opacity: 1;
+                }
+            }
+
+            .menu-editor__add-item-button--last-position {
+                opacity: 1;
+                transform: translate(-50%, -50%);
+            }
+
+                .menu-editor__add-item-button-text {
+                    @extend %visually-hidden;
+                }
+
+    /**
+     * Menu Editor Breadcrumbs - Used in workflows
+     */
+
+    .menu-editor__breadcrumbs {
+        @extend %truncate;
+        margin: 0;
+        padding: $spacing-unit ($spacing-unit * 2) 0;
+        list-style: none;
+    }
+
+        .menu-editor__breadcrumbs-node {
+            display: inline;
+            margin-bottom: $spacing-unit;
+            font-size: $font-size + 2px;
+        }
+
+        .menu-editor__breadcrumbs-home-button {
+            @extend %button-reset;
+        }
+
+    /**
+     * Menu editor icons
+     */
+
+    .menu-editor__icon {
+        width: $menu-editor-icon-size;
+        height: $menu-editor-icon-size;
+        fill: $menu-editor-icon-color;
+        vertical-align: middle;
+    }
+
+    .menu-editor__icon--head {
+        display: inline-block;
+        margin: $spacing-unit $spacing-unit * 2;
+        margin-right: $spacing-unit;
+        vertical-align: middle;
+    }
+
+    .menu-editor__icon--link {
+        vertical-align: middle;
+
+        .menu-editor__list-item--added & ,
+        .menu-editor__list-item--active & {
+            fill: $menu-editor-link-active-color;
+        }
+
+        .menu-editor__menu-link--draggable & {
+            margin-left: $spacing-unit * 2;
+        }
+
+        .menu-editor__control & {
+            vertical-align: top;
+        }
+    }
+
+    .menu-editor__icon--parent {
+        @include center($to: vertical);
+        right: $spacing-unit;
+        padding-right: $spacing-unit;
+        width: $menu-editor-icon-size-parent;
+        height: $menu-editor-icon-size-parent;
+        opacity: 1;
+        transition: transform $global-transition-speed ease-in-out;
+        pointer-events: none;
+
+        .menu-editor__list-item:hover & {
+            transform: translate($horizontal-margin, -50%) scale(1.5);
+        }
+
+        .menu-editor__list-item--active & ,
+        .menu-editor__list-item--active:hover & {
+            fill: $menu-editor-icon-color-active;
+        }
+    }
+
+    .menu-editor__icon--add {
+        width: $menu-editor-icon-size-add;
+        height: $menu-editor-icon-size-add;
+        fill: $menu-editor-icon-color-add;
+    }

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

@@ -0,0 +1,108 @@
+/*------------------------------------*\
+    #MESSAGE
+\*------------------------------------*/
+
+$message-color:             $white !default;
+$message-error-bg-color:    $red !default;
+$message-info-bg-color:     $blue !default;
+$message-warning-bg-color:  $orange !default;
+$message-success-bg-color:  $green !default;
+$message-link-color:        $white !default;
+$message-link-hover-color:  rgba($white, 0.65) !default;
+
+$message-icon-size:  64px !default;
+
+$message-transition-speed:  0.75s !default;
+
+
+/**
+ * 1. when the server generated the message, displayed at the top of the page.
+ * 2. no selector provided for convenience when using the `message.js`
+ *    module.
+ */
+
+.message {
+    position: relative;
+    margin:  0 0 16px;
+    padding: 14px 16px;
+    color: $message-color;
+    background: $message-info-bg-color;
+    border-radius: $global-border-radius;
+    overflow: hidden;
+    opacity: 1;
+    transition: opacity $message-transition-speed ease-out;
+
+    .page-messages & { /* [1] */
+        @include global-box-shadow;
+    }
+}
+
+.message--warning { background: $message-warning-bg-color; }
+.message--success { background: $message-success-bg-color; }
+.message--error   { background: $message-error-bg-color;   }
+
+.message--removing {
+    opacity: 0;
+}
+
+    .message__type {
+        position: absolute;
+        top:  50%;
+        left: 8px;
+        margin: 0;
+        transform: translateY(-50%);
+    }
+
+        .message__icon {
+            @include svg('message_info.svg', $message-icon-size);
+            opacity: 0.3;
+
+            .message--warning & { @include svg('message_warning.svg', $message-icon-size); }
+            .message--success & { @include svg('message_success.svg', $message-icon-size); }
+            .message--error &   { @include svg('message_error.svg', $message-icon-size); }
+        }
+
+    .message__text {
+        margin: 0 24px 0 $message-icon-size;
+        font-weight: bold;
+        line-height: 20px;
+
+        a { /* [2] */
+            color: $message-link-color;
+            text-decoration: underline;
+
+            &:hover {
+                color: $message-link-hover-color;
+                text-decoration: none;
+            }
+        }
+    }
+
+    .message__dismiss-action {
+        display: none;
+
+        .page-messages & { /* [1] */
+            display: block;
+            position: absolute;
+            top:   8px;
+            right: 8px;
+            margin: 0;
+            line-height: 1;
+        }
+    }
+
+        .message__dismiss-button {
+            padding: 0;
+            background: none;
+            border: 0;
+        }
+
+            .message__dismiss-icon {
+                font-size: 0;
+
+                &::after {
+                    color: $message-color;
+                    font-size: 1rem;
+                    content: '✖';
+                }
+            }