From 8a1dfb06120f191bedb94486c8d5682e5526cacb Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Wed, 13 Oct 2021 14:49:29 +0200 Subject: [PATCH] Extract vue-announcer and vue-skip-to styles (so that they're nt inline) Signed-off-by: Thomas Citharel --- js/src/common.scss | 2 + js/src/styles/vue-announcer.scss | 15 ++++++++ js/src/styles/vue-skip-to.scss | 63 ++++++++++++++++++++++++++++++++ 3 files changed, 80 insertions(+) create mode 100644 js/src/styles/vue-announcer.scss create mode 100644 js/src/styles/vue-skip-to.scss diff --git a/js/src/common.scss b/js/src/common.scss index 66979923b..30160e383 100644 --- a/js/src/common.scss +++ b/js/src/common.scss @@ -3,6 +3,8 @@ @import "~bulma"; @import "~bulma-divider"; @import "~buefy/src/scss/buefy"; +@import "styles/vue-announcer.scss"; +@import "styles/vue-skip-to.scss"; // a { // color: $violet-2; diff --git a/js/src/styles/vue-announcer.scss b/js/src/styles/vue-announcer.scss new file mode 100644 index 000000000..0f3e06fcd --- /dev/null +++ b/js/src/styles/vue-announcer.scss @@ -0,0 +1,15 @@ +/** + * Taken from https://github.com/vue-a11y/vue-announcer/blob/master/src/vue-announcer.vue because styles are inlined there + */ + +.announcer { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} diff --git a/js/src/styles/vue-skip-to.scss b/js/src/styles/vue-skip-to.scss new file mode 100644 index 000000000..fdb62d8f2 --- /dev/null +++ b/js/src/styles/vue-skip-to.scss @@ -0,0 +1,63 @@ +@import "../variables.scss"; + +/** + * Taken from https://github.com/vue-a11y/vue-skip-to/blob/master/src/VueSkipTo.vue because styles are inlined there + */ + +.vue-skip-to { + position: fixed; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + + * { + padding: 0; + margin: 0; + box-sizing: border-box; + } + + &.focused, + &:hover { + left: 0; + top: 0; + clip: auto; + height: auto; + width: auto; + background-color: $white; + border: 2px solid $violet-3; + } + + &, + &__nav-list { + list-style-type: none; + } + + &__nav > span, + &__link { + display: block; + padding: 8px 16px; + color: $violet-3; + font-size: 18px; + } + + &__nav > span { + border-bottom: 2px solid $violet-3; + font-weight: bold; + } + + &, + &__link { + text-decoration: none; + } + + &__link:focus { + outline: none; + background-color: $violet-3; + color: #f2f2f2; + } +}