Files
grecia/app/assets/stylesheets/moderation_actions.scss
Javi Martín 3b2b09be2b Use CSS to show separators in moderation actions
This is useful for people using screen readers, since the character used
as a separator won't be read aloud.

Since many screen readers also read content generated via CSS
pseudoelements, we aren't using `content: "|";` or similar but using
elements with a very small width instead.
2021-12-30 15:50:03 +01:00

37 lines
536 B
SCSS

.moderation-actions {
&,
form {
display: inline;
}
button {
@include link;
}
@mixin separator {
content: "";
display: inline-block;
margin: 0 0.3em;
vertical-align: middle;
}
> * + *::before {
@include separator;
background: currentcolor;
height: 1em;
opacity: 0.5;
width: 1px;
}
.comment & {
> *::before {
@include separator;
background: $text-light;
border-radius: 100%;
opacity: 1;
height: 0.25em;
width: 0.25em;
}
}
}