From 94ceb360cc78687a6137a1b06e05d1909a6f5e18 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 6 May 2026 15:05:02 +0300 Subject: [PATCH] feat(iot-hub): polish connectivity card selected/idle states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Selected card inverts the icon container: primary-coloured background with the masked glyph painted white, on top of the existing primary border + inset shadow. - Default (idle, non-hovered) cards use a transparent border so the outline appears only on hover or when selected — the 1px layout space stays intact to avoid jitter. --- .../device-install-dialog.component.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss index ed14ceda8d..64edf48f95 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss @@ -115,7 +115,7 @@ padding: 16px; height: 116px; background: rgba($tb-primary-color, 0.04); - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-align: left; @@ -128,6 +128,16 @@ &.selected { box-shadow: 0 0 0 1px $tb-primary-color inset; + + // Selected state inverts the icon: primary-coloured container + // with the masked glyph painted in white. + .tb-connectivity-card-icon { + background: $tb-primary-color; + } + + .tb-connectivity-card-icon-mask { + background-color: white; + } } }