The Wayback Machine - https://web.archive.org/web/20210812011240/https://github.com/twbs/bootstrap/issues/34716
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.

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

Using CSS filter for link hover/active states! Is 2021 and support is great! #34716

Open
BicanMarianValeriu opened this issue Aug 9, 2021 · 2 comments
Labels

Comments

@BicanMarianValeriu
Copy link

@BicanMarianValeriu BicanMarianValeriu commented Aug 9, 2021

This is a topic to discuss/debate.
I find it hard or unnecessary to overwrite hover/active link colors, especially when using css variables.
I was thinking of using an approach in ./reboot.scss like:
https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript

`a {
color: $link-color;
text-decoration: $link-decoration;

&:hover {
--hover-brightness: #{$link-hover-brightness};
filter: brightness(var(--hover-brightness)); // or some calc function using existing rgb variables (or hsl - see bellow)
text-decoration: $link-hover-decoration;
}
}`

`:root {
--link-color-h: 211;
--link-color-s: 100%;
--link-color-l: 50%;
--link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

--link-color: hsl(var(--link-color-hsl));
--link-color-10: hsla(var(--link-color-hsl), .1);
--link-color-20: hsla(var(--link-color-hsl), .2);
--link-color-30: hsla(var(--link-color-hsl), .3);
--link-color-40: hsla(var(--link-color-hsl), .4);
--link-color-50: hsla(var(--link-color-hsl), .5);
--link-color-60: hsla(var(--link-color-hsl), .6);
--link-color-70: hsla(var(--link-color-hsl), .7);
--link-color-80: hsla(var(--link-color-hsl), .8);
--link-color-90: hsla(var(--link-color-hsl), .9);

--link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
--link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

--link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
--link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

--link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
--link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}`

In this way, you just specify the link color and the CSS does the rest without the need to modify or write more css
Screenshot (1030)
.

@Shorla
Copy link

@Shorla Shorla commented Aug 10, 2021

I'm new here and would like to try something, can you put me through so I can fix that?

@BicanMarianValeriu
Copy link
Author

@BicanMarianValeriu BicanMarianValeriu commented Aug 10, 2021

This is not a bug - is a feature request regarding link colors!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2 participants