Allow role=button to any HTML element

This commit is contained in:
Lucas Larroche 2022-01-16 11:41:50 +07:00
parent 7c424e8e01
commit 270a128de4
17 changed files with 95 additions and 89 deletions

View file

@ -43,7 +43,7 @@ button {
margin-bottom: var(--spacing);
}
a[role="button"] {
[role="button"] {
display: inline-block;
text-decoration: none;
}
@ -52,7 +52,7 @@ button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
[role="button"] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -80,6 +80,7 @@ a[role="button"] {
&:hover,
&:active,
&:focus {
--color: var(--primary-inverse);
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -117,7 +118,7 @@ input[type="reset"] {
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
[role="button"] {
// Secondary
&.secondary {
--background-color: var(--secondary);
@ -195,12 +196,13 @@ input[type="reset"] {
}
// Button [disabled]
// 1. Links without href are disabled by default
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"]:not([href]),
a[role="button"][disabled] {
a[role="button"]:not([href]), // 1
[role="button"][disabled] {
opacity: 0.5;
pointer-events: none;
}