208 lines
3.6 KiB
Stylus
208 lines
3.6 KiB
Stylus
RV-ContentCrop--bottom()
|
|
+RV-Block__Modifier--name('bottom')
|
|
.RV-Image *
|
|
object-position bottom
|
|
|
|
RV-ContentCrop--top()
|
|
+RV-Block__Modifier--name('top')
|
|
.RV-Image *
|
|
object-position top
|
|
|
|
RV-ContentCrop--right()
|
|
+RV-Block__Modifier--name('right')
|
|
.RV-Image *
|
|
object-position right
|
|
|
|
RV-ContentCrop--left()
|
|
+RV-Block__Modifier--name('left')
|
|
.RV-Image *
|
|
object-position left
|
|
|
|
RV-ContentCrop--center()
|
|
+RV-Block__Modifier--name('center')
|
|
.RV-Image *
|
|
object-position center
|
|
|
|
RV-ContentCrop--square()
|
|
+RV-Block__Modifier--name('square')
|
|
width 100%
|
|
padding-top 100%
|
|
position relative
|
|
|
|
.RV-Image *,
|
|
div
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
right 0
|
|
|
|
RV-ContentCrop--circle()
|
|
+RV-Block__Modifier--name('circle')
|
|
border-radius 50%
|
|
width 100%
|
|
padding-top 100%
|
|
position relative
|
|
|
|
.RV-Image *,
|
|
div
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
right 0
|
|
|
|
RV-ContentCrop--XtoY(x=1, y=1)
|
|
RV-CSSParameter({
|
|
x: x,
|
|
y: y
|
|
})
|
|
|
|
+RV-Block__Modifier--name('XtoY')
|
|
width 100%
|
|
padding-top 100% * (--y / --x)
|
|
position relative
|
|
|
|
.RV-Image *
|
|
object-fit cover
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
right 0
|
|
|
|
RV-ContentCrop--1to2()
|
|
+RV-Block__Modifier--name('1to2')
|
|
RV-ContentCrop__XtoY(1, 2)
|
|
|
|
RV-ContentCrop--2to1()
|
|
+RV-Block__Modifier--name('2to1')
|
|
RV-ContentCrop__XtoY(2, 1)
|
|
|
|
RV-ContentCrop--4to3()
|
|
+RV-Block__Modifier--name('4to3')
|
|
RV-ContentCrop__XtoY(4, 3)
|
|
|
|
RV-ContentCrop--16to9()
|
|
+RV-Block__Modifier--name('16to9')
|
|
RV-ContentCrop__XtoY(16, 9)
|
|
|
|
RV-ContentCrop--3to2()
|
|
+RV-Block__Modifier--name('3to2')
|
|
RV-ContentCrop__XtoY(3, 2)
|
|
|
|
RV-ContentCrop__Text--fade(background-color=white)
|
|
+RV-Element__Modifier--name('fade')
|
|
&:after
|
|
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
|
|
display block
|
|
content '###'
|
|
color transparent
|
|
opacity 1
|
|
position relative
|
|
top -30px
|
|
width 100%
|
|
height 30px
|
|
z-index 10
|
|
|
|
RV-ContentCrop__Text--ellipsis(background-color=white)
|
|
+RV-Element__Modifier--name('ellipsis')
|
|
&: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(line-height=1.1, height=350px)
|
|
background-color = white
|
|
display block
|
|
overflow hidden
|
|
|
|
height 100%
|
|
width 100%
|
|
box-sizing border-box
|
|
|
|
|
|
.RV-Image
|
|
width 100%
|
|
height 100%
|
|
object-fit cover
|
|
display block
|
|
|
|
.RV-Text
|
|
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-Block('RV-ContentCrop')
|
|
RV-CSSParameter({
|
|
|
|
})
|
|
|
|
line-height = 1.1
|
|
height = 350px
|
|
|
|
RV-ContentCrop(line-height, height)
|
|
|
|
+RV-Element()
|
|
RV-ContentCrop__Image()
|
|
|
|
+RV-Element()
|
|
RV-ContentCrop__Text(line-height)
|
|
|
|
+RV-Element__Modifier()
|
|
RV-ContentCrop__Text--ellipsis()
|
|
|
|
+RV-Element__Modifier()
|
|
RV-ContentCrop__Text--fade()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--bottom()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--top()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--right()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--left()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--center()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--square()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--circle()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--1to2()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--2to1()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--4to3()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--16to9()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-ContentCrop--3to2() |