# changelog v7.1.0 (31 octobre 2018)
- mise à jour et meilleure intégration de gulp / postCSS : - autoprefixer version postCSS (avec browserslist officielle), - unprefix : pour supprimer les vieux préfixes inutiles - flexbox-fixes : pour corriger les erreurs connues sur IE - gap-properties : polyfill de gap -> grid-gap - minification CSS avec CSSnano - application de `white-space: pre-rap` sur les textarea
This commit is contained in:
Raphael Goetter
parent
ad24c2fd51
commit
9a5ed3c989
13 changed files with 3561 additions and 4226 deletions
|
|
@ -1,3 +1,12 @@
|
|||
# changelog v7.1.0 (31 octobre 2018)
|
||||
- mise à jour et meilleure intégration de gulp / postCSS :
|
||||
- autoprefixer version postCSS (avec browserslist officielle),
|
||||
- unprefix : pour supprimer les vieux préfixes inutiles
|
||||
- flexbox-fixes : pour corriger les erreurs connues sur IE
|
||||
- gap-properties : polyfill de gap -> grid-gap
|
||||
- minification CSS avec CSSnano
|
||||
- application de `white-space: pre-rap` sur les textarea
|
||||
|
||||
# changelog v7.0.9 (24 octobre 2018)
|
||||
- correction d'alignement vertical de `.nav-button`
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grid-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grid-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grid-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* www.KNACSS.com v7.0.9 (october, 24 2018) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.1.0 (october, 31 2018) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -38,8 +39,10 @@ html {
|
|||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
text-size-adjust: 100%;
|
||||
overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -47,6 +50,14 @@ html {
|
|||
width: device-width;
|
||||
}
|
||||
|
||||
@-o-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -67,6 +78,7 @@ body {
|
|||
}
|
||||
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
|
|
@ -157,7 +169,6 @@ a {
|
|||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
@ -191,7 +202,6 @@ pre {
|
|||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
figure {
|
||||
|
|
@ -216,6 +226,7 @@ label,
|
|||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
|
@ -275,6 +286,8 @@ html [type="button"],
|
|||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
|
|
@ -287,6 +300,7 @@ button::-moz-focus-inner,
|
|||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -296,6 +310,8 @@ input[type="time"],
|
|||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
-moz-appearance: listbox;
|
||||
appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -334,16 +350,20 @@ progress {
|
|||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
|
|
@ -367,12 +387,14 @@ template {
|
|||
/* ----------------------------- */
|
||||
/* switching to border-box model for all elements */
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
/* avoid min-width: auto on flex and grid children */
|
||||
min-width: 0;
|
||||
|
|
@ -673,6 +695,7 @@ kbd {
|
|||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
|
@ -764,49 +787,76 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.flex-row-reverse, .flex-container--column-reverse,
|
||||
.flex-column-reverse,
|
||||
.d-flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-container--row,
|
||||
.flex-row {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-container--column,
|
||||
.flex-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-container--row-reverse,
|
||||
.flex-row-reverse {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-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-column-reverse {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-item-fluid,
|
||||
.item-fluid {
|
||||
flex: 1 1 0%;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.flex-item-first,
|
||||
.item-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.flex-item-medium,
|
||||
.item-medium {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-item-last,
|
||||
.item-last {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1570,6 +1620,9 @@ ul.is-unstyled, ul.unstyled {
|
|||
.flex-column, .flex-container--row-reverse,
|
||||
.flex-row-reverse, .flex-container--column-reverse,
|
||||
.flex-column-reverse {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* layouts for tiny screens */
|
||||
|
|
@ -1630,6 +1683,7 @@ ul.is-unstyled, ul.unstyled {
|
|||
@media (min-width: 480px) {
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
|
@ -1650,6 +1704,7 @@ ul.is-unstyled, ul.unstyled {
|
|||
@media (min-width: 480px) {
|
||||
.autogrid,
|
||||
.grid {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
|
|
@ -1669,46 +1724,57 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
|
||||
[class*="grid-2"] {
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-3"] {
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-4"] {
|
||||
-ms-grid-columns: (1fr)[4];
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-5"] {
|
||||
-ms-grid-columns: (1fr)[5];
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-6"] {
|
||||
-ms-grid-columns: (1fr)[6];
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-7"] {
|
||||
-ms-grid-columns: (1fr)[7];
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-8"] {
|
||||
-ms-grid-columns: (1fr)[8];
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-9"] {
|
||||
-ms-grid-columns: (1fr)[9];
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-10"] {
|
||||
-ms-grid-columns: (1fr)[10];
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-11"] {
|
||||
-ms-grid-columns: (1fr)[11];
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-12"] {
|
||||
-ms-grid-columns: (1fr)[12];
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
|
|
@ -1811,24 +1877,28 @@ ul.is-unstyled, ul.unstyled {
|
|||
/* intermediate breakpoints */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
[class*="grid-"][class*="-small-1"] {
|
||||
-ms-grid-columns: (1fr)[1];
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-1"] {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
[class*="grid-"][class*="-small-2"] {
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
[class*="grid-"][class*="-small-3"] {
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
[class*="grid-"][class*="-small-4"] {
|
||||
-ms-grid-columns: (1fr)[4];
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-4"] {
|
||||
|
|
@ -1840,10 +1910,14 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
|
||||
.item-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1866,16 +1940,27 @@ ul.is-unstyled, ul.unstyled {
|
|||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
@media (min-width: 480px) {
|
||||
.media {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.media-content {
|
||||
flex: 1 1 0%;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1;
|
||||
}
|
||||
.media-figure--center {
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
.media--reverse {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
|
@ -1999,13 +2084,18 @@ textarea {
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
-webkit-box-shadow: 0 0 0 1px #333 inset;
|
||||
box-shadow: 0 0 0 1px #333 inset;
|
||||
color: #212529;
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
-webkit-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, -webkit-box-shadow;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -2039,7 +2129,7 @@ textarea {
|
|||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: normal;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
|
|
@ -2051,11 +2141,32 @@ textarea {
|
|||
color: #777;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input::-moz-placeholder,
|
||||
textarea::-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: #777;
|
||||
|
|
@ -2099,8 +2210,12 @@ button, .btn--primary,
|
|||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-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, -webkit-box-shadow;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
|
@ -2125,6 +2240,7 @@ button:focus {
|
|||
.button--primary {
|
||||
background-color: #0275D8;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -2139,6 +2255,7 @@ button:focus {
|
|||
.button--success {
|
||||
background-color: #5CB85C;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -2153,6 +2270,7 @@ button:focus {
|
|||
.button--info {
|
||||
background-color: #5BC0DE;
|
||||
color: #000;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -2167,6 +2285,7 @@ button:focus {
|
|||
.button--warning {
|
||||
background-color: #F0AD4E;
|
||||
color: #000;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -2181,6 +2300,7 @@ button:focus {
|
|||
.button--danger {
|
||||
background-color: #D9534F;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -2195,6 +2315,7 @@ button:focus {
|
|||
.button--inverse {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -2209,6 +2330,7 @@ button:focus {
|
|||
.button--ghost {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff inset;
|
||||
box-shadow: 0 0 0 1px #fff inset;
|
||||
}
|
||||
|
||||
|
|
@ -2244,6 +2366,7 @@ button:focus {
|
|||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -2252,6 +2375,7 @@ button:focus {
|
|||
|
||||
.btn--unstyled:focus,
|
||||
.button--unstyled:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -2266,21 +2390,33 @@ button:focus {
|
|||
}
|
||||
|
||||
.nav-button > * {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
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;
|
||||
width: 2.6rem;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));
|
||||
background-image: linear-gradient(#333, #333);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
background-size: 100% 5px;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
-webkit-transition-property: background, -webkit-transform;
|
||||
transition-property: background, -webkit-transform;
|
||||
transition-property: transform, background;
|
||||
transition-property: transform, background, -webkit-transform;
|
||||
|
|
@ -2291,7 +2427,9 @@ button:focus {
|
|||
content: "";
|
||||
height: 5px;
|
||||
background: #333;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
-webkit-transition-property: top, -webkit-transform;
|
||||
transition-property: top, -webkit-transform;
|
||||
transition-property: transform, top;
|
||||
transition-property: transform, top, -webkit-transform;
|
||||
|
|
@ -2308,6 +2446,8 @@ button:focus {
|
|||
|
||||
.nav-button.is-active > * {
|
||||
background-image: none;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -2369,8 +2509,12 @@ button:focus {
|
|||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
font-size: 70%;
|
||||
-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;
|
||||
-webkit-transition: -webkit-box-shadow .15s;
|
||||
transition: -webkit-box-shadow .15s;
|
||||
transition: box-shadow .15s;
|
||||
transition: box-shadow .15s, -webkit-box-shadow .15s;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -2386,6 +2530,7 @@ button:focus {
|
|||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -2398,8 +2543,10 @@ button:focus {
|
|||
.checkbox {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
-webkit-box-shadow: inset 0 0 0 1px #333;
|
||||
box-shadow: inset 0 0 0 1px #333;
|
||||
background-color: #fff;
|
||||
-webkit-transition: background-color .15s;
|
||||
transition: background-color .15s;
|
||||
}
|
||||
|
||||
|
|
@ -2415,7 +2562,9 @@ button:focus {
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-size: 0% 0%;
|
||||
-webkit-transition: background-size .15s;
|
||||
transition: background-size .15s;
|
||||
-webkit-box-shadow: inset 0 0 0 1px #333;
|
||||
box-shadow: inset 0 0 0 1px #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
@ -2446,7 +2595,9 @@ button:focus {
|
|||
background: transparent;
|
||||
text-decoration: none;
|
||||
border-radius: 0 0 0 0;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
-webkit-transition-property: color, border, background-color;
|
||||
transition-property: color, border, background-color;
|
||||
}
|
||||
|
||||
|
|
@ -2538,42 +2689,49 @@ button:focus {
|
|||
.tag--primary {
|
||||
background-color: #0275D8;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag--success {
|
||||
background-color: #5CB85C;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag--info {
|
||||
background-color: #5BC0DE;
|
||||
color: #000;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag--warning {
|
||||
background-color: #F0AD4E;
|
||||
color: #000;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag--danger {
|
||||
background-color: #D9534F;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag--inverse {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag--ghost {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff inset;
|
||||
box-shadow: 0 0 0 1px #fff inset;
|
||||
}
|
||||
|
||||
|
|
@ -2692,42 +2850,49 @@ button:focus {
|
|||
.alert--primary {
|
||||
background-color: #0275D8;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
background-color: #5CB85C;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert--info {
|
||||
background-color: #5BC0DE;
|
||||
color: #000;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert--warning {
|
||||
background-color: #F0AD4E;
|
||||
color: #000;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert--danger {
|
||||
background-color: #D9534F;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert--inverse {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert--ghost {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff inset;
|
||||
box-shadow: 0 0 0 1px #fff inset;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
74
gulpfile.js
74
gulpfile.js
|
|
@ -2,11 +2,48 @@
|
|||
var gulp = require('gulp');
|
||||
|
||||
// Include plugins
|
||||
var postcss = require('gulp-postcss');
|
||||
var sass = require('gulp-sass');
|
||||
var concat = require('gulp-concat');
|
||||
var rename = require('gulp-rename');
|
||||
var minifycss = require('gulp-clean-css');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
var cssnano = require('cssnano'); // minifies CSS
|
||||
var autoprefixer = require('autoprefixer');
|
||||
|
||||
var unprefix = require("postcss-unprefix"); // deletes old prefixes
|
||||
var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE
|
||||
var gaps = require('postcss-gap-properties'); // gaps polyfill
|
||||
|
||||
var browsersList = [
|
||||
'> 1%',
|
||||
'last 2 versions',
|
||||
'IE >= 10', 'Edge >= 16',
|
||||
'Chrome >= 60',
|
||||
'Firefox >= 50', 'Firefox ESR',
|
||||
'Safari >= 10',
|
||||
'ios_saf >= 10',
|
||||
'Android >= 5'
|
||||
];
|
||||
|
||||
var plugins = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true,
|
||||
browsers: browsersList
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps()
|
||||
];
|
||||
|
||||
var pluginsProd = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true,
|
||||
browsers: browsersList
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps(),
|
||||
cssnano()
|
||||
];
|
||||
|
||||
|
||||
// tâche CSS = compile vers knacss.css et knacss-unminified.css
|
||||
|
|
@ -15,27 +52,44 @@ gulp.task('css', function () {
|
|||
.pipe(sass({
|
||||
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
|
||||
}))
|
||||
.pipe(autoprefixer())
|
||||
.pipe(postcss(plugins))
|
||||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'))
|
||||
.pipe(rename('knacss.css'))
|
||||
.pipe(minifycss())
|
||||
.pipe(postcss(cssnano()))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
// tâche cssDev = compile vers knacss-unminified.css
|
||||
gulp.task('cssDev', function () {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
|
||||
}))
|
||||
.pipe(postcss(plugins))
|
||||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
// tâche cssProd = compile vers knacss.css minifié
|
||||
gulp.task('cssProd', function () {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade', function() {
|
||||
return gulp.src('./sass/_library/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade-flex', function() {
|
||||
return gulp.src('./sass/_library/grillade-flex.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
|
|
@ -45,4 +99,4 @@ gulp.task('watch', function() {
|
|||
});
|
||||
|
||||
|
||||
gulp.task('default', ['css']);
|
||||
gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']);
|
||||
|
|
|
|||
4124
package-lock.json
generated
4124
package-lock.json
generated
File diff suppressed because it is too large
Load diff
11
package.json
11
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "7.0.9",
|
||||
"version": "7.1.0",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": "Raphaël GOETTER, Alsacreations",
|
||||
|
|
@ -27,9 +27,12 @@
|
|||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "latest",
|
||||
"gulp-autoprefixer": "latest",
|
||||
"gulp-clean-css": "latest",
|
||||
"gulp-concat": "latest",
|
||||
"gulp-postcss": "latest",
|
||||
"autoprefixer": "latest",
|
||||
"postcss-unprefix": "latest",
|
||||
"postcss-flexbugs-fixes": "latest",
|
||||
"postcss-gap-properties": "latest",
|
||||
"cssnano": "latest",
|
||||
"gulp-rename": "latest",
|
||||
"gulp-sass": "latest"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ $small: 576px !default;
|
|||
$medium: 768px !default;
|
||||
$large: 992px !default;
|
||||
$extra-large: 1200px !default;
|
||||
$cols: 12 !default;
|
||||
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
// in KNACSS, you shall modify variables file instead
|
||||
$tiny: 480px !default;
|
||||
$medium: 768px !default;
|
||||
$cols: 12 !default;
|
||||
|
||||
// classic Grid
|
||||
[class*=" grid-"],
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ textarea {
|
|||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: normal;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com v7.0.9 (october, 24 2018) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.1.0 (october, 31 2018) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue