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"

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

@@ -14,12 +14,12 @@
// 3. Ensure the page always fills at least the entire height of the viewport.
//
html {
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 {
@@ -29,9 +29,9 @@ html {
}
a {
color: $link-color;
@include u-hocus {
color: $link-hover-color;
}
color: $link-color;
}

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

@@ -12,6 +12,10 @@
//
button,
.o-button {
@include u-hocus {
text-decoration: none;
}
display: inline-block; /* [1] */
overflow: visible; /* [2] */
margin: 0; /* [3] */
@@ -28,8 +32,4 @@ button,
line-height: normal;
cursor: pointer; /* [6] */
user-select: none;
@include u-hocus {
text-decoration: none;
}
}

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

@@ -12,11 +12,11 @@ textarea {
outline: 0;
border: 0;
border-radius: 0;
background: none transparent;
color: inherit;
font: inherit;
line-height: normal;
appearance: none;
background: none transparent;
}
select {

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

@@ -58,8 +58,8 @@ a, area, button, input, label, select, textarea, [tabindex] {
}
table {
border-collapse: collapse;
border-spacing: 0;
border-collapse: collapse;
}
hr {
@@ -68,5 +68,5 @@ hr {
padding: 0;
height: 1px;
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,
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;
}

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

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

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

@@ -30,15 +30,14 @@ $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 {
@@ -46,9 +45,9 @@ $aspect-ratios: (
top: 0;
bottom: 0;
left: 0;
height: 100%;
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;
}
}

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

@@ -14,7 +14,7 @@ $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

2
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
// =============================================================================

2
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"),
@@ -38,7 +37,6 @@ $global-font-file-formats: "woff", "ttf" !default;
@if list-contains($file-formats, $key) {
$file-path: nth($values, 1);
$font-format: nth($values, 2);
$src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma);
}
}

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

@@ -46,8 +46,8 @@
//
@mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
display: inline-block; // [2]
vertical-align: top; // [3]
width: 100%; // [4]
vertical-align: top; // [3]
@if ($fix-whitespace) {
font-size: 1rem;

51
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;
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`."
}
}
@@ -89,8 +88,8 @@
> * {
display: inline-block;
font-size: 1rem;
vertical-align: middle;
font-size: 1rem;
}
}
@@ -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);
margin: 0;
padding: 0;
width: 1px;
height: 1px;
border: 0;
$important: important($important);
}
//
@@ -181,9 +179,9 @@
//
@mixin u-accessibly-focusable {
@include u-actus {
height: auto;
width: auto;
clip: auto;
width: auto;
height: 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;
}

51
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' {
@if $crop == "top" {
bottom: 0;
} @else if $crop == 'bottom' {
} @else if $crop == "bottom" {
top: 0;
} @else if $crop == 'both' {
} @else if $crop == "both" {
top: 50%;
transform: translateY(-50%);
}
}
.u-ratio {
overflow: hidden;
position: relative;
overflow: hidden;
&::before {
display: block;
content: "";
width: 100%;
content: "";
}
@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;
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;
}