Unverified Commit 9b5c2031 authored by Lyza Gardner's avatar Lyza Gardner Committed by GitHub

Merge pull request #2276 from hypothesis/extract-styles-1

Extract styles from Annotation Body, License and Quote
parents 78675307 fe579297
...@@ -50,7 +50,6 @@ export default function AnnotationBody({ ...@@ -50,7 +50,6 @@ export default function AnnotationBody({
textClass={{ textClass={{
'annotation-body__text': true, 'annotation-body__text': true,
'is-hidden': isHidden(annotation), 'is-hidden': isHidden(annotation),
'has-content': text.length > 0,
}} }}
/> />
</Excerpt> </Excerpt>
......
...@@ -9,25 +9,17 @@ export default function AnnotationLicense() { ...@@ -9,25 +9,17 @@ export default function AnnotationLicense() {
return ( return (
<div className="annotation-license"> <div className="annotation-license">
<a <a
className="annotation-license__link u-layout-row u-color-text--muted" className="u-layout-row u-color-text--muted"
href="http://creativecommons.org/publicdomain/zero/1.0/" href="http://creativecommons.org/publicdomain/zero/1.0/"
title="View more information about the Creative Commons Public Domain dedication" title="View more information about the Creative Commons Public Domain dedication"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<SvgIcon <div className="annotation-license__icons">
name="cc-std" <SvgIcon name="cc-std" inline={true} className="u-icon--xsmall" />
inline={true} <SvgIcon name="cc-zero" inline={true} className="u-icon--xsmall" />
className="annotation-license__icon" </div>
/>
<SvgIcon
name="cc-zero"
inline={true}
className="annotation-license__icon"
/>
<span className="annotation-license__details">
Annotations can be freely reused by anyone for any purpose. Annotations can be freely reused by anyone for any purpose.
</span>
</a> </a>
</div> </div>
); );
......
...@@ -78,3 +78,13 @@ ...@@ -78,3 +78,13 @@
margin-top: var.$layout-margin; 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,31 +67,28 @@ ...@@ -67,31 +67,28 @@
* A pattern for displaying redacted (moderated) text content * A pattern for displaying redacted (moderated) text content
*/ */
@mixin redacted-content { @mixin redacted-content {
// Hidden annotations displayed to moderators, where the content is still
// present.
&.has-content {
text-decoration: line-through; text-decoration: line-through;
// Make any images within this content greyscale, and low-contrast
filter: grayscale(100%) contrast(65%); filter: grayscale(100%) contrast(65%);
} }
// Hidden annotations displayed to non-moderators, where the content has been /**
// filtered out by the service. * Represent quoted text, as in an excerpt, with a hover or focused state.
&:not(.has-content) { */
// Create a column of horizontal stripes, giving the impression of text @mixin quoted-text {
// underneath that has been censored. border-left: 3px solid var.$color-border;
display: block; color: var.$color-text-light;
height: 60px; font-style: italic;
width: 100vw; padding: 0 var.$layout-margin;
background: repeating-linear-gradient(
to bottom, // Prevent long URLs etc. in quote causing overflow
var.$grey-2, overflow-wrap: break-word;
var.$grey-2 15px,
white 15px, &.is-focused,
white 20px &:hover {
); border-left: var.$color-quote 3px solid;
} }
} }
/** /**
* Base styles for a "panel"-like element, with appropriate * Base styles for a "panel"-like element, with appropriate
* padding, heading and close-button styles. * padding, heading and close-button styles.
......
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
.annotation-body__collapse-toggle { .annotation-body__collapse-toggle {
@include layout.row(right); @include layout.row(right);
margin: var.$layout-margin--small 0; @include layout.vertical-space(var.$layout-margin--small);
.annotation-body__collapse-toggle-button { .annotation-body__collapse-toggle-button {
@include buttons.button--labeled; @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; background-color: transparent;
} }
} }
...@@ -5,16 +5,15 @@ ...@@ -5,16 +5,15 @@
.annotation-license { .annotation-license {
@include utils.font--small; @include utils.font--small;
@include utils.border-top; @include utils.border-top;
// Space between border and text content
padding-top: var.$layout-margin--small; padding-top: var.$layout-margin--small;
&__icon { // Container with two icons (representing CC licenses)
@include utils.icon--xsmall; // with a very small amount of spacing between them
// Need a tiny space between license icons &__icons {
margin-right: 1px; @include layout.row;
} @include layout.horizontal-rhythm(1px);
// Add space before text
&__details { margin-right: var.$layout-margin--xsmall;
// TODO: Horizontal rhythm
margin-left: 0.25em;
} }
} }
@use '../../variables' as var; @use '../../variables' as var;
@use "../../mixins/molecules";
.annotation-quote { .annotation-quote {
&.is-orphan {
text-decoration: line-through;
}
&__quote { &__quote {
border-left: 3px solid var.$color-border; @include molecules.quoted-text;
color: var.$color-text-light;
font-style: italic;
padding: 0 var.$layout-margin;
// Prevent long URLs etc. in quote causing overflow
overflow-wrap: break-word;
} }
&.is-orphan &__quote {
&.is-focused &__quote { // In orphans, quotes should be rendered as if they're missing/redacted
border-left: var.$color-quote 3px solid; @include molecules.redacted-content;
} }
} }
...@@ -54,6 +54,10 @@ ...@@ -54,6 +54,10 @@
@include utils.icon--inline; @include utils.icon--inline;
} }
.u-icon--xsmall {
@include utils.icon--xsmall;
}
.u-icon--large { .u-icon--large {
@include utils.icon--large; @include utils.icon--large;
} }
......
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