diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-11-13 17:33:46 +0100 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-11-13 17:44:02 +0100 |
commit | bbc3d8e130bda3d17ad8de310a94c01c4531134c (patch) | |
tree | 99928de259217361e3359ce08f8cdb1362886dc0 /css/Properties | |
parent | 91d64916333490b70c636a5a25627e8d6b39db5d (diff) |
Added external link support
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'css/Properties')
-rw-r--r-- | css/Properties/Properties.scss | 82 |
1 files changed, 55 insertions, 27 deletions
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 817627c8..d27ee5f8 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -35,37 +35,12 @@ &--addressbooks &__delete { display: none !important; } - - &__delete { - position: absolute; - top: 0; - right: 0; - width: $grid-height-unit; - height: $grid-height-unit; - margin: 0; - border: 0; - background-color: transparent; - opacity: .5; - display: none; - &:hover, - a:active, - a:focus { - opacity: .7; - } - } - - &:hover &__delete, - a:active &__delete, - a:focus &__delete { - display: block; - } - + // property row &__row { display: flex; align-items: center; padding-right: 44px; - // height: $grid-height-unit; position: relative; } @@ -129,7 +104,7 @@ } } - // property value within row, after label + // Property value within row, after label &__value { flex: 1 1; @@ -143,5 +118,58 @@ &:read-only { border-color: var(--color-border-dark); } + input&--with-ext { + // ext icon width + 8px padding + padding-right: 24px; + &:hover, + &:focus, + &:active { + ~ .property__ext, + ~ .property__delete { + opacity: .5; + } + } + } + } + + // show ext & delete button on full row hover + &:hover &__ext, + &:hover &__delete { + opacity: .5; + } + + // External link (tel, mailto, http, ftp...) + &__ext { + position: absolute; + // property row rightPadding + 8px; + right: 52px; + opacity: 0; + &:hover, + &:focus, + &:active { + opacity: .7; + // still show the delete button for keyboard accessibility + ~ .property__delete { + opacity: .7; + } + } + } + + // Delete property button + &__delete { + position: absolute; + top: 0; + right: 0; + width: $grid-height-unit; + height: $grid-height-unit; + margin: 0; + border: 0; + background-color: transparent; + opacity: 0; + &:hover, + &:active, + &:focus { + opacity: .7; + } } } |