Extract mixins to style separators

This way they can be reused in other places.
This commit is contained in:
Javi Martín
2023-10-13 11:40:16 +02:00
parent 5f0a7f4bbc
commit e0c5be10aa
2 changed files with 25 additions and 18 deletions

View File

@@ -0,0 +1,23 @@
@mixin separator {
content: "";
display: inline-block;
margin: 0 0.3em;
vertical-align: middle;
}
@mixin vertical-separator {
@include separator;
background: currentcolor;
height: 1em;
opacity: 0.5;
width: 1px;
}
@mixin circle-separator {
@include separator;
background: $text-light;
border-radius: 100%;
height: 0.25em;
opacity: 1;
width: 0.25em;
}

View File

@@ -8,29 +8,13 @@
@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;
@include vertical-separator;
}
.comment & {
> *::before {
@include separator;
background: $text-light;
border-radius: 100%;
opacity: 1;
height: 0.25em;
width: 0.25em;
@include circle-separator;
}
}
}