scss-library/components/10_ContentShape/truncation/_truncation.styl

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)