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

79 lines
1.5 KiB
Stylus

RV-Truncation--fade(background-color=white)
padding-bottom 20px
&: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) - 60px)
width 100%
height 50px
line-height var(--line-height)
z-index 10
*:after
display inline-block
background-color #fff
content '###'
color transparent
position absolute
right 0
z-index 30
RV-Truncation--ellipsis(background-color=white)
&:after
position absolute
display block
right 0
content '...'
background-color background-color
padding-left 5px
padding-bottom 10px
box-shadow -10px 8px 6px 0px #fff;
line-height --line-height
top calc(--height - 40px)
*:after
display inline-block
background-color #fff
content '###'
color transparent
position absolute
right 0
z-index 30
RV-Truncation(line-height=1.3, height=350px)
RV-CSSParameter({
line-height: line-height,
height: height
})
background-color = white
display block
overflow hidden
position relative
height calc_height()
width calc_width()
*
overflow hidden
display block
position relative
text-overflow ellipsis
background-color background-color
line-height line-height
max-height floor(height / (line-height * 16)) * (line-height * 16)
padding 0
margin 0
.RV-Truncation
RV-Truncation()
&--fade
RV-Truncation--fade()
&--ellipsis
RV-Truncation--ellipsis()