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.
37 lines
536 B
SCSS
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;
|
|
}
|
|
}
|
|
}
|