1 files changed, 269 insertions, 0 deletions
diff --git a/asset/css/search-base.less b/asset/css/search-base.less
new file mode 100644
index 0000000..e4af764
--- /dev/null
+++ b/asset/css/search-base.less
@@ -0,0 +1,269 @@
+// Style
+
+.search-bar .filter-input-area,
+.term-input-area:not(.vertical) {
+  // Scrollbar style
+
+  // 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);
+  }
+}
+
+.search-bar,
+.term-input-area {
+  [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);
+  }
+
+  .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;
+  }
+}
+
+.search-suggestions {
+  background: var(--suggestions-bg, @suggestions-bg);
+  color: var(--suggestions-color, @suggestions-color);
+  border: 1px solid var(--suggestions-border-color, @suggestions-border-color);
+  border-bottom-right-radius: .5em;
+  border-bottom-left-radius:  .5em;
+
+  > ul {
+    list-style-type: none;
+
+    > li {
+      border-top: 1px solid var(--suggestions-separation-bg, @suggestions-separation-bg);
+    }
+    > li.suggestion-title + li {
+      border: none;
+    }
+    > li:not(.default) + li.suggestion-title {
+      border: none;
+    }
+  }
+
+  .default {
+    color: var(--suggestions-default-opt-color, @suggestions-default-opt-color);
+    font-style: italic;
+
+    [type="button"] {
+      background-color: var(--suggestions-default-opt-bg, @suggestions-default-opt-bg);
+    }
+  }
+
+  .suggestion-title {
+    font-size: 80%;
+  }
+
+  .failure-message {
+    font-weight: bold;
+
+    em {
+      font-weight: normal;
+      color: var(--suggestions-failure-message-color, @suggestions-failure-message-color);
+    }
+  }
+
+  .nothing-to-suggest {
+    color: var(--suggestions-color, @suggestions-color);
+  }
+
+  .relation-path {
+    padding: 0 .2em;
+    background-color: var(--suggestions-relation-path-bg, @suggestions-relation-path-bg);
+  }
+
+  [type="button"] {
+    .appearance(none);
+    border: none;
+    background: none;
+  }
+
+  [type="button"]:focus,
+  [type="button"].selected {
+    background: var(--suggestions-focus-bg, @suggestions-focus-bg);
+    color: var(--suggestions-focus-color, @suggestions-focus-color);
+    outline: none;
+
+    .relation-path {
+      background-color: var(--suggestions-relation-path-focus-bg, @suggestions-relation-path-focus-bg);
+    }
+  }
+
+  [type="button"]:not(:focus):hover,
+  [type="button"]:not(.selected):hover {
+    background: var(--suggestions-hover-bg, @suggestions-hover-bg);
+  }
+}
+
+// Layout
+.search-bar .filter-input-area,
+.term-input-area:not(.vertical) {
+  overflow: auto hidden;
+  overflow-x: overlay; // Not invalid, but proprietary feature by chrome/webkit
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: ~"calc(2em + 10px)"; // Search bar height + approximate scrollbar height
+
+  // 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;
+    height: 100%;
+
+    &::after,
+    input {
+      width: auto;
+      padding: .25em .5em;
+      resize: none;
+    }
+
+    input {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      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;
+
+    label {
+      margin-right: 1px;
+    }
+  }
+}
+
+.term-input-area.vertical {
+  display: flex;
+  flex-direction: column-reverse;
+
+  > .terms {
+    @gap: 1px;
+    @termsPerRow: 2;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: @gap;
+    margin-top: @gap;
+
+    label {
+      @termWidth: 100%/@termsPerRow;
+      @totalGapWidthPerRow: (@termsPerRow - 1) * @gap;
+
+      min-width: ~"calc(@{termWidth} - (@{totalGapWidthPerRow} / @{termsPerRow}))";
+      flex: 1 1 auto;
+
+      input {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.term-input-area {
+  label input:focus {
+    @labelPad: 7/12em;
+    outline-width: 3px;
+    outline-offset: ~"calc(-@{labelPad} + 3px)";
+  }
+}
+
+.search-suggestions {
+  z-index: 2; // Required so that nothing else can overlap it (such as opaque elements and the impact overlay)
+  position: absolute;
+  overflow: auto;
+  min-width: 5em;
+
+  &:empty {
+    display: none;
+  }
+
+  > ul {
+    margin: 0;
+    padding: 0;
+
+    li.suggestion-title {
+      padding: 1.25em .625em 0 .625em;
+    }
+
+    li.failure-message {
+      padding: .5em 1em;
+
+      em {
+        margin-right: .5em;
+      }
+    }
+
+    li.nothing-to-suggest {
+      padding: .5em 1em;
+    }
+  }
+
+  [type="button"] {
+    padding: .5em 1em;
+    display: block;
+    width: 100%;
+    text-align: left;
+
+    &[data-class="operator"], &[data-class="logical_operator"] {
+      text-align: center;
+    }
+
+    &.has-details {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+    }
+
+    .relation-path {
+      margin-left: .5em;
+
+      &::first-line {
+        font-size: .8em;
+      }
+    }
+  }
+}