scss-library/public/playground.css

170 lines
3.0 KiB
CSS

@import './pink.css';
.RV-Alignment displaygrid,
.RV-Alignment .RV-Alignment--top {
display: grid;
align-content: start;
}
.RV-Alignment .RV-Alignment--bottom {
display: grid;
align-content: end;
}
.RV-Alignment .RV-Alignment--left {
display: grid;
justify-content: start;
}
.RV-Alignment .RV-Alignment--right {
display: grid;
justify-content: end;
}
.RV-Alignment .RV-Alignment--horizontalCenter {
display: grid;
justify-content: center;
}
.RV-Alignment .RV-Alignment--verticalCenter {
display: grid;
align-items: center;
}
.RV-Alignment .RV-Alignment--center {
display: grid;
justify-content: center;
display: grid;
align-items: center;
}
.RV-ContentCrop {
display: block;
overflow: hidden;
}
.RV-ContentCrop img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.RV-ContentCrop p {
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0;
margin: 0;
line-height: 1.21;
z-index: -20;
position: relative;
background-color: #fff;
height: 96.80000000000001%;
}
.RV-ContentCrop--fade--fade:after {
background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
display: block;
content: ' ';
opacity: 0.8;
position: relative;
top: -25%;
width: 100%;
height: 25%;
z-index: -10;
}
.RV-ContentCrop--ellipsis--ellipsis:after {
position: relative;
display: block;
bottom: 1.2em;
left: calc(100% - 3ch);
content: '...';
font-size: 1.2em;
min-width: 2em;
background-color: #fff;
padding: 0 2px;
}
.RV-ContentCrop--square {
width: 100%;
padding-top: 100%;
position: relative;
}
.RV-ContentCrop--square img,
.RV-ContentCrop--square div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ContentCrop--1to2 {
width: 100%;
padding-top: 200%;
position: relative;
}
.RV-ContentCrop--1to2 img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ContentCrop--2to1 {
width: 100%;
padding-top: 50%;
position: relative;
}
.RV-ContentCrop--2to1 img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ContentCrop--4to3 {
width: 100%;
padding-top: 75%;
position: relative;
}
.RV-ContentCrop--4to3 img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ContentCrop--16to9 {
width: 100%;
padding-top: 56.25%;
position: relative;
}
.RV-ContentCrop--16to9 img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ContentCrop--3to2 {
width: 100%;
padding-top: 66.66666666666666%;
position: relative;
}
.RV-ContentCrop--3to2 img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ContentCrop--left img {
object-position: left;
}
.RV-ContentCrop--center img {
object-position: center;
}
.RV-ContentCrop--top img {
object-position: top;
}
.RV-ContentCrop--bottom img {
object-position: bottom;
}
.RV-ContentCrop--center img {
object-position: center;
}