diff --git a/sass/_library/_misc.scss b/sass/_library/_misc.scss index 2fcd18d..6b759cf 100644 --- a/sass/_library/_misc.scss +++ b/sass/_library/_misc.scss @@ -1,28 +1,7 @@ /* ----------------------------- */ -/* ==Misc (skip links, hyphens) */ +/* ==Misc */ /* ----------------------------- */ -/* styling skip links */ -.#{$kna-namespace}skip-links { - position: absolute; - - & a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; - - &:focus { - position: static; - overflow: visible; - clip: auto; - } - } -} - // hyphens on tiny screens @media (max-width: ($small - 1)) { /* you shall not pass */ diff --git a/sass/components/autogrid.scss b/sass/components/autogrid.scss index e0998fb..8029496 100644 --- a/sass/components/autogrid.scss +++ b/sass/components/autogrid.scss @@ -1,5 +1,8 @@ -/* Autogrid object */ +/* ----------------------------- */ +/* ==Autogrid object */ +/* ----------------------------- */ /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */ + @media (min-width: $small) { [class^="autogrid"], [class*=" autogrid"] { diff --git a/sass/components/media.scss b/sass/components/media.scss index 72993a4..ff30a06 100644 --- a/sass/components/media.scss +++ b/sass/components/media.scss @@ -1,5 +1,8 @@ -/* Media object */ +/* ----------------------------- */ +/* ==Media object */ +/* ----------------------------- */ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ + @media (min-width: $small) { .o-media { display: flex; diff --git a/sass/components/skip-links.scss b/sass/components/skip-links.scss new file mode 100644 index 0000000..906a8cb --- /dev/null +++ b/sass/components/skip-links.scss @@ -0,0 +1,25 @@ +/* ----------------------------- */ +/* ==skip links */ +/* ----------------------------- */ +/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */ + +/* styling skip links */ +.#{$kna-namespace}skip-links { + position: absolute; + + & a { + position: absolute; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0.5em; + background: black; + color: white; + text-decoration: none; + + &:focus { + position: static; + overflow: visible; + clip: auto; + } + } +} diff --git a/sass/knacss.scss b/sass/knacss.scss index 734e4b8..57ff3c5 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -21,6 +21,7 @@ 3- Components : - Media object - Autogrid object + - Skip Links - Tables (data tables consistency) - Forms (forms consistency) - Grillade (Grid System in Flexbox) @@ -48,6 +49,7 @@ // Components @import "components/media.scss"; // media object @import "components/autogrid.scss"; // media autogrid +@import "components/skip-links.scss"; // skip links @import "components/tables.scss"; // data tables consistency @import "components/forms.scss"; // forms consistency @import "components/grillade.scss"; // grids