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

164 lines
2.8 KiB
Stylus
Raw Normal View History

2021-01-03 12:36:12 +01:00
RV-ContentCrop--bottom()
2021-01-03 15:33:36 +01:00
.RV-Image *
2021-01-03 12:36:12 +01:00
object-position bottom
RV-ContentCrop--top()
2021-01-03 15:33:36 +01:00
.RV-Image *
2021-01-03 12:36:12 +01:00
object-position top
RV-ContentCrop--right()
2021-01-03 15:33:36 +01:00
.RV-Image *
2021-01-03 12:36:12 +01:00
object-position right
RV-ContentCrop--left()
2021-01-03 15:33:36 +01:00
.RV-Image *
2021-01-03 12:36:12 +01:00
object-position left
RV-ContentCrop--center()
2021-01-03 15:33:36 +01:00
.RV-Image *
2021-01-03 12:36:12 +01:00
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%
2021-01-03 17:00:55 +01:00
z-index 10
2021-01-03 12:36:12 +01:00
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)
2021-01-03 15:33:36 +01:00
.RV-Text
2021-01-03 12:36:12 +01:00
overflow hidden
display block
text-overflow ellipsis
// Determining the max line count and caclulating the height
2021-01-03 15:33:36 +01:00
line-height line-height
2021-01-03 12:36:12 +01:00
position relative
background-color background-color
2021-01-03 15:33:36 +01:00
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
2021-01-03 12:36:12 +01:00
&--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
2021-01-03 15:33:36 +01:00
.RV-Image *,
2021-01-03 12:36:12 +01:00
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
2021-01-03 15:33:36 +01:00
.RV-Image *
2021-01-03 12:36:12 +01:00
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()
2021-01-03 15:33:36 +01:00
.RV-Image *, .RV-Image
2021-01-03 12:36:12 +01:00
width 100%
height 100%
object-fit cover
display block
2021-01-03 17:00:55 +01:00
RV-ContentCrop--shorthands()
2021-01-03 12:36:12 +01:00
&--left
RV-ContentCrop--left()
&--center
RV-ContentCrop--center()
&--top
RV-ContentCrop--top()
&--bottom
RV-ContentCrop--bottom()
&--center
RV-ContentCrop--center()
2021-01-03 17:00:55 +01:00
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)
2021-01-03 12:36:12 +01:00
.RV-ContentCrop
2021-01-03 17:00:55 +01:00
RV-ContentCrop()
RV-ContentCrop--shorthands()