mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Merge pull request #131 from picocss/role-button
Allow role=button to any HTML element
This commit is contained in:
Lucas Larroche
GitHub
commit
6837e3071c
19 changed files with 227 additions and 220 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,18 +947,19 @@ 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 {
|
||||
--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));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
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
90
css/pico.css
90
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,42 +998,28 @@ 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 {
|
||||
--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));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
input[type=reset] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
input[type=reset]: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);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
input[type=submit].secondary,
|
||||
input[type=button].secondary,
|
||||
input[type=reset].secondary,
|
||||
a[role=button].secondary {
|
||||
input[type=reset],
|
||||
[role=button].secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
|
|
@ -1046,28 +1032,30 @@ input[type=submit].secondary:focus,
|
|||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
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 {
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
}
|
||||
button.secondary:focus,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset].secondary:focus,
|
||||
a[role=button].secondary:focus {
|
||||
input[type=reset]: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);
|
||||
}
|
||||
|
||||
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,25 +1070,27 @@ 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);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
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,17 +1104,18 @@ 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);
|
||||
}
|
||||
|
||||
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 +1128,17 @@ 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 +1151,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 +1162,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,18 +917,19 @@ 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 {
|
||||
--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));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
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,42 +926,28 @@ 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 {
|
||||
--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));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
input[type=reset] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
input[type=reset]: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);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
input[type=submit].secondary,
|
||||
input[type=button].secondary,
|
||||
input[type=reset].secondary,
|
||||
a[role=button].secondary {
|
||||
input[type=reset],
|
||||
[role=button].secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
|
|
@ -974,28 +960,30 @@ input[type=submit].secondary:focus,
|
|||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
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 {
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
}
|
||||
button.secondary:focus,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset].secondary:focus,
|
||||
a[role=button].secondary:focus {
|
||||
input[type=reset]: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);
|
||||
}
|
||||
|
||||
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,25 +998,27 @@ 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);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
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,17 +1032,18 @@ 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);
|
||||
}
|
||||
|
||||
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 +1056,17 @@ 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 +1079,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 +1090,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
File diff suppressed because one or more lines are too long
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><<b>a</b> <i>role</i>=<u>"button"></u></code> if you need an inline element.</p>
|
||||
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><i>role</i>=<u>"button"</code> on an inline element if you need an inline button.</p>
|
||||
<article aria-label="Inline buttons examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -83,6 +83,7 @@ a[role="button"] {
|
|||
--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));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -91,6 +92,107 @@ a[role="button"] {
|
|||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
input[type="button"].secondary,
|
||||
input[type="reset"],
|
||||
[role="button"].secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
button.contrast,
|
||||
input[type="submit"].contrast,
|
||||
input[type="button"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
[role="button"].contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
input[type="button"].outline,
|
||||
input[type="reset"].outline,
|
||||
[role="button"].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="button"].outline.secondary,
|
||||
input[type="reset"].outline.secondary,
|
||||
[role="button"].outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="button"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
[role="button"].outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
|
|
@ -110,97 +212,16 @@ input[type="reset"] {
|
|||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
&.outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
&.outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
&.outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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