novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix alignment

Browse Source
This commit is contained in:
Antoine Boulanger
2017-04-27 16:00:45 -04:00
parent 61d875f52d
commit 5e58ed9115
23 changed files with 186 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.csscomb.json
View File

@@ -1,8 +1,10 @@
{ {
"remove-empty-rulesets": true,
"always-semicolon": true, "always-semicolon": true,
"color-case": "lower", "color-case": "upper",
"block-indent": "\t", "block-indent": " ",
"color-shorthand": false, "color-shorthand": false,
"element-case": "lower",
"eof-newline": true, "eof-newline": true,
"leading-zero": true, "leading-zero": true,
"quotes": "double", "quotes": "double",
@@ -16,8 +18,7 @@
"space-before-selector-delimiter": "", "space-before-selector-delimiter": "",
"space-before-closing-brace": "\n", "space-before-closing-brace": "\n",
"strip-spaces": true, "strip-spaces": true,
"unitless-zero": true, "tab-size": true,
"vendor-prefix-align": true,
"sort-order": [ "sort-order": [
[ [
"$include" "$include"

2
assets/styles/base/_headings.scss
View File

@@ -3,7 +3,7 @@
// ========================================================================== // ==========================================================================
@mixin h { @mixin h {
margin-top: 0; margin-top: 0;
line-height: $line-height-h; line-height: $line-height-h;
} }

16
assets/styles/base/_page.scss
View File

@@ -14,24 +14,24 @@
// 3. Ensure the page always fills at least the entire height of the viewport. // 3. Ensure the page always fills at least the entire height of the viewport.
// //
html { html {
color: $color; overflow-y: scroll; /* [2] */
font-size: em($font-size, 16px); /* [1] */ min-height: 100%; /* [3] */
color: $color;
font-size: em($font-size, 16px); /* [1] */
font-family: $font-family; font-family: $font-family;
line-height: $line-height; /* [1] */ line-height: $line-height; /* [1] */
overflow-y: scroll; /* [2] */
min-height: 100%; /* [3] */
} }
::selection { ::selection {
background-color: $selection-background-color; background-color: $selection-background-color;
color: $selection-text-color; color: $selection-text-color;
text-shadow: none; text-shadow: none;
} }
a { a {
color: $link-color;
@include u-hocus { @include u-hocus {
color: $link-hover-color; color: $link-hover-color;
} }
color: $link-color;
} }

34
assets/styles/generic/_button.scss
View File

@@ -12,24 +12,24 @@
// //
button, button,
.o-button { .o-button {
display: inline-block; /* [1] */
overflow: visible; /* [2] */
margin: 0; /* [3] */
padding: 0;
outline: 0;
border: 0;
background: none transparent;
color: inherit;
vertical-align: middle; /* [4] */
text-align: center; /* [3] */
text-decoration: none;
text-transform: none;
font: inherit; /* [5] */
line-height: normal;
cursor: pointer; /* [6] */
user-select: none;
@include u-hocus { @include u-hocus {
text-decoration: none; text-decoration: none;
} }
display: inline-block; /* [1] */
overflow: visible; /* [2] */
margin: 0; /* [3] */
padding: 0;
outline: 0;
border: 0;
background: none transparent;
color: inherit;
vertical-align: middle; /* [4] */
text-align: center; /* [3] */
text-decoration: none;
text-transform: none;
font: inherit; /* [5] */
line-height: normal;
cursor: pointer; /* [6] */
user-select: none;
} }

22
assets/styles/generic/_form.scss
View File

@@ -5,18 +5,18 @@
input, input,
select, select,
textarea { textarea {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
outline: 0; outline: 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
color: inherit; background: none transparent;
font: inherit; color: inherit;
line-height: normal; font: inherit;
appearance: none; line-height: normal;
background: none transparent; appearance: none;
} }
select { select {

14
assets/styles/generic/_generic.scss
View File

@@ -58,15 +58,15 @@ a, area, button, input, label, select, textarea, [tabindex] {
} }
table { table {
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse;
} }
hr { hr {
display: block; display: block;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid #cccccc; border-top: 1px solid #CCCCCC;
} }

5
assets/styles/generic/_media.scss
View File

@@ -29,15 +29,16 @@ audio:not([controls]) {
// //
img, img,
svg { svg {
height: auto;
max-width: 100%; /* [2] */ max-width: 100%; /* [2] */
height: auto;
// //
// 4. If a `width` and/or `height` attribute have been explicitly defined, let’s // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s
// not make the image fluid. // not make the image fluid.
// //
&[width], /* [4] */ &[width], /* [4] */
&[height] { /* [4] */ &[height] {
/* [4] */
max-width: none; max-width: none;
} }
} }

45
assets/styles/generic/_normalize.scss
View File

@@ -47,8 +47,8 @@ section {
*/ */
h1 { h1 {
font-size: 2em;
margin: 0.67em 0; margin: 0.67em 0;
font-size: 2em;
} }
/* Grouping content /* Grouping content
@@ -61,7 +61,8 @@ h1 {
figcaption, figcaption,
figure, figure,
main { /* 1 */ main {
/* 1 */
display: block; display: block;
} }
@@ -79,9 +80,9 @@ figure {
*/ */
hr { hr {
overflow: visible; /* 2 */
box-sizing: content-box; /* 1 */ box-sizing: content-box; /* 1 */
height: 0; /* 1 */ height: 0; /* 1 */
overflow: visible; /* 2 */
} }
/** /**
@@ -90,8 +91,8 @@ hr {
*/ */
pre { pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */ font-size: 1em; /* 2 */
font-family: monospace, monospace; /* 1 */
} }
/* Text-level semantics /* Text-level semantics
@@ -154,8 +155,8 @@ strong {
code, code,
kbd, kbd,
samp { samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */ font-size: 1em; /* 2 */
font-family: monospace, monospace; /* 1 */
} }
/** /**
@@ -171,8 +172,8 @@ dfn {
*/ */
mark { mark {
background-color: #ff0; background-color: #FFFF00;
color: #000; color: #000000;
} }
/** /**
@@ -190,10 +191,10 @@ small {
sub, sub,
sup { sup {
font-size: 75%;
line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
font-size: 75%;
line-height: 0;
} }
sub { sub {
@@ -254,10 +255,10 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */ margin: 0; /* 2 */
font-size: 100%; /* 1 */
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 1 */
} }
/** /**
@@ -266,7 +267,8 @@ textarea {
*/ */
button, button,
input { /* 1 */ input {
/* 1 */
overflow: visible; overflow: visible;
} }
@@ -276,7 +278,8 @@ input { /* 1 */
*/ */
button, button,
select { /* 1 */ select {
/* 1 */
text-transform: none; text-transform: none;
} }
@@ -301,8 +304,8 @@ button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; padding: 0;
border-style: none;
} }
/** /**
@@ -321,9 +324,9 @@ button:-moz-focusring,
*/ */
fieldset { fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid #C0C0C0;
} }
/** /**
@@ -334,11 +337,11 @@ fieldset {
*/ */
legend { legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */ display: table; /* 1 */
max-width: 100%; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 3 */ padding: 0; /* 3 */
max-width: 100%; /* 1 */
color: inherit; /* 2 */
white-space: normal; /* 1 */ white-space: normal; /* 1 */
} }
@@ -386,8 +389,8 @@ textarea {
*/ */
[type="search"] { [type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px; /* 2 */
-webkit-appearance: textfield; /* 1 */
} }
/** /**
@@ -405,8 +408,8 @@ textarea {
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */ font: inherit; /* 2 */
-webkit-appearance: button; /* 1 */
} }
/* Interactive /* Interactive

6
assets/styles/objects/_button.scss
View File

@@ -2,10 +2,10 @@
// Objects / Buttons // Objects / Buttons
// ========================================================================== // ==========================================================================
.o-button { .o-button {
padding: rem(10px);
background-color: lightgray;
@include u-hocus { @include u-hocus {
background-color: gray; background-color: gray;
} }
padding: rem(10px);
background-color: lightgray;
} }

8
assets/styles/objects/_container.scss
View File

@@ -19,9 +19,9 @@
/* stylelint-enable */ /* stylelint-enable */
.o-container { .o-container {
margin-right: auto;
margin-left: auto;
padding-right: $padding; padding-right: $padding;
padding-left: $padding; padding-left: $padding;
margin-right: auto; max-width: $container-width;
margin-left: auto;
max-width: $container-width;
} }

4
assets/styles/objects/_crop.scss
View File

@@ -34,7 +34,7 @@ $crop-ratios: (
*/ */
.o-crop_content { .o-crop_content {
position: absolute; position: absolute;
top: 0; /* [1] */ top: 0; /* [1] */
left: 0; /* [1] */ left: 0; /* [1] */
max-width: none; /* [2] */ max-width: none; /* [2] */
@@ -52,7 +52,7 @@ $crop-ratios: (
} }
&.-center { &.-center {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

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

@@ -30,25 +30,24 @@ $aspect-ratios: (
overflow: hidden; overflow: hidden;
&:before { &:before {
content: "";
display: block; display: block;
width: 100%;
padding-bottom: 100%; /* [1] */ padding-bottom: 100%; /* [1] */
width: 100%;
content: "";
} }
} }
.o-ratio_content, .o-ratio_content,
.o-ratio > iframe, .o-ratio > iframe,
.o-ratio > embed, .o-ratio > embed,
.o-ratio > object { .o-ratio > object {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 100%; width: 100%;
width: 100%; height: 100%;
} }
/* stylelint-disable */ /* stylelint-disable */

2
assets/styles/objects/_table.scss
View File

@@ -9,7 +9,7 @@
* *
* @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values * @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
*/ */
&.-fixed{ &.-fixed {
table-layout: fixed; table-layout: fixed;
} }
} }

20
assets/styles/settings/_config.colors.scss
View File

@@ -4,22 +4,22 @@
// Palette // Palette
// ============================================================================= // =============================================================================
$white: #FFFFFF; $white: #FFFFFF;
$black: #000000; $black: #000000;
// Specific // Specific
// ============================================================================= // =============================================================================
// Link // Link
$link-color: #1A0DAB; $link-color: #1A0DAB;
$link-focus-color: #1A0DAB; $link-focus-color: #1A0DAB;
$link-hover-color: darken(#1A0DAB, 10%); $link-hover-color: darken(#1A0DAB, 10%);
// Selection // Selection
$selection-text-color: #3297fd; $selection-text-color: #3297FD;
$selection-background-color: #FFFFFF; $selection-background-color: #FFFFFF;
// Social Colors // Social Colors
// ============================================================================= // =============================================================================
$facebook-color: #3B5998; $facebook-color: #3B5998;
$instagram-color: #E1306C; $instagram-color: #E1306C;
$youtube-color: #CD201F; $youtube-color: #CD201F;
$twitter-color: #1DA1F2; $twitter-color: #1DA1F2;

16
assets/styles/settings/_config.scss
View File

@@ -8,7 +8,7 @@
$context: frontend !default; $context: frontend !default;
// Path is relative to the stylesheets directory. // Path is relative to the stylesheets directory.
$assets-path: '../' !default; $assets-path: "../" !default;
// Typefaces // Typefaces
// ============================================================================= // =============================================================================
@@ -17,10 +17,10 @@ $font-sans-serif: sans-serif;
// Typography // Typography
// ============================================================================= // =============================================================================
// Base // Base
$font-size: 16px; $font-size: 16px;
$line-height: 24px / $font-size; $line-height: 24px / $font-size;
$font-family: $font-sans-serif; $font-family: $font-sans-serif;
$color: #222222; $color: #222222;
// Headings // Headings
$font-size-h1: 36px !default; $font-size-h1: 36px !default;
$font-size-h2: 28px !default; $font-size-h2: 28px !default;
@@ -30,25 +30,25 @@ $font-size-h5: 18px !default;
$font-size-h6: 16px !default; $font-size-h6: 16px !default;
$line-height-h: $line-height; $line-height-h: $line-height;
// Weights // Weights
$light: 300; $light: 300;
$normal: 400; $normal: 400;
$medium: 500; $medium: 500;
$bold: 700; $bold: 700;
// Transitions // Transitions
// ============================================================================= // =============================================================================
$speed: 0.3s; $speed: 0.3s;
$easing: linear; $easing: linear;
// Spacing Units // Spacing Units
// ============================================================================= // =============================================================================
$unit: 60px; $unit: 60px;
$unit-small: 30px; $unit-small: 30px;
// Container // Container
// ========================================================================== // ==========================================================================
$container-width: 2000px; $container-width: 2000px;
$padding: $unit; $padding: $unit;
// Breakpoints // Breakpoints
// ============================================================================= // =============================================================================

4
assets/styles/tools/_fonts.scss
View File

@@ -25,7 +25,6 @@ $global-font-file-formats: "woff", "ttf" !default;
$file-formats $file-formats
) { ) {
$src: (); $src: ();
$formats-map: ( $formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"), woff2: "#{$file-path}.woff2" format("woff2"),
@@ -36,9 +35,8 @@ $global-font-file-formats: "woff", "ttf" !default;
@each $key, $values in $formats-map { @each $key, $values in $formats-map {
@if list-contains($file-formats, $key) { @if list-contains($file-formats, $key) {
$file-path: nth($values, 1); $file-path: nth($values, 1);
$font-format: nth($values, 2); $font-format: nth($values, 2);
$src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma); $src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma);
} }
} }

4
assets/styles/tools/_layout.scss
View File

@@ -45,9 +45,9 @@
// http://csswizardry.com/2011/08/building-better-grid-systems/ // http://csswizardry.com/2011/08/building-better-grid-systems/
// //
@mixin o-layout_item($gutter: 0, $fix-whitespace: true) { @mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
display: inline-block; // [2] display: inline-block; // [2]
width: 100%; // [4]
vertical-align: top; // [3] vertical-align: top; // [3]
width: 100%; // [4]
@if ($fix-whitespace) { @if ($fix-whitespace) {
font-size: 1rem; font-size: 1rem;

67
assets/styles/tools/_mixins.scss
View File

@@ -35,9 +35,9 @@
// //
@mixin u-clearfix($supports...) { @mixin u-clearfix($supports...) {
&::after { &::after {
content: if(list-contains($supports, opera), " ", "");
display: if(list-contains($supports, table), table, block); display: if(list-contains($supports, table), table, block);
clear: both; clear: both;
content: if(list-contains($supports, opera), " ", "");
} }
} }
@@ -51,18 +51,17 @@
// @output `font-size`, `line-height` // @output `font-size`, `line-height`
// //
@mixin font-size($font-size, $line-height: auto, $important: false) { @mixin font-size($font-size, $line-height: auto, $important: false) {
font-size: rem($font-size) $important;
$important: important($important); $important: important($important);
font-size: rem($font-size) $important; @if ($line-height == "auto") {
@if ($line-height == 'auto') {
line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important; line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
} }
@else { @else {
@if (type-of($line-height) == number or $line-height == 'inherit' or $line-height == 'normal') { @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
line-height: $line-height $important; line-height: $line-height $important;
} }
@elseif ($line-height != 'none' and $line-height != false) { @elseif ($line-height != "none" and $line-height != false) {
@error "D’oh! `#{$line-height}` is not a valid value for `$line-height`." @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
} }
} }
@@ -81,16 +80,16 @@
font-size: 0; font-size: 0;
&::before { &::before {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
content: ""; content: "";
vertical-align: middle; vertical-align: middle;
} }
> * { > * {
display: inline-block; display: inline-block;
font-size: 1rem;
vertical-align: middle; vertical-align: middle;
font-size: 1rem;
} }
} }
@@ -128,8 +127,8 @@
// @output `list-style`, `margin`, `padding` // @output `list-style`, `margin`, `padding`
// //
@mixin u-list-reset { @mixin u-list-reset {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
@@ -145,13 +144,13 @@
// @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow` // @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
// //
@mixin u-truncate($width: 100%) { @mixin u-truncate($width: 100%) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal; // [2]
@if $width { @if $width {
max-width: $width; // [1] max-width: $width; // [1]
} }
word-wrap: normal; // [2]
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
// //
@@ -161,16 +160,15 @@
// @output Properties for removing the element from the document flow. // @output Properties for removing the element from the document flow.
// //
@mixin u-accessibly-hidden($important: true) { @mixin u-accessibly-hidden($important: true) {
$important: important($important);
position: absolute $important; position: absolute $important;
overflow: hidden; overflow: hidden;
height: 1px; clip: rect(0 0 0 0);
width: 1px; margin: 0;
padding: 0; padding: 0;
margin: 0; width: 1px;
border: 0; height: 1px;
clip: rect(0 0 0 0); border: 0;
$important: important($important);
} }
// //
@@ -181,9 +179,9 @@
// //
@mixin u-accessibly-focusable { @mixin u-accessibly-focusable {
@include u-actus { @include u-actus {
clip: auto;
width: auto;
height: auto; height: auto;
width: auto;
clip: auto;
@content; @content;
} }
@@ -199,10 +197,9 @@
// @output `display`, `visibility` // @output `display`, `visibility`
// //
@mixin u-hidden($important: true) { @mixin u-hidden($important: true) {
display: none $important;
visibility: hidden $important;
$important: important($important); $important: important($important);
display : none $important;
visibility : hidden $important;
} }
// //
@@ -214,10 +211,8 @@
// @param {Boolean} $important [true] - Whether the visibility is important. // @param {Boolean} $important [true] - Whether the visibility is important.
// @output `display`, `visibility` // @output `display`, `visibility`
// //
@mixin u-shown($display: block, $important: true) @mixin u-shown($display: block, $important: true) {
{ display: $display $important;
visibility: visible $important;
$important: important($important); $important: important($important);
display : $display $important;
visibility : visible $important;
} }

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

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

5
assets/styles/tools/_widths.scss
View File

@@ -46,17 +46,14 @@ $breakpoint-delimiter: \@ !default;
// @param {String} $breakpoint - Optional suffix for responsive widths. // @param {String} $breakpoint - Optional suffix for responsive widths.
// @output `width`, `position`, `right`, `left` // @output `width`, `position`, `right`, `left`
// //
@mixin widths($columns, $breakpoint: null, $important: true) @mixin widths($columns, $breakpoint: null, $important: true) {
{
$important: important($important); $important: important($important);
// Loop through the number of columns for each denominator of our fractions. // Loop through the number of columns for each denominator of our fractions.
@each $denominator in $columns { @each $denominator in $columns {
// Begin creating a numerator for our fraction up until we hit the // Begin creating a numerator for our fraction up until we hit the
// denominator. // denominator.
@for $numerator from 1 through $denominator { @for $numerator from 1 through $denominator {
// Build a class in the format `.u-3/4[@<breakpoint>]`. // Build a class in the format `.u-3/4[@<breakpoint>]`.
.u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} { .u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
width: ($numerator / $denominator) * 100% $important; width: ($numerator / $denominator) * 100% $important;

4
assets/styles/utilities/_helpers.scss
View File

@@ -17,9 +17,9 @@
// Visibility / Display // Visibility / Display
// ========================================================================== // ==========================================================================
[hidden][aria-hidden="false"] { [hidden][aria-hidden="false"] {
clip: rect(0, 0, 0, 0);
display: inherit;
position: absolute; position: absolute;
display: inherit;
clip: rect(0, 0, 0, 0);
} }
[hidden][aria-hidden="false"]:focus { [hidden][aria-hidden="false"]:focus {

5
assets/styles/utilities/_print.scss
View File

@@ -11,7 +11,6 @@
//// ////
@media print { @media print {
/** /**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953 * 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/ */
@@ -21,8 +20,8 @@
*:first-letter, *:first-letter,
*:first-line { *:first-line {
background: transparent !important; background: transparent !important;
color: #000 !important; /* [1] */
box-shadow: none !important; box-shadow: none !important;
color: #000000 !important; /* [1] */
text-shadow: none !important; text-shadow: none !important;
} }
@@ -50,7 +49,7 @@
pre, pre,
blockquote { blockquote {
border: 1px solid #999; border: 1px solid #999999;
page-break-inside: avoid; page-break-inside: avoid;
} }

4
assets/styles/utilities/_states.scss
View File

@@ -23,12 +23,12 @@
.is-visible { .is-visible {
visibility: visible !important; visibility: visible !important;
opacity: 1 !important; opacity: 1 !important;
} }
.is-invisible { .is-invisible {
visibility: hidden !important; visibility: hidden !important;
opacity: 0 !important; opacity: 0 !important;
} }
/** /**