reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Showing Truncation Indicator only when truncation is acutally applied

Browse Source
This commit is contained in:
reverend 2021-03-03 17:51:33 +01:00
parent 6f4170af8e
commit ccb81cf4ce
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/00_ContentShape/truncation/_truncation.styl
View File

@ -1,4 +1,5 @@
RV-Truncation--fade(background-color=white) RV-Truncation--fade(background-color=white)
padding-bottom 20px
&:after &:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color) background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block display block
@ -11,6 +12,14 @@ RV-Truncation--fade(background-color=white)
height 50px height 50px
line-height var(--line-height) line-height var(--line-height)
z-index 10 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) RV-Truncation--ellipsis(background-color=white)
&:after &:after
@ -22,8 +31,16 @@ RV-Truncation--ellipsis(background-color=white)
padding-left 5px padding-left 5px
padding-bottom 10px padding-bottom 10px
box-shadow -10px 8px 6px 0px #fff; box-shadow -10px 8px 6px 0px #fff;
line-height var(--line-height) line-height --line-height
top calc(var(--height) - 40px) 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-Truncation(line-height=1.3, height=350px)
RV-CSSParameter({ RV-CSSParameter({