lbry-desktop/ui/scss/component/_expandable.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%;
}
Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`.expandable--closed,`
add comment support button 2018-11-07 23:44:38 +01:00			`.expandable--open {`
moonpay 2020-06-01 19:03:19 +02:00			`margin-bottom: var(--spacing-s);`
add comment support button 2018-11-07 23:44:38 +01:00			`}`

			`.expandable--closed {`
Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`max-height: 10rem;`
add comment support button 2018-11-07 23:44:38 +01:00			`overflow: hidden;`
Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`position: relative;`
Expandable: Fade out section when 'closed' ## 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. 2020-09-11 17:42:20 +02:00			`-webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));`
add comment support button 2018-11-07 23:44:38 +01:00			`}`

Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`.expandable--open {`
			`max-height: 100%;`
add comment support button 2018-11-07 23:44:38 +01:00			`}`