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 {
|
&--fade {
|
||||||
&:after {
|
&:after {
|
||||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
|
||||||
@ -42,7 +42,9 @@
|
|||||||
z-index: -10;
|
z-index: -10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
|
||||||
&--ellipsis {
|
&--ellipsis {
|
||||||
&:after {
|
&:after {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -58,13 +60,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
|
@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {
|
||||||
|
|
||||||
// Heuristic, just to be safe
|
|
||||||
$-line-height: $-line-height * 1.1;
|
|
||||||
$-background-color: white;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -80,49 +76,82 @@
|
|||||||
height: floor(100% / $-line-height / 16) * $-line-height * 16;
|
height: floor(100% / $-line-height / 16) * $-line-height * 16;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--square,
|
&--fade {
|
||||||
&--1to1 {
|
@include RV-ContentCrop__Text--fade($-background-color);
|
||||||
width: 100%;
|
}
|
||||||
padding-top: 100%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
img {
|
&--ellipsis {
|
||||||
position: absolute;
|
@include RV-ContentCrop__Text--ellipsis($-background-color);
|
||||||
top: 0;
|
}
|
||||||
left: 0;
|
}
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
@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 {
|
&--1to2 {
|
||||||
width: 50%;
|
@include RV-ContentCrop__Shapes--xtoy(1, 2);
|
||||||
padding-top: 100%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--2to1 {
|
&--2to1 {
|
||||||
width: 100%;
|
@include RV-ContentCrop__Shapes--xtoy(2, 1);
|
||||||
padding-top: 50%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--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 {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -130,23 +159,38 @@
|
|||||||
display: block;
|
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;
|
@include RV-ContentCrop--left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--center {
|
&--center {
|
||||||
@include RV-ContentCrop--center;
|
@include RV-ContentCrop--center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--top {
|
&--top {
|
||||||
@include RV-ContentCrop--top;
|
@include RV-ContentCrop--top;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--bottom {
|
&--bottom {
|
||||||
@include RV-ContentCrop--bottom;
|
@include RV-ContentCrop--bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--center {
|
&--center {
|
||||||
@include RV-ContentCrop--center;
|
@include RV-ContentCrop--center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user