diff --git a/packages/global/styles/05-objects/objects-crop/_objects-crop.scss b/packages/global/styles/05-objects/objects-crop/_objects-crop.scss deleted file mode 100644 index b4b62b5770..0000000000 --- a/packages/global/styles/05-objects/objects-crop/_objects-crop.scss +++ /dev/null @@ -1,90 +0,0 @@ -/* ========================================================================== - #BOLT CROP OBJECT - ========================================================================== */ - -// A list of cropping ratios that get generated as modifier classes. - -$bolt-crops: ( - (1:1), - (4:3), - (3:4), - (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-bolt-crop { - display: block; - position: relative; /* [1] */ - 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-bolt-crop__content { - position: absolute; - top: 0; /* [1] */ - left: 0; /* [1] */ - min-width: 100%; - max-width: none; /* [2] */ - min-height: 100%; -} - - -// We can position the media in different locations within the cropping area. -.o-bolt-crop--right > .o-bolt-crop__content { - right: 0; - left: auto; -} - -.o-bolt-crop--bottom > .o-bolt-crop__content { - top: auto; - bottom: 0; -} - -.o-bolt-crop--center > .o-bolt-crop__content { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - - -/* Crop-ratio variants. - ========================================================================== */ - -/** - * Generate a series of crop classes to be used like so: - * - *
- * - */ -@mixin bolt-generate-crops($breakpoint: null) { - @each $crop in $bolt-crops { - @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.'; - } - - .o-bolt-crop--#{$antecedent}\:#{$consequent}#{$breakpoint} { - padding-bottom: ($consequent/$antecedent) * 100%; - } - } - } -} - -@include bolt-generate-crops; diff --git a/packages/global/styles/05-objects/objects-crop/src/crop.twig b/packages/global/styles/05-objects/objects-crop/src/crop.twig deleted file mode 100644 index 966ed3d41a..0000000000 --- a/packages/global/styles/05-objects/objects-crop/src/crop.twig +++ /dev/null @@ -1 +0,0 @@ -Placeholder Crop Object Template \ No newline at end of file diff --git a/packages/global/styles/index.scss b/packages/global/styles/index.scss index 7194d8888a..98b81ee4d2 100644 --- a/packages/global/styles/index.scss +++ b/packages/global/styles/index.scss @@ -24,7 +24,6 @@ @import '05-objects/objects-bare-list/_objects-bare-list'; @import '05-objects/objects-block/_objects-block'; -@import '05-objects/objects-crop/_objects-crop'; @import '05-objects/objects-flag/_objects-flag'; @import '05-objects/objects-grid/_objects-grid'; @import '05-objects/objects-inline-list/_objects-inline-list';