@qtoggle/qui 0.0.0

package/less/messages.less

@@ -0,0 +1,189 @@
+
+@import (reference) "theme";
+
+
+/* toast message */
+
+div.qui-toast-message-container {
+    position: absolute;
+    transition: height @transition-duration ease,
+                background @transition-duration ease,
+                color @transition-duration ease,
+                top @transition-duration ease,
+                margin @transition-duration ease,
+                opacity @transition-duration linear,
+                filter @transition-duration linear;
+    top: -0.0625em;
+    left: 0;
+    right: 0;
+    height: 3em;
+    z-index: 99;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: @background-color;
+    border-bottom: 0.0625em solid @border-color;
+    border-top: 0.0625em solid transparent;
+}
+
+body.toast-message-visible > div.qui-toast-message-container {
+    top: 3.0625em;
+    box-shadow: 0 0.3125em 0.5em -0.3125em @bar-shadow-color;
+}
+
+body.no-top-bar > div.qui-toast-message-container {
+    top: -3.125em;
+}
+
+body.no-top-bar.toast-message-visible > div.qui-toast-message-container {
+    top: 0;
+}
+
+body.small-screen > div.qui-toast-message-container {
+    line-height: 3em;
+}
+
+body.global-glass-visible.toast-message-visible > div.qui-toast-message-container {
+    top: 0;
+    z-index: 1001;
+    filter: none;
+}
+
+div.qui-toast-message-container.info {
+    color: @info-color;
+}
+
+div.qui-toast-message-container.warning {
+    color: @warning-color;
+}
+
+div.qui-toast-message-container.error {
+    color: @error-color;
+}
+
+div.qui-toast-message-icon {
+    float: left;
+    width: 2em;
+    height: 2em;
+    margin: 0.5em;
+    background-image: url('@{qui_img_path}/qui-icons.svg');
+    background-size: 80em;
+    vertical-align: middle;
+}
+
+div.qui-toast-message-container.info > div.qui-toast-message-icon {
+    background-position: @info-icon-x-offset @info-icon-y-offset;
+    display: inline-block;
+}
+
+div.qui-toast-message-container.warning > div.qui-toast-message-icon {
+    background-position: @exclam-icon-x-offset @warning-icon-y-offset;
+    display: inline-block;
+}
+
+div.qui-toast-message-container.error > div.qui-toast-message-icon {
+    background-position: @exclam-icon-x-offset @error-icon-y-offset;
+    display: inline-block;
+}
+
+div.qui-toast-message {
+    display: flex;
+    margin: 0 3em;
+    height: 3em;
+    overflow: auto;
+    align-items: center; // TODO replace with "safe center" as soon as this becomes supported by major browsers
+    text-align: left;
+}
+
+body.small-screen > div.qui-toast-message-container.multiline > div.qui-toast-message {
+    white-space: normal;
+    line-height: 1.45em;
+}
+
+span.qui-toast-message {
+    font-size: 0.9em;
+    line-height: 1em;
+}
+
+div.qui-toast-message-close-button {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    float: right;
+    width: 1.5em;
+    height: 1.5em;
+    margin: 0.75em;
+}
+
+div.qui-toast-message-container.closeable > div.qui-toast-message > div.qui-toast-message-close-button {
+    display: inline-block;
+}
+
+
+/* message label */
+
+span.qui-message-label {
+    display: inline-block;
+    white-space: nowrap;
+    border-radius: 1em;
+    padding: 0.2em 0.5em;
+    margin: 0.125em;
+    max-width: 14em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+div.qui-toast-message-container.info span.qui-message-label {
+    background: @info-color;
+    color: @background-color;
+}
+
+div.qui-toast-message-container.warning span.qui-message-label {
+    background: @warning-color;
+    color: @background-color;
+}
+
+div.qui-toast-message-container.error span.qui-message-label {
+    background: @error-color;
+    color: @background-color;
+}
+
+div.qui-message-form-body span.qui-message-label {
+    background: @foreground-color;
+    color: @background-color;
+    font-weight: normal;
+}
+
+div.qui-breadcrumb span.qui-message-label {
+    background: @interactive-color;
+    color: @background-color;
+}
+
+
+/* message forms */
+
+div.qui-message-form-body {
+    text-align: center;
+    display: flex;
+    align-items: center;
+}
+
+div.qui-message-form-label {
+    display: inline-block;
+    vertical-align: middle;
+    font-weight: bold;
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.4em;
+    flex: auto;
+}
+
+div.qui-message-form-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 2em;
+    height: 2em;
+    min-width: 2em;
+    margin: 0.5em;
+}

package/less/no-effects.less

@@ -0,0 +1,24 @@
+
+@import (reference) "theme";
+
+
+body.effects-disabled {
+
+    *,
+    *::BEFORE,
+    *::AFTER {
+        transition: none !important;
+    }
+
+    div.qui-global-glass,
+    div.qui-main-container-glass {
+        backdrop-filter: @modal-background-filter-no-effects;
+    }
+
+    div.qui-progress-disk-container > svg,
+    div.qui-form-field-side-icon.progress,
+    div.qui-status-indicator.progress > div.qui-icon > div {
+        animation: none !important;
+    }
+
+}

package/less/pages/breadcrumbs.less

@@ -0,0 +1,98 @@
+
+@import (reference) "../theme";
+@import (reference) "../widgets/various";
+
+
+div.qui-breadcrumbs-container {
+    float: left;
+    display: inline-block;
+    overflow: hidden;
+    max-width: 80%;
+}
+
+div.qui-breadcrumb {
+    display: none;
+    position: relative;
+    background: @background-color;
+    color: @interactive-color;
+    height: 3em;
+    line-height: 3em;
+    padding: 0 1em;
+    vertical-align: middle;
+    transition: background @transition-duration ease, color @transition-duration ease;
+    box-sizing: border-box;
+    border-color: @border-color;
+    border-style: solid;
+    border-width: 0 0 0 0.0625em;
+}
+
+div.qui-breadcrumb.used {
+    display: inline-block;
+}
+
+div.qui-breadcrumb::AFTER {
+    .qui-active-indicator();
+}
+
+div.qui-breadcrumb.first-used {
+    border-left-width: 0;
+}
+
+div.qui-breadcrumb.last {
+    border-right-width: 0.0625em;
+}
+
+div.qui-breadcrumb.selected {
+    background: @background-color;
+}
+
+div.qui-breadcrumb.active {
+    background: @background-active-color;
+}
+
+div.qui-breadcrumb.selected::AFTER {
+    .qui-active-indicator-visible();
+}
+
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb,
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb.selected {
+    background: @interactive-color;
+    border-color: @top-border-color;
+    color: @foreground-interactive-color;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb.active {
+    background: @interactive-active-color;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb.used {
+    display: none;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb.back {
+    display: inline-block;
+    border-width: 0 0.0625em 0 0;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 0;
+    padding: 0 1.5em;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb.back {
+    color: transparent;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-breadcrumbs-container > div.qui-breadcrumb.back::BEFORE {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    width: 2em;
+    height: 2em;
+    margin: 0.5em;
+    background-image: url('@{qui_img_path}/qui-icons.svg');
+    background-size: 80em;
+    background-position: @slim-arrow-icon-x-offset @white-icon-y-offset;
+    transform: rotate(180deg);
+}

package/less/pages/common-pages.less

@@ -0,0 +1,36 @@
+
+@import (reference) "../theme";
+
+
+/* modal progress page */
+
+div.qui-modal-progress-page-container {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+div.qui-modal-progress-page-panel {
+    background: @background-color;
+    box-shadow: 0 0 0.35em 0 @floating-shadow-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5em;
+    border-radius: 0.2em;
+}
+
+div.qui-modal-progress-page-message {
+    font-size: 0.9em;
+    margin-left: 0.5em;
+    text-align: center;
+}
+
+div.qui-modal-progress-page-message.empty {
+    display: none;
+}
+
+body.small-screen div.qui-modal-progress-page-message {
+    max-width: 12em;
+}

package/less/pages/page.less

@@ -0,0 +1,70 @@
+
+@import (reference) "../theme";
+
+
+div.qui-page {
+    top: 0;
+    left: 100%;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    position: absolute;
+    overflow: auto;
+    opacity: 0;
+    border-right: solid @border-color 0.0625em;
+    background: @background-color;
+    transition: opacity @transition-duration ease-out,
+                width @transition-duration ease,
+                left @transition-duration ease;
+}
+
+div.qui-page.attached {
+    left: -100%;
+}
+
+div.qui-page.visible {
+    opacity: 1;
+    z-index: 1;
+}
+
+body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page.visible,
+body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.visible {
+    width: 100% !important;
+    left: 0 !important;
+}
+
+div.qui-page.current {
+    z-index: 9;
+}
+
+body:NOT(.small-screen) > div.qui-main-container > div.qui-pages-container > div.qui-page.column-layout {
+    width: 25%;
+}
+
+body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page.visible,
+body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.visible,
+div.qui-pages-container.full > div.qui-page:LAST-CHILD {
+    border-right: 0;  /* Remove right border if last page extends to cover the entire container */
+}
+
+div.qui-page.transparent,
+div.qui-page.popup {
+    background: transparent;
+}
+
+div.qui-page.popup {
+    /* Prevent horizontal moving effect for popup pages */
+    left: 0 !important;
+
+    & > * {
+        border-radius: 0.2em;
+    }
+
+}
+
+body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.popup {
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}

package/less/progress-view.less

@@ -0,0 +1,51 @@
+
+@import (reference) "theme";
+
+
+.qui-progress-view {
+
+    & > div.qui-progress-view-glass {
+        min-height: 8em; /* Ensure progress widget is entirely visible */
+        display: grid;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transition: opacity @transition-duration ease;
+        opacity: 0;
+        background: fade(@background-color, 85%);
+        cursor: progress;
+        justify-content: center;
+        justify-items: center;
+        align-items: start;
+        grid-template-columns: auto auto;
+
+        &.visible {
+            opacity: 1;
+            z-index: 1000;
+            cursor: progress;
+        }
+
+        & > div.qui-progress-view-widget {
+            border-top: 2em solid transparent;
+
+            &.vertically-centered {
+                align-self: center;
+                border-top: 0;
+            }
+
+        }
+
+        & > span.qui-progress-view-message:NOT(:EMPTY) {
+            padding-left: 0.5em;
+            align-self: center;
+        }
+
+    }
+
+    &.has-progress {
+        min-height: 8em; /* So that the progress widget is fully visible */
+    }
+
+}

package/less/stock-icons.less

@@ -0,0 +1,43 @@
+
+/* Names */
+
+@plus-icon-x-offset: 0em;
+@minus-icon-x-offset: -2em;
+@close-icon-x-offset: -4em;
+@fat-arrow-icon-x-offset: -6em;
+@slim-arrow-icon-x-offset: -8em;
+@info-icon-x-offset: -10em;
+@qmark-icon-x-offset: -12em;
+@exclam-icon-x-offset: -14em;
+@check-icon-x-offset: -16em;
+@wrench-icon-x-offset: -18em;
+@sliders-icon-x-offset: -20em;
+@key-icon-x-offset: -22em;
+@user-icon-x-offset: -24em;
+@sync-icon-x-offset: -26em;
+@magnifier-icon-x-offset: -28em;
+@full-screen-icon-x-offset: -30em;
+@duplicate-icon-x-offset: -32em;
+@envelope-icon-x-offset: -34em;
+@gear-icon-x-offset: -36em;
+@download-icon-x-offset: -38em;
+@upload-icon-x-offset: -40em;
+@file-icon-x-offset: -42em;
+@reset-icon-x-offset: -44em;
+@menu-icon-x-offset: -76em;
+@options-icon-x-offset: -78em;
+
+
+/* Colors */
+
+@darkgray-icon-y-offset: 0em;
+@gray-icon-y-offset: -2em;
+@lightgray-icon-y-offset: -4em;
+@white-icon-y-offset: -6em;
+@blue-icon-y-offset: -8em;
+@magenta-icon-y-offset: -10em;
+@red-icon-y-offset: -12em;
+@orange-icon-y-offset: -14em;
+@yellow-icon-y-offset: -16em;
+@green-icon-y-offset: -18em;
+@cyan-icon-y-offset: -20em;