tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

Extract vue-announcer and vue-skip-to styles (so that they're nt inline)

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-10-13 14:49:29 +02:00
parent 676fab7871
commit 8a1dfb0612
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 80 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/common.scss
View file

@ -3,6 +3,8 @@
@import "~bulma"; @import "~bulma";
@import "~bulma-divider"; @import "~bulma-divider";
@import "~buefy/src/scss/buefy"; @import "~buefy/src/scss/buefy";
@import "styles/vue-announcer.scss";
@import "styles/vue-skip-to.scss";
// a { // a {
// color: $violet-2; // color: $violet-2;

15
js/src/styles/vue-announcer.scss Normal file
View file

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

63
js/src/styles/vue-skip-to.scss Normal file
View file

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