@c8y/style/styles/_search-header.less

Styles for Cumulocity IoT applications

// 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: @margin-16;
      background-color: @component-background-default;

      .input-group-btn {
        top: @margin-16;
        right: @margin-16;
        max-height: none;
        height: auto;
        bottom: @margin-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: 0 !important;
        border: 0;
        height: auto;
        padding: 16px 54px 16px 16px;
        background-color: @headerColor;
        color: @header-text-color;
        font-size: @font-size-large;
        max-height: unset !important;
      }
    }

    .input-group-btn {
      .btn {
        font-size: 20px;
        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;
  }
}

@media (min-width: @grid-float-breakpoint) {
  .search-header-menu {
    .app-main-header.open & {
      max-width: calc(100vw - 500px);
    }
  }
}

.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;
    }
  }
}