sass-lintage (indentation, imbrication, clarté, etc)
This commit is contained in:
parent
12239d8b07
commit
0374d02282
16 changed files with 211 additions and 101 deletions
91
.sass-lint.yml
Normal file
91
.sass-lint.yml
Normal file
|
@ -0,0 +1,91 @@
|
|||
options:
|
||||
formatter: stylish
|
||||
files:
|
||||
include: '**/*.s+(a|c)ss'
|
||||
rules:
|
||||
# Extends
|
||||
extends-before-mixins: 1
|
||||
extends-before-declarations: 1
|
||||
placeholder-in-extend: 1
|
||||
|
||||
# Mixins
|
||||
mixins-before-declarations: 1
|
||||
|
||||
# Line Spacing
|
||||
one-declaration-per-line: 1
|
||||
empty-line-between-blocks: 1
|
||||
single-line-per-selector: 1
|
||||
|
||||
# Disallows
|
||||
no-attribute-selectors: 0
|
||||
no-color-hex: 0
|
||||
no-color-keywords: 0 # Modified, was 1
|
||||
no-color-literals: 0 # Modified, was 1
|
||||
no-combinators: 0
|
||||
no-css-comments: 0 # Modified, was 1
|
||||
no-debug: 1
|
||||
no-disallowed-properties: 0
|
||||
no-duplicate-properties: 1
|
||||
no-empty-rulesets: 1
|
||||
no-extends: 0
|
||||
no-ids: 1
|
||||
no-important: 0 # Modified, was 1
|
||||
no-invalid-hex: 1
|
||||
no-mergeable-selectors: 1
|
||||
no-misspelled-properties: 1
|
||||
no-qualifying-elements: 1
|
||||
no-trailing-whitespace: 1
|
||||
no-trailing-zero: 1
|
||||
no-transition-all: 1
|
||||
no-universal-selectors: 0
|
||||
no-url-protocols: 1
|
||||
no-vendor-prefixes: 1
|
||||
no-warn: 1
|
||||
property-units: 0
|
||||
|
||||
# Nesting
|
||||
force-attribute-nesting: 1
|
||||
force-element-nesting: 1
|
||||
force-pseudo-nesting: 1
|
||||
|
||||
# Name Formats
|
||||
class-name-format: 1
|
||||
function-name-format: 1
|
||||
id-name-format: 0
|
||||
mixin-name-format: 1
|
||||
placeholder-name-format: 1
|
||||
variable-name-format: 1
|
||||
|
||||
# Style Guide
|
||||
attribute-quotes: 1
|
||||
bem-depth: 0
|
||||
border-zero: 0 # Modified, was 1
|
||||
brace-style: 1
|
||||
clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
|
||||
empty-args: 1
|
||||
hex-length: 1
|
||||
hex-notation: 1
|
||||
indentation: 1
|
||||
leading-zero: 0 # Modified, was 1
|
||||
nesting-depth: 1
|
||||
property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
|
||||
pseudo-element: 1
|
||||
quotes: 0 # 1 warns that strings should use single quotes
|
||||
shorthand-values: 1
|
||||
url-quotes: 1
|
||||
variable-for-property: 1
|
||||
zero-unit: 1
|
||||
|
||||
# Inner Spacing
|
||||
space-after-comma: 1
|
||||
space-before-colon: 1
|
||||
space-after-colon: 1
|
||||
space-before-brace: 1
|
||||
space-before-bang: 1
|
||||
space-after-bang: 1
|
||||
space-between-parens: 1
|
||||
space-around-operator: 1
|
||||
|
||||
# Final Items
|
||||
trailing-semicolon: 1
|
||||
final-newline: 1
|
|
@ -33,7 +33,7 @@ $iefix: 0.01px;
|
|||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number:1, $own-gutter:0) {
|
||||
@mixin grid($grid-number: 1, $own-gutter: 0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
|
@ -81,12 +81,13 @@ $iefix: 0.01px;
|
|||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@for $i from 2 through 12{
|
||||
@for $i from 2 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i},0);
|
||||
@include grid(#{$i}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
|
@ -95,6 +96,7 @@ $iefix: 0.01px;
|
|||
.pull {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
// Grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
|
@ -109,7 +111,7 @@ $iefix: 0.01px;
|
|||
}
|
||||
// sizing individual children
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
|
@ -125,7 +127,7 @@ $iefix: 0.01px;
|
|||
// -small-X suffix means "X columns on small-medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
||||
@media (min-width: ($tiny + 1)) and (max-width: $medium) {
|
||||
@for $i from 1 through 4{
|
||||
@for $i from 1 through 4 {
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
|
|
|
@ -415,7 +415,7 @@ body {
|
|||
|
||||
a {
|
||||
color: #333; }
|
||||
a:hover, a:focus, a:active {
|
||||
a:focus, a:hover, a:active {
|
||||
color: #000; }
|
||||
|
||||
ul,
|
||||
|
@ -624,7 +624,9 @@ img {
|
|||
/* ==Stylings (minor stylings) */
|
||||
/* ----------------------------- */
|
||||
/* styling elements */
|
||||
code, kbd, mark {
|
||||
code,
|
||||
kbd,
|
||||
mark {
|
||||
border-radius: 2px; }
|
||||
|
||||
kbd {
|
||||
|
@ -675,9 +677,8 @@ blockquote > footer {
|
|||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, 0.7); }
|
||||
|
||||
blockquote > footer::before {
|
||||
content: "\2014 \0020"; }
|
||||
blockquote > footer::before {
|
||||
content: "\2014 \0020"; }
|
||||
|
||||
q {
|
||||
font-style: normal; }
|
||||
|
@ -685,10 +686,9 @@ q {
|
|||
q,
|
||||
.q {
|
||||
quotes: "“\00a0" "\00a0”"; }
|
||||
|
||||
q:lang(fr),
|
||||
.q:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»"; }
|
||||
q:lang(fr),
|
||||
.q:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»"; }
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
|
@ -837,10 +837,7 @@ select {
|
|||
/* if select styling bugs on WebKit */
|
||||
/* select { -webkit-appearance: none; } */
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
|
@ -906,6 +903,7 @@ input[type="reset"].unstyled {
|
|||
flex-direction: row-reverse; }
|
||||
.o-media-figure--center {
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center; } }
|
||||
|
||||
/* Autogrid object */
|
||||
|
@ -1074,8 +1072,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
-webkit-filter: grayscale(1);
|
||||
filter: grayscale(1); }
|
||||
|
||||
ul.is-unstyled,
|
||||
ul.unstyled {
|
||||
ul.is-unstyled, ul.unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0; }
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -23,7 +23,7 @@ $iefix: 0.01px;
|
|||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number:1, $own-gutter:0) {
|
||||
@mixin grid($grid-number: 1, $own-gutter: 0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
|
@ -71,12 +71,13 @@ $iefix: 0.01px;
|
|||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@for $i from 2 through 12{
|
||||
@for $i from 2 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i},0);
|
||||
@include grid(#{$i}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
|
@ -85,6 +86,7 @@ $iefix: 0.01px;
|
|||
.pull {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
// Grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
|
@ -99,7 +101,7 @@ $iefix: 0.01px;
|
|||
}
|
||||
// sizing individual children
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
|
@ -115,7 +117,7 @@ $iefix: 0.01px;
|
|||
// -small-X suffix means "X columns on small-medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
||||
@media (min-width: ($tiny + 1)) and (max-width: $medium) {
|
||||
@for $i from 1 through 4{
|
||||
@for $i from 1 through 4 {
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
|
|
|
@ -29,7 +29,10 @@ body {
|
|||
|
||||
a {
|
||||
color: $link-color;
|
||||
&:hover, &:focus, &:active {
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -60,11 +60,13 @@ select {
|
|||
/* select { -webkit-appearance: none; } */
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
input[type="search"] {
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
|
@ -76,35 +78,39 @@ textarea:-moz-placeholder {
|
|||
color: #777;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}btn:focus,
|
||||
input[type="button"]:focus,
|
||||
button:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
.#{$kna-namespace}btn,
|
||||
input[type="button"],
|
||||
button {
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* unstyled forms */
|
||||
|
||||
button.#{$kna-namespace}unstyled,
|
||||
input[type="button"].#{$kna-namespace}unstyled,
|
||||
input[type="submit"].#{$kna-namespace}unstyled,
|
||||
input[type="reset"].#{$kna-namespace}unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
&.#{$kna-namespace}unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -52,4 +52,4 @@
|
|||
img[src$=".svg"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -88,8 +88,10 @@
|
|||
}
|
||||
*/
|
||||
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
a[href^="javascript:"],
|
||||
a[href^="#"] {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,9 @@
|
|||
/* ----------------------------- */
|
||||
|
||||
/* styling elements */
|
||||
code, kbd, mark {
|
||||
code,
|
||||
kbd,
|
||||
mark {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
@ -14,7 +16,7 @@ kbd {
|
|||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
background: rgba(0,0,0,0.04);
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #b11;
|
||||
}
|
||||
|
||||
|
@ -26,7 +28,7 @@ pre code {
|
|||
}
|
||||
|
||||
mark {
|
||||
padding:2px 4px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
sup,
|
||||
|
@ -64,10 +66,10 @@ blockquote > footer {
|
|||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
blockquote > footer::before {
|
||||
content: "\2014 \0020";
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
|
@ -77,11 +79,10 @@ q {
|
|||
q,
|
||||
.#{$kna-namespace}q {
|
||||
quotes: "“\00a0" "\00a0”";
|
||||
}
|
||||
|
||||
q:lang(fr),
|
||||
.#{$kna-namespace}q:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»";
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»";
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
@ -18,7 +18,7 @@ table,
|
|||
|
||||
#recaptcha_table,
|
||||
.#{$kna-namespace}table-auto {
|
||||
table-layout:auto;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
td,
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
[class*=" autogrid"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[class^="autogrid"] > *,
|
||||
[class*=" autogrid"] > * {
|
||||
flex: 1;
|
||||
|
@ -16,6 +17,7 @@
|
|||
.has-gutter > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
[class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.o-media-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* avoid min-width:auto */
|
||||
|
@ -15,6 +16,7 @@
|
|||
.o-media--reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.o-media-figure--center {
|
||||
align-self: center;
|
||||
}
|
||||
|
|
|
@ -30,10 +30,12 @@
|
|||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
ul.is-unstyled,
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
ul {
|
||||
&.is-unstyled,
|
||||
&.unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Width Helpers */
|
||||
|
|
|
@ -83,8 +83,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
*/
|
||||
|
||||
[class*="#{$kna-namespace}flex-container"],
|
||||
.#{$kna-namespace}flex-container{
|
||||
display : flex;
|
||||
.#{$kna-namespace}flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
@ -103,17 +103,17 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
|
||||
.#{$kna-namespace}flex-item-first,
|
||||
.#{$kna-namespace}item-first {
|
||||
order : -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-medium,
|
||||
.#{$kna-namespace}item-medium {
|
||||
order : 0;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-last,
|
||||
.#{$kna-namespace}item-last {
|
||||
order : 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-center,
|
||||
|
|
|
@ -20,23 +20,19 @@ Description: Reset styles for WordPress usage of KNACSS
|
|||
.comment-navigation,
|
||||
.paging-navigation,
|
||||
.post-navigation {
|
||||
margin: 0 0 1.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
margin: 0 0 1.5em;
|
||||
|
||||
.comment-navigation .nav-previous,
|
||||
.paging-navigation .nav-previous,
|
||||
.post-navigation .nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
& .nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.comment-navigation .nav-next,
|
||||
.paging-navigation .nav-next,
|
||||
.post-navigation .nav-next {
|
||||
float: right;
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
& .nav-next {
|
||||
float: right;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// class in img elements
|
||||
|
@ -64,7 +60,8 @@ Description: Reset styles for WordPress usage of KNACSS
|
|||
.comment-content {
|
||||
clear: both;
|
||||
|
||||
&::after, &::before {
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
@ -115,7 +112,7 @@ Description: Reset styles for WordPress usage of KNACSS
|
|||
}
|
||||
}
|
||||
|
||||
// class for categorie
|
||||
// class for category
|
||||
.category- {
|
||||
&name-of-category {
|
||||
}
|
||||
|
@ -128,6 +125,7 @@ Description: Reset styles for WordPress usage of KNACSS
|
|||
// if display posts
|
||||
&.blog {
|
||||
}
|
||||
|
||||
// if static page
|
||||
&.page {
|
||||
}
|
||||
|
@ -138,6 +136,7 @@ Description: Reset styles for WordPress usage of KNACSS
|
|||
// if is frontpage
|
||||
&.home {
|
||||
}
|
||||
|
||||
// if static page
|
||||
&.page {
|
||||
}
|
||||
|
@ -160,6 +159,7 @@ Description: Reset styles for WordPress usage of KNACSS
|
|||
// if has results
|
||||
.search-results {
|
||||
}
|
||||
|
||||
// if has no results
|
||||
.search-no-results {
|
||||
}
|
||||
|
@ -235,10 +235,10 @@ img.wp-smiley {
|
|||
text-align: center;
|
||||
vertical-align: top;
|
||||
|
||||
@for $i from 2 through 9 {
|
||||
.gallery-columns-#{$i} & {
|
||||
$w: floor(10000/$i)/100;
|
||||
max-width: unquote($w + '%');
|
||||
@for $i from 2 through 9 {
|
||||
.gallery-columns-#{$i} & {
|
||||
$w: floor(10000 / $i) / 100;
|
||||
max-width: unquote($w + '%');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue