mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow role=button to any HTML element

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

15
css/pico.classless.css
View file

@ -909,7 +909,7 @@ button {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
a[role=button] { [role=button] {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -918,7 +918,7 @@ button,
input[type=submit], input[type=submit],
input[type=button], input[type=button],
input[type=reset], input[type=reset],
a[role=button] { [role=button] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
@ -947,9 +947,10 @@ input[type=button]:focus,
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:hover, [role=button]:hover,
a[role=button]:active, [role=button]:active,
a[role=button]:focus { [role=button]:focus {
--color: var(--primary-inverse);
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -958,7 +959,7 @@ button:focus,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:focus { [role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus); 0 0 0 var(--outline-width) var(--primary-focus);
} }
@ -983,7 +984,7 @@ input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]), a[role=button]:not([href]),
a[role=button][disabled] { [role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

59
css/pico.css
View file

@ -960,7 +960,7 @@ button {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
a[role=button] { [role=button] {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -969,7 +969,7 @@ button,
input[type=submit], input[type=submit],
input[type=button], input[type=button],
input[type=reset], input[type=reset],
a[role=button] { [role=button] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
@ -998,9 +998,10 @@ input[type=button]:focus,
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:hover, [role=button]:hover,
a[role=button]:active, [role=button]:active,
a[role=button]:focus { [role=button]:focus {
--color: var(--primary-inverse);
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -1009,7 +1010,7 @@ button:focus,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:focus { [role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus); 0 0 0 var(--outline-width) var(--primary-focus);
} }
@ -1033,7 +1034,7 @@ button.secondary,
input[type=submit].secondary, input[type=submit].secondary,
input[type=button].secondary, input[type=button].secondary,
input[type=reset].secondary, input[type=reset].secondary,
a[role=button].secondary { [role=button].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
@ -1049,9 +1050,9 @@ input[type=button].secondary:focus,
input[type=reset].secondary:hover, input[type=reset].secondary:hover,
input[type=reset].secondary:active, input[type=reset].secondary:active,
input[type=reset].secondary:focus, input[type=reset].secondary:focus,
a[role=button].secondary:hover, [role=button].secondary:hover,
a[role=button].secondary:active, [role=button].secondary:active,
a[role=button].secondary:focus { [role=button].secondary:focus {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }
@ -1059,7 +1060,7 @@ button.secondary:focus,
input[type=submit].secondary:focus, input[type=submit].secondary:focus,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset].secondary:focus, input[type=reset].secondary:focus,
a[role=button].secondary:focus { [role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus); 0 0 0 var(--outline-width) var(--secondary-focus);
} }
@ -1067,7 +1068,7 @@ button.contrast,
input[type=submit].contrast, input[type=submit].contrast,
input[type=button].contrast, input[type=button].contrast,
input[type=reset].contrast, input[type=reset].contrast,
a[role=button].contrast { [role=button].contrast {
--background-color: var(--contrast); --background-color: var(--contrast);
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
@ -1082,9 +1083,9 @@ input[type=button].contrast:focus,
input[type=reset].contrast:hover, input[type=reset].contrast:hover,
input[type=reset].contrast:active, input[type=reset].contrast:active,
input[type=reset].contrast:focus, input[type=reset].contrast:focus,
a[role=button].contrast:hover, [role=button].contrast:hover,
a[role=button].contrast:active, [role=button].contrast:active,
a[role=button].contrast:focus { [role=button].contrast:focus {
--background-color: var(--contrast-hover); --background-color: var(--contrast-hover);
--border-color: var(--contrast-hover); --border-color: var(--contrast-hover);
} }
@ -1092,7 +1093,7 @@ button.contrast:focus,
input[type=submit].contrast:focus, input[type=submit].contrast:focus,
input[type=button].contrast:focus, input[type=button].contrast:focus,
input[type=reset].contrast:focus, input[type=reset].contrast:focus,
a[role=button].contrast:focus { [role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus); 0 0 0 var(--outline-width) var(--contrast-focus);
} }
@ -1100,7 +1101,7 @@ button.outline,
input[type=submit].outline, input[type=submit].outline,
input[type=button].outline, input[type=button].outline,
input[type=reset].outline, input[type=reset].outline,
a[role=button].outline { [role=button].outline {
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --color: var(--primary);
} }
@ -1114,9 +1115,9 @@ input[type=button].outline:focus,
input[type=reset].outline:hover, input[type=reset].outline:hover,
input[type=reset].outline:active, input[type=reset].outline:active,
input[type=reset].outline:focus, input[type=reset].outline:focus,
a[role=button].outline:hover, [role=button].outline:hover,
a[role=button].outline:active, [role=button].outline:active,
a[role=button].outline:focus { [role=button].outline:focus {
--background-color: transparent; --background-color: transparent;
--color: var(--primary-hover); --color: var(--primary-hover);
} }
@ -1124,7 +1125,7 @@ button.outline.secondary,
input[type=submit].outline.secondary, input[type=submit].outline.secondary,
input[type=button].outline.secondary, input[type=button].outline.secondary,
input[type=reset].outline.secondary, input[type=reset].outline.secondary,
a[role=button].outline.secondary { [role=button].outline.secondary {
--color: var(--secondary); --color: var(--secondary);
} }
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@ -1137,16 +1138,16 @@ input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary:hover, input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active, input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus, input[type=reset].outline.secondary:focus,
a[role=button].outline.secondary:hover, [role=button].outline.secondary:hover,
a[role=button].outline.secondary:active, [role=button].outline.secondary:active,
a[role=button].outline.secondary:focus { [role=button].outline.secondary:focus {
--color: var(--secondary-hover); --color: var(--secondary-hover);
} }
button.outline.contrast, button.outline.contrast,
input[type=submit].outline.contrast, input[type=submit].outline.contrast,
input[type=button].outline.contrast, input[type=button].outline.contrast,
input[type=reset].outline.contrast, input[type=reset].outline.contrast,
a[role=button].outline.contrast { [role=button].outline.contrast {
--color: var(--contrast); --color: var(--contrast);
} }
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@ -1159,9 +1160,9 @@ input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast:hover, input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active, input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus, input[type=reset].outline.contrast:focus,
a[role=button].outline.contrast:hover, [role=button].outline.contrast:hover,
a[role=button].outline.contrast:active, [role=button].outline.contrast:active,
a[role=button].outline.contrast:focus { [role=button].outline.contrast:focus {
--color: var(--contrast-hover); --color: var(--contrast-hover);
} }
@ -1170,7 +1171,7 @@ input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]), a[role=button]:not([href]),
a[role=button][disabled] { [role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

15
css/pico.fluid.classless.css
View file

@ -879,7 +879,7 @@ button {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
a[role=button] { [role=button] {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -888,7 +888,7 @@ button,
input[type=submit], input[type=submit],
input[type=button], input[type=button],
input[type=reset], input[type=reset],
a[role=button] { [role=button] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
@ -917,9 +917,10 @@ input[type=button]:focus,
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:hover, [role=button]:hover,
a[role=button]:active, [role=button]:active,
a[role=button]:focus { [role=button]:focus {
--color: var(--primary-inverse);
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -928,7 +929,7 @@ button:focus,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:focus { [role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus); 0 0 0 var(--outline-width) var(--primary-focus);
} }
@ -953,7 +954,7 @@ input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]), a[role=button]:not([href]),
a[role=button][disabled] { [role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

59
css/pico.slim.css
View file

@ -889,7 +889,7 @@ button {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
a[role=button] { [role=button] {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -898,7 +898,7 @@ button,
input[type=submit], input[type=submit],
input[type=button], input[type=button],
input[type=reset], input[type=reset],
a[role=button] { [role=button] {
--background-color: var(--primary); --background-color: var(--primary);
--border-color: var(--primary); --border-color: var(--primary);
--color: var(--primary-inverse); --color: var(--primary-inverse);
@ -926,9 +926,10 @@ input[type=button]:focus,
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:hover, [role=button]:hover,
a[role=button]:active, [role=button]:active,
a[role=button]:focus { [role=button]:focus {
--color: var(--primary-inverse);
--background-color: var(--primary-hover); --background-color: var(--primary-hover);
--border-color: var(--primary-hover); --border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -937,7 +938,7 @@ button:focus,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button]:focus, input[type=button]:focus,
input[type=reset]:focus, input[type=reset]:focus,
a[role=button]:focus { [role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus); 0 0 0 var(--outline-width) var(--primary-focus);
} }
@ -961,7 +962,7 @@ button.secondary,
input[type=submit].secondary, input[type=submit].secondary,
input[type=button].secondary, input[type=button].secondary,
input[type=reset].secondary, input[type=reset].secondary,
a[role=button].secondary { [role=button].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
@ -977,9 +978,9 @@ input[type=button].secondary:focus,
input[type=reset].secondary:hover, input[type=reset].secondary:hover,
input[type=reset].secondary:active, input[type=reset].secondary:active,
input[type=reset].secondary:focus, input[type=reset].secondary:focus,
a[role=button].secondary:hover, [role=button].secondary:hover,
a[role=button].secondary:active, [role=button].secondary:active,
a[role=button].secondary:focus { [role=button].secondary:focus {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }
@ -987,7 +988,7 @@ button.secondary:focus,
input[type=submit].secondary:focus, input[type=submit].secondary:focus,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset].secondary:focus, input[type=reset].secondary:focus,
a[role=button].secondary:focus { [role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus); 0 0 0 var(--outline-width) var(--secondary-focus);
} }
@ -995,7 +996,7 @@ button.contrast,
input[type=submit].contrast, input[type=submit].contrast,
input[type=button].contrast, input[type=button].contrast,
input[type=reset].contrast, input[type=reset].contrast,
a[role=button].contrast { [role=button].contrast {
--background-color: var(--contrast); --background-color: var(--contrast);
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
@ -1010,9 +1011,9 @@ input[type=button].contrast:focus,
input[type=reset].contrast:hover, input[type=reset].contrast:hover,
input[type=reset].contrast:active, input[type=reset].contrast:active,
input[type=reset].contrast:focus, input[type=reset].contrast:focus,
a[role=button].contrast:hover, [role=button].contrast:hover,
a[role=button].contrast:active, [role=button].contrast:active,
a[role=button].contrast:focus { [role=button].contrast:focus {
--background-color: var(--contrast-hover); --background-color: var(--contrast-hover);
--border-color: var(--contrast-hover); --border-color: var(--contrast-hover);
} }
@ -1020,7 +1021,7 @@ button.contrast:focus,
input[type=submit].contrast:focus, input[type=submit].contrast:focus,
input[type=button].contrast:focus, input[type=button].contrast:focus,
input[type=reset].contrast:focus, input[type=reset].contrast:focus,
a[role=button].contrast:focus { [role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus); 0 0 0 var(--outline-width) var(--contrast-focus);
} }
@ -1028,7 +1029,7 @@ button.outline,
input[type=submit].outline, input[type=submit].outline,
input[type=button].outline, input[type=button].outline,
input[type=reset].outline, input[type=reset].outline,
a[role=button].outline { [role=button].outline {
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --color: var(--primary);
} }
@ -1042,9 +1043,9 @@ input[type=button].outline:focus,
input[type=reset].outline:hover, input[type=reset].outline:hover,
input[type=reset].outline:active, input[type=reset].outline:active,
input[type=reset].outline:focus, input[type=reset].outline:focus,
a[role=button].outline:hover, [role=button].outline:hover,
a[role=button].outline:active, [role=button].outline:active,
a[role=button].outline:focus { [role=button].outline:focus {
--background-color: transparent; --background-color: transparent;
--color: var(--primary-hover); --color: var(--primary-hover);
} }
@ -1052,7 +1053,7 @@ button.outline.secondary,
input[type=submit].outline.secondary, input[type=submit].outline.secondary,
input[type=button].outline.secondary, input[type=button].outline.secondary,
input[type=reset].outline.secondary, input[type=reset].outline.secondary,
a[role=button].outline.secondary { [role=button].outline.secondary {
--color: var(--secondary); --color: var(--secondary);
} }
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@ -1065,16 +1066,16 @@ input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary:hover, input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active, input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus, input[type=reset].outline.secondary:focus,
a[role=button].outline.secondary:hover, [role=button].outline.secondary:hover,
a[role=button].outline.secondary:active, [role=button].outline.secondary:active,
a[role=button].outline.secondary:focus { [role=button].outline.secondary:focus {
--color: var(--secondary-hover); --color: var(--secondary-hover);
} }
button.outline.contrast, button.outline.contrast,
input[type=submit].outline.contrast, input[type=submit].outline.contrast,
input[type=button].outline.contrast, input[type=button].outline.contrast,
input[type=reset].outline.contrast, input[type=reset].outline.contrast,
a[role=button].outline.contrast { [role=button].outline.contrast {
--color: var(--contrast); --color: var(--contrast);
} }
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@ -1087,9 +1088,9 @@ input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast:hover, input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active, input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus, input[type=reset].outline.contrast:focus,
a[role=button].outline.contrast:hover, [role=button].outline.contrast:hover,
a[role=button].outline.contrast:active, [role=button].outline.contrast:active,
a[role=button].outline.contrast:focus { [role=button].outline.contrast:focus {
--color: var(--contrast-hover); --color: var(--contrast-hover);
} }
@ -1098,7 +1099,7 @@ input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]), a[role=button]:not([href]),
a[role=button][disabled] { [role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

12
scss/content/_button.scss
View file

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