steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

♿ Add an outline to keyboard-focused buttons

Browse source
This commit is contained in:
Steffo 2021-07-23 03:55:01 +02:00
parent 81efc147f8
commit 325c2698c5
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/rules/skeleton.less vendored
View file

@ -159,7 +159,7 @@
} }
&:focus-visible { &:focus-visible {
outline: 3px solid @hex-link-hover !important; outline: 4px solid @b7 !important;
} }
&:active { &:active {

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

@ -252,7 +252,7 @@
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1); background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
} }
.bluelib .button:focus-visible { .bluelib .button:focus-visible {
outline: 3px solid #006b6b !important; outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
} }
.bluelib .button:active { .bluelib .button:active {
background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1); background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);

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

File diff suppressed because one or more lines are too long

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

@ -907,7 +907,7 @@ body .button:focus-visible,
body button:focus-visible, body button:focus-visible,
.base-skeleton input[type="submit"]:focus-visible, .base-skeleton input[type="submit"]:focus-visible,
body input[type="submit"]:focus-visible { body input[type="submit"]:focus-visible {
outline: 3px solid #006b6b !important; outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
} }
.base-skeleton .button:active, .base-skeleton .button:active,
body .button:active, body .button:active,

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

File diff suppressed because one or more lines are too long

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

@ -252,7 +252,7 @@
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1); background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
} }
.bluelib .button:focus-visible { .bluelib .button:focus-visible {
outline: 3px solid #00ffff !important; outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
} }
.bluelib .button:active { .bluelib .button:active {
background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1); background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);

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

File diff suppressed because one or more lines are too long

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

@ -907,7 +907,7 @@ body .button:focus-visible,
body button:focus-visible, body button:focus-visible,
.base-skeleton input[type="submit"]:focus-visible, .base-skeleton input[type="submit"]:focus-visible,
body input[type="submit"]:focus-visible { body input[type="submit"]:focus-visible {
outline: 3px solid #00ffff !important; outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
} }
.base-skeleton .button:active, .base-skeleton .button:active,
body .button:active, body .button:active,

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

File diff suppressed because one or more lines are too long