mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 09:26: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

59
css/pico.css
View file

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