diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:38:04 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:38:04 +0000 |
commit | 1ff5c35de5dbd70a782875a91dd2232fd01b002b (patch) | |
tree | 77d9ce5e1bf78b3e6ef79f8f6e7861e2ced3c09b /asset/css/search-bar.less | |
parent | Initial commit. (diff) | |
download | icinga-php-library-upstream/0.10.1.tar.xz icinga-php-library-upstream/0.10.1.zip |
Adding upstream version 0.10.1.upstream/0.10.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'asset/css/search-bar.less')
-rw-r--r-- | asset/css/search-bar.less | 316 |
1 files changed, 316 insertions, 0 deletions
diff --git a/asset/css/search-bar.less b/asset/css/search-bar.less new file mode 100644 index 0000000..d73cf27 --- /dev/null +++ b/asset/css/search-bar.less @@ -0,0 +1,316 @@ +// Style +.search-bar { + .rounded-corners(.25em); + background: var(--searchbar-bg, @searchbar-bg); + + // Reset all input styles + input, [type="button"] { + .appearance(none); + border: none; + background: none; + } + + // Submit button styles + input[type=submit], + button[type=submit], + button:not([type]) { + background: var(--primary-button-bg, @primary-button-bg); + color: var(--primary-button-color, @primary-button-color); + border-top-right-radius: .25em; + border-bottom-right-radius: .25em; + } + + // General input styles + input:focus { + outline-offset: -1px; + } + + // Hide the submit button, it must exist, but shouldn't be shown to the user + input[type=submit][value="hidden"] { + display: none; + } + + // Left-most search dropdown style + button.search-options { + i.icon:before { + font-size: 1.2em; + margin-right: 0; + color: var(--control-color, @control-color); + } + + &:disabled { + i.icon:before { + color: var(--control-disabled-color, @control-disabled-color); + } + } + } + + // Scrollbar style + .filter-input-area { + // Firefox + scrollbar-width: thin; + scrollbar-color: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg) transparent; + + &::-webkit-scrollbar { + display: none; + height: .5em; + } + + &:hover::-webkit-scrollbar { + display: initial; + } + + &::-webkit-scrollbar-thumb { + border-radius: .25em; + background: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg); + } + } + + // Term styles + .filter-condition { + button { + border-radius: .4em 0 0 .4em; + background-color: var(--search-condition-remove-bg, @search-condition-remove-bg); + color: var(--search-condition-remove-color, @search-condition-remove-color); + + &:after { + content: ""; + position: absolute; + width: .4em; + height: 100%; + right: 0; + top: 0; + + background-color: var(--searchbar-bg, @searchbar-bg); + border: .2em solid var(--search-condition-remove-bg, @search-condition-remove-bg); + border-width: 0 0 0 .2em; + border-top-left-radius: .4em; + border-bottom-left-radius: .4em; + } + } + + input { + background-color: var(--search-term-bg, @search-term-bg); + color: var(--search-term-color, @search-term-color); + } + } + + .terms > .filter-condition:first-child button { + border-radius: 0 .4em .4em 0; + + &:before { + content: ""; + position: absolute; + width: .4em; + height: 100%; + left: 0; + top: 0; + + background-color: var(--searchbar-bg, @searchbar-bg); + border: .2em solid var(--search-condition-remove-bg, @search-condition-remove-bg); + border-width: 0 .2em 0 0; + border-top-right-radius: .4em; + border-bottom-right-radius: .4em; + } + + &:after { + content: none; + } + } + + .logical_operator, + .grouping_operator_open, + .grouping_operator_close { + input { + .rounded-corners(); + background-color: var(--search-logical-operator-bg, @search-logical-operator-bg); + color: var(--search-logical-operator-color, @search-logical-operator-color); + } + } + + .operator, + .logical_operator, + .grouping_operator_open, + .grouping_operator_close { + input { + text-align: center; + } + } + + [data-index] input:invalid { + background-color: var(--search-term-invalid-bg, @search-term-invalid-bg); + color: var(--search-term-invalid-color, @search-term-invalid-color); + } + + [data-index] input:disabled { + background-color: var(--search-term-disabled-bg, @search-term-disabled-bg); + } + + .column input { + .rounded-corners(.4em); + } + .column:not(:last-of-type), + .column.last-term { + input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + .operator:last-of-type:not(.last-term) input { + .rounded-corners(.4em); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .value input { + .rounded-corners(.4em); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .highlighted input { + background-color: var(--search-term-highlighted-bg, @search-term-highlighted-bg); + color: var(--search-term-highlighted-color, @search-term-highlighted-color); + } + + .selected input { + background-color: var(--search-term-selected-bg, @search-term-selected-bg); + color: var(--search-term-selected-color, @search-term-selected-color); + font-style: italic; + } + + ul.comma-separated { + display: inline; + padding: 0; + + list-style-type: none; + + li { + display: inline; + + &:not(:first-of-type):before { + display: inline; + content: ', '; + } + } + } +} + +// Layout +.search-bar { + height: 2em; + display: flex; + position: relative; // Required for the suggestions + + button.search-options { + line-height: 1em; + } + + .filter-input-area { + overflow: auto hidden; + overflow-x: overlay; // Not invalid, but proprietary feature by chrome/webkit + display: flex; + width: 100%; + height: ~"calc(2em + 10px)"; // Search bar height + approximate scrollbar height + padding: 2/12em; // 2 (px) desired / default font size (px) + + // Lets inputs grow based on their contents, Inspired by https://css-tricks.com/auto-growing-inputs-textareas/ + label { + position: relative; + display: inline-block; + min-width: 2em; + + &::after, + input { + width: auto; + padding: 0 .5em; + resize: none; + } + + input { + width: 100%; + position: absolute; + line-height: 20/12; // 20 (px) desired / default font size (px) + } + + &::after { + height: 0; + content: attr(data-label); + visibility: hidden; + white-space: nowrap; + padding: 0 7/12em; // 7 (px) desired / default font size (px) + } + } + + > label { + flex: 1 0 auto; + + &::after, + input { + max-width: none; + min-width: 8em; + } + } + } + + .terms { + display: inline; + flex-shrink: 0; + + .filter-chain, + .filter-condition { + display: inline; + } + + .filter-condition { + position: relative; + + button { + display: none; + z-index: 1; + width: ~"calc(2em + 2px)"; + padding: .15em .6em .15em .4em; + position: absolute; + left: ~"calc(-2em - 2px)"; // That's min-width + margin-right of an operator + line-height: 16/12; // 16 (px) desired / default font size (px) + + i:before { + margin-right: 0; + } + } + + &:not(._hover_delay):hover button { + display: inline; + } + } + + > .filter-condition:first-child button { + padding: .15em .4em .15em .6em; + left: auto; + right: ~"calc(-2em - 1px)"; // That's min-width + margin-left of an operator + } + + label { + margin-right: 1px; + + &.logical_operator, + &.grouping_operator_open, + &.grouping_operator_close { + margin-left: 1px; // adds up to 2px with the previous term + margin-right: 2px; + } + } + } + + &.disabled { + .terms .filter-condition:hover button { + display: none; + } + } + + .search-suggestions { + // 2 (px) desired / default font-size to match .filter-input outline-offset (-1px) + outline-width (3px) + margin-top: 2/12em; + } +} |