steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2025-03-11 11:07:51 +00:00
Code Activity

♿ Make the .element-anchor underline thicker if navigating with keyboard

Browse source
This commit is contained in:
Steffo 2021-07-23 03:41:20 +02:00
parent 5166f2dcde
commit a78d94bad8
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 64 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/rules/skeleton.less vendored
View file

@ -354,10 +354,14 @@
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
&:hover {
&:hover, &:focus {
.bluelib-color(@hex-link-hover);
}
&:focus-visible {
text-decoration-thickness: 2px;
}
&:active {
.bluelib-color(@hex-link-active);
}
@ -365,7 +369,7 @@
&@{status-disabled} {
text-decoration-style: dashed;
&:hover {
&:hover, &:focus {
.bluelib-color(@hex-link);
}

9
src/targets/paper.module.css
View file

@ -409,11 +409,15 @@
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
}
.bluelib .element-anchor:hover {
.bluelib .element-anchor:hover,
.bluelib .element-anchor:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 107;
--bluelib-color-b: 107;
}
.bluelib .element-anchor:focus-visible {
text-decoration-thickness: 2px;
}
.bluelib .element-anchor:active {
--bluelib-color-r: 0;
--bluelib-color-g: 65;
@ -422,7 +426,8 @@
.bluelib .element-anchor.status-disabled {
text-decoration-style: dashed;
}
.bluelib .element-anchor.status-disabled:hover {
.bluelib .element-anchor.status-disabled:hover,
.bluelib .element-anchor.status-disabled:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 147;
--bluelib-color-b: 147;

2
src/targets/paper.module.css.map
View file

File diff suppressed because one or more lines are too long

22
src/targets/paper.root.css
View file

@ -1712,11 +1712,21 @@ body a {
.base-skeleton .element-anchor:hover,
body .element-anchor:hover,
.base-skeleton a:hover,
body a:hover {
body a:hover,
.base-skeleton .element-anchor:focus,
body .element-anchor:focus,
.base-skeleton a:focus,
body a:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 107;
--bluelib-color-b: 107;
}
.base-skeleton .element-anchor:focus-visible,
body .element-anchor:focus-visible,
.base-skeleton a:focus-visible,
body a:focus-visible {
text-decoration-thickness: 2px;
}
.base-skeleton .element-anchor:active,
body .element-anchor:active,
.base-skeleton a:active,
@ -1742,7 +1752,15 @@ body a[disabled]:hover,
.base-skeleton .element-anchor .status-disabled:hover,
body .element-anchor .status-disabled:hover,
.base-skeleton a .status-disabled:hover,
body a .status-disabled:hover {
body a .status-disabled:hover,
.base-skeleton .element-anchor[disabled]:focus,
body .element-anchor[disabled]:focus,
.base-skeleton a[disabled]:focus,
body a[disabled]:focus,
.base-skeleton .element-anchor .status-disabled:focus,
body .element-anchor .status-disabled:focus,
.base-skeleton a .status-disabled:focus,
body a .status-disabled:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 147;
--bluelib-color-b: 147;

2
src/targets/paper.root.css.map
View file

File diff suppressed because one or more lines are too long

9
src/targets/royalblue.module.css
View file

@ -409,11 +409,15 @@
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
}
.bluelib .element-anchor:hover {
.bluelib .element-anchor:hover,
.bluelib .element-anchor:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 255;
--bluelib-color-b: 255;
}
.bluelib .element-anchor:focus-visible {
text-decoration-thickness: 2px;
}
.bluelib .element-anchor:active {
--bluelib-color-r: 160;
--bluelib-color-g: 255;
@ -422,7 +426,8 @@
.bluelib .element-anchor.status-disabled {
text-decoration-style: dashed;
}
.bluelib .element-anchor.status-disabled:hover {
.bluelib .element-anchor.status-disabled:hover,
.bluelib .element-anchor.status-disabled:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 202;
--bluelib-color-b: 202;

2
src/targets/royalblue.module.css.map
View file

File diff suppressed because one or more lines are too long

22
src/targets/royalblue.root.css
View file

@ -1712,11 +1712,21 @@ body a {
.base-skeleton .element-anchor:hover,
body .element-anchor:hover,
.base-skeleton a:hover,
body a:hover {
body a:hover,
.base-skeleton .element-anchor:focus,
body .element-anchor:focus,
.base-skeleton a:focus,
body a:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 255;
--bluelib-color-b: 255;
}
.base-skeleton .element-anchor:focus-visible,
body .element-anchor:focus-visible,
.base-skeleton a:focus-visible,
body a:focus-visible {
text-decoration-thickness: 2px;
}
.base-skeleton .element-anchor:active,
body .element-anchor:active,
.base-skeleton a:active,
@ -1742,7 +1752,15 @@ body a[disabled]:hover,
.base-skeleton .element-anchor .status-disabled:hover,
body .element-anchor .status-disabled:hover,
.base-skeleton a .status-disabled:hover,
body a .status-disabled:hover {
body a .status-disabled:hover,
.base-skeleton .element-anchor[disabled]:focus,
body .element-anchor[disabled]:focus,
.base-skeleton a[disabled]:focus,
body a[disabled]:focus,
.base-skeleton .element-anchor .status-disabled:focus,
body .element-anchor .status-disabled:focus,
.base-skeleton a .status-disabled:focus,
body a .status-disabled:focus {
--bluelib-color-r: 0;
--bluelib-color-g: 202;
--bluelib-color-b: 202;

2
src/targets/royalblue.root.css.map
View file

File diff suppressed because one or more lines are too long