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

Updated header component for accessibility

Browse source
This commit is contained in:
Angelos Chalaris 2017-02-02 19:48:43 +02:00
parent e2cdae54f4
commit 4b03e32ad5
4 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
dist/mini-default.css vendored
View file

@ -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
View file

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -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.

6
src/mini/_navigation.scss
View file

@ -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;
}
}