Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DH/Improve navigation button style #678

Merged
merged 5 commits into from
Nov 16, 2023
Merged

DH/Improve navigation button style #678

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bf5eac0
feat(dh): change return button style
cmoinier Nov 10, 2023
d76ae51
feat(dh): add mix-blend
cmoinier Nov 10, 2023
56b28e7
feat(dh): address review
cmoinier Nov 10, 2023
cba4340
fix(dh): btn not visible if white background
cmoinier Nov 15, 2023
ab9e549
style(datahub): use blur for transparent buttons
fgravin Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<button
class="group flex items-center justify-center p-1 bg-white opacity-80 box-shadow-xl shadow-[4.0px_8.0px_8.0px_rgba(0,0,0,0.38)] mix-blend-luminosity text-black rounded hover:opacity-100"
type="button"
class="relative backdrop-blur group flex items-center justify-center p-1 text-main rounded overflow-hidden shadow-2xl"
>
<mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
<span class="mx-2 hidden group-hover:inline">{{ label }}</span>
<div
class="absolute -z-0 inset-0 bg-white opacity-60 group-hover:opacity-100 transition duration-[20ms]"
cmoinier marked this conversation as resolved.
Show resolved Hide resolved
></div>
<mat-icon class="z-0 material-symbols-outlined align-middle">{{
icon
}}</mat-icon>
<span class="z-0 mx-2 hidden group-hover:inline">{{ label }}</span>
</button>
Loading