@qtoggle/qui 0.0.0

package/less/forms/common-fields.less

@@ -0,0 +1,101 @@
+
+@import (reference) "../theme";
+@import (reference) "../widgets/common";
+
+
+/* Fields based on input entries */
+
+div.qui-form-field-value {
+
+    & > div.qui-text-input > input,
+    & > div.qui-text-input > textarea {
+        width: 100%;
+    }
+
+}
+
+
+/* Check field */
+
+div.qui-form-body > div.qui-form-field.jquery-ui-checkbutton.auto-width {
+    /* Position the check field label and value on the same line */
+
+    & {
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+    }
+
+    & > div.qui-form-field-description,
+    & > div.qui-form-field-warning,
+    & > div.qui-form-field-error {
+        grid-column-start: 1;
+        grid-column-end: 4;
+    }
+
+    & > div.qui-form-field-label {
+        align-self: center;
+    }
+}
+
+
+/* Combo */
+
+div.qui-form-field.has-error > div.qui-form-field-value > div.qui-combo-container:NOT(.disabled) >
+        div.qui-combo-button {
+
+    border-color: @error-color;
+}
+
+div.qui-form-field.has-error > div.qui-form-field-value > div.qui-combo-container:NOT(.disabled) >
+        div.qui-combo-button.active {
+
+    border-color: @error-active-color;
+    background: @error-active-color;
+}
+
+div.qui-form-field.has-error > div.qui-form-field-value > div.qui-combo-container:FOCUS > div.qui-combo-button,
+div.qui-form-field.has-error > div.qui-form-field-value > div.qui-combo-container > div.qui-combo-button.open {
+    background: @error-color;
+    border-color: @error-color;
+}
+
+div.qui-form-field.has-error > div.qui-form-field-value > div.qui-combo-container:NOT(:FOCUS) >
+        div.qui-combo-button:NOT(.active):NOT(.open) > span.qui-combo-arrow-separator {
+
+    border-color: @error-color;
+}
+
+div.qui-form-field.has-error > div.qui-form-field-value > div.qui-combo-container:NOT(:FOCUS) >
+        div.qui-combo-button:NOT(.active):NOT(.open) > span.qui-combo-arrow {
+
+    border-top-color: @error-color;
+}
+
+
+/* Push button */
+
+div.qui-form-push-button {
+    padding: 0 0.5em;
+    line-height: 2em;
+}
+
+
+/* Labels */
+
+div.qui-form-field-value > div.qui-labels-container.chevrons {
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: auto;
+}
+
+
+/* Composite field */
+
+div.qui-composite-field-container {
+    display: grid;
+    grid-gap: 0.5em;
+
+    & > div.qui-form-field > div.qui-form-field-value {
+        padding: 0;
+    }
+}

package/less/forms/common-forms.less

@@ -0,0 +1,5 @@
+
+div.qui-page > form.minimized > div.qui-structured-view-top {
+    border-bottom-width: 0;
+}
+

package/less/forms/form-button.less

@@ -0,0 +1,21 @@
+
+@import (reference) "../theme";
+
+
+div.qui-form-button {
+    line-height: 2.5em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    padding: 0 0.5em;
+}
+
+form.qui-form.no-background > div.qui-form-bottom {
+    background: transparent;
+}
+
+body.small-screen form.qui-form > div.qui-form-bottom > div.qui-form-button,
+form.qui-form.compact > div.qui-form-bottom > div.qui-form-button {
+    min-width: auto;
+}

package/less/forms/form-field.less

@@ -0,0 +1,266 @@
+
+@import (reference) "../theme";
+@import (reference) "../base";
+
+
+div.qui-form-field {
+    white-space: nowrap;
+    transition: height @transition-duration ease,
+                opacity @transition-duration ease;
+    position: relative;
+
+    &.first-visible {
+        padding-top: 0;
+    }
+
+    &.last-visible {
+        padding-bottom: 0;
+    }
+
+    &.hidden {
+        opacity: 0;
+    }
+
+    &.separator:NOT(.first-visible) {
+        border-top: 0.0625em solid @border-color;
+        margin-top: 0.5em;
+        padding-top: 0.5em;
+    }
+
+    form.qui-form.compact > div.qui-form-body > & {
+
+        &:NOT(.force-one-line) {
+            white-space: normal;
+        }
+
+        &.separator:NOT(.first-visible) {
+            margin-top: 0.25em;
+            padding-top: 0.25em;
+        }
+
+        &:NOT(.force-one-line) {
+            padding-top: 0.4em;
+        }
+
+    }
+
+}
+
+
+/* Warning & error */
+
+div.qui-form-field-warning {
+    color: @warning-color;
+}
+
+div.qui-form-field-error {
+    color: @error-color;
+}
+
+div.qui-form-field-warning,
+div.qui-form-field-error {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    white-space: normal;
+    text-align: right;
+    transition: opacity @transition-duration ease,
+                max-height @transition-duration ease;
+}
+
+div.qui-form-field.has-warning.warning-visible > div.qui-form-field-warning,
+div.qui-form-field.has-error.error-visible > div.qui-form-field-error {
+    max-height: 5em;
+    padding-top: 0.5em;
+    opacity: 1;
+}
+
+span.qui-form-field-warning-text,
+span.qui-form-field-error-text {
+    padding: 0.5em 0;
+    text-align: left;
+    font-size: 0.75em;
+}
+
+div.qui-form-field-warning-label,
+div.qui-form-field-error-label {
+    display: inline-flex;
+    position: relative;
+    background: @border-color;
+    border-radius: 1em;
+    border-bottom-right-radius: 0;
+    padding: 0 0.5em;
+    align-items: center;
+}
+
+
+/* Description */
+
+div.qui-form-field-description {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    white-space: normal;
+    color: @info-color;
+    text-align: right;
+    transition: opacity @transition-duration ease,
+                max-height @transition-duration ease;
+}
+
+div.qui-form-field.description-visible > div.qui-form-field-description {
+    max-height: 5em;
+    padding-top: 0.5em;
+    opacity: 1;
+}
+
+span.qui-form-field-description-icon {
+    display: inline-block;
+    background-image: url('@{qui_img_path}/qui-icons.svg');
+    background-size: 80em;
+    background-position: @info-icon-x-offset @info-icon-y-offset;
+    transform: scale(0.75);
+    width: 2em;
+    height: 2em;
+    flex: none;
+}
+
+span.qui-form-field-description-text {
+    padding: 0.5em 0;
+    text-align: left;
+    font-size: 0.75em;
+}
+
+div.qui-form-field-description-label {
+    display: inline-flex;
+    position: relative;
+    background: @border-color;
+    border-radius: 1em;
+    border-bottom-right-radius: 0;
+    padding-right: 0.5em;
+    align-items: center;
+}
+
+div.qui-form-field.auto-width {
+    width: 100%;
+    padding-right: 0;
+}
+
+
+/* Label */
+
+div.qui-form-field-label {
+    display: none;
+    width: 50%;
+    padding: 0.2em 0.5em 0.2em 0.2em;
+    white-space: normal;
+    box-sizing: border-box;
+    vertical-align: middle;
+    grid-auto-flow: column;
+    justify-content: right;
+    align-items: center;
+    text-align: right;
+
+    div.qui-form-field.has-label > & {
+        display: inline-grid;
+    }
+
+    div.qui-form-field.auto-width > & {
+        width: auto;
+    }
+
+    form.qui-form.compact > div.qui-form-body > div.qui-form-field > & {
+        justify-content: left;
+        text-align: left;
+    }
+
+    form.qui-form.compact > div.qui-form-body > div.qui-form-field:NOT(.force-one-line) > & {
+        width: 100%;
+    }
+
+    & > span.qui-form-field-unit {
+        display: none;
+        font-size: 75%;
+        color: fade(@foreground-color, 75%);
+        margin-left: 0.25em;
+    }
+
+    div.qui-form-field.has-unit > & > span.qui-form-field-unit {
+        display: inline-block;
+    }
+
+    & > div.qui-form-field-description-icon {
+        cursor: pointer;
+        display: none;
+        margin-left: 0.25em;
+        width: 1em;
+        height: 1em;
+    }
+
+    div.qui-form-field.has-description > & > div.qui-form-field-description-icon {
+        display: inline-block;
+    }
+
+}
+
+
+/* Value */
+
+div.qui-form-field-value {
+    display: inline-block;
+    width: 50%;
+    vertical-align: middle;
+    box-sizing: border-box;
+    padding: 0.2em 0;
+    text-align: left;
+
+    div.qui-form-field.side-icon-visible > & {
+        padding-right: 2em;
+        margin-right: -1.5em; /* Makes place for the side icon */
+    }
+
+    & > * {
+        box-sizing: border-box;
+    }
+
+    form.qui-form.compact > div.qui-form-body > div.qui-form-field > & {
+        text-align: right;
+    }
+
+    form.qui-form.compact > div.qui-form-body > div.qui-form-field:NOT(.force-one-line) > & {
+        width: 100%;
+    }
+
+    form.qui-form.compact > div.qui-form-body > div.qui-form-field:NOT(.force-one-line).last-visible > & {
+        padding-bottom: 0;
+    }
+
+    div.qui-form-field.auto-width > & {
+        width: auto;
+    }
+
+}
+
+
+/* Side icon */
+
+div.qui-form-field-side-icon {
+    display: none;
+    vertical-align: middle;
+    width: 1.5em;
+    height: 1.5em;
+    margin: 0.2em 0;
+    background: transparent;
+
+    form.qui-form.compact > div.qui-form-body > div.qui-form-field:NOT(.force-one-line).last-visible > & {
+        margin-bottom: 0;
+    }
+
+}
+
+div.qui-form-field-side-icon.progress {
+    animation: spin 1s linear infinite;
+}
+
+div.qui-form-field.side-icon-visible > div.qui-form-field-value + div.qui-form-field-side-icon {
+    display: inline-block;
+}

package/less/forms/form.less

@@ -0,0 +1,131 @@
+
+@import (reference) "../theme";
+
+
+/* Form main div */
+
+form.qui-form {
+    width: 40em;
+}
+
+form.qui-form.compact {
+    width: 20em;
+}
+
+
+/* Form body */
+
+div.qui-form-body {
+    background: @background-color;
+    border-color: @border-color;
+    border-style: solid;
+    border-bottom-width: 0.0625em;
+    padding: 0.5em;
+}
+
+form.qui-form.topless > div.qui-form-body {
+    padding-top: 0.5em;
+}
+
+form.qui-form.buttonless > div.qui-form-body {
+    padding-bottom: 0.5em;
+    border-bottom: 0;
+}
+
+form.qui-form.compact.minimized > div.qui-form-body {
+    padding: 0;
+}
+
+form.qui-form.no-background > div.qui-form-body {
+    background: transparent;
+}
+
+
+/* Form bottom */
+
+div.qui-form-bottom {
+    background: @background-color;
+    text-align: right;
+    padding: 0.5em;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min-content, 0));
+    grid-gap: 0.5em;
+    justify-content: right;
+}
+
+div.qui-form-bottom:empty {
+    height: 0;
+    padding: 0;
+}
+
+/* Attach buttons to the bottom when scrolling on form */
+body.small-screen form.qui-form.fixed-bottom {
+
+    & > div.qui-form-body {
+        margin-bottom: 3.6em; /* It's 3.5 + 0.1 guard */
+    }
+
+    &:NOT(.fully-scrolled) > div.qui-form-body {
+        border-bottom-width: 0;
+    }
+
+    & > div.qui-form-bottom {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        box-shadow: 0 -0.3125em 0.5em -0.3125em @bar-shadow-color;
+        z-index: 1000;
+    }
+
+    &.fully-scrolled > div.qui-form-bottom {
+        box-shadow: none;
+    }
+
+}
+
+
+/* Error */
+
+div.qui-form-error {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    white-space: normal;
+    color: @error-color;
+    transition: opacity @transition-duration ease,
+                max-height @transition-duration ease;
+}
+
+form.qui-form.has-error > div.qui-form-body > div.qui-form-error {
+    max-height: 5em;
+    padding-bottom: 0.5em;
+    opacity: 1;
+}
+
+div.qui-form-error-label {
+    display: grid;
+    position: relative;
+    background: @border-color;
+    border-radius: 1em;
+    padding-right: 0.5em;
+    align-items: center;
+    grid-template-columns: 1fr 100fr;
+}
+
+span.qui-form-error-icon {
+    display: inline-block;
+    background-image: url('@{qui_img_path}/qui-icons.svg');
+    background-size: 80em;
+    background-position: @exclam-icon-x-offset @error-icon-y-offset;
+    transform: scale(0.75);
+    width: 2em;
+    height: 2em;
+    vertical-align: middle;
+}
+
+span.qui-form-error-text {
+    padding: 0.5em 0;
+    text-align: left;
+    vertical-align: middle;
+}

package/less/global-glass.less

@@ -0,0 +1,64 @@
+
+@import (reference) "theme";
+
+
+div.qui-global-glass {
+    z-index: 99;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: opacity @transition-duration ease,
+                backdrop-filter @transition-duration linear,
+                margin-top @transition-duration linear;
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    backdrop-filter: @modal-background-filter;
+
+    /* Workaround for Firefox that doesn't support backdrop-filter property */
+    @supports (-moz-appearance:none) {
+        background-color: fade(@background-root-color, 85%);
+    }
+
+    &:NOT(.modal) {
+        margin-top: 3em;
+    }
+
+    &.modal {
+        z-index: 1000;
+    }
+
+    &.hidden {
+        display: none;
+        width: 0;
+        height: 0;
+        right: auto;
+        bottom: auto;
+    }
+
+    body.global-glass-visible > & {
+        opacity: 1;
+    }
+
+    & > div.qui-global-glass-container {
+
+        & > div.qui-page {
+            border: 0;
+        }
+
+        /* Hide all but last children */
+        & > :NOT(:LAST-CHILD) {
+            opacity: 0 !important;
+        }
+
+        /* Ensure sticky children are at the top of the stack */
+        & > .sticky {
+            z-index: 1000 !important;
+        }
+
+    }
+
+}

package/less/icon-label-view.less

@@ -0,0 +1,82 @@
+
+@import (reference) "theme";
+
+
+div.qui-icon-label-view {
+    transition: background @transition-duration ease,
+                color @transition-duration ease,
+                opacity @transition-duration ease;
+
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: auto 1fr;
+    grid-gap: 0.5em;
+    min-height: 3em;
+    align-items: center;
+    padding: 0 0.5em;
+
+    & > div.qui-icon {
+        vertical-align: middle;
+        width: 2em;
+        height: 2em;
+    }
+
+    & > div.labels {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        & > div.label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            vertical-align: middle;
+        }
+
+        & > div.sub-label {
+            display: inline-block;
+            font-size: 75%;
+            max-width: 100%;
+            color: @info-color;
+            background: fade(@background-root-color, 50%);
+            border-radius: 1em;
+            border-style: solid;
+            border-color: transparent;
+            border-width: 0 0.5em;
+            box-sizing: border-box;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            margin-top: 0.25em;
+            vertical-align: middle;
+            transition: background @transition-duration ease,
+                        color @transition-duration ease;
+        }
+
+    }
+
+    &.qui-base-button {
+        background: @background-color;
+        color: @interactive-color;
+
+        &.active {
+            background: @background-active-color;
+        }
+
+        &.selected {
+            background: @interactive-color;
+            color: @background-color;
+
+            & > div.labels > div.sub-label {
+                color: @background-color;
+                background-color: fade(@interactive-active-color, 50%);
+            }
+
+        }
+
+        &.active.selected {
+            background: @interactive-active-color;
+            color: @background-color;
+        }
+
+    }
+
+}