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

196 lines
3.7 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')
RV-ContentCrop__Square()
border-radius 50%
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__Image()
+RV-Element--name('Image')
.RV-Image *, .RV-Image
width 100%
height 100%
object-fit cover
display block
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 ' '
opacity 0.8
position relative
top -25%
width 100%
height 25%
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__Text(line-height=1.1, background-color=white)
+RV-Element--name('Text')
--cc 'text'
& .RV-Text
overflow hidden
display block
text-overflow ellipsis
// Determining the max line count and caclulating the height
line-height line-height
position relative
background-color background-color
max-height floor(100% / line-height / 16) * line-height * 16
padding 0
margin 0
*
margin 0
padding-bottom line-height * 16px
*:last-child
padding-bottom unset
RV-ContentCrop(line-height=1.1)
line-height = calc(line-height * 1.1)
background-color = white
display block
overflow hidden
+RV-Block('RV-ContentCrop')
line-height = 1.1
RV-ContentCrop(line-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--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()