Added ARIA support for button elements, #40
This commit is contained in:
Angelos Chalaris
parent
e5a9ba5661
commit
a8fea00c58
122
dist/mini-default.css
vendored
122
dist/mini-default.css
vendored
|
|
@ -687,8 +687,8 @@ footer.sticky {
|
|||
bottom: 0;
|
||||
z-index: 1101; }
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
form {
|
||||
background: #eeeeee;
|
||||
|
|
@ -780,7 +780,9 @@ button {
|
|||
overflow: visible;
|
||||
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;
|
||||
background: rgba(189, 189, 189, 0.65);
|
||||
color: #212121;
|
||||
|
|
@ -793,10 +795,20 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
|
|||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
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);
|
||||
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;
|
||||
opacity: 0.65; }
|
||||
|
||||
|
|
@ -820,7 +832,9 @@ input[type="file"] {
|
|||
border-radius: 2px;
|
||||
margin: 8px;
|
||||
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;
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
|
|
@ -832,7 +846,43 @@ input[type="file"] {
|
|||
border: 0;
|
||||
border-radius: 0;
|
||||
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; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
@ -840,7 +890,43 @@ input[type="file"] {
|
|||
-webkit-box-orient: vertical;
|
||||
-webkit-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-top: 1px solid #9e9e9e; } }
|
||||
[type="checkbox"], [type="radio"] {
|
||||
|
|
@ -893,53 +979,53 @@ input[type="file"] {
|
|||
Custom elements for forms and input elements.
|
||||
*/
|
||||
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);
|
||||
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,
|
||||
[type="reset"].primary:hover,
|
||||
[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; }
|
||||
|
||||
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);
|
||||
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,
|
||||
[type="reset"].secondary:hover,
|
||||
[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; }
|
||||
|
||||
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);
|
||||
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,
|
||||
[type="reset"].tertiary:hover,
|
||||
[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; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse {
|
||||
[type="reset"].inverse, .button.inverse, [aria-role="button"].inverse {
|
||||
background: #212121;
|
||||
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,
|
||||
[type="reset"].inverse:hover,
|
||||
[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); }
|
||||
|
||||
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;
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
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;
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -186,7 +186,7 @@
|
|||
## 20161025
|
||||
|
||||
- Issue maintenance and minor changes to issue structure on Github.
|
||||
- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements.
|
||||
- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements.
|
||||
- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
|
||||
- Softcoded changes and optimized some things in the `button` module.
|
||||
- Updated demo page.
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
- Moved flavors from their directory to the `src` directory. CSS files produced from flavor files will go to the `dist` folder, along with the minified versions.
|
||||
- *TODO* Update the `package.json` and `bower.json` files according to the new framework version.
|
||||
- Updated live demo page reference to use the new structure.
|
||||
|
||||
|
||||
## 20161110
|
||||
|
||||
- Continued module restructure and cleanup as follows:
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
- Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module.
|
||||
- Code cleanup in `grid`, indentation etc.
|
||||
- Code cleanup in `table`. Media query conversions applied. Optimization.
|
||||
- Code cleanup in `form`.
|
||||
- Code cleanup in `form`.
|
||||
- Code cleanup in `button`. Updated `file` `input`s to be accessible.
|
||||
- Code cleanup in `checkbox`. Optimizations.
|
||||
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly.
|
||||
|
|
@ -738,7 +738,7 @@
|
|||
- Created a new branch for the development of v2.1.0.
|
||||
- Added `$include-parent-layout` flag, which will allow rows declaring column layout for children.
|
||||
- Implemented the whole *simple* layout structure for the `grid` module, allowing a `.row` to set the layout of its children, using a `.cols-{SZ}-{WD}` class.
|
||||
- Decided to include the new `grid` system in the `mini-default` flavor, as its functionality could be beneficial to a lot of people. The new filesize (gzipped) is `6.47KB` over the previous `6.32KB`.
|
||||
- Decided to include the new `grid` system in the `mini-default` flavor, as its functionality could be beneficial to a lot of people. The new filesize (gzipped) is `6.47KB` over the previous `6.32KB`.
|
||||
- Added what is basically an *auto-grid* option in `.row.cols-sm` and similar for other sizes, that auto-sizes all columns in a given row. Might come in handy.
|
||||
- Updated `index.html` to show *under 10KB* instead of *about 5KB* in the **Minimal** card in order to deal with the controversy surrounding this specific line.
|
||||
|
||||
|
|
@ -759,3 +759,7 @@
|
|||
- 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!
|
||||
- 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.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="../../dist/mini-default.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - v2.1.0 Test page</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
padding: 4px;
|
||||
}
|
||||
#top-area {
|
||||
height: 320px;
|
||||
background: -webkit-linear-gradient(#455a64,#192024);
|
||||
height: 320px;
|
||||
background: -webkit-linear-gradient(#455a64,#192024);
|
||||
background: linear-gradient(#455a64,#192024);
|
||||
}
|
||||
#top-logo {
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
.box-colored.red { background: #e53935; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<div class="container" id="top-area">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
|
|
@ -134,8 +134,13 @@
|
|||
<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 class="row col-sm-12">
|
||||
<div>
|
||||
<a aria-role="button" class="tertiary" href="#">Test span button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- 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>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Definitions for forms and input elements.
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Base form styling.
|
||||
|
|
@ -32,7 +32,7 @@ fieldset {
|
|||
background: $fieldset-back-color;
|
||||
}
|
||||
// Apply always to overwrite defaults for all of the below.
|
||||
border: $fieldset-border-style;
|
||||
border: $fieldset-border-style;
|
||||
border-radius: $fieldset-border-radius;
|
||||
margin: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
|
|
@ -60,16 +60,16 @@ legend {
|
|||
}
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
textarea {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
|
|
@ -86,7 +86,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
|||
border: $input-border-style;
|
||||
@if $input-border-radius != 0 {
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
}
|
||||
@if $input-margin != 0 {
|
||||
margin: $input-margin;
|
||||
}
|
||||
|
|
@ -140,7 +140,9 @@ button {
|
|||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
}
|
||||
// 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;
|
||||
background: rgba($button-back-color, $button-back-opacity);
|
||||
color: $button-fore-color;
|
||||
|
|
@ -184,10 +186,10 @@ $hide-file-inputs: true !default;
|
|||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
|
|
@ -213,7 +215,9 @@ $hide-file-inputs: true !default;
|
|||
@if $button-group-box-shadow != none {
|
||||
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;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
|
|
@ -229,7 +233,9 @@ $hide-file-inputs: true !default;
|
|||
border-radius: 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -247,8 +253,12 @@ $hide-file-inputs: true !default;
|
|||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
@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} {
|
||||
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"] {
|
||||
+ 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-top: $button-group-border-style;
|
||||
}
|
||||
|
|
@ -269,8 +279,8 @@ $hide-file-inputs: true !default;
|
|||
// base class for the button styles.
|
||||
@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.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$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}, [aria-role="button"].#{$button-alt-name} {
|
||||
background: rgba($button-alt-back-color, $button-alt-back-opacity);
|
||||
@if $button-alt-fore-color != $button-fore-color {
|
||||
color: $button-alt-fore-color;
|
||||
|
|
@ -293,8 +303,8 @@ $hide-file-inputs: true !default;
|
|||
// base class for the button styles.
|
||||
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
|
||||
$button-alt-padding, $button-alt-margin) {
|
||||
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} {
|
||||
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}, [aria-role="button"].#{$button-alt-name} {
|
||||
@if $button-alt-border-style != $button-border-style {
|
||||
border: $button-alt-border-style;
|
||||
}
|
||||
|
|
@ -320,7 +330,7 @@ $hide-file-inputs: true !default;
|
|||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
// Use input-group to setup the style for labels.
|
||||
.#{$input-group-name} {
|
||||
|
|
@ -330,7 +340,7 @@ $hide-file-inputs: true !default;
|
|||
margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
// Styling for checkbox/radio box part.
|
||||
&:before {
|
||||
//box-sizing: border-box;
|
||||
//box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: $checkbox-bottom-spacing;
|
||||
|
|
@ -351,7 +361,7 @@ $hide-file-inputs: true !default;
|
|||
&:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
|
|
@ -382,4 +392,4 @@ $hide-file-inputs: true !default;
|
|||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue