@qtoggle/qui 0.0.0

package/less/theme.less

@@ -0,0 +1,419 @@
+
+@import (reference) "theme-@{qui_theme}";
+
+
+/* intermediate theme variables */
+
+@top-border-color: mix(@interactive-color, @interactive-active-color, 50%);
+
+
+/* Following rules are used only to obtain these variable names in js code */
+
+
+br.-theme-name {
+    content: "@{theme-name}";
+}
+
+
+/* fonts */
+
+br.-theme-base-font-family {
+    content: "@{base-font-family}";
+}
+
+
+/* base colors */
+
+br.-theme-darkgray-color {
+    color: @darkgray-color;
+}
+
+br.-theme-gray-color {
+    color: @gray-color;
+}
+
+br.-theme-lightgray-color {
+    color: @lightgray-color;
+}
+
+br.-theme-white-color {
+    color: @white-color;
+}
+
+br.-theme-blue-color {
+    color: @blue-color;
+}
+
+br.-theme-magenta-color {
+    color: @magenta-color;
+}
+
+br.-theme-red-color {
+    color: @red-color;
+}
+
+br.-theme-orange-color {
+    color: @orange-color;
+}
+
+br.-theme-yellow-color {
+    color: @yellow-color;
+}
+
+br.-theme-green-color {
+    color: @green-color;
+}
+
+br.-theme-cyan-color {
+    color: @cyan-color;
+}
+
+
+br.-theme-darkgray-active-color {
+    color: @darkgray-active-color;
+}
+
+br.-theme-gray-active-color {
+    color: @gray-active-color;
+}
+
+br.-theme-lightgray-active-color {
+    color: @lightgray-active-color;
+}
+
+br.-theme-white-active-color {
+    color: @white-active-color;
+}
+
+br.-theme-blue-active-color {
+    color: @blue-active-color;
+}
+
+br.-theme-magenta-active-color {
+    color: @magenta-active-color;
+}
+
+br.-theme-red-active-color {
+    color: @red-active-color;
+}
+
+br.-theme-orange-active-color {
+    color: @orange-active-color;
+}
+
+br.-theme-yellow-active-color {
+    color: @yellow-active-color;
+}
+
+br.-theme-green-active-color {
+    color: @green-active-color;
+}
+
+br.-theme-cyan-active-color {
+    color: @cyan-active-color;
+}
+
+
+/* common UI elements colors */
+
+br.-theme-background-root-color {
+    color: @background-root-color;
+}
+
+br.-theme-background-color {
+    color: @background-color;
+}
+
+br.-theme-foreground-color {
+    color: @foreground-color;
+}
+
+br.-theme-foreground-active-color {
+    color: @foreground-active-color;
+}
+
+br.-theme-foreground-interactive-color {
+    color: @foreground-interactive-color;
+}
+
+br.-theme-border-color {
+    color: @border-color;
+}
+
+br.-theme-readonly-color {
+    color: @readonly-color;
+}
+
+br.-theme-disabled-color {
+    color: @disabled-color;
+}
+
+br.-theme-disabled-alt-color {
+    color: @disabled-alt-color;
+}
+
+br.-theme-background-active-color {
+    color: @background-active-color;
+}
+
+br.-theme-interactive-color {
+    color: @interactive-color;
+}
+
+br.-theme-interactive-active-color {
+    color: @interactive-active-color;
+}
+
+br.-theme-highlight-color {
+    color: @highlight-color;
+}
+
+br.-theme-highlight-active-color {
+    color: @highlight-active-color;
+}
+
+br.-theme-danger-color {
+    color: @danger-color;
+}
+
+br.-theme-danger-active-color {
+    color: @danger-active-color;
+}
+
+br.-theme-warning-color {
+    color: @warning-color;
+}
+
+br.-theme-info-color {
+    color: @info-color;
+}
+
+br.-theme-error-color {
+    color: @error-color;
+}
+
+br.-theme-selection-color {
+    color: @selection-color;
+}
+
+br.-theme-odd-color {
+    color: @odd-color;
+}
+
+br.-theme-floating-shadow-color {
+    color: @floating-shadow-color;
+}
+
+br.-theme-bar-shadow-color {
+    color: @bar-shadow-color;
+}
+
+br.-theme-thick-shadow-color {
+    color: @thick-shadow-color;
+}
+
+
+/* icon colors */
+
+br.-theme-darkgray-icon-y-offset {
+    margin-left: @darkgray-icon-y-offset;
+}
+
+br.-theme-gray-icon-y-offset {
+    margin-left: @gray-icon-y-offset;
+}
+
+br.-theme-lightgray-icon-y-offset {
+    margin-left: @lightgray-icon-y-offset;
+}
+
+br.-theme-white-icon-y-offset {
+    margin-left: @white-icon-y-offset;
+}
+
+br.-theme-blue-icon-y-offset {
+    margin-left: @blue-icon-y-offset;
+}
+
+br.-theme-magenta-icon-y-offset {
+    margin-left: @magenta-icon-y-offset;
+}
+
+br.-theme-red-icon-y-offset {
+    margin-left: @red-icon-y-offset;
+}
+
+br.-theme-orange-icon-y-offset {
+    margin-left: @orange-icon-y-offset;
+}
+
+br.-theme-yellow-icon-y-offset {
+    margin-left: @yellow-icon-y-offset;
+}
+
+br.-theme-green-icon-y-offset {
+    margin-left: @green-icon-y-offset;
+}
+
+br.-theme-cyan-icon-y-offset {
+    margin-left: @cyan-icon-y-offset;
+}
+
+
+br.-theme-background-icon-y-offset {
+    margin-left: @background-icon-y-offset;
+}
+
+br.-theme-foreground-icon-y-offset {
+    margin-left: @foreground-icon-y-offset;
+}
+
+br.-theme-foreground-interactive-icon-y-offset {
+    margin-left: @foreground-interactive-icon-y-offset;
+}
+
+br.-theme-disabled-icon-y-offset {
+    margin-left: @disabled-icon-y-offset;
+}
+
+br.-theme-interactive-icon-y-offset {
+    margin-left: @interactive-icon-y-offset;
+}
+
+br.-theme-highlight-icon-y-offset {
+    margin-left: @highlight-icon-y-offset;
+}
+
+br.-theme-danger-icon-y-offset {
+    margin-left: @danger-icon-y-offset;
+}
+
+br.-theme-info-icon-y-offset {
+    margin-left: @info-icon-y-offset;
+}
+
+br.-theme-warning-icon-y-offset {
+    margin-left: @warning-icon-y-offset;
+}
+
+br.-theme-error-icon-y-offset {
+    margin-left: @error-icon-y-offset;
+}
+
+
+/* icon offsets */
+
+br.-theme-plus-icon-x-offset {
+    margin-left: @plus-icon-x-offset;
+}
+
+br.-theme-minus-icon-x-offset {
+    margin-left: @minus-icon-x-offset;
+}
+
+br.-theme-close-icon-x-offset {
+    margin-left: @close-icon-x-offset;
+}
+
+br.-theme-fat-arrow-icon-x-offset {
+    margin-left: @fat-arrow-icon-x-offset;
+}
+
+br.-theme-slim-arrow-icon-x-offset {
+    margin-left: @slim-arrow-icon-x-offset;
+}
+
+br.-theme-info-icon-x-offset {
+    margin-left: @info-icon-x-offset;
+}
+
+br.-theme-qmark-icon-x-offset {
+    margin-left: @qmark-icon-x-offset;
+}
+
+br.-theme-exclam-icon-x-offset {
+    margin-left: @exclam-icon-x-offset;
+}
+
+br.-theme-check-icon-x-offset {
+    margin-left: @check-icon-x-offset;
+}
+
+br.-theme-wrench-icon-x-offset {
+    margin-left: @wrench-icon-x-offset;
+}
+
+br.-theme-sliders-icon-x-offset {
+    margin-left: @sliders-icon-x-offset;
+}
+
+br.-theme-key-icon-x-offset {
+    margin-left: @key-icon-x-offset;
+}
+
+br.-theme-user-icon-x-offset {
+    margin-left: @user-icon-x-offset;
+}
+
+br.-theme-sync-icon-x-offset {
+    margin-left: @sync-icon-x-offset;
+}
+
+br.-theme-magnifier-icon-x-offset {
+    margin-left: @magnifier-icon-x-offset;
+}
+
+br.-theme-full-screen-icon-x-offset {
+    margin-left: @full-screen-icon-x-offset;
+}
+
+br.-theme-duplicate-icon-x-offset {
+    margin-left: @duplicate-icon-x-offset;
+}
+
+br.-theme-envelope-icon-x-offset {
+    margin-left: @envelope-icon-x-offset;
+}
+
+br.-theme-gear-icon-x-offset {
+    margin-left: @gear-icon-x-offset;
+}
+
+br.-theme-download-icon-x-offset {
+    margin-left: @download-icon-x-offset;
+}
+
+br.-theme-upload-icon-x-offset {
+    margin-left: @upload-icon-x-offset;
+}
+
+br.-theme-file-icon-x-offset {
+    margin-left: @file-icon-x-offset;
+}
+
+br.-theme-reset-icon-x-offset {
+    margin-left: @reset-icon-x-offset;
+}
+
+br.-theme-menu-icon-x-offset {
+    margin-left: @menu-icon-x-offset;
+}
+
+br.-theme-options-icon-x-offset {
+    margin-left: @options-icon-x-offset;
+}
+
+
+/* misc */
+
+br.-theme-transition-duration {
+    transition-duration: @transition-duration;
+}
+
+br.-theme-glass-opacity {
+    margin-left: @glass-opacity;
+}
+
+br.-theme-modal-background-filter {
+    margin-left: @modal-background-filter;
+}

package/less/visibility-manager.less

@@ -0,0 +1,11 @@
+
+@import (reference) "theme";
+
+
+.qui-visibility-manager-hidden-width {
+    width: 0 !important;
+}
+
+.qui-visibility-manager-hidden-height {
+    height: 0 !important;
+}

package/less/widgets/check-button.less

@@ -0,0 +1,96 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+div.qui-check-button {
+    display: inline-block;
+    vertical-align: middle;
+    width: 1.5em;
+    height: 1.5em;
+    padding: 0.125em;
+    border-radius: 0.2em;
+    border: 0.0625em solid @interactive-color;
+    line-height: 1.2em !important;
+    text-align: center;
+    overflow: hidden;
+    background: @background-color;
+    color: @foreground-interactive-color;
+    transition+: background @transition-duration ease,
+                 color @transition-duration ease,
+                 opacity @transition-duration ease,
+                 border @transition-duration ease;
+    .qui-focusable-widget();
+
+    &:FOCUS {
+        .qui-focused-widget();
+    }
+
+    &.on {
+        background: @interactive-color;
+    }
+
+    &.active {
+        background: @interactive-active-color;
+    }
+
+    &.on::BEFORE {
+        content: '\2713';
+        font-size: 1.4em;
+    }
+
+    &.has-warning {
+        border-color: @warning-color;
+
+        &:FOCUS {
+            .qui-focused-widget-warning();
+        }
+
+        &.on {
+            background: @warning-color;
+        }
+
+        &.active {
+            background: @warning-active-color;
+        }
+
+    }
+
+    &.has-error {
+        border-color: @error-color;
+
+        &:FOCUS {
+            .qui-focused-widget-error();
+        }
+
+        &.on {
+            background: @error-color;
+        }
+
+        &.active {
+            background: @error-active-color;
+        }
+
+    }
+
+    &.readonly {
+        border-color: @readonly-color;
+        color: @foreground-color;
+        background: @background-color !important;
+
+        &:FOCUS {
+            .qui-focused-widget-readonly();
+        }
+
+    }
+
+    &.disabled {
+
+        border-color: @disabled-color;
+        background: @background-color !important;
+        color: @disabled-color;
+
+    }
+
+}

package/less/widgets/choice-buttons.less

@@ -0,0 +1,160 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+div.qui-choice-buttons-container {
+    border-radius: 0.2em;
+    .qui-focusable-widget();
+
+    &:FOCUS {
+        .qui-focused-widget();
+    }
+
+    &.has-warning:FOCUS {
+        .qui-focused-widget-warning();
+    }
+
+    &.has-error:FOCUS {
+        .qui-focused-widget-error();
+    }
+
+    &.readonly:FOCUS {
+        .qui-focused-widget-readonly();
+    }
+
+    & > div.qui-choice-buttons-group-container {
+        display: grid;
+        white-space: nowrap;
+
+        & > div.qui-choice-button {
+            display: inline-block;
+            padding: 0 0.25em;
+            border-radius: 0;
+            border-width: 0.0625em 0 0 0.0625em;
+            border-style: solid;
+            border-color: @interactive-color;
+            min-width: 1em;
+            box-sizing: border-box;
+            text-align: center;
+            background: @background-color;
+            color: @foreground-color;
+            line-height: 1.85em; /* 1.9 - 2 * 0.0625, round up so it looks good */
+
+            &.on,
+            &.active {
+                color: @foreground-interactive-color;
+            }
+
+            &.active {
+                background: @interactive-active-color;
+            }
+
+            &.on:NOT(.active) {
+                background: @interactive-color;
+            }
+
+            &:FIRST-CHILD {
+                border-top-left-radius: 0.1875em;
+                border-bottom-left-radius: 0.1875em;
+            }
+
+            &:LAST-CHILD {
+                border-top-right-radius: 0.1875em;
+                border-bottom-right-radius: 0.1875em;
+                border-right-width: 0.0625em;
+            }
+
+        }
+
+        &:LAST-CHILD div.qui-choice-button {
+            border-bottom-width: 0.0625em;
+        }
+
+        &:NOT(:FIRST-CHILD) div.qui-choice-button {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        &:NOT(:LAST-CHILD) div.qui-choice-button {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+    }
+
+    &.has-warning > div.qui-choice-buttons-group-container {
+
+        & > div.qui-choice-button {
+            border-color: @warning-color;
+
+            &.active {
+                background: @warning-active-color;
+            }
+
+            &.on:NOT(.active) {
+                background: @warning-color;
+            }
+
+        }
+
+    }
+
+    &.has-error > div.qui-choice-buttons-group-container {
+
+        & > div.qui-choice-button {
+            border-color: @error-color;
+
+            &.active {
+                background: @error-active-color;
+            }
+
+            &.on:NOT(.active) {
+                background: @error-color;
+            }
+
+        }
+
+    }
+
+    &.readonly > div.qui-choice-buttons-group-container {
+
+        & > div.qui-choice-button {
+            border-color: @disabled-color;
+            background: @background-color;
+            cursor: default;
+
+            &.active:NOT(.on) {
+                color: @foreground-color;
+                background: @background-color !important;
+            }
+
+            &.on {
+                color: @background-color;
+                background: @foreground-color !important;
+            }
+
+        }
+
+    }
+
+    &.disabled > div.qui-choice-buttons-group-container {
+
+        & > div.qui-choice-button,
+        & > div.qui-choice-button.active {
+            border-color: @disabled-color;
+            color: @disabled-color;
+            background: @background-color;
+            cursor: default;
+
+            &.on {
+                color: @background-color;
+                background: @disabled-color !important;
+            }
+
+        }
+
+    }
+
+}

package/less/widgets/color-combo.less

@@ -0,0 +1,33 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+
+
+div.qui-combo-item.selected > div.qui-color-combo-entry,
+div.qui-combo-container:FOCUS > div.qui-combo-button > span.combo-label > div.qui-color-combo-entry {
+    border-color: @background-color;
+}
+
+div.qui-color-combo-entry-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+div.qui-color-combo-entry-color {
+    width: 1em;
+    height: 1em;
+    box-sizing: border-box;
+    border-radius: 0.1em;
+    border: 0.0625em solid @foreground-color;
+    display: inline-block;
+    vertical-align: middle;
+    transition: border-color @transition-duration linear;
+    position: relative;
+    margin: 0.375em;
+}
+
+span.qui-color-combo-entry-text {
+    position: relative;
+    font-size: 0.9em;
+    vertical-align: middle;
+}