app/assets/stylesheets/framework/read_more.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.read-more-container {
  $scrim: 2rem;
  $fallback: 320px;
  $height: 39px;

  &:not(:has(.read-more-content)) {
    @include media-breakpoint-down(md) {
      &:not(.is-expanded) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        > * {
          display: inline;
        }
      }
    }
  }

  &:has(.read-more-content--has-scrim:not(.is-expanded)) {
    position: relative;
    max-height: var(--read-more-height, #{$fallback - $height});
    overflow: hidden;
  }

  // only appears when size is > $height.
  .read-more-content--has-scrim:not(.is-expanded)::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--read-more-height, #{$fallback}) - #{$scrim} - #{$height});
    height: $scrim;
    background: linear-gradient(180deg, transparent, $white);

    .gl-dark & {
      background: linear-gradient(180deg, transparent, $black);
    }
  }
}