mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 08:53:59 +02:00
Code Issues 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
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; line-height: 1.2;
margin: 1px 6px 1px 1px; margin: 1px 6px 1px 1px;
padding: 3px 0 0; } 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; background: #263238;
color: #fafafa; color: #fafafa;
vertical-align: top; vertical-align: top;
margin: 2px 0 0; margin: 2px 0 0;
box-shadow: none; } 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; } background: #37474f; }
header .logo, header a.button { header .logo, header a.button, header a[role="button"] {
text-decoration: none; } text-decoration: none; }
nav { 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 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. - 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. - 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. // 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. background: $header-back-color; // Apply color regardless to override styling from other things.
color: $header-fore-color; color: $header-fore-color;
vertical-align: top; // Alignemt, really important to make this work well. 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. @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; text-decoration: none;
} }
} }