From c70bfe55c9a6688a1300409de5687d181f80625c Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 21 Jan 2020 12:32:06 +0800 Subject: Hide delete icons initially to not overflow interface Signed-off-by: Jan-Christoph Borchardt --- css/Properties/Properties.scss | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) (limited to 'css') diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 8dbf2785..161b2399 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -135,6 +135,11 @@ $property-ext-padding-right: 8px; } } + // Hide delete buttons initially + .action-item.icon-delete { + opacity: 0; + } + // Property value within row, after label &__value { flex: 1 1; @@ -152,18 +157,22 @@ $property-ext-padding-right: 8px; input&--with-ext { // ext icon width + 8px padding padding-right: 24px; - &:hover, - &:focus, - &:active { - ~ .property__ext { - opacity: .5; - } + } + + // Show ext and delete icon permanently on focus + &:hover, + &:focus, + &:active { + ~ .property__ext, + ~ .action-item.icon-delete { + opacity: .5; } } } - // show ext button on full row hover - &:hover &__ext { + // Show ext and delete buttons on full row hover + &:hover &__ext, + &:hover .action-item.icon-delete { opacity: .5; } -- cgit v1.2.3