Browse Source

feat(iot-hub): polish connectivity card selected/idle states

- 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.
pull/15615/head
Igor Kulikov 5 months ago
parent
commit
94ceb360cc
  1. 12
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss

12
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss

@ -115,7 +115,7 @@
padding: 16px; padding: 16px;
height: 116px; height: 116px;
background: rgba($tb-primary-color, 0.04); background: rgba($tb-primary-color, 0.04);
border: 1px solid rgba(0, 0, 0, 0.12); border: 1px solid transparent;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
@ -128,6 +128,16 @@
&.selected { &.selected {
box-shadow: 0 0 0 1px $tb-primary-color inset; 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;
}
} }
} }

Loading…
Cancel
Save