154 lines
2.6 KiB
Stylus
154 lines
2.6 KiB
Stylus
|
RV-ContentCrop--bottom()
|
||
|
|
img
|
||
|
|
object-position bottom
|
||
|
|
|
||
|
|
RV-ContentCrop--top()
|
||
|
|
img
|
||
|
|
object-position top
|
||
|
|
|
||
|
|
RV-ContentCrop--right()
|
||
|
|
img
|
||
|
|
object-position right
|
||
|
|
|
||
|
|
RV-ContentCrop--left()
|
||
|
|
img
|
||
|
|
object-position left
|
||
|
|
|
||
|
|
RV-ContentCrop--center()
|
||
|
|
img
|
||
|
|
object-position center
|
||
|
|
|
||
|
|
RV-ContentCrop__Text--fade(background-color=white)
|
||
|
|
&:after
|
||
|
|
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
|
||
|
|
display block
|
||
|
|
content ' '
|
||
|
|
opacity 0.8
|
||
|
|
position relative
|
||
|
|
top -25%
|
||
|
|
width 100%
|
||
|
|
height 25%
|
||
|
|
z-index -10
|
||
|
|
|
||
|
|
RV-ContentCrop__Text--ellipsis(background-color=white)
|
||
|
|
&:after
|
||
|
|
position relative
|
||
|
|
display block
|
||
|
|
bottom 1.2em
|
||
|
|
left calc(100% - 3ch)
|
||
|
|
content '...'
|
||
|
|
font-size 1.2em
|
||
|
|
min-width 2em
|
||
|
|
background-color background-color
|
||
|
|
padding 0 2px
|
||
|
|
|
||
|
|
RV-ContentCrop__Text(line-height=1.1, background-color=white)
|
||
|
|
p
|
||
|
|
overflow hidden
|
||
|
|
display block
|
||
|
|
text-overflow ellipsis
|
||
|
|
padding 0
|
||
|
|
margin 0
|
||
|
|
line-height line-height
|
||
|
|
// Determining the max line count and caclulating the height
|
||
|
|
z-index -20
|
||
|
|
position relative
|
||
|
|
background-color background-color
|
||
|
|
height floor(100% / line-height / 16) * line-height * 16
|
||
|
|
|
||
|
|
&--fade
|
||
|
|
RV-ContentCrop__Text--fade(background-color)
|
||
|
|
|
||
|
|
&--ellipsis
|
||
|
|
RV-ContentCrop__Text--ellipsis(background-color)
|
||
|
|
|
||
|
|
RV-ContentCrop__Shapes--square()
|
||
|
|
width 100%
|
||
|
|
padding-top 100%
|
||
|
|
position relative
|
||
|
|
|
||
|
|
img,
|
||
|
|
div
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
left 0
|
||
|
|
bottom 0
|
||
|
|
right 0
|
||
|
|
|
||
|
|
RV_ContentCrop__Shapes--circle()
|
||
|
|
RV-ContentCrop__Shapes--square()
|
||
|
|
border-radius 50%
|
||
|
|
|
||
|
|
RV-ContentCrop__Shapes--xtoy(-x, -y)
|
||
|
|
width 100%
|
||
|
|
padding-top 100% * (-y / -x)
|
||
|
|
position relative
|
||
|
|
|
||
|
|
img
|
||
|
|
object-fit cover
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
left 0
|
||
|
|
bottom 0
|
||
|
|
right 0
|
||
|
|
|
||
|
|
RV-ContentCrop__Shapes()
|
||
|
|
|
||
|
|
&--square
|
||
|
|
RV-ContentCrop__Shapes--square()
|
||
|
|
|
||
|
|
&--circle
|
||
|
|
RV_ContentCrop__Shapes--circle()
|
||
|
|
|
||
|
|
&--1to2
|
||
|
|
RV-ContentCrop__Shapes--xtoy(1, 2)
|
||
|
|
|
||
|
|
&--2to1
|
||
|
|
RV-ContentCrop__Shapes--xtoy(2, 1)
|
||
|
|
|
||
|
|
&--4to3
|
||
|
|
RV-ContentCrop__Shapes--xtoy(4, 3)
|
||
|
|
|
||
|
|
&--16to9
|
||
|
|
RV-ContentCrop__Shapes--xtoy(16, 9)
|
||
|
|
|
||
|
|
&--3to2
|
||
|
|
RV-ContentCrop__Shapes--xtoy(3, 2)
|
||
|
|
|
||
|
|
RV-ContentCrop__Image()
|
||
|
|
img
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
object-fit cover
|
||
|
|
display block
|
||
|
|
|
||
|
|
RV-ContentCrop(line-height=1.1, prefix='&')
|
||
|
|
|
||
|
|
// Heuristic, just to be safe
|
||
|
|
line-height = line-height * 1.1
|
||
|
|
background-color = white
|
||
|
|
display block
|
||
|
|
overflow hidden
|
||
|
|
|
||
|
|
RV-ContentCrop__Image()
|
||
|
|
RV-ContentCrop__Text(line-height)
|
||
|
|
|
||
|
|
RV-ContentCrop__Shapes()
|
||
|
|
|
||
|
|
&--left
|
||
|
|
RV-ContentCrop--left()
|
||
|
|
|
||
|
|
&--center
|
||
|
|
RV-ContentCrop--center()
|
||
|
|
|
||
|
|
&--top
|
||
|
|
RV-ContentCrop--top()
|
||
|
|
|
||
|
|
&--bottom
|
||
|
|
RV-ContentCrop--bottom()
|
||
|
|
|
||
|
|
&--center
|
||
|
|
RV-ContentCrop--center()
|
||
|
|
|
||
|
|
.RV-ContentCrop
|
||
|
|
RV-ContentCrop()
|