@qtoggle/qui 0.0.0

package/less/icons.less

@@ -0,0 +1,144 @@
+
+@import (reference) "theme";
+
+
+.qui-icon {
+    display: inline-block;
+    position: relative;
+}
+
+.qui-icon > div.qui-icon-normal,
+.qui-icon > div.qui-icon-active,
+.qui-icon > div.qui-icon-focused,
+.qui-icon > div.qui-icon-selected {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: opacity @transition-duration ease-in;
+    z-index: 1;
+    opacity: 0;
+}
+
+.qui-icon > div.qui-icon-hidden {
+    transition: opacity @transition-duration ease-in !important;
+    opacity: 0 !important;
+}
+
+.qui-icon > div.qui-icon-decoration {
+    display: inline-block;
+    position: absolute;
+    z-index: 10;
+    width: 0.75em;
+    height: 0.75em;
+    border: 0.0625em solid;
+    border-radius: 1em;
+    transition: all @transition-duration ease;
+    right: -0.125em;
+    bottom: -0.125em;
+}
+
+._icon_visible() {
+    opacity: 1;
+    z-index: 5;
+    transition: opacity @transition-duration ease-out;
+}
+
+
+    /* normal state */
+
+:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) {
+    & > & + .qui-icon.top-normal:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+    & > & + .qui-icon.top-active:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+    & > & + .qui-icon.top-focused:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+    & > & + .qui-icon.top-selected:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+
+    & > .qui-icon.top-normal:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected):FIRST-CHILD > div.qui-icon-normal,
+    & > .qui-icon.top-active:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected):FIRST-CHILD > div.qui-icon-normal,
+    & > .qui-icon.top-focused:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected):FIRST-CHILD > div.qui-icon-normal,
+    & > .qui-icon.top-selected:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected):FIRST-CHILD > div.qui-icon-normal,
+
+    & + .qui-icon.top-normal:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+    & + .qui-icon.top-active:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+    & + .qui-icon.top-focused:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal,
+    & + .qui-icon.top-selected:NOT(.active):NOT(:FOCUS):NOT(.focused):NOT(.selected) > div.qui-icon-normal {
+        ._icon_visible();
+    }
+}
+
+
+    /* active state */
+
+.qui-icon.top-normal.active   > div.qui-icon-normal,
+.qui-icon.top-active.active   > div.qui-icon-active,
+.qui-icon.top-focused.active  > div.qui-icon-active,
+.qui-icon.top-selected.active > div.qui-icon-active {
+    ._icon_visible();
+}
+
+.active {
+    & > .qui-icon.top-normal   > div.qui-icon-normal,
+    & > .qui-icon.top-active   > div.qui-icon-active,
+    & > .qui-icon.top-focused  > div.qui-icon-active,
+    & > .qui-icon.top-selected > div.qui-icon-active,
+
+    & + .qui-icon.top-normal   > div.qui-icon-normal,
+    & + .qui-icon.top-active   > div.qui-icon-active,
+    & + .qui-icon.top-focused  > div.qui-icon-active,
+    & + .qui-icon.top-selected > div.qui-icon-active {
+        ._icon_visible();
+    }
+}
+
+
+    /* focused state */
+
+.qui-icon.top-normal:FOCUS     > div.qui-icon-normal,
+.qui-icon.top-normal.focused   > div.qui-icon-normal,
+.qui-icon.top-active:FOCUS     > div.qui-icon-active,
+.qui-icon.top-active.focused   > div.qui-icon-active,
+.qui-icon.top-focused:FOCUS    > div.qui-icon-focused,
+.qui-icon.top-focused.focused  > div.qui-icon-focused,
+.qui-icon.top-selected:FOCUS   > div.qui-icon-focused,
+.qui-icon.top-selected.focused > div.qui-icon-focused {
+    ._icon_visible();
+}
+
+:FOCUS, .focused {
+    & > .qui-icon.top-normal   > div.qui-icon-normal,
+    & > .qui-icon.top-active   > div.qui-icon-active,
+    & > .qui-icon.top-focused  > div.qui-icon-focused,
+    & > .qui-icon.top-selected > div.qui-icon-focused,
+
+    & + .qui-icon.top-normal   > div.qui-icon-normal,
+    & + .qui-icon.top-active   > div.qui-icon-active,
+    & + .qui-icon.top-focused  > div.qui-icon-focused,
+    & + .qui-icon.top-selected > div.qui-icon-focused {
+        ._icon_visible();
+    }
+}
+
+
+    /* selected state  */
+
+.qui-icon.top-normal.selected   > div.qui-icon-normal,
+.qui-icon.top-active.selected   > div.qui-icon-active,
+.qui-icon.top-focused.selected  > div.qui-icon-focused,
+.qui-icon.top-selected.selected > div.qui-icon-selected {
+    ._icon_visible();
+}
+
+.selected {
+    & > .qui-icon.top-normal   > div.qui-icon-normal,
+    & > .qui-icon.top-active   > div.qui-icon-active,
+    & > .qui-icon.top-focused  > div.qui-icon-focused,
+    & > .qui-icon.top-selected > div.qui-icon-selected,
+
+    & + .qui-icon.top-normal   > div.qui-icon-normal,
+    & + .qui-icon.top-active   > div.qui-icon-active,
+    & + .qui-icon.top-focused  > div.qui-icon-focused,
+    & + .qui-icon.top-selected > div.qui-icon-selected {
+        ._icon_visible();
+    }
+}

package/less/lists.less

@@ -0,0 +1,105 @@
+
+@import (reference) "theme";
+
+
+/* Main div */
+
+div.qui-list {
+    background: @background-color;
+}
+
+
+/* Children */
+
+div.qui-list-child {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-sizing: border-box;
+    border-bottom: 0.0625em solid @border-color;
+    transition: height @transition-duration ease,
+                background @transition-duration ease,
+                color @transition-duration ease,
+                opacity @transition-duration ease;
+}
+
+
+/* Items */
+
+div.qui-list-child.qui-list-item {
+
+    &.hidden {
+        opacity: 0;
+    }
+
+}
+
+
+/* Search */
+
+div.qui-list-child.qui-list-search > div.qui-list-search-wrapper {
+    position: relative;
+
+    & > input[type=text] {
+        width: 100%;
+        box-sizing: border-box;
+        height: 3em;
+        padding: 0.5em 2.75em 0.5em 0.5em;
+        border: 0;
+        border-radius: 0;
+        transition: background @transition-duration linear;
+    }
+
+    & > input[type=text]::selection {
+        background: fade(@foreground-interactive-color, 99%);
+        color: @interactive-color;
+    }
+
+    & > input[type=text]:FOCUS {
+        background-color: @interactive-color;
+        color: @foreground-interactive-color;
+    }
+
+    & > div.qui-icon {
+        cursor:  pointer;
+        width: 2em;
+        height: 2em;
+        margin: 0.5em;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+}
+
+
+/* Add */
+
+div.qui-list-add {
+    background: @background-color;
+    color: @interactive-color;
+    text-align: center;
+
+    &.active {
+        background: @background-active-color;
+    }
+
+    &.selected {
+        background: @interactive-color;
+        color: @background-color;
+    }
+
+    &.active.selected {
+        background: @interactive-active-color;
+        color: @background-color;
+    }
+
+    & > .qui-icon {
+        margin: 0.5em;
+        width: 2em;
+        height: 2em;
+        vertical-align: middle;
+    }
+
+}

package/less/main-ui.less

@@ -0,0 +1,328 @@
+
+@import (reference) "theme";
+
+
+/* Main container */
+
+div.qui-main-container {
+    background: @background-root-color;
+    position: absolute;
+    top: 3.0625em;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: top @transition-duration ease,
+                margin @transition-duration ease,
+                opacity @transition-duration linear;
+    overflow: hidden;
+}
+
+div.qui-main-container-glass {
+    z-index: 100;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: backdrop-filter @transition-duration linear;
+}
+
+div.qui-main-container-glass.visible {
+    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%);
+    }
+}
+
+div.qui-pages-container {
+    height: 100%;
+}
+
+
+/* Top bar */
+
+div.qui-top-bar {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: @background-color;
+    height: 3em;
+    transition: top @transition-duration ease,
+                box-shadow @transition-duration ease;
+    white-space: nowrap;
+    border-color: @border-color;
+    border-style: solid;
+    border-bottom-width: 0.0625em;
+    overflow: hidden;
+}
+
+body.small-screen > div.qui-top-bar {
+    background: @interactive-color;
+    border-color: @top-border-color;
+}
+
+body.content-scrolled > div.qui-top-bar,
+body.menu-bar-open > div.qui-top-bar,
+body.options-bar-open > div.qui-top-bar {
+    box-shadow: 0 0.3125em 0.5em -0.3125em @bar-shadow-color;
+}
+
+body.content-scrolled.toast-message-visible > div.qui-top-bar {
+    box-shadow: none;
+}
+
+div.qui-top-bar div.qui-icon-decoration {
+    border-color: @background-color !important;
+}
+
+body.small-screen > div.qui-top-bar div.qui-icon-decoration {
+    border-color: @foreground-interactive-color !important;
+}
+
+div.qui-top-button {
+    float: right;
+    display: inline-block;
+    background: @background-color;
+    height: 3em;
+    width: 3em;
+    border-left-width: 0.0625em;
+    border-style: solid;
+    border-color: @border-color;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-top-button {
+    background: @interactive-color;
+    border-color: @top-border-color;
+}
+
+div.qui-top-button > .qui-icon {
+    width: 2em;
+    height: 2em;
+    margin: 0.5em;
+}
+
+div.qui-top-button.active,
+div.qui-top-button.selected {
+    background: @background-active-color;
+    border-color: @border-color;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-top-button.active,
+body.small-screen > div.qui-top-bar > div.qui-top-button.selected {
+    background: @top-border-color;
+    border-color: @top-border-color;
+}
+
+div.qui-menu-button {
+    float: left;
+    position: relative;
+    overflow: hidden;
+    border-left-width: 0;
+    border-right-width: 0.0625em;
+    left: 0;
+    transition: left @transition-duration ease,
+                margin-right @transition-duration ease,
+                background @transition-duration ease;
+}
+
+div.qui-menu-button.hidden {
+    left: -3em;
+    margin-right: -3em;
+}
+
+div.qui-menu-button > div.qui-icon {
+    transition: transform @transition-duration ease;
+}
+
+div.qui-menu-button.active > div.qui-icon,
+div.qui-menu-button.selected > div.qui-icon {
+    transform: rotate(90deg);
+}
+
+div.qui-options-button {
+    transition: width @transition-duration ease,
+                background @transition-duration ease;
+}
+
+div.qui-options-button.hidden {
+    width: 0;
+    border: 0;
+}
+
+div.qui-options-button > div.qui-icon {
+    transition: transform @transition-duration ease;
+}
+
+div.qui-options-button.active > div.qui-icon,
+div.qui-options-button.selected > div.qui-icon {
+    transform: rotate(90deg);
+}
+
+div.qui-status-indicator {
+    transition: opacity @transition-duration ease;
+
+    &.hidden {
+        opacity: 0;
+    }
+
+}
+
+div.qui-top-bar > div.qui-top-bar-title-container {
+    display: inline-block;
+    max-width: 55%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 3em;
+    line-height: 3em;
+    padding-left: 1em;
+    color: @foreground-color;
+    font-weight: bold;
+}
+
+body.small-screen > div.qui-top-bar > div.qui-top-bar-title-container {
+    background: @interactive-color;
+    color: @foreground-interactive-color;
+}
+
+body:NOT(.small-screen) > div.qui-top-bar > div.qui-top-bar-title-container {
+    display: none;
+}
+
+
+/* Menu bar */
+
+div.qui-menu-bar {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: -16em;
+    top: 3.0625em;
+    bottom: 0;
+    width: 15em;
+    box-sizing: border-box;
+    background: @background-color;
+    transition: left @transition-duration ease,
+                box-shadow @transition-duration ease,
+                opacity @transition-duration ease;
+    z-index: 100;
+    opacity: 1;
+    touch-action: none;
+    overflow: auto;
+}
+
+body.menu-bar-open:NOT(.no-top-bar) > div.qui-menu-bar {
+    left: 0;
+    opacity: 1;
+    box-shadow: 0 0.3em 0.5em @bar-shadow-color;
+}
+
+div.qui-menu-bar-button {
+    position: relative;
+    width: 100%;
+    height: 3em;
+    font-weight: bold;
+    box-sizing: border-box;
+    background: @background-color;
+    color: @interactive-color;
+    border-style: solid;
+    border-color: @border-color;
+    border-bottom-width: 0.0625em;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+div.qui-menu-bar-button.active {
+    background: @background-active-color;
+}
+
+div.qui-menu-bar-button.selected {
+    background: @interactive-color;
+    color: @background-color;
+}
+
+div.qui-menu-bar-button.active.selected {
+    background: @top-border-color;
+    color: @background-color;
+}
+
+div.qui-menu-bar-button > .qui-icon {
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    margin: 0.5em;
+    vertical-align: middle;
+}
+
+div.qui-menu-bar-button > .label {
+    vertical-align: middle;
+}
+
+
+/* Options bar */
+
+div.qui-options-bar {
+    position: absolute;
+    overflow: auto;
+    opacity: 0;
+    right: -50em;
+    top: 3.0625em;
+    bottom: 0;
+    width: 20%;
+    box-sizing: border-box;
+    background: @background-color;
+    border-color: @border-color;
+    border-style: solid;
+    border-left-width: 0.0625em;
+    transition: right @transition-duration ease,
+                box-shadow @transition-duration ease,
+                opacity @transition-duration ease;
+    z-index: 100;
+    touch-action: none;
+}
+
+body.small-screen > div.qui-options-bar {
+    border-left: 0;
+    right: -15em;
+    width: 15em;
+}
+
+body.options-bar-open:NOT(.no-top-bar) > div.qui-options-bar {
+    right: 0;
+    opacity: 1;
+    box-shadow: 0 0.3em 0.5em @bar-shadow-color;
+}
+
+div.qui-options-bar > div.options-bar-container {
+    transition: opacity @transition-duration ease;
+    opacity: 1;
+}
+
+div.qui-options-bar.updating > div.options-bar-container {
+    opacity: 0;
+}
+
+
+/* Full screen */
+
+body.no-top-bar > div.qui-top-bar {
+    top: -3em;
+    border-bottom-width: 0;
+}
+
+body.no-top-bar > div.qui-main-container {
+    top: 0;
+}
+
+body.no-top-bar.menu-bar-open > div.qui-main-container,
+body.no-top-bar.menu-bar-open > div.qui-toast-message-container {
+    margin-left: 0;
+}
+
+body.no-top-bar.options-bar-open > div.qui-main-container,
+body.no-top-bar.options-bar-open > div.qui-toast-message-container {
+    margin-right: 0;
+}