summaryrefslogtreecommitdiffstats
path: root/asset/css/search-bar.less
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 12:38:04 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 12:38:04 +0000
commit1ff5c35de5dbd70a782875a91dd2232fd01b002b (patch)
tree77d9ce5e1bf78b3e6ef79f8f6e7861e2ced3c09b /asset/css/search-bar.less
parentInitial commit. (diff)
downloadicinga-php-library-1ff5c35de5dbd70a782875a91dd2232fd01b002b.tar.xz
icinga-php-library-1ff5c35de5dbd70a782875a91dd2232fd01b002b.zip
Adding upstream version 0.10.1.upstream/0.10.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--asset/css/search-bar.less316
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;
+ }
+}