81 lines
1.9 KiB
Stylus
81 lines
1.9 KiB
Stylus
/**
|
|
* This mixin is for truncating text. By now, this can only be done by container height.
|
|
* Because this is actually realy messed up in native CSS, you have to specify the line-height
|
|
* and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case.
|
|
*/
|
|
RV-Truncation--fade(background-color=white)
|
|
+RV-Block__Modifier--name('fade')
|
|
|
|
+RV-Element('Content')
|
|
&:last-child:after
|
|
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
|
|
display block
|
|
content '###'
|
|
color transparent
|
|
opacity 1
|
|
position absolute
|
|
top calc(var(--height) - 40px)
|
|
width 100%
|
|
height calc(1.5 * var(--line-height))
|
|
z-index 10
|
|
|
|
RV-Truncation--ellipsis(background-color=white)
|
|
+RV-Block__Modifier--name('ellipsis')
|
|
|
|
+RV-Element('Cutter')
|
|
&:after
|
|
position absolute
|
|
display block
|
|
right 0
|
|
content '...'
|
|
background-color background-color
|
|
padding-left 5px
|
|
padding-bottom 10px
|
|
box-shadow -10px 8px 6px 0px background-color;
|
|
line-height --line-height
|
|
top calc(var(--height) - 38px)
|
|
|
|
+RV-Element('Content')
|
|
&:after
|
|
display block
|
|
background-color background-color
|
|
content ''
|
|
position relative
|
|
right 0
|
|
height --height
|
|
width 100%
|
|
bottom -100%
|
|
z-index 30
|
|
|
|
RV-Truncation(line-height=1.3em, height=100%, background-color=white)
|
|
RV-CSSParameter({
|
|
line-height: line-height,
|
|
height: height,
|
|
background-color: background-color
|
|
})
|
|
|
|
display grid
|
|
align-content flex-start
|
|
height --height
|
|
grid-template-rows repeat(auto-fill, --line-height)
|
|
|
|
height calc_height(--height)
|
|
width calc_width()
|
|
|
|
position relative
|
|
|
|
*
|
|
overflow hidden
|
|
grid-row 1/-1
|
|
background --background-color
|
|
line-height --line-height
|
|
z-index -10
|
|
|
|
+RV-Block('RV-Truncation')
|
|
RV-Truncation()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-Truncation--fade(--background-color)
|
|
|
|
+RV-Block__Modifier()
|
|
RV-Truncation--ellipsis(--background-color) |