vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #688 from svenson95/style-button-hover-2

Browse Source 
style: update button hover effect
This commit is contained in:
Laforge Thomas
2024-03-13 22:26:30 +01:00
committed by GitHub
parent 849b90a7b7 7fef31a80c
commit 17108c3234
2 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/components/SubscriptionForm.astro
View File

@@ -85,10 +85,12 @@ const { data } = await getEntry('i18n', lang ?? 'en');
text-decoration: none; text-decoration: none;
font-size: var(--sl-text-sm); font-size: var(--sl-text-sm);
background: var(--sl-color-text-accent); background: var(--sl-color-text-accent);
transition: var(--button-transition);
&:hover { &:hover {
top: unset; top: unset;
opacity: unset; opacity: var(--button-hover-opacity);
transition: var(--button-transition);
} }
} }
} }

18
docs/src/styles/custom-css.css
View File

@@ -16,6 +16,9 @@
--color-btn: var(--sl-color-white); --color-btn: var(--sl-color-white);
--color-chip: rgb(35, 38, 47); --color-chip: rgb(35, 38, 47);
--color-chip-border: rgba(240, 246, 252, 0.1); --color-chip-border: rgba(240, 246, 252, 0.1);
--button-transition: opacity 100ms ease-in-out;
--button-hover-opacity: 0.85;
} }
:root[data-theme='light'], :root[data-theme='light'],
@@ -50,6 +53,21 @@
margin: 0px 2px; margin: 0px 2px;
} }
a.action,
.article-footer > a,
.action-footer > a.action-button {
transition: var(--button-transition);
&:hover {
opacity: var(--button-hover-opacity);
transition: var(--button-transition);
&:not(.primary):not(.button-sponsor) {
opacity: 0.66;
}
}
}
.article-footer { .article-footer {
margin-top: 3rem !important; margin-top: 3rem !important;
display: flex; display: flex;