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,
"color-case": "lower",
"block-indent": "\t",
"color-case": "upper",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
@@ -16,8 +18,7 @@
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true,
"tab-size": true,
"sort-order": [
[
"$include"

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

@@ -3,7 +3,7 @@
// ==========================================================================
@mixin h {
margin-top: 0;
margin-top: 0;
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.
//
html {
color: $color;
font-size: em($font-size, 16px); /* [1] */
overflow-y: scroll; /* [2] */
min-height: 100%; /* [3] */
color: $color;
font-size: em($font-size, 16px); /* [1] */
font-family: $font-family;
line-height: $line-height; /* [1] */
overflow-y: scroll; /* [2] */
min-height: 100%; /* [3] */
}
::selection {
background-color: $selection-background-color;
color: $selection-text-color;
text-shadow: none;
color: $selection-text-color;
text-shadow: none;
}
a {
color: $link-color;
@include u-hocus {
color: $link-hover-color;
}
color: $link-color;
}

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

@@ -12,24 +12,24 @@
//
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 {
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,
select,
textarea {
display: block;
margin: 0;
padding: 0;
width: 100%;
outline: 0;
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
outline: 0;
border: 0;
border-radius: 0;
color: inherit;
font: inherit;
line-height: normal;
appearance: none;
background: none transparent;
background: none transparent;
color: inherit;
font: inherit;
line-height: normal;
appearance: none;
}
select {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -25,7 +25,6 @@ $global-font-file-formats: "woff", "ttf" !default;
$file-formats
) {
$src: ();
$formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"),
@@ -36,9 +35,8 @@ $global-font-file-formats: "woff", "ttf" !default;
@each $key, $values in $formats-map {
@if list-contains($file-formats, $key) {
$file-path: nth($values, 1);
$file-path: nth($values, 1);
$font-format: nth($values, 2);
$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/
//
@mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
display: inline-block; // [2]
display: inline-block; // [2]
width: 100%; // [4]
vertical-align: top; // [3]
width: 100%; // [4]
@if ($fix-whitespace) {
font-size: 1rem;

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

@@ -35,9 +35,9 @@
//
@mixin u-clearfix($supports...) {
&::after {
content: if(list-contains($supports, opera), " ", "");
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`
//
@mixin font-size($font-size, $line-height: auto, $important: false) {
font-size: rem($font-size) $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;
}
@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;
}
@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`."
}
}
@@ -81,16 +80,16 @@
font-size: 0;
&::before {
display: inline-block;
height: 100%;
content: "";
display: inline-block;
height: 100%;
content: "";
vertical-align: middle;
}
> * {
display: inline-block;
font-size: 1rem;
display: inline-block;
vertical-align: middle;
font-size: 1rem;
}
}
@@ -128,8 +127,8 @@
// @output `list-style`, `margin`, `padding`
//
@mixin u-list-reset {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
list-style: none;
}
@@ -145,13 +144,13 @@
// @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
//
@mixin u-truncate($width: 100%) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal; // [2]
@if $width {
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.
//
@mixin u-accessibly-hidden($important: true) {
$important: important($important);
position: absolute $important;
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
margin: 0;
border: 0;
clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
margin: 0;
padding: 0;
width: 1px;
height: 1px;
border: 0;
$important: important($important);
}
//
@@ -181,9 +179,9 @@
//
@mixin u-accessibly-focusable {
@include u-actus {
clip: auto;
width: auto;
height: auto;
width: auto;
clip: auto;
@content;
}
@@ -199,10 +197,9 @@
// @output `display`, `visibility`
//
@mixin u-hidden($important: true) {
display: none $important;
visibility: hidden $important;
$important: important($important);
display : none $important;
visibility : hidden $important;
}
//
@@ -214,10 +211,8 @@
// @param {Boolean} $important [true] - Whether the visibility is important.
// @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);
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.
//
$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;
$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%;
@if $crop == "top" {
bottom: 0;
} @else if $crop == "bottom" {
top: 0;
} @else if $crop == "both" {
top: 50%;
transform: translateY(-50%);
}
}
.u-ratio {
overflow: hidden;
position: relative;
overflow: hidden;
&::before {
display: block;
width: 100%;
content: "";
width: 100%;
}
@each $ratio in $data-ratios {
@@ -57,17 +56,17 @@ $data-ratio-crops: 'top' 'bottom' 'both' !default;
}
.u-ratio_content_container {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.u-ratio_content {
width: 100%;
position: absolute;
width: 100%;
@each $crop in $data-ratio-crops {
&[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.
// @output `width`, `position`, `right`, `left`
//
@mixin widths($columns, $breakpoint: null, $important: true)
{
@mixin widths($columns, $breakpoint: null, $important: true) {
$important: important($important);
// Loop through the number of columns for each denominator of our fractions.
@each $denominator in $columns {
// Begin creating a numerator for our fraction up until we hit the
// denominator.
@for $numerator from 1 through $denominator {
// Build a class in the format `.u-3/4[@<breakpoint>]`.
.u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
width: ($numerator / $denominator) * 100% $important;

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

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

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

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

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

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