108a898ebf
## Issue The abrupt cut-off of the expandable section bugs me (looks like a rendering glitch), especially when it cuts off in the middle of a line. ## Change In addition to the existing 'More' button, we fade out the section to provide additional visual cues. ## Approach This solution doesn't require the background color to be known, so it will work regardless where <Expandable> is used, or whatever color-scheme is chosen. However, it does utilize non-standard css -- for older browsers, it should simply cut-off like the before.
16 lines
326 B
SCSS
16 lines
326 B
SCSS
.expandable--closed,
|
|
.expandable--open {
|
|
margin-bottom: var(--spacing-s);
|
|
}
|
|
|
|
.expandable--closed {
|
|
max-height: 10rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
-webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
|
|
}
|
|
|
|
.expandable--open {
|
|
max-height: 100%;
|
|
}
|