beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added ARIA support for button elements, #40

Browse source
This commit is contained in:
Angelos Chalaris 2017-01-13 00:29:46 +02:00
parent e5a9ba5661
commit a8fea00c58
5 changed files with 158 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
dist/mini-default.css vendored
View file

@ -780,7 +780,9 @@ button {
overflow: visible; overflow: visible;
text-transform: none; } text-transform: none; }
button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button { button, [type="button"], [type="submit"], [type="reset"],
a.button, label.button, .button,
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
display: inline-block; display: inline-block;
background: rgba(189, 189, 189, 0.65); background: rgba(189, 189, 189, 0.65);
color: #212121; color: #212121;
@ -793,10 +795,20 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
-webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
cursor: pointer; } cursor: pointer; }
button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, a.button:hover, a.button:active, a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus { button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus,
a.button:hover,
a.button:active,
a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus,
a[aria-role="button"]:hover,
a[aria-role="button"]:active,
a[aria-role="button"]:focus, label[aria-role="button"]:hover, label[aria-role="button"]:active, label[aria-role="button"]:focus, [aria-role="button"]:hover, [aria-role="button"]:active, [aria-role="button"]:focus {
background: rgba(189, 189, 189, 0.8); background: rgba(189, 189, 189, 0.8);
opacity: 1; } opacity: 1; }
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], a.button:disabled, a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled] { button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled],
a.button:disabled,
a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled],
a[aria-role="button"]:disabled,
a[aria-role="button"][disabled], label[aria-role="button"]:disabled, label[aria-role="button"][disabled], [aria-role="button"]:disabled, [aria-role="button"][disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.65; } opacity: 0.65; }
@ -820,7 +832,9 @@ input[type="file"] {
border-radius: 2px; border-radius: 2px;
margin: 8px; margin: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); } box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"], .button-group a.button, .button-group label.button, .button-group .button { .button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"],
.button-group a.button, .button-group label.button, .button-group .button,
.button-group a[aria-role="button"], .button-group label[aria-role="button"], .button-group [aria-role="button"] {
margin: 0; margin: 0;
-webkit-box-flex: 1; -webkit-box-flex: 1;
max-width: 100%; max-width: 100%;
@ -832,7 +846,43 @@ input[type="file"] {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
box-shadow: none; } box-shadow: none; }
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button { .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
.button-group button + a.button, .button-group button + label.button, .button-group button + .button,
.button-group button + a[aria-role="button"], .button-group button + label[aria-role="button"], .button-group button + [aria-role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
.button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button,
.button-group [type="button"] + a[aria-role="button"], .button-group [type="button"] + label[aria-role="button"], .button-group [type="button"] + [aria-role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
.button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button,
.button-group [type="submit"] + a[aria-role="button"], .button-group [type="submit"] + label[aria-role="button"], .button-group [type="submit"] + [aria-role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
.button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button,
.button-group [type="reset"] + a[aria-role="button"], .button-group [type="reset"] + label[aria-role="button"], .button-group [type="reset"] + [aria-role="button"],
.button-group a.button + button,
.button-group a.button + [type="button"],
.button-group a.button + [type="submit"],
.button-group a.button + [type="reset"],
.button-group a.button + a.button,
.button-group a.button + label.button,
.button-group a.button + .button,
.button-group a.button + a[aria-role="button"],
.button-group a.button + label[aria-role="button"],
.button-group a.button + [aria-role="button"], .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"],
.button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button,
.button-group label.button + a[aria-role="button"], .button-group label.button + label[aria-role="button"], .button-group label.button + [aria-role="button"], .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"],
.button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button,
.button-group .button + a[aria-role="button"], .button-group .button + label[aria-role="button"], .button-group .button + [aria-role="button"],
.button-group a[aria-role="button"] + button,
.button-group a[aria-role="button"] + [type="button"],
.button-group a[aria-role="button"] + [type="submit"],
.button-group a[aria-role="button"] + [type="reset"],
.button-group a[aria-role="button"] + a.button,
.button-group a[aria-role="button"] + label.button,
.button-group a[aria-role="button"] + .button,
.button-group a[aria-role="button"] + a[aria-role="button"],
.button-group a[aria-role="button"] + label[aria-role="button"],
.button-group a[aria-role="button"] + [aria-role="button"], .button-group label[aria-role="button"] + button, .button-group label[aria-role="button"] + [type="button"], .button-group label[aria-role="button"] + [type="submit"], .button-group label[aria-role="button"] + [type="reset"],
.button-group label[aria-role="button"] + a.button, .button-group label[aria-role="button"] + label.button, .button-group label[aria-role="button"] + .button,
.button-group label[aria-role="button"] + a[aria-role="button"], .button-group label[aria-role="button"] + label[aria-role="button"], .button-group label[aria-role="button"] + [aria-role="button"], .button-group [aria-role="button"] + button, .button-group [aria-role="button"] + [type="button"], .button-group [aria-role="button"] + [type="submit"], .button-group [aria-role="button"] + [type="reset"],
.button-group [aria-role="button"] + a.button, .button-group [aria-role="button"] + label.button, .button-group [aria-role="button"] + .button,
.button-group [aria-role="button"] + a[aria-role="button"], .button-group [aria-role="button"] + label[aria-role="button"], .button-group [aria-role="button"] + [aria-role="button"] {
border-left: 1px solid #9e9e9e; } border-left: 1px solid #9e9e9e; }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -840,7 +890,43 @@ input[type="file"] {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button { .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
.button-group button + a.button, .button-group button + label.button, .button-group button + .button,
.button-group button + a[aria-role="button"], .button-group button + label[aria-role="button"], .button-group button + [aria-role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
.button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button,
.button-group [type="button"] + a[aria-role="button"], .button-group [type="button"] + label[aria-role="button"], .button-group [type="button"] + [aria-role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
.button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button,
.button-group [type="submit"] + a[aria-role="button"], .button-group [type="submit"] + label[aria-role="button"], .button-group [type="submit"] + [aria-role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
.button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button,
.button-group [type="reset"] + a[aria-role="button"], .button-group [type="reset"] + label[aria-role="button"], .button-group [type="reset"] + [aria-role="button"],
.button-group a.button + button,
.button-group a.button + [type="button"],
.button-group a.button + [type="submit"],
.button-group a.button + [type="reset"],
.button-group a.button + a.button,
.button-group a.button + label.button,
.button-group a.button + .button,
.button-group a.button + a[aria-role="button"],
.button-group a.button + label[aria-role="button"],
.button-group a.button + [aria-role="button"], .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"],
.button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button,
.button-group label.button + a[aria-role="button"], .button-group label.button + label[aria-role="button"], .button-group label.button + [aria-role="button"], .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"],
.button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button,
.button-group .button + a[aria-role="button"], .button-group .button + label[aria-role="button"], .button-group .button + [aria-role="button"],
.button-group a[aria-role="button"] + button,
.button-group a[aria-role="button"] + [type="button"],
.button-group a[aria-role="button"] + [type="submit"],
.button-group a[aria-role="button"] + [type="reset"],
.button-group a[aria-role="button"] + a.button,
.button-group a[aria-role="button"] + label.button,
.button-group a[aria-role="button"] + .button,
.button-group a[aria-role="button"] + a[aria-role="button"],
.button-group a[aria-role="button"] + label[aria-role="button"],
.button-group a[aria-role="button"] + [aria-role="button"], .button-group label[aria-role="button"] + button, .button-group label[aria-role="button"] + [type="button"], .button-group label[aria-role="button"] + [type="submit"], .button-group label[aria-role="button"] + [type="reset"],
.button-group label[aria-role="button"] + a.button, .button-group label[aria-role="button"] + label.button, .button-group label[aria-role="button"] + .button,
.button-group label[aria-role="button"] + a[aria-role="button"], .button-group label[aria-role="button"] + label[aria-role="button"], .button-group label[aria-role="button"] + [aria-role="button"], .button-group [aria-role="button"] + button, .button-group [aria-role="button"] + [type="button"], .button-group [aria-role="button"] + [type="submit"], .button-group [aria-role="button"] + [type="reset"],
.button-group [aria-role="button"] + a.button, .button-group [aria-role="button"] + label.button, .button-group [aria-role="button"] + .button,
.button-group [aria-role="button"] + a[aria-role="button"], .button-group [aria-role="button"] + label[aria-role="button"], .button-group [aria-role="button"] + [aria-role="button"] {
border: 0; border: 0;
border-top: 1px solid #9e9e9e; } } border-top: 1px solid #9e9e9e; } }
[type="checkbox"], [type="radio"] { [type="checkbox"], [type="radio"] {
@ -893,53 +979,53 @@ input[type="file"] {
Custom elements for forms and input elements. Custom elements for forms and input elements.
*/ */
button.primary, [type="button"].primary, [type="submit"].primary, button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary { [type="reset"].primary, .button.primary, [aria-role="button"].primary {
background: rgba(2, 119, 189, 0.9); background: rgba(2, 119, 189, 0.9);
color: #fafafa; } color: #fafafa; }
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus, button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
[type="reset"].primary:hover, [type="reset"].primary:hover,
[type="reset"].primary:active, [type="reset"].primary:active,
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus { [type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus, [aria-role="button"].primary:hover, [aria-role="button"].primary:active, [aria-role="button"].primary:focus {
background: #0277bd; } background: #0277bd; }
button.secondary, [type="button"].secondary, [type="submit"].secondary, button.secondary, [type="button"].secondary, [type="submit"].secondary,
[type="reset"].secondary, .button.secondary { [type="reset"].secondary, .button.secondary, [aria-role="button"].secondary {
background: rgba(198, 40, 40, 0.85); background: rgba(198, 40, 40, 0.85);
color: #fafafa; } color: #fafafa; }
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus, button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
[type="reset"].secondary:hover, [type="reset"].secondary:hover,
[type="reset"].secondary:active, [type="reset"].secondary:active,
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus { [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus, [aria-role="button"].secondary:hover, [aria-role="button"].secondary:active, [aria-role="button"].secondary:focus {
background: #c62828; } background: #c62828; }
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
[type="reset"].tertiary, .button.tertiary { [type="reset"].tertiary, .button.tertiary, [aria-role="button"].tertiary {
background: rgba(104, 159, 56, 0.85); background: rgba(104, 159, 56, 0.85);
color: #fafafa; } color: #fafafa; }
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus, button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
[type="reset"].tertiary:hover, [type="reset"].tertiary:hover,
[type="reset"].tertiary:active, [type="reset"].tertiary:active,
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus { [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus, [aria-role="button"].tertiary:hover, [aria-role="button"].tertiary:active, [aria-role="button"].tertiary:focus {
background: #689f38; } background: #689f38; }
button.inverse, [type="button"].inverse, [type="submit"].inverse, button.inverse, [type="button"].inverse, [type="submit"].inverse,
[type="reset"].inverse, .button.inverse { [type="reset"].inverse, .button.inverse, [aria-role="button"].inverse {
background: #212121; background: #212121;
color: #fafafa; } color: #fafafa; }
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus, button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
[type="reset"].inverse:hover, [type="reset"].inverse:hover,
[type="reset"].inverse:active, [type="reset"].inverse:active,
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus { [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus, [aria-role="button"].inverse:hover, [aria-role="button"].inverse:active, [aria-role="button"].inverse:focus {
background: rgba(33, 33, 33, 0.9); } background: rgba(33, 33, 33, 0.9); }
button.small, [type="button"].small, [type="submit"].small, button.small, [type="button"].small, [type="submit"].small,
[type="reset"].small, .button.small { [type="reset"].small, .button.small, [aria-role="button"].small {
border-radius: 1px; border-radius: 1px;
padding: 4px 6px; padding: 4px 6px;
margin: 6px 8px; } margin: 6px 8px; }
button.large, [type="button"].large, [type="submit"].large, button.large, [type="button"].large, [type="submit"].large,
[type="reset"].large, .button.large { [type="reset"].large, .button.large, [aria-role="button"].large {
border-radius: 4px; border-radius: 4px;
padding: 12px 18px; padding: 12px 18px;
margin: 10px 8px; } margin: 10px 8px; }

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -759,3 +759,7 @@
- Changed the implementation of the new `footer` to `sticky`, instead of absolute. - Changed the implementation of the new `footer` to `sticky`, instead of absolute.
- Rolled back all pages that were affected. Should work like a charm now! - Rolled back all pages that were affected. Should work like a charm now!
- Finalized the `sticky` `footer`. - Finalized the `sticky` `footer`.
## 20170113
- Added support for `aria-role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB.

5
docs/v2/demo.html
View file

@ -134,6 +134,11 @@
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div> <div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div> <div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
</div> </div>
<div class="row col-sm-12">
<div>
<a aria-role="button" class="tertiary" href="#">Test span button</a>
</div>
</div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<footer class="sticky"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer> <footer class="sticky"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>

24
src/mini/_input_control.scss
View file

@ -140,7 +140,9 @@ button {
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE. text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
} }
// Default styling // Default styling
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} { button, [type="button"], [type="submit"], [type="reset"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
display: inline-block; display: inline-block;
background: rgba($button-back-color, $button-back-opacity); background: rgba($button-back-color, $button-back-opacity);
color: $button-fore-color; color: $button-fore-color;
@ -213,7 +215,9 @@ $hide-file-inputs: true !default;
@if $button-group-box-shadow != none { @if $button-group-box-shadow != none {
box-shadow: $button-group-box-shadow; box-shadow: $button-group-box-shadow;
} }
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} { button, [type="button"], [type="submit"], [type="reset"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
margin: 0; margin: 0;
// Old syntax // Old syntax
-webkit-box-flex: 1; -webkit-box-flex: 1;
@ -229,7 +233,9 @@ $hide-file-inputs: true !default;
border-radius: 0; border-radius: 0;
} }
@if $button-group-border-style != 0 { @if $button-group-border-style != 0 {
+ button, + [type="button"], + [type="submit"], + [type="reset"], + a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name} { + button, + [type="button"], + [type="submit"], + [type="reset"],
+ a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name},
+ a[aria-role="button"], + label[aria-role="button"], + [aria-role="button"] {
border-left: $button-group-border-style; border-left: $button-group-border-style;
} }
} }
@ -247,8 +253,12 @@ $hide-file-inputs: true !default;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
@if $button-group-border-style !=0 { @if $button-group-border-style !=0 {
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} { button, [type="button"], [type="submit"], [type="reset"],
+ button, + [type="button"], + [type="submit"], + [type="reset"], + a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name} { a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
+ button, + [type="button"], + [type="submit"], + [type="reset"],
+ a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name},
+ a[aria-role="button"], + label[aria-role="button"], + [aria-role="button"] {
border: 0; border: 0;
border-top: $button-group-border-style; border-top: $button-group-border-style;
} }
@ -270,7 +280,7 @@ $hide-file-inputs: true !default;
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity, @mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) { $button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} { [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [aria-role="button"].#{$button-alt-name} {
background: rgba($button-alt-back-color, $button-alt-back-opacity); background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color { @if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color; color: $button-alt-fore-color;
@ -294,7 +304,7 @@ $hide-file-inputs: true !default;
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius, @mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) { $button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} { [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [aria-role="button"].#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style { @if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style; border: $button-alt-border-style;
} }