@qtoggle/qui 0.0.0

package/less/widgets/combo.less

@@ -0,0 +1,230 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+div.qui-combo-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    vertical-align: middle;
+    border-radius: 0.2em;
+    .qui-focusable-widget();
+
+    & > div.qui-combo-button {
+        border: 0.0625em solid @interactive-color;
+        border-radius: 0.2em;
+        position: relative;
+        min-width: 2em;
+        background: @background-color;
+        color: @foreground-color;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        & > div.qui-combo-current-label {
+            padding-right: 1.8em;
+            min-height: 1.6875em;
+        }
+
+        & > span.qui-combo-arrow-separator {
+            position: absolute;
+            display: inline-block;
+            top: 0;
+            right: 1.8em;
+            width: 0;
+            height: 100%;
+            border-width: 0 0.0625em 0 0;
+            border-style: solid;
+            border-color: inherit;
+            transition: border-color @transition-duration linear;
+        }
+
+        & > span.qui-combo-arrow {
+            position: absolute;
+            top: 40%;
+            right: 0;
+            margin: 0 0.5em;
+            border-width: 0.5em 0.4em;
+            border-style: solid;
+            border-color: transparent;
+            border-top-color: inherit;
+            transition: border-color @transition-duration linear;
+        }
+
+    }
+
+    & > input.qui-combo-filter {
+        box-shadow: none;
+        display: none;
+    }
+
+    & > div.qui-combo-item-container {
+        position: relative;
+        color: @foreground-color;
+        border: 0.0625em solid @interactive-color;
+        background-color: @background-color;
+        margin-top: 0.0625em;
+        margin-bottom: -0.1875em; /* Effectively reduces height to 0 when closed */
+        min-width: 100%;
+        min-height: 0;
+        max-height: 0;
+        box-sizing: border-box;
+        opacity: 0;
+        text-align: left;
+        overflow: auto;
+        border-radius: 0 0 0.2em 0.2em;
+        transition: max-height @transition-duration ease,
+                    opacity @transition-duration ease;
+
+        & > div.qui-combo-item {
+            white-space: nowrap;
+            cursor: default;
+            background: @background-color;
+            overflow: hidden;
+            box-sizing: border-box;
+            transition: background @transition-duration ease,
+                        color @transition-duration ease,
+                        height @transition-duration ease,
+                        max-height @transition-duration ease;
+
+            /* There seems to be a performance issue on Chrome for Android when dealing with many items and alternating
+             * background colors. We use border separators in those cases. */
+
+            body.small-screen & {
+                border-bottom: 0.0625em solid @border-color;
+            }
+
+            body:NOT(.small-screen) & {
+
+                &.odd {
+                    background: @odd-color;
+                }
+
+                &.odd.selected {
+                    background: @interactive-color;
+                    color: @foreground-interactive-color;
+                }
+
+            }
+
+            &.selected {
+                background: @interactive-color;
+                color: @foreground-interactive-color;
+            }
+
+            &.separator {
+                border-top: 0.0625em solid @border-color;
+            }
+
+            &.hidden {
+                max-height: 0 !important;
+            }
+
+            &.hidden:NOT(.separator) {
+                border: 0;
+            }
+
+        }
+
+    }
+
+    &.open {
+
+        & > div.qui-combo-button {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        & > div.qui-combo-item-container {
+            opacity: 1;
+            min-height: 1.75em;
+            max-height: 12em;
+            margin-bottom: 0;
+        }
+
+        &.filter-enabled > input.qui-combo-filter {
+            display: block;
+            border-radius: 0;
+            margin-top: 0.0625em;
+            width: 100%;
+        }
+
+    }
+
+    &:FOCUS,
+    &.open {
+        .qui-focused-widget();
+    }
+
+    &.has-warning {
+
+        & > div.qui-combo-button,
+        & > input.qui-combo-filter,
+        & > div.qui-combo-item-container {
+            border-color: @warning-color;
+        }
+
+        &:FOCUS,
+        &.open {
+            .qui-focused-widget-warning();
+        }
+
+    }
+
+    &.has-error {
+
+        & > div.qui-combo-button,
+        & > input.qui-combo-filter,
+        & > div.qui-combo-item-container {
+            border-color: @error-color;
+        }
+
+        &:FOCUS,
+        &.open {
+            .qui-focused-widget-error();
+        }
+
+    }
+
+    &.readonly {
+
+        & > div.qui-combo-button {
+            border-color: @readonly-color;
+            cursor: default;
+
+            & > span.qui-combo-arrow {
+                border-top-color: @foreground-color;
+            }
+
+        }
+
+        &:FOCUS {
+            .qui-focused-widget-readonly();
+        }
+
+    }
+
+    &.disabled > div.qui-combo-button {
+        border-color: @disabled-color;
+        color: @disabled-color;
+        cursor: default;
+
+        & > span.qui-combo-arrow {
+            border-top-color: @disabled-color;
+        }
+    }
+
+}
+
+
+/* Simple label */
+
+div.qui-combo-item-simple-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-height: 1.6875em;
+    line-height: 1.6875em;
+    padding: 0 0.25em;
+}

package/less/widgets/common-buttons.less

@@ -0,0 +1,120 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+.qui-base-button {
+    transition: background @transition-duration ease,
+                color @transition-duration ease,
+                opacity @transition-duration ease,
+                border @transition-duration ease;
+    box-sizing: border-box;
+    cursor: pointer;
+    .noselect;
+}
+
+.qui-base-button.disabled {
+    cursor: default;
+}
+
+.qui-colored-button {
+    color: @foreground-interactive-color;
+    background: @interactive-color;
+}
+
+.qui-colored-button.active {
+    background: @interactive-active-color;
+}
+
+.qui-foreground-button {
+    color: @background-color;
+    background: @foreground-color;
+}
+
+.qui-foreground-button.active {
+    background: @foreground-active-color;
+}
+
+.qui-interactive-button {
+    color: @foreground-interactive-color;
+    background: @interactive-color;
+}
+
+.qui-interactive-button.active {
+    background: @interactive-active-color;
+}
+
+.qui-highlight-button {
+    color: @foreground-interactive-color;
+    background: @highlight-color;
+}
+
+.qui-highlight-button.active {
+    background: @highlight-active-color;
+}
+
+.qui-danger-button {
+    color: @foreground-interactive-color;
+    background: @danger-color;
+}
+
+.qui-danger-button.active {
+    background: @danger-active-color;
+}
+
+.qui-push-button {
+    display: inline-block;
+    line-height: 1.9em;
+    border-radius: 0.2em;
+    min-width: 6em;
+    text-align: center;
+    padding: 0 0.5em;
+    transition+: background @transition-duration ease,
+                 color @transition-duration ease,
+                 opacity @transition-duration ease,
+                 border @transition-duration ease;
+    .qui-focusable-widget();
+
+    &:FOCUS {
+        .qui-focused-widget();
+    }
+
+    &.qui-foreground-button:FOCUS {
+        .qui-focused-widget(@foreground-color);
+    }
+
+    &.qui-highlight-button:FOCUS {
+        .qui-focused-widget(@highlight-color);
+    }
+
+    &.qui-danger-button:FOCUS {
+        .qui-focused-widget(@danger-color);
+    }
+
+    &.qui-colored-button:FOCUS {
+        box-shadow+: 0 0 0 0.2em var(--focus-shadow-color);
+    }
+
+    & > div.qui-push-button-icon {
+        vertical-align: middle;
+        width: 1.5em;
+        height: 1.5em;
+        margin-right: 0.25em;
+    }
+
+    & > span.qui-push-button-caption {
+        vertical-align: middle;
+    }
+
+}
+
+.qui-colored-button.disabled,
+.qui-foreground-button.disabled,
+.qui-interactive-button.disabled,
+.qui-highlight-button.disabled,
+.qui-danger-button.disabled,
+.qui-push-button.disabled {
+    background: @disabled-color;
+    color: @disabled-alt-color;
+}

package/less/widgets/common.less

@@ -0,0 +1,24 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+
+
+.qui-focusable-widget() {
+    transition+: box-shadow (@transition-duration / 2) linear;
+}
+
+.qui-focused-widget(@color: @interactive-color, @percent: 30%) {
+    box-shadow+: 0 0 0 0.2em fade(@color, @percent);
+}
+
+.qui-focused-widget-readonly() {
+    .qui-focused-widget(@disabled-color, 50%);
+}
+
+.qui-focused-widget-warning() {
+    .qui-focused-widget(@warning-color);
+}
+
+.qui-focused-widget-error() {
+    .qui-focused-widget(@error-color);
+}

package/less/widgets/input.less

@@ -0,0 +1,258 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+input[type=text],
+input[type=password],
+input[type=number],
+input[type=tel],
+input[type=email],
+textarea {
+    border: 0.0625em solid @interactive-color;
+    border-radius: 0.2em;
+    padding: 0.25em;
+    background: @background-color;
+    color: @foreground-color;
+    resize: none;
+    transition: color @transition-duration linear,
+                border-color @transition-duration linear;
+    font-size: inherit;
+    font-family: inherit;
+    box-sizing: border-box;
+    .qui-focusable-widget();
+}
+
+input[type=text],
+input[type=password],
+input[type=number],
+input[type=tel],
+input[type=email] {
+    height: 1.75em;
+}
+
+input[type=text].has-warning,
+input[type=password].has-warning,
+input[type=number].has-warning,
+input[type=tel].has-warning,
+input[type=email].has-warning,
+textarea.has-warning {
+    border-color: @warning-color;
+}
+
+input[type=text].has-error,
+input[type=password].has-error,
+input[type=number].has-error,
+input[type=tel].has-error,
+input[type=email].has-error,
+textarea.has-error {
+    border-color: @error-color;
+}
+
+input[type=text]:FOCUS,
+input[type=password]:FOCUS,
+input[type=number]:FOCUS,
+input[type=tel]:FOCUS,
+input[type=email]:FOCUS,
+textarea:FOCUS {
+    .qui-focused-widget();
+}
+
+input[type=text].has-warning:FOCUS,
+input[type=password].has-warning:FOCUS,
+input[type=number].has-warning:FOCUS,
+input[type=tel].has-warning:FOCUS,
+input[type=email].has-warning:FOCUS,
+textarea.has-warning:FOCUS {
+    .qui-focused-widget-warning();
+}
+
+input[type=text].has-error:FOCUS,
+input[type=password].has-error:FOCUS,
+input[type=number].has-error:FOCUS,
+input[type=tel].has-error:FOCUS,
+input[type=email].has-error:FOCUS,
+textarea.has-error:FOCUS {
+    .qui-focused-widget-error();
+}
+
+input[type=text][readonly],
+input[type=password][readonly],
+input[type=number][readonly],
+input[type=tel][readonly],
+input[type=email][readonly],
+textarea[readonly] {
+    border-color: @readonly-color;
+}
+
+input[type=text][readonly]:FOCUS,
+input[type=password][readonly]:FOCUS,
+input[type=number][readonly]:FOCUS,
+input[type=tel][readonly]:FOCUS,
+input[type=email][readonly]:FOCUS,
+textarea[readonly]:FOCUS {
+    .qui-focused-widget-readonly();
+}
+
+input[type=text][disabled],
+input[type=password][disabled],
+input[type=number][disabled],
+input[type=tel][disabled],
+input[type=email][disabled],
+textarea[disabled] {
+    .noselect;
+    border-color: @disabled-color;
+    color: @disabled-color;
+}
+
+
+input[type=text]::selection,
+input[type=password]::selection,
+input[type=number]::selection,
+input[type=tel]::selection,
+input[type=email]::selection,
+textarea::selection {
+    background: fade(@selection-color, 99%);
+    color: @background-color;
+}
+
+
+input[type=text]::placeholder,
+input[type=password]::placeholder,
+input[type=number]::placeholder,
+input[type=tel]::placeholder,
+input[type=email]::placeholder,
+textarea::placeholder {
+    color: @disabled-color;
+}
+
+
+div.qui-text-input {
+    white-space: nowrap;
+}
+
+
+/* Password input */
+
+div.qui-text-input.clear-enabled {
+
+    & > input[type=password] {
+        padding-right: 1.75em;
+    }
+
+    & > div.qui-password-input-clear-button {
+        display: inline-block;
+        width: 1.75em;
+        height: 1.75em;
+        padding: 0.375em;
+        border-left: 0.0625em solid @interactive-color;
+        border-radius: 0 0.2em 0.2em 0;
+        vertical-align: top;
+        position: relative;
+        top: 0;
+        right: 1.75em;
+        cursor: pointer;
+
+        &.active {
+            background: @interactive-color;
+        }
+
+        & > div.qui-password-input-clear-icon {
+            width: 1em;
+            height: 1em;
+            position: relative;
+            left: -0.0625em;
+        }
+
+    }
+
+    &.has-warning {
+
+        & > div.qui-password-input-clear-button {
+            border-left-color: @warning-color;
+
+            &.active {
+                background: @warning-color;
+            }
+
+        }
+
+    }
+
+    &.has-error {
+
+        & > div.qui-password-input-clear-button {
+            border-left-color: @error-color;
+
+            &.active {
+                background: @error-color;
+            }
+
+        }
+
+    }
+
+}
+
+
+/* File picker */
+
+.qui-file-picker > input[type=file] {
+    display: none;
+}
+
+div.qui-file-picker-button {
+    max-width: 100%;
+    height: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+/* Chrome oddities */
+
+input:-webkit-autofill {
+    /* box-shadow here is a Chrome hack to customize autofill background */
+    box-shadow+: 0 0 0 100em @background-color inset !important;
+    -webkit-text-fill-color: @foreground-color;
+    .qui-focusable-widget();
+}
+
+input:-webkit-autofill:FOCUS {
+    /* box-shadow here is a Chrome hack to customize autofill background */
+    box-shadow+: 0 0 0 100em @background-color inset !important;
+    -webkit-text-fill-color: @foreground-color;
+    .qui-focused-widget();
+}
+
+input.has-warning:-webkit-autofill:FOCUS {
+    box-shadow+: 0 0 0 100em @background-color inset !important;
+    -webkit-text-fill-color: @foreground-color;
+    .qui-focused-widget-warning();
+}
+
+input.has-error:-webkit-autofill:FOCUS {
+    box-shadow+: 0 0 0 100em @background-color inset !important;
+    -webkit-text-fill-color: @foreground-color;
+    .qui-focused-widget-error();
+}
+
+input:-webkit-autofill::selection {
+    background: fade(@selection-color, 99%) !important;
+    color: @background-color !important;
+    -webkit-text-fill-color: @background-color !important;
+}
+
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+
+/* Firefox oddities */
+
+input[type=number] {
+    -moz-appearance: textfield;
+}

package/less/widgets/labels.less

@@ -0,0 +1,81 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+
+
+div.qui-labels-container {
+    display: inline-block;
+    white-space: normal;
+
+    & > span.qui-label {
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        white-space: nowrap;
+        border-radius: 0.2em;
+        padding: 0.1em 0.4em;
+        margin: 0.125em 0.25em 0.125em 0;
+        font-size: 0.9em;
+    }
+
+    &.clickable {
+
+        & > span.qui-label {
+            background: @interactive-color !important;
+            border-color: @interactive-color !important;
+            color: @foreground-interactive-color !important;
+            cursor: pointer;
+        }
+
+        & > span.qui-label.active {
+            background: @interactive-active-color !important;
+            border-color: @interactive-active-color !important;
+        }
+
+    }
+
+    &.chevrons {
+
+        & > span.qui-label:NOT(:LAST-CHILD) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-right: 0.7em;
+        }
+
+        & > span.qui-label:NOT(:FIRST-CHILD) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        & > span.qui-label:NOT(:FIRST-CHILD)::BEFORE {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: -0.5em;
+            border-style: solid;
+            border-width: 0.75em 0 0.75em 0.5em;
+            border-color: inherit;
+            border-left-color: transparent;
+        }
+
+        & > span.qui-label:NOT(:LAST-CHILD)::AFTER {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            right: -1em;
+            border-style: solid;
+            border-width: 0.75em 0.5em;
+            border-color: transparent;
+            border-left-color: inherit;
+        }
+
+    }
+
+    &.disabled > span.qui-label {
+        background: @disabled-color !important;
+        border-color: @disabled-color !important;
+    }
+
+}