mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
Allow role=button to any HTML element
This commit is contained in:
Lucas Larroche
parent
7c424e8e01
commit
270a128de4
17 changed files with 95 additions and 89 deletions
|
|
@ -909,7 +909,7 @@ button {
|
|||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
[role=button] {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -918,7 +918,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);
|
||||
|
|
@ -947,9 +947,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));
|
||||
|
|
@ -958,7 +959,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);
|
||||
}
|
||||
|
|
@ -983,7 +984,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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
59
css/pico.css
59
css/pico.css
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -879,7 +879,7 @@ button {
|
|||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
[role=button] {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -888,7 +888,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);
|
||||
|
|
@ -917,9 +917,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));
|
||||
|
|
@ -928,7 +929,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);
|
||||
}
|
||||
|
|
@ -953,7 +954,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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue