dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sass-lintage (indentation, imbrication, clarté, etc)

This commit is contained in:
PhilippeVay 2016-12-08 14:24:27 +01:00
parent 12239d8b07
commit 0374d02282
16 changed files with 211 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
.sass-lint.yml Normal file
View 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

12
css/grillade.scss
View File

@ -33,7 +33,7 @@ $iefix: 0.01px;
} }
// Multi-line grid constructor // Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); } // 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}); width: calc(100% / #{$grid-number} - #{$iefix});
} }
@ -81,12 +81,13 @@ $iefix: 0.01px;
} }
// Constructing grids : will be compiled in CSS // Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) { @media (min-width: ($tiny + 1)) {
@for $i from 2 through 12{ @for $i from 2 through 12 {
[class*="grid-#{$i}"] { [class*="grid-#{$i}"] {
@include grid(#{$i},0); @include grid(#{$i}, 0);
} }
} }
} }
// Grid offsets // Grid offsets
.push { .push {
margin-left: auto !important; margin-left: auto !important;
@ -95,6 +96,7 @@ $iefix: 0.01px;
.pull { .pull {
margin-right: auto !important; margin-right: auto !important;
} }
// Grid order // Grid order
.item-first { .item-first {
order: -1; order: -1;
@ -109,7 +111,7 @@ $iefix: 0.01px;
} }
// sizing individual children // sizing individual children
@media (min-width: ($tiny + 1)) { @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} { .#{$flow} {
flex: 0 0 auto; flex: 0 0 auto;
width: calc(100% / #{$divider} - #{$iefix}); width: calc(100% / #{$divider} - #{$iefix});
@ -125,7 +127,7 @@ $iefix: 0.01px;
// -small-X suffix means "X columns on small-medium screen" // -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 // 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) { @media (min-width: ($tiny + 1)) and (max-width: $medium) {
@for $i from 1 through 4{ @for $i from 1 through 4 {
[class*="-small-#{$i}"] { [class*="-small-#{$i}"] {
& > * { & > * {
width: calc(100% / #{$i} - #{$iefix}); width: calc(100% / #{$i} - #{$iefix});

27
css/knacss-unminified.css
View File

@ -415,7 +415,7 @@ body {
a { a {
color: #333; } color: #333; }
a:hover, a:focus, a:active { a:focus, a:hover, a:active {
color: #000; } color: #000; }
ul, ul,
@ -624,7 +624,9 @@ img {
/* ==Stylings (minor stylings) */ /* ==Stylings (minor stylings) */
/* ----------------------------- */ /* ----------------------------- */
/* styling elements */ /* styling elements */
code, kbd, mark { code,
kbd,
mark {
border-radius: 2px; } border-radius: 2px; }
kbd { kbd {
@ -675,9 +677,8 @@ blockquote > footer {
margin-top: .75em; margin-top: .75em;
font-size: 0.9em; font-size: 0.9em;
color: rgba(0, 0, 0, 0.7); } color: rgba(0, 0, 0, 0.7); }
blockquote > footer::before {
blockquote > footer::before { content: "\2014 \0020"; }
content: "\2014 \0020"; }
q { q {
font-style: normal; } font-style: normal; }
@ -685,10 +686,9 @@ q {
q, q,
.q { .q {
quotes: "“\00a0" "\00a0”"; } quotes: "“\00a0" "\00a0”"; }
q:lang(fr),
q:lang(fr), .q:lang(fr) {
.q:lang(fr) { quotes: "«\00a0" "\00a0»"; }
quotes: "«\00a0" "\00a0»"; }
hr { hr {
display: block; display: block;
@ -837,10 +837,7 @@ select {
/* if select styling bugs on WebKit */ /* if select styling bugs on WebKit */
/* select { -webkit-appearance: none; } */ /* select { -webkit-appearance: none; } */
/* 'x' appears on right of search input when text is entered. This removes it */ /* '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-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-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none; } display: none; }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
@ -906,6 +903,7 @@ input[type="reset"].unstyled {
flex-direction: row-reverse; } flex-direction: row-reverse; }
.o-media-figure--center { .o-media-figure--center {
-ms-flex-item-align: center; -ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; } } align-self: center; } }
/* Autogrid object */ /* Autogrid object */
@ -1074,8 +1072,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
-webkit-filter: grayscale(1); -webkit-filter: grayscale(1);
filter: grayscale(1); } filter: grayscale(1); }
ul.is-unstyled, ul.is-unstyled, ul.unstyled {
ul.unstyled {
list-style: none; list-style: none;
padding-left: 0; } padding-left: 0; }

2
css/knacss.css
View File

File diff suppressed because one or more lines are too long

12
sass/grids/_grillade.scss
View File

@ -23,7 +23,7 @@ $iefix: 0.01px;
} }
// Multi-line grid constructor // Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); } // 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}); width: calc(100% / #{$grid-number} - #{$iefix});
} }
@ -71,12 +71,13 @@ $iefix: 0.01px;
} }
// Constructing grids : will be compiled in CSS // Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) { @media (min-width: ($tiny + 1)) {
@for $i from 2 through 12{ @for $i from 2 through 12 {
[class*="grid-#{$i}"] { [class*="grid-#{$i}"] {
@include grid(#{$i},0); @include grid(#{$i}, 0);
} }
} }
} }
// Grid offsets // Grid offsets
.push { .push {
margin-left: auto !important; margin-left: auto !important;
@ -85,6 +86,7 @@ $iefix: 0.01px;
.pull { .pull {
margin-right: auto !important; margin-right: auto !important;
} }
// Grid order // Grid order
.item-first { .item-first {
order: -1; order: -1;
@ -99,7 +101,7 @@ $iefix: 0.01px;
} }
// sizing individual children // sizing individual children
@media (min-width: ($tiny + 1)) { @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} { .#{$flow} {
flex: 0 0 auto; flex: 0 0 auto;
width: calc(100% / #{$divider} - #{$iefix}); width: calc(100% / #{$divider} - #{$iefix});
@ -115,7 +117,7 @@ $iefix: 0.01px;
// -small-X suffix means "X columns on small-medium screen" // -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 // 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) { @media (min-width: ($tiny + 1)) and (max-width: $medium) {
@for $i from 1 through 4{ @for $i from 1 through 4 {
[class*="-small-#{$i}"] { [class*="-small-#{$i}"] {
& > * { & > * {
width: calc(100% / #{$i} - #{$iefix}); width: calc(100% / #{$i} - #{$iefix});

5
sass/library/_base.scss
View File

@ -29,7 +29,10 @@ body {
a { a {
color: $link-color; color: $link-color;
&:hover, &:focus, &:active {
&:focus,
&:hover,
&:active {
color: $link-hover-color; color: $link-hover-color;
} }
} }

66
sass/library/_forms.scss
View File

@ -60,11 +60,13 @@ select {
/* select { -webkit-appearance: none; } */ /* select { -webkit-appearance: none; } */
/* 'x' appears on right of search input when text is entered. This removes it */ /* 'x' appears on right of search input when text is entered. This removes it */
input[type="search"]::-webkit-search-decoration, input[type="search"] {
input[type="search"]::-webkit-search-cancel-button, &::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button, &::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-decoration { &::-webkit-search-results-button,
display: none; &::-webkit-search-results-decoration {
display: none;
}
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
@ -76,35 +78,39 @@ textarea:-moz-placeholder {
color: #777; color: #777;
} }
.#{$kna-namespace}btn:focus, .#{$kna-namespace}btn,
input[type="button"]:focus, input[type="button"],
button:focus { button {
-webkit-tap-highlight-color: transparent; &:focus {
-webkit-user-select: none; -webkit-tap-highlight-color: transparent;
-moz-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -moz-user-select: none;
user-select: none; -ms-user-select: none;
user-select: none;
}
} }
/* unstyled forms */ /* unstyled forms */
button.#{$kna-namespace}unstyled, button,
input[type="button"].#{$kna-namespace}unstyled, input[type="button"],
input[type="submit"].#{$kna-namespace}unstyled, input[type="submit"],
input[type="reset"].#{$kna-namespace}unstyled { input[type="reset"] {
padding: 0; &.#{$kna-namespace}unstyled {
border: none; padding: 0;
line-height: 1; border: none;
text-align: left; line-height: 1;
background: none; text-align: left;
border-radius: 0; background: none;
box-shadow: none; border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: none; box-shadow: none;
outline: none; -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: none;
outline: none;
}
} }
} }

2
sass/library/_misc.scss
View File

@ -52,4 +52,4 @@
img[src$=".svg"] { img[src$=".svg"] {
width: 100%; width: 100%;
} }
} }

8
sass/library/_print.scss
View File

@ -88,8 +88,10 @@
} }
*/ */
a[href^="javascript:"]::after, a[href^="javascript:"],
a[href^="#"]::after { a[href^="#"] {
content: ""; &::after {
content: "";
}
} }
} }

21
sass/library/_styling.scss
View File

@ -3,7 +3,9 @@
/* ----------------------------- */ /* ----------------------------- */
/* styling elements */ /* styling elements */
code, kbd, mark { code,
kbd,
mark {
border-radius: 2px; border-radius: 2px;
} }
@ -14,7 +16,7 @@ kbd {
code { code {
padding: 2px 4px; padding: 2px 4px;
background: rgba(0,0,0,0.04); background: rgba(0, 0, 0, 0.04);
color: #b11; color: #b11;
} }
@ -26,7 +28,7 @@ pre code {
} }
mark { mark {
padding:2px 4px; padding: 2px 4px;
} }
sup, sup,
@ -64,10 +66,10 @@ blockquote > footer {
margin-top: .75em; margin-top: .75em;
font-size: 0.9em; font-size: 0.9em;
color: rgba(0, 0, 0, .7); color: rgba(0, 0, 0, .7);
}
blockquote > footer::before { &::before {
content: "\2014 \0020"; content: "\2014 \0020";
}
} }
q { q {
@ -77,11 +79,10 @@ q {
q, q,
.#{$kna-namespace}q { .#{$kna-namespace}q {
quotes: "“\00a0" "\00a0”"; quotes: "“\00a0" "\00a0”";
}
q:lang(fr), &:lang(fr) {
.#{$kna-namespace}q:lang(fr) { quotes: "«\00a0" "\00a0»";
quotes: "«\00a0" "\00a0»"; }
} }
hr { hr {

2
sass/library/_tables.scss
View File

@ -18,7 +18,7 @@ table,
#recaptcha_table, #recaptcha_table,
.#{$kna-namespace}table-auto { .#{$kna-namespace}table-auto {
table-layout:auto; table-layout: auto;
} }
td, td,

2
sass/objects/_autogrid.scss
View File

@ -4,6 +4,7 @@
[class*=" autogrid"] { [class*=" autogrid"] {
display: flex; display: flex;
} }
[class^="autogrid"] > *, [class^="autogrid"] > *,
[class*=" autogrid"] > * { [class*=" autogrid"] > * {
flex: 1; flex: 1;
@ -16,6 +17,7 @@
.has-gutter > *:not(:first-child) { .has-gutter > *:not(:first-child) {
margin-left: 1rem; margin-left: 1rem;
} }
[class*="--reverse"] { [class*="--reverse"] {
flex-direction: row-reverse; flex-direction: row-reverse;
} }

2
sass/objects/_media.scss
View File

@ -4,6 +4,7 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
.o-media-content { .o-media-content {
flex: 1; flex: 1;
min-width: 0; /* avoid min-width:auto */ min-width: 0; /* avoid min-width:auto */
@ -15,6 +16,7 @@
.o-media--reverse { .o-media--reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.o-media-figure--center { .o-media-figure--center {
align-self: center; align-self: center;
} }

10
sass/utilities/_helpers.scss
View File

@ -30,10 +30,12 @@
filter: grayscale(1); filter: grayscale(1);
} }
ul.is-unstyled, ul {
ul.unstyled { &.is-unstyled,
list-style: none; &.unstyled {
padding-left: 0; list-style: none;
padding-left: 0;
}
} }
/* Width Helpers */ /* Width Helpers */

10
sass/utilities/_layout.scss
View File

@ -83,8 +83,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
[class*="#{$kna-namespace}flex-container"], [class*="#{$kna-namespace}flex-container"],
.#{$kna-namespace}flex-container{ .#{$kna-namespace}flex-container {
display : flex; display: flex;
flex-wrap: wrap; 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}flex-item-first,
.#{$kna-namespace}item-first { .#{$kna-namespace}item-first {
order : -1; order: -1;
} }
.#{$kna-namespace}flex-item-medium, .#{$kna-namespace}flex-item-medium,
.#{$kna-namespace}item-medium { .#{$kna-namespace}item-medium {
order : 0; order: 0;
} }
.#{$kna-namespace}flex-item-last, .#{$kna-namespace}flex-item-last,
.#{$kna-namespace}item-last { .#{$kna-namespace}item-last {
order : 1; order: 1;
} }
.#{$kna-namespace}flex-item-center, .#{$kna-namespace}flex-item-center,

40
sass/utilities/_wordpress.scss
View File

@ -20,23 +20,19 @@ Description: Reset styles for WordPress usage of KNACSS
.comment-navigation, .comment-navigation,
.paging-navigation, .paging-navigation,
.post-navigation { .post-navigation {
margin: 0 0 1.5em;
overflow: hidden; overflow: hidden;
} margin: 0 0 1.5em;
.comment-navigation .nav-previous, & .nav-previous {
.paging-navigation .nav-previous, float: left;
.post-navigation .nav-previous { width: 50%;
float: left; }
width: 50%;
}
.comment-navigation .nav-next, & .nav-next {
.paging-navigation .nav-next, float: right;
.post-navigation .nav-next { width: 50%;
float: right; text-align: right;
text-align: right; }
width: 50%;
} }
// class in img elements // class in img elements
@ -64,7 +60,8 @@ Description: Reset styles for WordPress usage of KNACSS
.comment-content { .comment-content {
clear: both; clear: both;
&::after, &::before { &::after,
&::before {
content: ""; content: "";
display: table; display: table;
} }
@ -115,7 +112,7 @@ Description: Reset styles for WordPress usage of KNACSS
} }
} }
// class for categorie // class for category
.category- { .category- {
&name-of-category { &name-of-category {
} }
@ -128,6 +125,7 @@ Description: Reset styles for WordPress usage of KNACSS
// if display posts // if display posts
&.blog { &.blog {
} }
// if static page // if static page
&.page { &.page {
} }
@ -138,6 +136,7 @@ Description: Reset styles for WordPress usage of KNACSS
// if is frontpage // if is frontpage
&.home { &.home {
} }
// if static page // if static page
&.page { &.page {
} }
@ -160,6 +159,7 @@ Description: Reset styles for WordPress usage of KNACSS
// if has results // if has results
.search-results { .search-results {
} }
// if has no results // if has no results
.search-no-results { .search-no-results {
} }
@ -235,10 +235,10 @@ img.wp-smiley {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
@for $i from 2 through 9 { @for $i from 2 through 9 {
.gallery-columns-#{$i} & { .gallery-columns-#{$i} & {
$w: floor(10000/$i)/100; $w: floor(10000 / $i) / 100;
max-width: unquote($w + '%'); max-width: unquote($w + '%');
} }
} }
} }