diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss b/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss index 4cbe30650d..12fccf7ff1 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss @@ -70,3 +70,65 @@ height: 18px; } } + +// Page-level search field — used by iot-hub-browse and iot-hub-search. +// Larger than the filter inputs above: 56px tall, 16px text, with a 40px +// trailing action area (search icon when empty, close icon-button when +// typing). + +@mixin tb-iot-hub-page-search-container { + display: flex; + align-items: center; + width: 0; + height: 56px; + padding: 8px 4px 8px 16px; + gap: 8px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 8px; + background: white; +} + +@mixin tb-iot-hub-page-search-input { + flex: 1; + min-width: 0; + border: none; + outline: none; + padding: 0; + font-family: inherit; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.15px; + color: rgba(0, 0, 0, 0.87); + background: transparent; + + &::placeholder { + color: rgba(0, 0, 0, 0.54); + } +} + +@mixin tb-iot-hub-page-search-action { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + flex-shrink: 0; + border-radius: 50%; + color: rgba(0, 0, 0, 0.54); + + mat-icon { + font-size: 24px; + width: 24px; + height: 24px; + } + + &.mat-mdc-icon-button { + padding: 8px; + --mdc-icon-button-state-layer-size: 40px; + } + + &-static { + pointer-events: none; + } +} diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html index a653685882..cb59c9f5e9 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html @@ -322,28 +322,36 @@