mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 18:06: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.slim.css
View file

@ -889,7 +889,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -898,7 +898,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);
@ -926,9 +926,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));
@ -937,7 +938,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);
}
@ -961,7 +962,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);
@ -977,9 +978,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);
}
@ -987,7 +988,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);
}
@ -995,7 +996,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);
@ -1010,9 +1011,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);
}
@ -1020,7 +1021,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);
}
@ -1028,7 +1029,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);
}
@ -1042,9 +1043,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);
}
@ -1052,7 +1053,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,
@ -1065,16 +1066,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,
@ -1087,9 +1088,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);
}
@ -1098,7 +1099,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;
}