Commit fe579297 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Extract style patterns from AnnotationQuote

parent 4c6191b1
......@@ -72,6 +72,23 @@
filter: grayscale(100%) contrast(65%);
}
/**
* Represent quoted text, as in an excerpt, with a hover or focused state.
*/
@mixin quoted-text {
border-left: 3px solid var.$color-border;
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-focused,
&:hover {
border-left: var.$color-quote 3px solid;
}
}
/**
* Base styles for a "panel"-like element, with appropriate
* padding, heading and close-button styles.
......
@use '../../variables' as var;
@use "../../mixins/molecules";
.annotation-quote {
&.is-orphan {
text-decoration: line-through;
}
&__quote {
border-left: 3px solid var.$color-border;
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;
@include molecules.quoted-text;
}
&.is-focused &__quote {
border-left: var.$color-quote 3px solid;
&.is-orphan &__quote {
// In orphans, quotes should be rendered as if they're missing/redacted
@include molecules.redacted-content;
}
}
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