Updated header component for accessibility
This commit is contained in:
parent
e2cdae54f4
commit
4b03e32ad5
14
dist/mini-default.css
vendored
14
dist/mini-default.css
vendored
|
@ -639,15 +639,23 @@ header {
|
|||
line-height: 1.2;
|
||||
margin: 1px 6px 1px 1px;
|
||||
padding: 3px 0 0; }
|
||||
header button, header [type="button"], header a.button, header label.button, header .button {
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #263238;
|
||||
color: #fafafa;
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0;
|
||||
box-shadow: none; }
|
||||
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus {
|
||||
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:active,
|
||||
header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:active,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:active, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:active, header [role="button"]:focus {
|
||||
background: #37474f; }
|
||||
header .logo, header a.button {
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none; }
|
||||
|
||||
nav {
|
||||
|
|
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
|
@ -809,3 +809,7 @@
|
|||
- Added safeguard for the `progress` element's `.nano` variant's case with `margin` of `0`. Should now behave properly.
|
||||
- Added `@supports` statement to help `tooltip` component place itself whenever possible. Changed a few of the selectors in `tooltip` to be as specific as needed and work as required.
|
||||
- Updated `tooltip` mixin to reflect the above changes.
|
||||
|
||||
## 20170202
|
||||
|
||||
- Added `[role="button"]` selector for elements inside `header`, did not remove any other selectors from component as specifity would be too low if changed.
|
||||
|
|
|
@ -49,7 +49,9 @@ header {
|
|||
}
|
||||
}
|
||||
// Link styling.
|
||||
button, [type="button"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
|
||||
button, [type="button"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
background: $header-back-color; // Apply color regardless to override styling from other things.
|
||||
color: $header-fore-color;
|
||||
vertical-align: top; // Alignemt, really important to make this work well.
|
||||
|
@ -67,7 +69,7 @@ header {
|
|||
}
|
||||
}
|
||||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
.#{$header-logo-name}, a.#{$button-class-name} {
|
||||
.#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue