Commit 17b20e61 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Extract style patterns from AnnotationBody

parent 30c2c018
......@@ -50,7 +50,6 @@ export default function AnnotationBody({
textClass={{
'annotation-body__text': true,
'is-hidden': isHidden(annotation),
'has-content': text.length > 0,
}}
/>
</Excerpt>
......
......@@ -78,3 +78,13 @@
margin-top: var.$layout-margin;
}
}
/**
* Establish vertical space outside of elements in the container
*
* @param $size [var.$layout-margin--medium]: Spacing size (padding)
*/
@mixin vertical-space($size: var.$layout-margin--medium) {
padding-top: $size;
padding-bottom: $size;
}
......@@ -67,29 +67,9 @@
* A pattern for displaying redacted (moderated) text content
*/
@mixin redacted-content {
// Hidden annotations displayed to moderators, where the content is still
// present.
&.has-content {
text-decoration: line-through;
// Make any images within this content greyscale, and low-contrast
filter: grayscale(100%) contrast(65%);
}
// Hidden annotations displayed to non-moderators, where the content has been
// filtered out by the service.
&:not(.has-content) {
// Create a column of horizontal stripes, giving the impression of text
// underneath that has been censored.
display: block;
height: 60px;
width: 100vw;
background: repeating-linear-gradient(
to bottom,
var.$grey-2,
var.$grey-2 15px,
white 15px,
white 20px
);
}
}
/**
......
......@@ -11,10 +11,12 @@
.annotation-body__collapse-toggle {
@include layout.row(right);
margin: var.$layout-margin--small 0;
@include layout.vertical-space(var.$layout-margin--small);
.annotation-body__collapse-toggle-button {
@include buttons.button--labeled;
// The button should not have a background color except when hovered/active:
// It should look like text only
background-color: transparent;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment