Skip to content

C
coopwire-hypothesis
Commit 35b000bf authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner
Browse files
Options

Consolidate some styling in `Excerpt`

parent 84cbc9db
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 73 deletions
src/styles/sidebar/components/excerpt.scss
View file @ 35b000bf
@use "../../mixins/buttons"; @use "../../mixins/buttons";
@use "../../variables" as var; @use "../../variables" as var;
// FIXME - Remove the `@at-root` here when SASS modules are used, as local // the distance by which the shadow indicating a collapsed
// variables will no longer be exposed to other modules. // annotation expands beyond the left/right edges of the card.
@at-root { // This value is chosen such that the shadow expands to the full width of
$expand-duration: 0.15s; // the card
$shadow-h-offset: -12px;
$expand-duration: 0.15s;
.excerpt { .excerpt {
transition: max-height $expand-duration ease-in; transition: max-height $expand-duration ease-in;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.excerpt__content {
// Create a new block-formatting context. This prevents any margins on
// elements inside the excerpt from "leaking out" due to margin-collapsing,
// which would push this container element away from the top of the excerpt.
//
// See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
// and https://github.com/hypothesis/client/issues/1518.
display: inline-block;
width: 100%;
}
// inline controls for expanding and collapsing
// the <excerpt>
// -------------
.excerpt__inline-controls {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
.excerpt__toggle-link {
padding-left: 15px;
background-image: linear-gradient(to right, transparent 0px, white 12px);
}
.excerpt__toggle-button { .excerpt__content {
@include buttons.reset-native-btn-styles; // Create a new block-formatting context. This prevents any margins on
font-style: italic; // elements inside the excerpt from "leaking out" due to margin-collapsing,
} // which would push this container element away from the top of the excerpt.
//
// See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
// and https://github.com/hypothesis/client/issues/1518.
display: inline-block;
width: 100%;
}
.excerpt__toggle-link > a { // inline controls for expanding and collapsing
color: var.$color-text; // the excerpt
font-style: italic; .excerpt__inline-controls {
font-weight: normal; display: block;
} position: absolute;
right: 0;
bottom: 0;
}
// a shadow displayed at the bottom of an <excerpt>s with inline controls .excerpt__toggle-link {
// disabled, which provides a hint that the excerpt is collapsed padding-left: var.$layout-space;
// ------------- // See https://stackoverflow.com/a/56548711/9788954 regarding
// rgba(255, 255, 255, 0) used here instead of `transparent` (for Safari)
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0px,
var.$color-background var.$layout-space
);
}
// the distance by which the shadow indicating a collapsed // TODO the tap target here is quite small
// annotation expands beyond the left/right edges of the card. .excerpt__toggle-button {
// This value is chosen such that the shadow expands to the full width of @include buttons.reset-native-btn-styles;
// the card background: transparent;
$shadow-h-offset: -12px; font-style: italic;
}
.excerpt__shadow { // a shadow displayed at the bottom of an <excerpt>s with inline controls
position: absolute; // disabled, which provides a hint that the excerpt is collapsed
left: $shadow-h-offset; .excerpt__shadow {
right: $shadow-h-offset; position: absolute;
bottom: 0; left: $shadow-h-offset;
height: 40px; right: $shadow-h-offset;
background-image: linear-gradient( bottom: 0;
to bottom, height: var.$touch-target-size;
transparent 50%, background-image: linear-gradient(
rgba(0, 0, 0, 0.08) 95%, to bottom,
rgba(0, 0, 0, 0.13) 100% rgba(255, 255, 255, 0) 50%,
); rgba(0, 0, 0, 0.08) 95%,
transition: opacity $expand-duration linear; rgba(0, 0, 0, 0.13) 100%
} );
transition: opacity $expand-duration linear;
}
.excerpt__shadow--transparent { .excerpt__shadow--transparent {
background-image: none; background-image: none;
} }
.excerpt__shadow.is-hidden { .excerpt__shadow.is-hidden {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
}
} }
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