Contents

[data-controller="tables--query"] {
  position: relative;

  .query-input {
    display: grid;
    grid-template-areas: "input button";
    grid-template-columns: 1fr auto;

    [role="searchbox"] {
      grid-area: input;
      background: transparent;
      caret-color: black;
      resize: none;
    }

    &[data-connected] [role="searchbox"] {
      color: transparent;
    }

    button {
      grid-area: button;
      flex: 0;
    }

    .highlight {
      grid-area: input;
      visibility: hidden;
      border: 1px solid transparent;
      color: black;
      z-index: -1;
      font-size: 1rem;
      padding: 2px;

      overflow-wrap: break-word;
      white-space: pre-wrap;

      .value {
        color: #666666;
      }
    }

    &[data-connected] .highlight {
      visibility: visible;
    }
  }
}

.query-modal {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  margin-top: 0.5rem;
  background: white;
  border-radius: 4px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.125s;
  pointer-events: none;
  display: grid;
  grid-template-areas: "header" "content" "footer";
  grid-template-rows: auto 1fr auto;

  &[data-open] {
    opacity: 1;
    pointer-events: unset;
  }

  header {
    grid-area: header;
  }

  .content {
    grid-area: content;
    padding-inline: 1rem;
    padding-block: 0.5rem 0;
  }

  ul {
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
  }

  .error {
    background: #fff2f2;
    border-bottom: 1px solid #fdd3d3;
    padding: 0.5rem 1rem;

    code {
      font-weight: bold;
    }
  }

  .footer {
    grid-area: footer;
    display: flex;
    justify-content: flex-end;
    padding-block: 1rem;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
katalyst-tables-3.5.1	app/assets/stylesheets/katalyst/tables/_query.scss
katalyst-tables-3.5.0	app/assets/stylesheets/katalyst/tables/_query.scss