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

version 7.0.2

Browse source
This commit is contained in:
Raphael Goetter 2018-03-01 09:57:41 +01:00
parent e580d2e311
commit a37552439d
7 changed files with 4544 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -1,6 +1,6 @@
{ {
"name": "KNACSS", "name": "KNACSS",
"version": "7.0.2", "version": "7.0.3",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"authors": [ "authors": [
"Raphaël GOETTER, Alsacreations" "Raphaël GOETTER, Alsacreations"

3
changelog.md
View file

@ -1,3 +1,6 @@
# changelog v7.0.3 (01 mars 2018)
- suppression de commentaires inutiles
# changelog v7.0.2 (04 janvier 2018) # changelog v7.0.2 (04 janvier 2018)
- intégration de (auto)grid dans Grillade - intégration de (auto)grid dans Grillade

223
css/knacss-unminified.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* www.KNACSS.com v7.0.2 (januar, 4 2017) @author: Alsacreations, Raphael Goetter * www.KNACSS.com v7.0.3 (march, 1 2018) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
/* ----------------------------- */ /* ----------------------------- */
@ -11,7 +11,6 @@
2- Libraries : 2- Libraries :
- Base - Base
- Print - Print
- Misc (hyphens)
- Layout (alignment, modules, positionning) - Layout (alignment, modules, positionning)
- Utilities (width and spacers helpers) - Utilities (width and spacers helpers)
- Responsive helpers - Responsive helpers
@ -19,7 +18,6 @@
- Grillade (Grid System) - Grillade (Grid System)
3- Components : 3- Components :
- Media object - Media object
- Autogrid object
- Skip Links for accessibility - Skip Links for accessibility
- Tables - Tables
- Forms - Forms
@ -33,8 +31,7 @@
*, *,
*::before, *::before,
*::after { *::after {
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
} }
html { html {
@ -70,8 +67,7 @@ body {
} }
hr { hr {
-webkit-box-sizing: content-box; box-sizing: content-box;
box-sizing: content-box;
height: 0; height: 0;
overflow: visible; overflow: visible;
} }
@ -220,7 +216,6 @@ label,
select, select,
summary, summary,
textarea { textarea {
-ms-touch-action: manipulation;
touch-action: manipulation; touch-action: manipulation;
} }
@ -292,8 +287,7 @@ button::-moz-focus-inner,
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
padding: 0; padding: 0;
} }
@ -372,15 +366,13 @@ template {
/* ----------------------------- */ /* ----------------------------- */
/* switching to border-box model for all elements */ /* switching to border-box model for all elements */
html { html {
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
} }
*, *,
*::before, *::before,
*::after { *::after {
-webkit-box-sizing: inherit; box-sizing: inherit;
box-sizing: inherit;
/* avoid min-width: auto on flex and grid children */ /* avoid min-width: auto on flex and grid children */
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
@ -680,8 +672,7 @@ kbd {
@media print { @media print {
* { * {
background: transparent !important; background: transparent !important;
-webkit-box-shadow: none !important; box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important; text-shadow: none !important;
} }
body { body {
@ -846,77 +837,50 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.flex-row-reverse, .flex-container--column-reverse, .flex-row-reverse, .flex-container--column-reverse,
.flex-column-reverse, .flex-column-reverse,
.d-flex { .d-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; flex-wrap: wrap;
flex-wrap: wrap;
} }
.flex-container--row, .flex-container--row,
.flex-row { .flex-row {
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
} }
.flex-container--column, .flex-container--column,
.flex-column { .flex-column {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
.flex-container--row-reverse, .flex-container--row-reverse,
.flex-row-reverse { .flex-row-reverse {
-webkit-box-orient: horizontal; flex-direction: row-reverse;
-webkit-box-direction: reverse; justify-content: flex-end;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
} }
.flex-container--column-reverse, .flex-container--column-reverse,
.flex-column-reverse { .flex-column-reverse {
-webkit-box-orient: vertical; flex-direction: column-reverse;
-webkit-box-direction: reverse; justify-content: flex-end;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
} }
.flex-item-fluid, .flex-item-fluid,
.item-fluid { .item-fluid {
-webkit-box-flex: 1; flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
} }
.flex-item-first, .flex-item-first,
.item-first { .item-first {
-webkit-box-ordinal-group: 0; order: -1;
-ms-flex-order: -1;
order: -1;
} }
.flex-item-medium, .flex-item-medium,
.item-medium { .item-medium {
-webkit-box-ordinal-group: 1; order: 0;
-ms-flex-order: 0;
order: 0;
} }
.flex-item-last, .flex-item-last,
.item-last { .item-last {
-webkit-box-ordinal-group: 2; order: 1;
-ms-flex-order: 1;
order: 1;
} }
.flex-item-center, .flex-item-center,
@ -1587,10 +1551,7 @@ ul.is-unstyled, ul.unstyled {
.flex-column, .flex-container--row-reverse, .flex-column, .flex-container--row-reverse,
.flex-row-reverse, .flex-container--column-reverse, .flex-row-reverse, .flex-container--column-reverse,
.flex-column-reverse { .flex-column-reverse {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
/* layouts for tiny screens */ /* layouts for tiny screens */
.tiny-hidden { .tiny-hidden {
@ -1860,15 +1821,11 @@ ul.is-unstyled, ul.unstyled {
} }
.item-first { .item-first {
-webkit-box-ordinal-group: 0; order: -1;
-ms-flex-order: -1;
order: -1;
} }
.item-last { .item-last {
-webkit-box-ordinal-group: 2; order: 1;
-ms-flex-order: 1;
order: 1;
} }
.grid-offset { .grid-offset {
@ -1890,27 +1847,17 @@ ul.is-unstyled, ul.unstyled {
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: 480px) { @media (min-width: 480px) {
.media { .media {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: start; align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
} }
.media-content { .media-content {
-webkit-box-flex: 1; flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
} }
.media-figure--center { .media-figure--center {
-ms-flex-item-align: center; align-self: center;
align-self: center;
} }
.media--reverse { .media--reverse {
-webkit-box-orient: horizontal; flex-direction: row-reverse;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
} }
} }
@ -2034,18 +1981,13 @@ textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
border: 0; border: 0;
-webkit-box-shadow: 0 0 0 1px #333 inset; box-shadow: 0 0 0 1px #333 inset;
box-shadow: 0 0 0 1px #333 inset;
color: #212529; color: #212529;
vertical-align: middle; vertical-align: middle;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0; margin: 0;
-webkit-transition: 0.25s;
transition: 0.25s; transition: 0.25s;
-webkit-transition-property: background-color, color, border, -webkit-box-shadow;
transition-property: background-color, color, border, -webkit-box-shadow;
transition-property: box-shadow, background-color, color, border; transition-property: box-shadow, background-color, color, border;
transition-property: box-shadow, background-color, color, border, -webkit-box-shadow;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -2124,12 +2066,8 @@ button, .btn--primary,
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
-webkit-transition: 0.25s;
transition: 0.25s; transition: 0.25s;
-webkit-transition-property: background-color, color, border, -webkit-box-shadow;
transition-property: background-color, color, border, -webkit-box-shadow;
transition-property: box-shadow, background-color, color, border; transition-property: box-shadow, background-color, color, border;
transition-property: box-shadow, background-color, color, border, -webkit-box-shadow;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
@ -2154,8 +2092,7 @@ button:focus {
.button--primary { .button--primary {
background-color: #0275D8; background-color: #0275D8;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.btn--primary:active, .btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary:focus, .btn--primary:hover,
@ -2169,8 +2106,7 @@ button:focus {
.button--success { .button--success {
background-color: #5CB85C; background-color: #5CB85C;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.btn--success:active, .btn--success:focus, .btn--success:hover, .btn--success:active, .btn--success:focus, .btn--success:hover,
@ -2184,8 +2120,7 @@ button:focus {
.button--info { .button--info {
background-color: #5BC0DE; background-color: #5BC0DE;
color: #000; color: #000;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.btn--info:active, .btn--info:focus, .btn--info:hover, .btn--info:active, .btn--info:focus, .btn--info:hover,
@ -2199,8 +2134,7 @@ button:focus {
.button--warning { .button--warning {
background-color: #F0AD4E; background-color: #F0AD4E;
color: #000; color: #000;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.btn--warning:active, .btn--warning:focus, .btn--warning:hover, .btn--warning:active, .btn--warning:focus, .btn--warning:hover,
@ -2214,8 +2148,7 @@ button:focus {
.button--danger { .button--danger {
background-color: #D9534F; background-color: #D9534F;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.btn--danger:active, .btn--danger:focus, .btn--danger:hover, .btn--danger:active, .btn--danger:focus, .btn--danger:hover,
@ -2229,8 +2162,7 @@ button:focus {
.button--inverse { .button--inverse {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.btn--inverse:active, .btn--inverse:focus, .btn--inverse:hover, .btn--inverse:active, .btn--inverse:focus, .btn--inverse:hover,
@ -2244,8 +2176,7 @@ button:focus {
.button--ghost { .button--ghost {
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
-webkit-box-shadow: 0 0 0 1px #fff inset; box-shadow: 0 0 0 1px #fff inset;
box-shadow: 0 0 0 1px #fff inset;
} }
.btn--ghost:active, .btn--ghost:focus, .btn--ghost:hover, .btn--ghost:active, .btn--ghost:focus, .btn--ghost:hover,
@ -2280,8 +2211,7 @@ button:focus {
text-align: left; text-align: left;
background: none; background: none;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -2289,8 +2219,7 @@ button:focus {
.btn--unstyled:focus, .btn--unstyled:focus,
.button--unstyled:focus { .button--unstyled:focus {
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
outline: none; outline: none;
} }
@ -2304,32 +2233,20 @@ button:focus {
} }
.nav-button > * { .nav-button > * {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; justify-content: space-between;
-ms-flex-direction: column; align-items: stretch;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
height: 2.6rem; height: 2.6rem;
width: 2.6rem; width: 2.6rem;
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));
background-image: linear-gradient(#333, #333); background-image: linear-gradient(#333, #333);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-origin: content-box; background-origin: content-box;
background-size: 100% 5px; background-size: 100% 5px;
-webkit-transition: .25s;
transition: .25s; transition: .25s;
-webkit-transition-property: background, -webkit-transform;
transition-property: background, -webkit-transform; transition-property: background, -webkit-transform;
transition-property: transform, background; transition-property: transform, background;
transition-property: transform, background, -webkit-transform; transition-property: transform, background, -webkit-transform;
@ -2340,9 +2257,7 @@ button:focus {
content: ""; content: "";
height: 5px; height: 5px;
background: #333; background: #333;
-webkit-transition: .25s;
transition: .25s; transition: .25s;
-webkit-transition-property: top, -webkit-transform;
transition-property: top, -webkit-transform; transition-property: top, -webkit-transform;
transition-property: transform, top; transition-property: transform, top;
transition-property: transform, top, -webkit-transform; transition-property: transform, top, -webkit-transform;
@ -2359,9 +2274,7 @@ button:focus {
.nav-button.is-active > * { .nav-button.is-active > * {
background-image: none; background-image: none;
-webkit-box-pack: center; justify-content: center;
-ms-flex-pack: center;
justify-content: center;
} }
.nav-button.is-active > *::before { .nav-button.is-active > *::before {
@ -2403,8 +2316,7 @@ button:focus {
vertical-align: text-bottom; vertical-align: text-bottom;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
-webkit-box-shadow: inset 0 0 0 1px #333; box-shadow: inset 0 0 0 1px #333;
box-shadow: inset 0 0 0 1px #333;
background: #fff; background: #fff;
} }
@ -2425,12 +2337,8 @@ button:focus {
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
font-size: 60%; font-size: 60%;
-webkit-box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333; box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
-webkit-transition: -webkit-box-shadow .15s;
transition: -webkit-box-shadow .15s;
transition: box-shadow .15s; transition: box-shadow .15s;
transition: box-shadow .15s, -webkit-box-shadow .15s;
} }
.switch::before, .switch::after { .switch::before, .switch::after {
@ -2445,8 +2353,7 @@ button:focus {
} }
.switch:checked { .switch:checked {
-webkit-box-shadow: inset 2rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C; box-shadow: inset 2rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C;
box-shadow: inset 2rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C;
} }
.switch:checked::before { .switch:checked::before {
@ -2458,7 +2365,6 @@ button:focus {
.checkbox { .checkbox {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
-webkit-transition: background-color .15s;
transition: background-color .15s; transition: background-color .15s;
} }
@ -2473,7 +2379,6 @@ button:focus {
.radio { .radio {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
-webkit-transition: background-color .15s;
transition: background-color .15s; transition: background-color .15s;
} }
@ -2503,9 +2408,7 @@ button:focus {
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
border-radius: 0 0 0 0; border-radius: 0 0 0 0;
-webkit-transition: .25s;
transition: .25s; transition: .25s;
-webkit-transition-property: color, border, background-color;
transition-property: color, border, background-color; transition-property: color, border, background-color;
} }
@ -2597,50 +2500,43 @@ button:focus {
.tag--primary { .tag--primary {
background-color: #0275D8; background-color: #0275D8;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.tag--success { .tag--success {
background-color: #5CB85C; background-color: #5CB85C;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.tag--info { .tag--info {
background-color: #5BC0DE; background-color: #5BC0DE;
color: #000; color: #000;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.tag--warning { .tag--warning {
background-color: #F0AD4E; background-color: #F0AD4E;
color: #000; color: #000;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.tag--danger { .tag--danger {
background-color: #D9534F; background-color: #D9534F;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.tag--inverse { .tag--inverse {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.tag--ghost { .tag--ghost {
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
-webkit-box-shadow: 0 0 0 1px #fff inset; box-shadow: 0 0 0 1px #fff inset;
box-shadow: 0 0 0 1px #fff inset;
} }
.tag--small { .tag--small {
@ -2758,50 +2654,43 @@ button:focus {
.alert--primary { .alert--primary {
background-color: #0275D8; background-color: #0275D8;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.alert--success { .alert--success {
background-color: #5CB85C; background-color: #5CB85C;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.alert--info { .alert--info {
background-color: #5BC0DE; background-color: #5BC0DE;
color: #000; color: #000;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.alert--warning { .alert--warning {
background-color: #F0AD4E; background-color: #F0AD4E;
color: #000; color: #000;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.alert--danger { .alert--danger {
background-color: #D9534F; background-color: #D9534F;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.alert--inverse { .alert--inverse {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.alert--ghost { .alert--ghost {
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
-webkit-box-shadow: 0 0 0 1px #fff inset; box-shadow: 0 0 0 1px #fff inset;
box-shadow: 0 0 0 1px #fff inset;
} }
.alert--small { .alert--small {

4
css/knacss.css
View file

File diff suppressed because one or more lines are too long

4475
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

12
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "knacss", "name": "knacss",
"version": "7.0.2", "version": "7.0.3",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"bugs": "https://github.com/alsacreations/KNACSS/issues", "bugs": "https://github.com/alsacreations/KNACSS/issues",
"author": [ "author": [
@ -28,12 +28,12 @@
"license": "WTFPL", "license": "WTFPL",
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"gulp": "latest", "gulp": "^3.9.1",
"gulp-rename": "latest", "gulp-autoprefixer": "latest",
"gulp-sass": "latest", "gulp-clean-css": "^3.9.2",
"gulp-concat": "latest", "gulp-concat": "latest",
"gulp-clean-css": "latest", "gulp-rename": "latest",
"gulp-autoprefixer": "latest" "gulp-sass": "latest"
}, },
"engines": {} "engines": {}
} }

4
sass/knacss.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com v7.0.2 (januar, 4 2017) @author: Alsacreations, Raphael Goetter * www.KNACSS.com v7.0.3 (march, 1 2018) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -12,7 +12,6 @@
2- Libraries : 2- Libraries :
- Base - Base
- Print - Print
- Misc (hyphens)
- Layout (alignment, modules, positionning) - Layout (alignment, modules, positionning)
- Utilities (width and spacers helpers) - Utilities (width and spacers helpers)
- Responsive helpers - Responsive helpers
@ -20,7 +19,6 @@
- Grillade (Grid System) - Grillade (Grid System)
3- Components : 3- Components :
- Media object - Media object
- Autogrid object
- Skip Links for accessibility - Skip Links for accessibility
- Tables - Tables
- Forms - Forms