Fix social icons (#122)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-01 22:52:15 +03:00 committed by GitHub
parent 25eb047538
commit 667e577575
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -67,14 +67,38 @@ let displayItems: Item[] = []
<div class="container">
{#each displayItems as item}
<Icon icon={item.icon} size={'medium'}/>
<div class="circle">
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
</div>
{/each}
</div>
<style lang="scss">
.container {
display: flex;
flex-direction: row-reverse;
align-items: center;
:global(svg + svg) { margin-left: .25rem; }
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
border: 1px solid var(--theme-bg-focused-color);
border-radius: 50%;
cursor: pointer;
.icon {
// transform-origin: center center;
// transform: scale(.75);
opacity: .4;
}
&:hover {
border-color: var(--theme-bg-focused-border);
.icon { opacity: 1; }
}
}
.circle + .circle { margin-right: .25rem; }
}
</style>