Restructuring Shapes
This commit is contained in:
parent
6b465583ef
commit
64bcfa97cf
@ -28,7 +28,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Text {
|
||||
@mixin RV-ContentCrop__Text--fade($-background-color: white) {
|
||||
&--fade {
|
||||
&:after {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
|
||||
@ -42,7 +42,9 @@
|
||||
z-index: -10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
|
||||
&--ellipsis {
|
||||
&:after {
|
||||
position: relative;
|
||||
@ -58,13 +60,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;
|
||||
@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
@ -80,49 +76,82 @@
|
||||
height: floor(100% / $-line-height / 16) * $-line-height * 16;
|
||||
}
|
||||
|
||||
&--square,
|
||||
&--1to1 {
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
position: relative;
|
||||
&--fade {
|
||||
@include RV-ContentCrop__Text--fade($-background-color);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
&--ellipsis {
|
||||
@include RV-ContentCrop__Text--ellipsis($-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Shapes--square {
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
position: relative;
|
||||
|
||||
img,
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Shapes--circle {
|
||||
@include RV-ContentCrop__Shapes--square;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Shapes--xtoy($-x, $-y) {
|
||||
width: 100%;
|
||||
padding-top: 100% * ($-y / $-x);
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Shapes {
|
||||
|
||||
&--square {
|
||||
@include RV-ContentCrop__Shapes--square;
|
||||
}
|
||||
|
||||
&--circle {
|
||||
@include RV_ContentCrop__Shapes--circle;
|
||||
}
|
||||
|
||||
&--1to2 {
|
||||
width: 50%;
|
||||
padding-top: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
@include RV-ContentCrop__Shapes--xtoy(1, 2);
|
||||
}
|
||||
|
||||
&--2to1 {
|
||||
width: 100%;
|
||||
padding-top: 50%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
@include RV-ContentCrop__Shapes--xtoy(2, 1);
|
||||
}
|
||||
|
||||
&--4to3 {
|
||||
@include RV-ContentCrop__Shapes--xtoy(4, 3);
|
||||
}
|
||||
|
||||
&--16to9 {
|
||||
@include RV-ContentCrop__Shapes--xtoy(16, 9);
|
||||
}
|
||||
|
||||
&--3to2 {
|
||||
@include RV-ContentCrop__Shapes--xtoy(3, 2);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-ContentCrop__Image {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -130,23 +159,38 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
#{$-prefix}--left {
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
@include RV-ContentCrop__Image;
|
||||
@include RV-ContentCrop__Text($-line-height);
|
||||
|
||||
@include RV-ContentCrop__Shapes;
|
||||
|
||||
&--left {
|
||||
@include RV-ContentCrop--left;
|
||||
}
|
||||
|
||||
#{$-prefix}--center {
|
||||
&--center {
|
||||
@include RV-ContentCrop--center;
|
||||
}
|
||||
|
||||
#{$-prefix}--top {
|
||||
&--top {
|
||||
@include RV-ContentCrop--top;
|
||||
}
|
||||
|
||||
#{$-prefix}--bottom {
|
||||
&--bottom {
|
||||
@include RV-ContentCrop--bottom;
|
||||
}
|
||||
|
||||
#{$-prefix}--center {
|
||||
&--center {
|
||||
@include RV-ContentCrop--center;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user