_mixins.scss 1005 Bytes
Newer Older
1
// https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
2
@mixin multiline-ellipsis($line-height, $line-count, $bg-color){
3
4
5
6
7
8
9
10
11
12
13
14
15
  overflow: hidden;
  position: relative;
  line-height: $line-height;
  max-height: $line-height * $line-count; 

  &:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 1.2em;
16
    background: linear-gradient(to right, rgba($bg-color, 0), $bg-color 70%);
17
  }
18
19
20
21
22
23
24
25
26
27
28
}

// https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting
@mixin no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
29
}