ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Clean ratio object, create ratio utility, import ratio and width by default

Browse Source
This commit is contained in:
Antoine Boulanger
2019-04-19 11:45:15 -04:00
parent d9eb8364dc
commit 6d8954563a
4 changed files with 52 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/styles/main.scss
View File

@@ -14,8 +14,7 @@
@import "tools/mixins";
@import "tools/fonts";
@import "tools/layout";
// @import "tools/ratio";
// @import "tools/widths";
@import "tools/widths";
// @import "tools/familly";
// Generic
@@ -35,14 +34,14 @@
// Objects
// ==========================================================================
@import "objects/container";
// @import "objects/crop";
// @import "objects/ratio";
// @import "objects/table";
@import "objects/ratio";
@import "objects/layout";
@import "objects/form";
@import "objects/button";
@import "objects/pjax";
@import "objects/scroll";
// @import "objects/crop";
// @import "objects/table";
// Vendors
// ==========================================================================
@@ -58,10 +57,11 @@
// Utilities
// ==========================================================================
@import "utilities/ratio";
@import "utilities/widths";
// @import "utilities/align";
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/headings";
// @import "utilities/spacing";
// @import "utilities/widths";
// @import "utilities/print";

46
assets/styles/objects/_ratio.scss
View File

@@ -2,20 +2,6 @@
// Objects / Ratio
// ==========================================================================
//
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
//
// A list of aspect ratios that get generated as modifier classes.
$aspect-ratios: (
(2:1),
(4:3),
(16:9),
) !default;
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
@@ -38,6 +24,7 @@ $aspect-ratios: (
}
.o-ratio_content,
.o-ratio > img,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
@@ -46,34 +33,5 @@ $aspect-ratios: (
bottom: 0;
left: 0;
width: 100%;
height: 100%;
// height: 100%;
}
/* stylelint-disable */
//
// Generate a series of ratio classes to be used like so:
//
// @example
// <div class="o-ratio -16:9">
//
//
.o-ratio {
@each $ratio in $aspect-ratios {
@each $antecedent, $consequent in $ratio {
@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}::before {
padding-bottom: ($consequent/$antecedent) * 100%;
}
}
}
}
/* stylelint-enable */

76
assets/styles/tools/_ratio.scss
View File

@@ -1,76 +0,0 @@
// ==========================================================================
// Tools / Ratio Constraint
// ==========================================================================
//
// A tool to restrain a container to a unitary or fractional proportion.
//
$data-ratios: "1/2" "0.5" 50%,
"11/20" "0.55" 55%,
"3/5" "0.6" 60%,
"13/20" "0.65" 65%,
"7/10" "0.7" 70%,
"3/4" "0.75" 75%,
"4/5" "0.8" 80%,
"17/20" "0.85" 85%,
"9/10" "0.9" 90%,
"19/20" "0.95" 95%,
"1/1" "1" 100%,
"21/20" "1.05" 105%,
"11/10" "1.1" 110%,
"23/20" "1.15" 115%,
"6/5" "1.2" 120%,
"5/4" "1.25" 125% !default;
$data-ratio-crops: "top" "bottom" "both" !default;
@mixin crop($crop) {
@if $crop == "top" {
bottom: 0;
} @else if $crop == "bottom" {
top: 0;
} @else if $crop == "both" {
top: 50%;
transform: translateY(-50%);
}
}
.u-ratio {
position: relative;
overflow: hidden;
&::before {
display: block;
width: 100%;
content: "";
}
@each $ratio in $data-ratios {
$ratio-1: nth($ratio, 1);
$ratio-2: nth($ratio, 2);
&[data-ratio="#{$ratio-1}"]::before,
&[data-ratio="#{$ratio-2}"]::before {
padding-top: nth($ratio, 3);
}
}
}
.u-ratio_content_container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.u-ratio_content {
position: absolute;
width: 100%;
@each $crop in $data-ratio-crops {
&[data-ratio-crop="#{$crop}"] {
@include crop($crop);
}
}
}

44
assets/styles/utilities/_ratio.scss Normal file
View File

@@ -0,0 +1,44 @@
// ==========================================================================
// Utilities / Ratio
// ==========================================================================
//
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
//
// A list of aspect ratios that get generated as modifier classes.
$aspect-ratios: (
(2:1),
(4:3),
(16:9),
) !default;
/* stylelint-disable */
//
// Generate a series of ratio classes to be used like so:
//
// @example
// <div class="o-ratio -16:9">
//
//
.o-ratio {
@each $ratio in $aspect-ratios {
@each $antecedent, $consequent in $ratio {
@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}::before {
padding-bottom: ($consequent/$antecedent) * 100%;
}
}
}
}
/* stylelint-enable */