diff --git a/components/01_Layouts/contentCrop/_contentCrop.scss b/components/01_Layouts/contentCrop/_contentCrop.scss index b146ea5..2ee7e8d 100644 --- a/components/01_Layouts/contentCrop/_contentCrop.scss +++ b/components/01_Layouts/contentCrop/_contentCrop.scss @@ -1,6 +1,6 @@ @mixin RV-ContentCrop--bottom { img { - object-position: botom; + object-position: bottom; } } @@ -28,28 +28,7 @@ } } -@mixin 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; - - p { - overflow: hidden; - display: block; - text-overflow: ellipsis; - padding: 0; - margin: 0; - line-height: #{$-line-height}; - // Determining the max line count and caclulating the height - z-index: -20; - position: relative; - background-color: #{$-background-color}; - height: floor(100% / $-line-height / 16) * $-line-height * 16; - } - +@mixin RV-ContentCrop__Text { &--fade { &:after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color}); @@ -77,6 +56,72 @@ padding: 0 2px; } } +} + +@mixin 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; + + p { + overflow: hidden; + display: block; + text-overflow: ellipsis; + padding: 0; + margin: 0; + line-height: #{$-line-height}; + // Determining the max line count and caclulating the height + z-index: -20; + position: relative; + background-color: #{$-background-color}; + height: floor(100% / $-line-height / 16) * $-line-height * 16; + } + + &--square, + &--1to1 { + width: 100%; + padding-top: 100%; + position: relative; + + img { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + } + + &--1to2 { + width: 50%; + padding-top: 100%; + position: relative; + + img { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + } + + &--2to1 { + width: 100%; + padding-top: 50%; + position: relative; + + img { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + } img { width: 100%;