@c8y/style/styles/components/data-input/_search-header.less

Styles for Cumulocity IoT applications

@import "../../mixins/_shadows-helper.less";


/**
 * search header - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
// main header search component
.search-header-menu {
  top: 92px;
  max-width: calc(100vw - 364px);
  min-width: 300px;
  width: 100vw;
  .boxShadowHelper(md, right);

  .c8y-search-form .c8y-search-dropdown {
    .input-group {
      padding: @size-16;
      background-color: @component-background-default;

      .input-group-btn {
        top: @size-16;
        right: @size-16;
        max-height: none;
        height: auto;
        bottom: @size-16;
      }
    }
  }

  c8y-typeahead {
    .c8y-search-dropdown.dropdown .dropdown-menu {
      position: relative;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      padding-top: 0;
      max-height: calc(100vh - 240px);
      height: auto;
      display: block;
      box-shadow: none;
      background-color: @component-background-default;
    }

    .input-group-dropdown {
      .form-control {
        border-radius: var(--c8y-form-control-height-base)!important;
        border: 0;
        height: auto;
        padding: @size-16 54px @size-16 @size-24 !important;
        background-color: @headerColor;
        color: @header-text-color;
        font-size: @font-size-large;
        max-height: unset !important;
      }
    }

    .input-group-btn {
      .btn {
        font-size: @size-20;
        height: auto !important;
        padding: 14px 16px;
        color: @header-text-color;

        &:hover {
          color: @header-text-color-hover;
        }
      }
    }

    c8y-load-more {
      padding: 0 16px;

      >.c8y-list__item {
        box-shadow: none;
      }
    }
  }
}

@media (min-width: @screen-sm-min) {
  .search-header-menu {
    top: @header-bar-height;
    margin-left: auto;
    margin-right: auto;
  }
}
.search-header-menu {
  .app-main-header.open & {
    max-width: calc(100vw - 400px);
  }
}
@media (min-width: @grid-float-breakpoint) {
  .search-header-menu {
    .app-main-header.open & {
      max-width: 800px;
    }
  }
}

.search-header-inline {
  c8y-list-group.dropdown-menu {
    width: unset !important;
    min-width: 100%;
  }

  .c8y-list__item {
    padding: 0 8px !important;
    --c8y-component-padding: 4px;

    .legend {
      margin: 0;
    }
  }
}