Extract mixins to style separators
This way they can be reused in other places.
This commit is contained in:
23
app/assets/stylesheets/mixins/separators.scss
Normal file
23
app/assets/stylesheets/mixins/separators.scss
Normal 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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user