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

RV-ContentCrop--bottom()
	+RV-Block--modifier()
		.RV-Image *
			object-position bottom 
		
RV-ContentCrop--top()
	+RV-Block--modifier()
		.RV-Image *
			object-position top

RV-ContentCrop--right()
	+RV-Block--modifier()
		.RV-Image *
			object-position right

RV-ContentCrop--left()
	+RV-Block--modifier()
		.RV-Image *
			object-position left
			
RV-ContentCrop--center()
	+RV-Block--modifier()
		.RV-Image *
			object-position center

RV-ContentCrop--square()
	+RV-Block--modifier()
		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()
		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()
		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()
		RV-ContentCrop__XtoY(1, 2)

RV-ContentCrop--2to1()
	+RV-Block--modifier()
		RV-ContentCrop__XtoY(2, 1)

RV-ContentCrop--4to3()
	+RV-Block--modifier()
		RV-ContentCrop__XtoY(4, 3)

RV-ContentCrop--16to9()
	+RV-Block--modifier()
		RV-ContentCrop__XtoY(16, 9)

RV-ContentCrop--3to2()
	+RV-Block--modifier()
		RV-ContentCrop__XtoY(3, 2)

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

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


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