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

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()