diff --git a/src/components/AddressList.vue b/src/components/AddressList.vue index c5b1a9f4b..99b66075d 100644 --- a/src/components/AddressList.vue +++ b/src/components/AddressList.vue @@ -3,6 +3,7 @@
- + {{ addressInfo.label }} @@ -47,6 +47,10 @@ import TwoLeafStakingIcon from './icons/Staking/TwoLeafStakingIcon.vue'; export default defineComponent({ props: { + embedded: { + type: Boolean, + default: false, + }, addressInfo: { type: Object as () => AddressInfo | Pick & { @@ -135,17 +139,22 @@ export default defineComponent({ right: 0; bottom: -0.75rem; padding: 0.25rem; - background: white; border-radius: 50%; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15); + } + + > svg.vesting-icon { + background: white; color: nimiq-blue(0.7); } - > svg.staking-icon { + > svg.two-leaf-staking-icon { font-size: 2.25rem; - padding: 0; + padding: 0.125rem !important; background: var(--nimiq-green-bg); color: var(--nimiq-white); + outline: 2px solid #E7E8EA; + transition: outline 350ms var(--nimiq-ease); ::v-deep path { stroke-width: 1.25px; @@ -153,6 +162,19 @@ export default defineComponent({ } } +.address-button:not(.active):hover, +.address-button:not(.active):focus { + .identicon-wrapper > svg.two-leaf-staking-icon { + outline-color: #DBDCE0; + } +} + +.address-button.active { + .identicon-wrapper > svg.two-leaf-staking-icon { + outline-color: white; + } +} + .label { font-weight: 600; padding: 0 2rem;