summaryrefslogtreecommitdiffstats
path: root/asset/css/search-bar.less
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-13 11:30:08 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-13 11:30:08 +0000
commit4ce65d59ca91871cfd126497158200a818720bce (patch)
treee277def01fc7eba7dbc21c4a4ae5576e8aa2cf1f /asset/css/search-bar.less
parentInitial commit. (diff)
downloadicinga-php-library-4ce65d59ca91871cfd126497158200a818720bce.tar.xz
icinga-php-library-4ce65d59ca91871cfd126497158200a818720bce.zip
Adding upstream version 0.13.1.upstream/0.13.1
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.less232
1 files changed, 232 insertions, 0 deletions
diff --git a/asset/css/search-bar.less b/asset/css/search-bar.less
new file mode 100644
index 0000000..6ad1aec
--- /dev/null
+++ b/asset/css/search-bar.less
@@ -0,0 +1,232 @@
+// 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);
+ }
+ }
+ }
+
+ // 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;
+ }
+ }
+
+ .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);
+ }
+
+ 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 {
+ padding: 2/12em; // 2 (px) desired / default font size (px)
+ }
+
+ .terms {
+ .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 {
+ &.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;
+ }
+}