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

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

RV-ContentCrop--right()
	.RV-Image *
		object-position right

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

RV-ContentCrop__Text--fade(background-color=white)
	&: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)
	&: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-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

	&--fade
		RV-ContentCrop__Text--fade(background-color)

	&--ellipsis
		RV-ContentCrop__Text--ellipsis(background-color)
		
RV-ContentCrop__Shapes--square()
	width 100%
	padding-top 100%
	position relative

	.RV-Image *,
	div
		position absolute
		top 0
		left 0
		bottom 0
		right 0
		
RV_ContentCrop__Shapes--circle()
	RV-ContentCrop__Shapes--square()
	border-radius 50%

RV-ContentCrop__Shapes--xtoy(-x, -y)
	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__Shapes()

	&--square
		RV-ContentCrop__Shapes--square()

	&--circle
		RV_ContentCrop__Shapes--circle()

	&--1to2
		RV-ContentCrop__Shapes--xtoy(1, 2)

	&--2to1
		RV-ContentCrop__Shapes--xtoy(2, 1)

	&--4to3
		RV-ContentCrop__Shapes--xtoy(4, 3)

	&--16to9
		RV-ContentCrop__Shapes--xtoy(16, 9)

	&--3to2
		RV-ContentCrop__Shapes--xtoy(3, 2)

RV-ContentCrop__Image()
	.RV-Image *, .RV-Image
		width 100%
		height 100%
		object-fit cover
		display block
		
RV-ContentCrop--shorthands()
	&--left
		RV-ContentCrop--left()

	&--center
		RV-ContentCrop--center()

	&--top
		RV-ContentCrop--top()

	&--bottom
		RV-ContentCrop--bottom()

	&--center
		RV-ContentCrop--center()
		
	RV-ContentCrop__Shapes()
		
		
RV-ContentCrop(line-height=1.1, prefix='&')
	// Heuristic, just to be safe
	line-height = line-height * 1.1
	background-color = white
	display block
	overflow hidden

	RV-ContentCrop__Image()
	RV-ContentCrop__Text(line-height)

		
.RV-ContentCrop
	RV-ContentCrop()
	RV-ContentCrop--shorthands()