scss-library/components/01_Layouts/contentCrop/_contentCrop.styl

179 lines
3.0 KiB
Stylus
Raw Normal View History

2021-01-03 12:36:12 +01:00
RV-ContentCrop--bottom()
+RV-Block--modifier()
.RV-Image *
object-position bottom
2021-01-03 12:36:12 +01:00
RV-ContentCrop--top()
+RV-Block--modifier()
.RV-Image *
object-position top
2021-01-03 12:36:12 +01:00
RV-ContentCrop--right()
+RV-Block--modifier()
.RV-Image *
object-position right
2021-01-03 12:36:12 +01:00
RV-ContentCrop--left()
+RV-Block--modifier()
.RV-Image *
object-position left
2021-01-03 12:36:12 +01:00
RV-ContentCrop--center()
+RV-Block--modifier()
.RV-Image *
object-position center
2021-01-03 12:36:12 +01:00
RV-ContentCrop--square()
+RV-Block--modifier()
2021-01-03 12:36:12 +01:00
width 100%
padding-top 100%
2021-01-03 12:36:12 +01:00
position relative
.RV-Image *,
div
position absolute
top 0
left 0
bottom 0
right 0
2021-01-03 15:33:36 +01:00
RV-ContentCrop--circle()
+RV-Block--modifier()
border-radius 50%
2021-01-19 23:38:14 +01:00
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()
width 100%
padding-top 100% * (--y / --x)
position relative
2021-01-03 12:36:12 +01:00
.RV-Image *
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
2021-01-03 12:36:12 +01:00
RV-ContentCrop--1to2()
+RV-Block--modifier()
RV-ContentCrop__XtoY(1, 2)
2021-01-03 12:36:12 +01:00
RV-ContentCrop--2to1()
+RV-Block--modifier()
RV-ContentCrop__XtoY(2, 1)
2021-01-03 12:36:12 +01:00
RV-ContentCrop--4to3()
+RV-Block--modifier()
RV-ContentCrop__XtoY(4, 3)
2021-01-03 12:36:12 +01:00
RV-ContentCrop--16to9()
+RV-Block--modifier()
RV-ContentCrop__XtoY(16, 9)
2021-01-03 12:36:12 +01:00
RV-ContentCrop--3to2()
+RV-Block--modifier()
RV-ContentCrop__XtoY(3, 2)
2021-01-03 12:36:12 +01:00
RV-ContentCrop__Text--fade(background-color=white)
+RV-Element--modifier()
&: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
2021-01-03 12:36:12 +01:00
RV-ContentCrop__Text--ellipsis(background-color=white)
+RV-Element--modifier()
&: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
2021-01-03 12:36:12 +01:00
2021-01-19 23:38:14 +01:00
RV-ContentCrop(line-height=1.1, height=350px)
background-color = white
display block
overflow hidden
2021-01-03 12:36:12 +01:00
height 100%
width 100%
box-sizing border-box
2021-01-19 23:38:14 +01:00
.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')
2021-01-19 23:38:14 +01:00
RV-CSSParameter({
})
line-height = 1.1
2021-01-19 23:38:14 +01:00
height = 350px
RV-ContentCrop(line-height, height)
RV-ContentCrop__Image()
+RV-Element('Text')
RV-ContentCrop__Text--ellipsis()
RV-ContentCrop__Text--fade()
RV-ContentCrop--bottom()
RV-ContentCrop--top()
RV-ContentCrop--right()
RV-ContentCrop--left()
RV-ContentCrop--center()
RV-ContentCrop--square()
RV-ContentCrop--circle()
RV-ContentCrop--1to2()
RV-ContentCrop--2to1()
RV-ContentCrop--4to3()
RV-ContentCrop--16to9()
RV-ContentCrop--3to2()