diff options
Diffstat (limited to 'asset/css/search-editor.less')
| -rw-r--r-- | asset/css/search-editor.less | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/asset/css/search-editor.less b/asset/css/search-editor.less new file mode 100644 index 0000000..d32d31c --- /dev/null +++ b/asset/css/search-editor.less @@ -0,0 +1,268 @@ +// Style + +.search-editor { + ul, ol { + list-style-type: none; + } + + fieldset { + border: none; + } + + button, input[type="submit"] { + .appearance(none); + background: none; + + &:not(.cancel-button) { + border: none; + } + } + + select:not([multiple]) { + .appearance(none); + padding-right: 1.5625em; + background-image: url('@{iplWebAssets}/img/select-icon-text-color.svg'); + background-repeat: no-repeat; + background-position: right center; + background-size: contain; + .rounded-corners(0); + } + + i.icon:before { + color: var(--search-editor-control-color, @search-editor-control-color); + } + + .drag-initiator { + cursor: grab; + } + + input[type="text"], select { + border: none; + background: var(--search-term-bg, @search-term-bg); + color: var(--search-term-color, @search-term-color); + text-overflow: ellipsis; + } + + :not(fieldset) > select { + .rounded-corners(); + } + + fieldset > input[data-type="column"] { + .rounded-corners(.4em 0 0 .4em); + } + + fieldset > input[data-type="value"] { + .rounded-corners(0 .4em .4em 0); + } + + .search-error { + input:invalid { + background: var(--search-term-invalid-bg, @search-term-invalid-bg); + color: var(--search-term-invalid-color, @search-term-invalid-color); + } + + .search-errors { + color: var(--search-editor-error-color, @search-editor-error-color); + font-weight: bold; + } + } + + li > select:not([multiple]) { + background-color: var(--search-logical-operator-bg, @search-logical-operator-bg); + color: var(--search-logical-operator-color, @search-logical-operator-color); + .rounded-corners(); + } + + .sortable-ghost { + border: dashed .2em var(--search-editor-drag-outline-color, @search-editor-drag-outline-color); + + fieldset { + opacity: .5; + } + } + + .buttons { + ul { + .rounded-corners(); + .box-shadow(0, 0, .5em); + border: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color); + background: var(--search-editor-context-menu-bg, @search-editor-context-menu-bg); + + li:not(:first-child) { + border-top: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color); + } + + button:hover { + background: var(--primary-button-bg, @primary-button-bg); + color: var(--primary-button-color, @primary-button-color); + } + + // Add rounded corners to buttons as well, otherwise their + // background is not rounded and overlaps the list's corners + :first-child button { + .rounded-corners(); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + :last-child button { + .rounded-corners(); + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + &:before { + // The left pointing arrow + border-bottom: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color); + border-left: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color); + background: var(--search-editor-context-menu-bg, @search-editor-context-menu-bg); + } + } + + &:hover i.icon:before { + .rounded-corners(); + background: var(--primary-button-bg, @primary-button-bg); + color: var(--primary-button-color, @primary-button-color); + } + } + + input[type="submit"] { + .rounded-corners(); + background: var(--primary-button-bg, @primary-button-bg); + color: var(--primary-button-color, @primary-button-color); + + &:hover { + background: var(--primary-button-hover-bg, @primary-button-hover-bg); + } + } +} + +// Layout + +.search-editor-opener + a.modal-opener { + display: none; +} + +.search-editor { + padding: 1em; + + @item-spacing: .5em; + + ul, ol { + width: 100%; + margin: 0; + padding: 0; + } + + li { + display: flex; + + > :not(:first-child) { + margin-left: @item-spacing; + } + } + + ol { + padding-left: 1em; + padding-bottom: @item-spacing; + + > li:first-child, + > :not(.filter-chain) + li { + margin-top: @item-spacing; + } + } + + input[type="text"], select { + padding: 0 .5em; + } + + li > select { + margin-right: auto; + } + + fieldset { + display: flex; + flex: 1 1 auto; + margin: 0; + padding: 0; + + input[data-type="value"] { + flex: 1 1 auto; + } + + > :not(:first-child) { + margin-left: .1em; + } + } + + input, button, select { + height: 28/12em; // Target Pixels @ default font size / default font size + } + + .search-errors { + margin-left: .5em; + } + + i.icon:before { + margin: 0; + font-size: 1.5em; + line-height: 1.5; + } + + .buttons { + position: relative; + + ul { + position: absolute; + right: 32/12em; // Target distance @ default font size / default font size + z-index: 1; + width: auto; + padding: 0; + + display: none; + + button { + z-index: 1; + width: 100%; + text-align: left; + white-space: nowrap; + } + + &:before { + // The left pointing arrow + content: ""; + display: block; + height: 1em; + transform: rotate(-135deg); + width: 1em; + z-index: 1; + + position: absolute; + top: ((28/12)/2)-.5em; // ((First row pixels @ default font size / default font size) / 2) - own half width + right: -.5em; + } + } + + &:hover ul { + display: block; + } + + i.icon:before { + padding: ((28/18)-1)/2em; // (Container pixels / default font size) - line height / (padding-top,padding-bottom) + line-height: 1; + } + } + + .cancel-button { + margin-top: 2em - @item-spacing; + } + + input[type="submit"] { + float: right; + width: 6em; + margin-top: 2em - @item-spacing; + } + + input[type="submit"]:not(:last-of-type) { + display: none; + } +} |