89 lines
2.0 KiB
SCSS
89 lines
2.0 KiB
SCSS
// ==========================================================================
|
||
// Objects / Crop
|
||
// ==========================================================================
|
||
|
||
//
|
||
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss
|
||
//
|
||
|
||
// A list of cropping ratios that get generated as modifier classes.
|
||
$crop-ratios: (
|
||
(2:1),
|
||
(4:3),
|
||
(16:9),
|
||
) !default;
|
||
|
||
/**
|
||
* Provide a cropping container in order to display media (usually images)
|
||
* cropped to certain ratios.
|
||
*
|
||
* 1. Set up a positioning context in which the image can sit.
|
||
* 2. This is the crucial part: where the cropping happens.
|
||
*/
|
||
.o-crop {
|
||
position: relative; /* [1] */
|
||
display: block;
|
||
overflow: hidden; /* [2] */
|
||
}
|
||
|
||
/**
|
||
* Apply this class to the content (usually `img`) that needs cropping.
|
||
*
|
||
* 1. Image’s default positioning is top-left in the cropping box.
|
||
* 2. Make sure the media doesn’t stop itself too soon.
|
||
*/
|
||
.o-crop_content {
|
||
position: absolute;
|
||
top: 0; /* [1] */
|
||
left: 0; /* [1] */
|
||
max-width: none; /* [2] */
|
||
|
||
/**
|
||
* We can position the media in different locations within the cropping area.
|
||
*/
|
||
&.-right {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
|
||
&.-bottom {
|
||
top: auto;
|
||
bottom: 0;
|
||
}
|
||
|
||
&.-center {
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
/* stylelint-disable */
|
||
|
||
//
|
||
// Generate a series of crop classes to be used like so:
|
||
//
|
||
// @example
|
||
// <div class="o-crop -16:9">
|
||
//
|
||
//
|
||
.o-crop {
|
||
@each $crop in $crop-ratios {
|
||
@each $antecedent, $consequent in $crop {
|
||
@if (type-of($antecedent) != number) {
|
||
@error "`#{$antecedent}` needs to be a number."
|
||
}
|
||
|
||
@if (type-of($consequent) != number) {
|
||
@error "`#{$consequent}` needs to be a number."
|
||
}
|
||
|
||
&.-#{$antecedent}\:#{$consequent} {
|
||
padding-bottom: ($consequent/$antecedent) * 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* stylelint-enable */
|