diff --git a/changelog.md b/changelog.md index 2b8a730..8d68213 100644 --- a/changelog.md +++ b/changelog.md @@ -2,19 +2,21 @@ ## Changelog v8.0.0 (xxx 2019) -- mise à jour du reset, suppression des reset vendors (Reboot de Boostrap) -- support passé de IE10 à IE11 (browserlist) -- Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% +- Architecture : mise à jour du reset, suppression des reset vendors (Reboot de Boostrap) +- Architecture : renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` +- Architecture : modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent +- Compatibilité : support passé de IE10 à IE11 (browserlist) +- Compatibilité : Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% not op_mini all` -- versions exactes des dépendances dans package.json (pour éviter "latest") -- renommage des classes `grid-` en `grillade-` pour éviter tout conflit -- renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` -- fichier gulpfile.js dorénavant compatible Gulp 4 -- modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent -- ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. -- ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. -- `visually-hidden` devient un mixin -- corrections typo +- Compatibilité : fichier gulpfile.js dorénavant compatible Gulp 4 +- Compatibilité : versions exactes des dépendances dans package.json (pour éviter "latest") +- Grillade :renommage des classes `grid-` en `grillade-` pour éviter tout conflit +- Grillade : ajout du constructeur `medium-X` en plus de `small-X` +- Grillade : ajout des constructeus `-start`, `-end`, `-center`, `-space-between`, `-space-around`, `-space-evenly` pour l'alignement général de la grille +- Divers : ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. +- Divers :ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. +- Divers :`visually-hidden` devient un mixin +- Divers :corrections typo ## Changelog v7.1.2 (30 janvier 2019) diff --git a/css/grillade-flex.css b/css/grillade-flex.css index c55b498..da802db 100644 --- a/css/grillade-flex.css +++ b/css/grillade-flex.css @@ -1 +1 @@ -@media (min-width:576px){[class*=" grid-"],[class^=grid-]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grid,.grid--reverse{display:-webkit-box;display:-ms-flexbox;display:flex}.grid--reverse>*,.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grid-2]>*{width:calc(50% - .01px)}[class*=grid-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*{width:calc(33.33333% - .01px)}[class*=grid-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*{width:calc(25% - .01px)}[class*=grid-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*{width:calc(20% - .01px)}[class*=grid-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*{width:calc(16.66667% - .01px)}[class*=grid-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*{width:calc(14.28571% - .01px)}[class*=grid-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*{width:calc(12.5% - .01px)}[class*=grid-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*{width:calc(11.11111% - .01px)}[class*=grid-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*{width:calc(10% - .01px)}[class*=grid-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*{width:calc(9.09091% - .01px)}[class*=grid-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*{width:calc(8.33333% - .01px)}[class*=grid-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.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}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:576px){.full{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter>.full{width:calc(100% - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% - 4rem - .01px)}.one-half{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter>.one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% - .01px)}[class*=-small-1].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=-small-1].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=-small-1].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}} \ No newline at end of file +@media (min-width:576px){[class*=" grillade-"],[class^=grillade-]{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap}[class*=" grillade-"]>*,[class^=grillade-]>*{box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grillade,.grillade--reverse{display:-webkit-box;display:flex}.grillade--reverse>*,.grillade>*{-webkit-box-flex:1;flex:1 1;box-sizing:border-box;min-width:0;min-height:0}.grillade--reverse.has-gutter>*+*,.grillade.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grillade--reverse.has-gutter-l>*+*,.grillade.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grillade--reverse.has-gutter-xl>*+*,.grillade.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grillade-2]>*{width:calc(50% - .01px)}[class*=grillade-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-3]>*{width:calc(33.33333% - .01px)}[class*=grillade-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-4]>*{width:calc(25% - .01px)}[class*=grillade-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-5]>*{width:calc(20% - .01px)}[class*=grillade-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-6]>*{width:calc(16.66667% - .01px)}[class*=grillade-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-7]>*{width:calc(14.28571% - .01px)}[class*=grillade-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-8]>*{width:calc(12.5% - .01px)}[class*=grillade-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-9]>*{width:calc(11.11111% - .01px)}[class*=grillade-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-10]>*{width:calc(10% - .01px)}[class*=grillade-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-11]>*{width:calc(9.09091% - .01px)}[class*=grillade-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-12]>*{width:calc(8.33333% - .01px)}[class*=grillade-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}[class*=grillade-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}@media (min-width:576px){.full{-webkit-box-flex:0;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter>.full{width:calc(100% - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% - 4rem - .01px)}.one-half{-webkit-box-flex:0;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter>.one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;flex:0 0 auto;width:calc(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% - .01px)}[class*=-small-1].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=-small-1].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=-small-1].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}} \ No newline at end of file diff --git a/css/grillade-grid.css b/css/grillade-grid.css index d849a36..066618a 100644 --- a/css/grillade-grid.css +++ b/css/grillade-grid.css @@ -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} \ No newline at end of file +@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-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:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][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*=grillade-][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*=grillade-][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*=grillade-][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}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1} \ No newline at end of file diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index 5c7cf37..6af672b 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -50,8 +50,7 @@ *, *::before, *::after { - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; /* 1 */ min-width: 0; /* 2 */ @@ -68,7 +67,6 @@ html { -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; /* 2 */ @@ -227,8 +225,7 @@ label, select, summary, textarea { - -ms-touch-action: manipulation; - touch-action: manipulation; + touch-action: manipulation; } img, @@ -436,7 +433,6 @@ samp { pre { overflow: auto; -moz-tab-size: 2; - -o-tab-size: 2; tab-size: 2; } @@ -546,6 +542,7 @@ figure { @media (max-width: 575px) { body, div, + p, textarea, table, td, @@ -564,9 +561,6 @@ figure { @-ms-viewport { width: device-width; } -@-o-viewport { - width: device-width; -} @viewport { width: device-width; } @@ -588,8 +582,7 @@ svg:not(:root) { @media print { * { background: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; + box-shadow: none !important; text-shadow: none !important; } body { @@ -681,17 +674,14 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .flex-column-reverse, .d-flex { display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - 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; } @@ -699,7 +689,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; } @@ -707,10 +696,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .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; } @@ -718,38 +705,32 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .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 { -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; } @@ -759,6 +740,1234 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html margin: auto; } +/* --------------------------------------- */ +/* ==Grillade : ultra light Grid System */ +/* --------------------------------------- */ +@media (min-width: 480px) { + [class*=" grillade-"], + [class^="grillade-"] { + display: -ms-grid; + display: grid; + } + [class*=" grillade-"].has-gutter, + [class^="grillade-"].has-gutter { + grid-gap: 1rem; + } + [class*=" grillade-"].has-gutter-l, + [class^="grillade-"].has-gutter-l { + grid-gap: 2rem; + } + [class*=" grillade-"].has-gutter-xl, + [class^="grillade-"].has-gutter-xl { + grid-gap: 4rem; + } +} + +@media (min-width: 480px) { + .autogrillade, + .grillade { + display: -ms-grid; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + } + .autogrillade.has-gutter, + .grillade.has-gutter { + grid-column-gap: 1rem; + } + .autogrillade.has-gutter-l, + .grillade.has-gutter-l { + grid-column-gap: 2rem; + } + .autogrillade.has-gutter-xl, + .grillade.has-gutter-xl { + grid-column-gap: 4rem; + } +} + +[class*="grillade-2"] { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); +} + +[class*="grillade-3"] { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); +} + +[class*="grillade-4"] { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); +} + +[class*="grillade-5"] { + -ms-grid-columns: (1fr)[5]; + grid-template-columns: repeat(5, 1fr); +} + +[class*="grillade-6"] { + -ms-grid-columns: (1fr)[6]; + grid-template-columns: repeat(6, 1fr); +} + +[class*="grillade-7"] { + -ms-grid-columns: (1fr)[7]; + grid-template-columns: repeat(7, 1fr); +} + +[class*="grillade-8"] { + -ms-grid-columns: (1fr)[8]; + grid-template-columns: repeat(8, 1fr); +} + +[class*="grillade-9"] { + -ms-grid-columns: (1fr)[9]; + grid-template-columns: repeat(9, 1fr); +} + +[class*="grillade-10"] { + -ms-grid-columns: (1fr)[10]; + grid-template-columns: repeat(10, 1fr); +} + +[class*="grillade-11"] { + -ms-grid-columns: (1fr)[11]; + grid-template-columns: repeat(11, 1fr); +} + +[class*="grillade-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; +} + +/* medium intermediate breakpoints */ +@media (min-width: 480px) and (max-width: 991px) { + [class*="grillade-"][class*="-medium-1"] { + -ms-grid-columns: (1fr)[1]; + grid-template-columns: repeat(1, 1fr); + } + [class*="col-"][class*="-medium-1"] { + grid-column: auto/span 1; + } + [class*="grillade-"][class*="-medium-2"] { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); + } + [class*="col-"][class*="-medium-2"] { + grid-column: auto/span 2; + } + [class*="grillade-"][class*="-medium-3"] { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); + } + [class*="col-"][class*="-medium-3"] { + grid-column: auto/span 3; + } + [class*="grillade-"][class*="-medium-4"] { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); + } + [class*="col-"][class*="-medium-4"] { + grid-column: auto/span 4; + } + [class*="-medium-all"] { + grid-column: 1 / -1; + } +} + +/* small intermediate breakpoints */ +@media (min-width: 480px) and (max-width: 767px) { + [class*="grillade-"][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*="grillade-"][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*="grillade-"][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*="grillade-"][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; + } +} + +[class*="-start"] { + -webkit-box-pack: start; + justify-content: start; +} + +[class*="-end"] { + -webkit-box-pack: end; + justify-content: end; +} + +[class*="-center"] { + -webkit-box-pack: center; + justify-content: center; +} + +[class*="-space-between"] { + -webkit-box-pack: justify; + justify-content: space-between; +} + +[class*="-space-around"] { + justify-content: space-around; +} + +[class*="-space-evenly"] { + -webkit-box-pack: space-evenly; + justify-content: space-evenly; +} + +.item-first { + -webkit-box-ordinal-group: 0; + order: -1; +} + +.item-last { + -webkit-box-ordinal-group: 2; + order: 1; +} + +.grid-offset { + visibility: hidden; +} + +.col-all { + grid-column: 1 / -1; +} + +.row-all { + grid-row: 1 / -1; +} + +/* ----------------------------- */ +/* ==Alerts */ +/* ----------------------------- */ +/* use .alert-- classes for variants */ +.alert, .alert--primary, .alert--success, .alert--info, .alert--warning, .alert--danger, .alert--inverse, .alert--ghost { + padding: 1rem 1rem; + margin-top: 0.75em; + margin-bottom: 0; + color: #212529; + border-radius: 0; + background-color: #e7e9ed; +} + +.alert a, .alert--primary a, .alert--success a, .alert--info a, .alert--warning a, .alert--danger a, .alert--inverse a, .alert--ghost a { + color: inherit; + text-decoration: underline; +} + +.alert--primary { + background-color: #0275D8; + color: #fff; + box-shadow: none; +} + +.alert--success { + background-color: #5CB85C; + color: #fff; + box-shadow: none; +} + +.alert--info { + background-color: #5BC0DE; + color: #000; + box-shadow: none; +} + +.alert--warning { + background-color: #F0AD4E; + color: #000; + box-shadow: none; +} + +.alert--danger { + background-color: #D9534F; + color: #fff; + box-shadow: none; +} + +.alert--inverse { + background-color: #333; + color: #fff; + box-shadow: none; +} + +.alert--ghost { + background-color: transparent; + color: #fff; + box-shadow: 0 0 0 1px #fff inset; +} + +.alert--small { + font-size: 1.2rem; +} + +.alert--big { + font-size: 2rem; +} + +.alert--block { + width: 100% !important; + display: block; +} + +.alert.disabled, .disabled.alert--primary, .disabled.alert--success, .disabled.alert--info, .disabled.alert--warning, .disabled.alert--danger, .disabled.alert--inverse, .disabled.alert--ghost, .alert--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.alert:empty, .alert--primary:empty, .alert--success:empty, .alert--info:empty, .alert--warning:empty, .alert--danger:empty, .alert--inverse:empty, .alert--ghost:empty { + display: none; +} + +/* ----------------------------- */ +/* ==Arrows */ +/* ----------------------------- */ +/* see https://knacss.com/styleguide.html#arrows */ +[class*="icon-arrow--"] { + vertical-align: middle; +} + +[class*="icon-arrow--"]::after { + content: ""; + display: inline-block; + width: 1em; + height: 1em; + -webkit-mask-size: cover; + mask-size: cover; + background-color: #000; + line-height: 1; +} + +.icon-arrow--down::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +.icon-arrow--up::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +.icon-arrow--right::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +.icon-arrow--left::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +/* ----------------------------- */ +/* ==Badges */ +/* ----------------------------- */ +/* use .badge-- classes for variants */ +.badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost { + display: inline-block; + padding: 0.5rem; + border-radius: 50%; + color: #212529; + background-color: #e7e9ed; + line-height: 1; +} + +.badge::before, .badge--primary::before, .badge--success::before, .badge--info::before, .badge--warning::before, .badge--danger::before, .badge--inverse::before, .badge--ghost::before { + content: ""; + display: inline-block; + vertical-align: middle; + padding-top: 100%; +} + +.badge--primary { + background-color: #0275D8; + color: #fff; +} + +.badge--success { + background-color: #5CB85C; + color: #fff; +} + +.badge--info { + background-color: #5BC0DE; + color: #000; +} + +.badge--warning { + background-color: #F0AD4E; + color: #000; +} + +.badge--danger { + background-color: #D9534F; + color: #fff; +} + +.badge--inverse { + background-color: #333; + color: #fff; +} + +.badge--ghost { + background-color: transparent; + color: #fff; +} + +.badge--small { + font-size: 1.2rem; +} + +.badge--big { + font-size: 2rem; +} + +.badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.badge:empty, .badge--primary:empty, .badge--success:empty, .badge--info:empty, .badge--warning:empty, .badge--danger:empty, .badge--inverse:empty, .badge--ghost:empty { + display: none; +} + +/* ----------------------------- */ +/* ==Buttons styling */ +/* ----------------------------- */ +/* preferably use