-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
939 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| /* ========================================================================== | ||
| #CROP | ||
| ========================================================================== */ | ||
|
|
||
| // A list of cropping ratios that get generated as modifier classes. | ||
| // You should predefine it with only the ratios and names your project needs. | ||
| // | ||
| // The map keys are the strings used in the generated class names, and they can | ||
| // follow any convention, as long as they are properly escaped strings. i.e.: | ||
| // | ||
| // $inuit-crops: ( | ||
| // "2\\:1" : (2:1), | ||
| // "4-by-3" : (4:3), | ||
| // "full-hd" : (16:9), | ||
| // "card-image" : (2:3), | ||
| // "golden-ratio" : (1.618:1) -> non-integers are okay | ||
| // ) !default; | ||
|
|
||
| @use "sass:math"; | ||
|
|
||
| $inuit-crops: ( | ||
| "2\\:1" : (2:1), | ||
| "4\\:3" : (4:3), | ||
| "16\\:9" : (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. | ||
| */ | ||
|
|
||
| .o-crop__content--left-top { | ||
| left: 0; | ||
| } | ||
|
|
||
| .o-crop__content--left-center { | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| } | ||
|
|
||
| .o-crop__content--left-bottom { | ||
| top: auto; | ||
| bottom: 0; | ||
| } | ||
|
|
||
| .o-crop__content--right-top { | ||
| right: 0; | ||
| left: auto; | ||
| } | ||
|
|
||
| .o-crop__content--right-center { | ||
| top: 50%; | ||
| right: 0; | ||
| left: auto; | ||
| transform: translateY(-50%); | ||
| } | ||
|
|
||
| .o-crop__content--right-bottom { | ||
| top: auto; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: auto; | ||
| } | ||
|
|
||
| .o-crop__content--center-top { | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
|
|
||
| .o-crop__content--center, | ||
| .o-crop__content--center-center { | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| .o-crop__content--center-bottom { | ||
| top: auto; | ||
| bottom: 0; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| /* Crop-ratio variants | ||
| ========================================================================== */ | ||
|
|
||
| /** | ||
| * Generate a series of crop classes to be used like so: | ||
| * | ||
| * <div class="o-crop o-crop--golden-ratio"> | ||
| * | ||
| */ | ||
|
|
||
| @each $crop-name, $crop-value in $inuit-crops { | ||
|
|
||
| @each $antecedent, $consequent in $crop-value { | ||
|
|
||
| @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-crop--#{$crop-name} { | ||
| padding-bottom: math.div($consequent, $antecedent) * 100%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| /* Fill modifier | ||
| ========================================================================== */ | ||
|
|
||
| /** | ||
| * Content stretches to fill it's container while maintaining aspect-ratio. | ||
| */ | ||
|
|
||
| .o-crop--fill { | ||
|
|
||
| > .o-crop__content { | ||
| min-height: 100%; | ||
| min-width: 100%; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /* ========================================================================== | ||
| #RATIO | ||
| ========================================================================== */ | ||
|
|
||
| // A list of aspect ratios that get generated as modifier classes. | ||
| // You should predefine it with only the ratios and names your project needs. | ||
| // | ||
| // The map keys are the strings used in the generated class names, and they can | ||
| // follow any convention, as long as they are properly escaped strings. i.e.: | ||
| // | ||
| // $inuit-ratios: ( | ||
| // "2\\:1" : (2:1), | ||
| // "4-by-3" : (4:3), | ||
| // "full-hd" : (16:9), | ||
| // "card-image" : (2:3), | ||
| // "golden-ratio" : (1.618:1) -> non-integers are okay | ||
| // ) !default; | ||
|
|
||
| @use "sass:math"; | ||
|
|
||
| $inuit-ratios: ( | ||
| "2\\:1" : (2:1), | ||
| "4\\:3" : (4:3), | ||
| "16\\:9" : (16:9) | ||
| ) !default; | ||
|
|
||
|
|
||
|
|
||
| /** | ||
| * Create ratio-bound content blocks, to keep media (e.g. images, videos) in | ||
| * their correct aspect ratios. | ||
| * | ||
| * http://alistapart.com/article/creating-intrinsic-ratios-for-video | ||
| * | ||
| * 1. Default is a 1:1 ratio (i.e. a perfect square). | ||
| */ | ||
|
|
||
| .o-ratio { | ||
| position: relative; | ||
| display: block; | ||
|
|
||
| &:before { | ||
| content: ""; | ||
| display: block; | ||
| width: 100%; | ||
| padding-bottom: 100%; /* [1] */ | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .o-ratio__content, | ||
| .o-ratio > iframe, | ||
| .o-ratio > embed, | ||
| .o-ratio > object { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| /* Ratio variants. | ||
| ========================================================================== */ | ||
|
|
||
| /** | ||
| * Generate a series of ratio classes to be used like so: | ||
| * | ||
| * <div class="o-ratio o-ratio--golden-ratio"> | ||
| * | ||
| */ | ||
|
|
||
| @each $ratio-name, $ratio-value in $inuit-ratios { | ||
|
|
||
| @each $antecedent, $consequent in $ratio-value { | ||
|
|
||
| @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-ratio--#{$ratio-name}:before { | ||
| padding-bottom: math.div($consequent, $antecedent) * 100%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| /* Contain modifier. | ||
| ========================================================================== */ | ||
|
|
||
| /** | ||
| * Only works with image content. | ||
| * Contains the image to the boundaries, without cropping or stretching it. | ||
| */ | ||
|
|
||
| .o-ratio--img-contain { | ||
|
|
||
| > .o-ratio__content { | ||
| height: auto; | ||
| margin: auto; | ||
| max-height: 100%; | ||
| max-width: 100%; | ||
| width: auto; | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.