optimisation de Grillade
This commit is contained in:
Raphael Goetter
parent
43db2d6d4b
commit
5ed0b50dcb
9 changed files with 552 additions and 906 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "6.0.1",
|
||||
"version": "6.0.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# changelog v6.0.2 (27 octobre 2016)
|
||||
- optimisation de la grille (de 8ko à 3ko pour la version Sass)
|
||||
|
||||
# changelog v6.0.0 (26 septembre 2016)
|
||||
- refonte intégrale de la grille de mise en forme (adoption de [grillade.css](http://grillade.knacss.com))
|
||||
- suppression de include-media (cause de bugs d'encodage : cf. [#203](https://github.com/alsacreations/KNACSS/issues/203) / [#197](https://github.com/alsacreations/KNACSS/issues/197) , nécessite un temps d'apprentissage, et n'apporte pas grand chose au final).
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -12,61 +12,11 @@ $extra-large: 1440px !default;
|
|||
/* ==Grillade : Simple Grid System */
|
||||
/* ---------------------------------- */
|
||||
/* Doc : http://grillade.knacss.com */
|
||||
|
||||
// Grids variables
|
||||
$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutter-l: $grid-gutter * 2;
|
||||
$grid-gutter-xl: $grid-gutter * 4;
|
||||
|
||||
/* Grids common rules (for mono- and multi-lines grid) */
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem ); // IEfixing, see
|
||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
$iefix: 0.01px;
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
[class*=" grid"],
|
||||
[class^="grid"] {
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0; /* avoid min-width: auto */
|
||||
min-height: 0; /* avoid min-height: auto */
|
||||
}
|
||||
|
||||
&.has-gutter {
|
||||
margin-right: -$grid-gutter / 2;
|
||||
margin-left: -$grid-gutter / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $grid-gutter / 2;
|
||||
margin-left: $grid-gutter / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gutter-l {
|
||||
margin-right: -$grid-gutter-l / 2;
|
||||
margin-left: -$grid-gutter-l / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $grid-gutter-l / 2;
|
||||
margin-left: $grid-gutter-l / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gutter-xl {
|
||||
margin-right: -$grid-gutter-xl / 2;
|
||||
margin-left: -$grid-gutter-xl / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $grid-gutter-xl / 2;
|
||||
margin-left: $grid-gutter-xl / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Mono-line grid system (.grid) */
|
||||
.grid {
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
}
|
||||
/* Multi-line grid system (.grid-X) */
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: flex;
|
||||
|
|
@ -74,24 +24,68 @@ $grid-gutter-xl: $grid-gutter * 4;
|
|||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number:1, $own-gutter:0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} {
|
||||
margin-right: -$size / 2;
|
||||
margin-left: -$size / 2;
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
||||
margin-right: $size / 2;
|
||||
margin-left: $size / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if ($own-gutter != 0) {
|
||||
margin-right: -$own-gutter / 2;
|
||||
margin-left: -$own-gutter / 2;
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
|
||||
margin-right: $own-gutter / 2;
|
||||
margin-left: $own-gutter / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
.grid {
|
||||
display: flex;
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||
& > * {
|
||||
flex: 1 1 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * + * {
|
||||
margin-left: calc(#{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Grid offsets */
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@for $i from 2 through 12{
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i},0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
|
@ -111,195 +105,17 @@ $grid-gutter-xl: $grid-gutter * 4;
|
|||
[class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
// Sass mixin for Multi-line grid system
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number:4, $new-gutter:$grid-gutter) {
|
||||
& > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
@if ($new-gutter != 0) {
|
||||
@if ($new-gutter != $grid-gutter){
|
||||
margin-right: -$new-gutter / 2;
|
||||
margin-left: -$new-gutter / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $new-gutter / 2;
|
||||
margin-left: $new-gutter / 2;
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
// sizing individual children
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@for $i from 2 through 12{
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i},0);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Sizing individual children */
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
.full {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||
@each $affix, $size in $grid-gutters {
|
||||
.has-gutter#{$affix} .#{$flow} {
|
||||
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-half {
|
||||
flex: 0 0 auto;
|
||||
width: calc(50% - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(50% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(50% - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(50% - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-third {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-quarter {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 4 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-fifth {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 5 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 5 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 5 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 5 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.two-thirds {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 * 2 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.three-quarters {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 * 3 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
.one-sixth {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 6 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 6 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 6 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 6 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
.five-sixths {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 6 * 5 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 6 * 5 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 6 * 5 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 6 * 5 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -307,75 +123,16 @@ $grid-gutter-xl: $grid-gutter * 4;
|
|||
// -small-X suffix means "X columns on small screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns
|
||||
@media (min-width: ($tiny + 1)) and (max-width: $small) {
|
||||
[class*="-small-4"] {
|
||||
@for $i from 1 through 4{
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / 4 - .01px);
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * {
|
||||
width: calc(100% / #{$i} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% / 4 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-3"] {
|
||||
& > * {
|
||||
width: calc(100% / 3 - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-2"] {
|
||||
& > * {
|
||||
width: calc(100% / 2 - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% / 2 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% / 2 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-1"] {
|
||||
& > * {
|
||||
width: calc(100% - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* www.KNACSS.com V6.0.1 (26 octobre 2016) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com V6.0.2 (27 octobre 2016) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -1498,49 +1498,7 @@ ul.unstyled {
|
|||
/* ==Grillade : Simple Grid System */
|
||||
/* ---------------------------------- */
|
||||
/* Doc : http://grillade.knacss.com */
|
||||
/* Grids common rules (for mono- and multi-lines grid) */
|
||||
@media (min-width: 545px) {
|
||||
[class*=" grid"] > *,
|
||||
[class^="grid"] > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
/* avoid min-width: auto */
|
||||
min-height: 0;
|
||||
/* avoid min-height: auto */ }
|
||||
[class*=" grid"].has-gutter,
|
||||
[class^="grid"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*=" grid"].has-gutter > *,
|
||||
[class^="grid"].has-gutter > * {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*=" grid"].has-gutter-l,
|
||||
[class^="grid"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*=" grid"].has-gutter-l > *,
|
||||
[class^="grid"].has-gutter-l > * {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem; }
|
||||
[class*=" grid"].has-gutter-xl,
|
||||
[class^="grid"].has-gutter-xl {
|
||||
margin-right: -2rem;
|
||||
margin-left: -2rem; }
|
||||
[class*=" grid"].has-gutter-xl > *,
|
||||
[class^="grid"].has-gutter-xl > * {
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
/* Mono-line grid system (.grid) */
|
||||
.grid {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
.grid > * {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%; }
|
||||
/* Multi-line grid system (.grid-X) */
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: -webkit-box;
|
||||
|
|
@ -1554,22 +1512,284 @@ ul.unstyled {
|
|||
flex-wrap: wrap; }
|
||||
[class*=" grid-"] > *,
|
||||
[class^="grid-"] > * {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - .01px);
|
||||
/* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */ }
|
||||
[class*=" grid-"].has-gutter > *,
|
||||
[class^="grid-"].has-gutter > * {
|
||||
width: calc(100% - 1rem - .01px); }
|
||||
[class*=" grid-"].has-gutter-l > *,
|
||||
[class^="grid-"].has-gutter-l > * {
|
||||
width: calc(100% - 2rem - .01px); }
|
||||
[class*=" grid-"].has-gutter-xl > *,
|
||||
[class^="grid-"].has-gutter-xl > * {
|
||||
width: calc(100% - 4rem - .01px); } }
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0; } }
|
||||
|
||||
@media (min-width: 545px) {
|
||||
.grid {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
.grid > * {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0; }
|
||||
.grid.has-gutter > * + * {
|
||||
margin-left: calc(1rem - 0.01px); }
|
||||
.grid.has-gutter-l > * + * {
|
||||
margin-left: calc(2rem - 0.01px); }
|
||||
.grid.has-gutter-xl > * + * {
|
||||
margin-left: calc(4rem - 0.01px); } }
|
||||
|
||||
@media (min-width: 545px) {
|
||||
[class*="grid-2"] > * {
|
||||
width: calc(100% / 2 - 0.01px); }
|
||||
[class*="grid-2"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-2"].has-gutter > * {
|
||||
width: calc(100% / 2 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-2"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-2"].has-gutter-l > * {
|
||||
width: calc(100% / 2 - 2rem - 0.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(100% / 2 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-3"] > * {
|
||||
width: calc(100% / 3 - 0.01px); }
|
||||
[class*="grid-3"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-3"].has-gutter > * {
|
||||
width: calc(100% / 3 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-3"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-3"].has-gutter-l > * {
|
||||
width: calc(100% / 3 - 2rem - 0.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(100% / 3 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-4"] > * {
|
||||
width: calc(100% / 4 - 0.01px); }
|
||||
[class*="grid-4"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-4"].has-gutter > * {
|
||||
width: calc(100% / 4 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-4"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-4"].has-gutter-l > * {
|
||||
width: calc(100% / 4 - 2rem - 0.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(100% / 4 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-5"] > * {
|
||||
width: calc(100% / 5 - 0.01px); }
|
||||
[class*="grid-5"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-5"].has-gutter > * {
|
||||
width: calc(100% / 5 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-5"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-5"].has-gutter-l > * {
|
||||
width: calc(100% / 5 - 2rem - 0.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(100% / 5 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-6"] > * {
|
||||
width: calc(100% / 6 - 0.01px); }
|
||||
[class*="grid-6"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-6"].has-gutter > * {
|
||||
width: calc(100% / 6 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-6"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-6"].has-gutter-l > * {
|
||||
width: calc(100% / 6 - 2rem - 0.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(100% / 6 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-7"] > * {
|
||||
width: calc(100% / 7 - 0.01px); }
|
||||
[class*="grid-7"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-7"].has-gutter > * {
|
||||
width: calc(100% / 7 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-7"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-7"].has-gutter-l > * {
|
||||
width: calc(100% / 7 - 2rem - 0.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(100% / 7 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-8"] > * {
|
||||
width: calc(100% / 8 - 0.01px); }
|
||||
[class*="grid-8"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-8"].has-gutter > * {
|
||||
width: calc(100% / 8 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-8"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-8"].has-gutter-l > * {
|
||||
width: calc(100% / 8 - 2rem - 0.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(100% / 8 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-9"] > * {
|
||||
width: calc(100% / 9 - 0.01px); }
|
||||
[class*="grid-9"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-9"].has-gutter > * {
|
||||
width: calc(100% / 9 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-9"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-9"].has-gutter-l > * {
|
||||
width: calc(100% / 9 - 2rem - 0.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(100% / 9 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-10"] > * {
|
||||
width: calc(100% / 10 - 0.01px); }
|
||||
[class*="grid-10"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-10"].has-gutter > * {
|
||||
width: calc(100% / 10 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-10"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-10"].has-gutter-l > * {
|
||||
width: calc(100% / 10 - 2rem - 0.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(100% / 10 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-11"] > * {
|
||||
width: calc(100% / 11 - 0.01px); }
|
||||
[class*="grid-11"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-11"].has-gutter > * {
|
||||
width: calc(100% / 11 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-11"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-11"].has-gutter-l > * {
|
||||
width: calc(100% / 11 - 2rem - 0.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(100% / 11 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; }
|
||||
[class*="grid-12"] > * {
|
||||
width: calc(100% / 12 - 0.01px); }
|
||||
[class*="grid-12"].has-gutter {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem; }
|
||||
[class*="grid-12"].has-gutter > * {
|
||||
width: calc(100% / 12 - 1rem - 0.01px);
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem; }
|
||||
[class*="grid-12"].has-gutter-l {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem; }
|
||||
[class*="grid-12"].has-gutter-l > * {
|
||||
width: calc(100% / 12 - 2rem - 0.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(100% / 12 - 4rem - 0.01px);
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem; } }
|
||||
|
||||
/* Grid offsets */
|
||||
.push {
|
||||
margin-left: auto !important; }
|
||||
|
||||
|
|
@ -1593,232 +1813,141 @@ ul.unstyled {
|
|||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse; }
|
||||
|
||||
@media (min-width: 545px) {
|
||||
[class*="grid-2"] > * {
|
||||
width: calc(100% * 1 / 2 - .01px); }
|
||||
[class*="grid-2"].has-gutter > * {
|
||||
width: calc(100% * 1 / 2 - 1rem - .01px); }
|
||||
[class*="grid-2"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 2 - 2rem - .01px); }
|
||||
[class*="grid-2"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 2 - 4rem - .01px); }
|
||||
[class*="grid-3"] > * {
|
||||
width: calc(100% * 1 / 3 - .01px); }
|
||||
[class*="grid-3"].has-gutter > * {
|
||||
width: calc(100% * 1 / 3 - 1rem - .01px); }
|
||||
[class*="grid-3"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 3 - 2rem - .01px); }
|
||||
[class*="grid-3"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 3 - 4rem - .01px); }
|
||||
[class*="grid-4"] > * {
|
||||
width: calc(100% * 1 / 4 - .01px); }
|
||||
[class*="grid-4"].has-gutter > * {
|
||||
width: calc(100% * 1 / 4 - 1rem - .01px); }
|
||||
[class*="grid-4"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 4 - 2rem - .01px); }
|
||||
[class*="grid-4"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 4 - 4rem - .01px); }
|
||||
[class*="grid-5"] > * {
|
||||
width: calc(100% * 1 / 5 - .01px); }
|
||||
[class*="grid-5"].has-gutter > * {
|
||||
width: calc(100% * 1 / 5 - 1rem - .01px); }
|
||||
[class*="grid-5"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 5 - 2rem - .01px); }
|
||||
[class*="grid-5"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 5 - 4rem - .01px); }
|
||||
[class*="grid-6"] > * {
|
||||
width: calc(100% * 1 / 6 - .01px); }
|
||||
[class*="grid-6"].has-gutter > * {
|
||||
width: calc(100% * 1 / 6 - 1rem - .01px); }
|
||||
[class*="grid-6"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 6 - 2rem - .01px); }
|
||||
[class*="grid-6"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 6 - 4rem - .01px); }
|
||||
[class*="grid-7"] > * {
|
||||
width: calc(100% * 1 / 7 - .01px); }
|
||||
[class*="grid-7"].has-gutter > * {
|
||||
width: calc(100% * 1 / 7 - 1rem - .01px); }
|
||||
[class*="grid-7"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 7 - 2rem - .01px); }
|
||||
[class*="grid-7"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 7 - 4rem - .01px); }
|
||||
[class*="grid-8"] > * {
|
||||
width: calc(100% * 1 / 8 - .01px); }
|
||||
[class*="grid-8"].has-gutter > * {
|
||||
width: calc(100% * 1 / 8 - 1rem - .01px); }
|
||||
[class*="grid-8"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 8 - 2rem - .01px); }
|
||||
[class*="grid-8"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 8 - 4rem - .01px); }
|
||||
[class*="grid-9"] > * {
|
||||
width: calc(100% * 1 / 9 - .01px); }
|
||||
[class*="grid-9"].has-gutter > * {
|
||||
width: calc(100% * 1 / 9 - 1rem - .01px); }
|
||||
[class*="grid-9"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 9 - 2rem - .01px); }
|
||||
[class*="grid-9"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 9 - 4rem - .01px); }
|
||||
[class*="grid-10"] > * {
|
||||
width: calc(100% * 1 / 10 - .01px); }
|
||||
[class*="grid-10"].has-gutter > * {
|
||||
width: calc(100% * 1 / 10 - 1rem - .01px); }
|
||||
[class*="grid-10"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 10 - 2rem - .01px); }
|
||||
[class*="grid-10"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 10 - 4rem - .01px); }
|
||||
[class*="grid-11"] > * {
|
||||
width: calc(100% * 1 / 11 - .01px); }
|
||||
[class*="grid-11"].has-gutter > * {
|
||||
width: calc(100% * 1 / 11 - 1rem - .01px); }
|
||||
[class*="grid-11"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 11 - 2rem - .01px); }
|
||||
[class*="grid-11"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 11 - 4rem - .01px); }
|
||||
[class*="grid-12"] > * {
|
||||
width: calc(100% * 1 / 12 - .01px); }
|
||||
[class*="grid-12"].has-gutter > * {
|
||||
width: calc(100% * 1 / 12 - 1rem - .01px); }
|
||||
[class*="grid-12"].has-gutter-l > * {
|
||||
width: calc(100% * 1 / 12 - 2rem - .01px); }
|
||||
[class*="grid-12"].has-gutter-xl > * {
|
||||
width: calc(100% * 1 / 12 - 4rem - .01px); } }
|
||||
|
||||
/* Sizing individual children */
|
||||
@media (min-width: 545px) {
|
||||
.full {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - .01px); }
|
||||
width: calc(100% / 1 - 0.01px); }
|
||||
.has-gutter .full {
|
||||
width: calc(100% - 1rem - .01px); }
|
||||
width: calc(100% / 1 - 1rem - 0.01px); }
|
||||
.has-gutter-l .full {
|
||||
width: calc(100% - 2rem - .01px); }
|
||||
width: calc(100% / 1 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .full {
|
||||
width: calc(100% - 4rem - .01px); }
|
||||
width: calc(100% / 1 - 4rem - 0.01px); }
|
||||
.one-half {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(50% - .01px); }
|
||||
width: calc(100% / 2 - 0.01px); }
|
||||
.has-gutter .one-half {
|
||||
width: calc(50% - 1rem - .01px); }
|
||||
width: calc(100% / 2 - 1rem - 0.01px); }
|
||||
.has-gutter-l .one-half {
|
||||
width: calc(50% - 2rem - .01px); }
|
||||
width: calc(100% / 2 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .one-half {
|
||||
width: calc(50% - 4rem - .01px); }
|
||||
width: calc(100% / 2 - 4rem - 0.01px); }
|
||||
.one-third {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 - .01px); }
|
||||
width: calc(100% / 3 - 0.01px); }
|
||||
.has-gutter .one-third {
|
||||
width: calc(100% / 3 - 1rem - .01px); }
|
||||
width: calc(100% / 3 - 1rem - 0.01px); }
|
||||
.has-gutter-l .one-third {
|
||||
width: calc(100% / 3 - 2rem - .01px); }
|
||||
width: calc(100% / 3 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .one-third {
|
||||
width: calc(100% / 3 - 4rem - .01px); }
|
||||
width: calc(100% / 3 - 4rem - 0.01px); }
|
||||
.one-quarter {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 - .01px); }
|
||||
width: calc(100% / 4 - 0.01px); }
|
||||
.has-gutter .one-quarter {
|
||||
width: calc(100% / 4 - 1rem - .01px); }
|
||||
width: calc(100% / 4 - 1rem - 0.01px); }
|
||||
.has-gutter-l .one-quarter {
|
||||
width: calc(100% / 4 - 2rem - .01px); }
|
||||
width: calc(100% / 4 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .one-quarter {
|
||||
width: calc(100% / 4 - 4rem - .01px); }
|
||||
width: calc(100% / 4 - 4rem - 0.01px); }
|
||||
.one-fifth {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 5 - .01px); }
|
||||
width: calc(100% / 5 - 0.01px); }
|
||||
.has-gutter .one-fifth {
|
||||
width: calc(100% / 5 - 1rem - .01px); }
|
||||
width: calc(100% / 5 - 1rem - 0.01px); }
|
||||
.has-gutter-l .one-fifth {
|
||||
width: calc(100% / 5 - 2rem - .01px); }
|
||||
width: calc(100% / 5 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .one-fifth {
|
||||
width: calc(100% / 5 - 4rem - .01px); }
|
||||
.two-thirds {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 * 2 - .01px); }
|
||||
.has-gutter .two-thirds {
|
||||
width: calc(100% / 3 * 2 - 1rem - .01px); }
|
||||
.has-gutter-l .two-thirds {
|
||||
width: calc(100% / 3 * 2 - 2rem - .01px); }
|
||||
.has-gutter-xl .two-thirds {
|
||||
width: calc(100% / 3 * 2 - 4rem - .01px); }
|
||||
.three-quarters {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 * 3 - .01px); }
|
||||
.has-gutter .three-quarters {
|
||||
width: calc(100% / 4 * 3 - 1rem - .01px); }
|
||||
.has-gutter-l .three-quarters {
|
||||
width: calc(100% / 4 * 3 - 2rem - .01px); }
|
||||
.has-gutter-xl .three-quarters {
|
||||
width: calc(100% / 4 * 3 - 4rem - .01px); }
|
||||
width: calc(100% / 5 - 4rem - 0.01px); }
|
||||
.one-sixth {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 6 - .01px); }
|
||||
width: calc(100% / 6 - 0.01px); }
|
||||
.has-gutter .one-sixth {
|
||||
width: calc(100% / 6 - 1rem - .01px); }
|
||||
width: calc(100% / 6 - 1rem - 0.01px); }
|
||||
.has-gutter-l .one-sixth {
|
||||
width: calc(100% / 6 - 2rem - .01px); }
|
||||
width: calc(100% / 6 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .one-sixth {
|
||||
width: calc(100% / 6 - 4rem - .01px); }
|
||||
width: calc(100% / 6 - 4rem - 0.01px); }
|
||||
.two-thirds {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 * 2 - 0.01px); }
|
||||
.has-gutter .two-thirds {
|
||||
width: calc(100% / 3 * 2 - 1rem - 0.01px); }
|
||||
.has-gutter-l .two-thirds {
|
||||
width: calc(100% / 3 * 2 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .two-thirds {
|
||||
width: calc(100% / 3 * 2 - 4rem - 0.01px); }
|
||||
.three-quarters {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 * 3 - 0.01px); }
|
||||
.has-gutter .three-quarters {
|
||||
width: calc(100% / 4 * 3 - 1rem - 0.01px); }
|
||||
.has-gutter-l .three-quarters {
|
||||
width: calc(100% / 4 * 3 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .three-quarters {
|
||||
width: calc(100% / 4 * 3 - 4rem - 0.01px); }
|
||||
.five-sixths {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 6 * 5 - .01px); }
|
||||
width: calc(100% / 6 * 5 - 0.01px); }
|
||||
.has-gutter .five-sixths {
|
||||
width: calc(100% / 6 * 5 - 1rem - .01px); }
|
||||
width: calc(100% / 6 * 5 - 1rem - 0.01px); }
|
||||
.has-gutter-l .five-sixths {
|
||||
width: calc(100% / 6 * 5 - 2rem - .01px); }
|
||||
width: calc(100% / 6 * 5 - 2rem - 0.01px); }
|
||||
.has-gutter-xl .five-sixths {
|
||||
width: calc(100% / 6 * 5 - 4rem - .01px); } }
|
||||
width: calc(100% / 6 * 5 - 4rem - 0.01px); } }
|
||||
|
||||
/* Responsive Small Breakpoint */
|
||||
@media (min-width: 545px) and (max-width: 768px) {
|
||||
[class*="-small-4"] > * {
|
||||
width: calc(100% / 4 - .01px); }
|
||||
[class*="-small-4"].has-gutter > * {
|
||||
width: calc(100% / 4 - 1rem - .01px); }
|
||||
[class*="-small-4"].has-gutter-l > * {
|
||||
width: calc(100% / 4 - 2rem - .01px); }
|
||||
[class*="-small-4"].has-gutter-xl > * {
|
||||
width: calc(100% / 4 - 4rem - .01px); }
|
||||
[class*="-small-3"] > * {
|
||||
width: calc(100% / 3 - .01px); }
|
||||
[class*="-small-3"].has-gutter > * {
|
||||
width: calc(100% / 3 - 1rem - .01px); }
|
||||
[class*="-small-3"].has-gutter-l > * {
|
||||
width: calc(100% / 3 - 2rem - .01px); }
|
||||
[class*="-small-3"].has-gutter-xl > * {
|
||||
width: calc(100% / 3 - 4rem - .01px); }
|
||||
[class*="-small-2"] > * {
|
||||
width: calc(100% / 2 - .01px); }
|
||||
[class*="-small-2"].has-gutter > * {
|
||||
width: calc(100% / 2 - 1rem - .01px); }
|
||||
[class*="-small-2"].has-gutter-l > * {
|
||||
width: calc(100% / 2 - 2rem - .01px); }
|
||||
[class*="-small-2"].has-gutter-xl > * {
|
||||
width: calc(100% / 2 - 4rem - .01px); }
|
||||
[class*="-small-1"] > * {
|
||||
width: calc(100% - .01px); }
|
||||
width: calc(100% / 1 - 0.01px); }
|
||||
[class*="-small-1"].has-gutter > * {
|
||||
width: calc(100% - 1rem - .01px); }
|
||||
width: calc(100% / 1 - 1rem - 0.01px); }
|
||||
[class*="-small-1"].has-gutter-l > * {
|
||||
width: calc(100% - 2rem - .01px); }
|
||||
width: calc(100% / 1 - 2rem - 0.01px); }
|
||||
[class*="-small-1"].has-gutter-xl > * {
|
||||
width: calc(100% - 4rem - .01px); } }
|
||||
width: calc(100% / 1 - 4rem - 0.01px); }
|
||||
[class*="-small-2"] > * {
|
||||
width: calc(100% / 2 - 0.01px); }
|
||||
[class*="-small-2"].has-gutter > * {
|
||||
width: calc(100% / 2 - 1rem - 0.01px); }
|
||||
[class*="-small-2"].has-gutter-l > * {
|
||||
width: calc(100% / 2 - 2rem - 0.01px); }
|
||||
[class*="-small-2"].has-gutter-xl > * {
|
||||
width: calc(100% / 2 - 4rem - 0.01px); }
|
||||
[class*="-small-3"] > * {
|
||||
width: calc(100% / 3 - 0.01px); }
|
||||
[class*="-small-3"].has-gutter > * {
|
||||
width: calc(100% / 3 - 1rem - 0.01px); }
|
||||
[class*="-small-3"].has-gutter-l > * {
|
||||
width: calc(100% / 3 - 2rem - 0.01px); }
|
||||
[class*="-small-3"].has-gutter-xl > * {
|
||||
width: calc(100% / 3 - 4rem - 0.01px); }
|
||||
[class*="-small-4"] > * {
|
||||
width: calc(100% / 4 - 0.01px); }
|
||||
[class*="-small-4"].has-gutter > * {
|
||||
width: calc(100% / 4 - 1rem - 0.01px); }
|
||||
[class*="-small-4"].has-gutter-l > * {
|
||||
width: calc(100% / 4 - 2rem - 0.01px); }
|
||||
[class*="-small-4"].has-gutter-xl > * {
|
||||
width: calc(100% / 4 - 4rem - 0.01px); } }
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Own stylesheet */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "6.0.1",
|
||||
"version": "6.0.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": [
|
||||
|
|
|
|||
|
|
@ -2,61 +2,11 @@
|
|||
/* ==Grillade : Simple Grid System */
|
||||
/* ---------------------------------- */
|
||||
/* Doc : http://grillade.knacss.com */
|
||||
|
||||
// Grids variables
|
||||
$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutter-l: $grid-gutter * 2;
|
||||
$grid-gutter-xl: $grid-gutter * 4;
|
||||
|
||||
/* Grids common rules (for mono- and multi-lines grid) */
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem ); // IEfixing, see
|
||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
$iefix: 0.01px;
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
[class*=" grid"],
|
||||
[class^="grid"] {
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0; /* avoid min-width: auto */
|
||||
min-height: 0; /* avoid min-height: auto */
|
||||
}
|
||||
|
||||
&.has-gutter {
|
||||
margin-right: -$grid-gutter / 2;
|
||||
margin-left: -$grid-gutter / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $grid-gutter / 2;
|
||||
margin-left: $grid-gutter / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gutter-l {
|
||||
margin-right: -$grid-gutter-l / 2;
|
||||
margin-left: -$grid-gutter-l / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $grid-gutter-l / 2;
|
||||
margin-left: $grid-gutter-l / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gutter-xl {
|
||||
margin-right: -$grid-gutter-xl / 2;
|
||||
margin-left: -$grid-gutter-xl / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $grid-gutter-xl / 2;
|
||||
margin-left: $grid-gutter-xl / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Mono-line grid system (.grid) */
|
||||
.grid {
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
}
|
||||
/* Multi-line grid system (.grid-X) */
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: flex;
|
||||
|
|
@ -64,24 +14,68 @@ $grid-gutter-xl: $grid-gutter * 4;
|
|||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number:1, $own-gutter:0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} {
|
||||
margin-right: -$size / 2;
|
||||
margin-left: -$size / 2;
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
||||
margin-right: $size / 2;
|
||||
margin-left: $size / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if ($own-gutter != 0) {
|
||||
margin-right: -$own-gutter / 2;
|
||||
margin-left: -$own-gutter / 2;
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
|
||||
margin-right: $own-gutter / 2;
|
||||
margin-left: $own-gutter / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
.grid {
|
||||
display: flex;
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||
& > * {
|
||||
flex: 1 1 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * + * {
|
||||
margin-left: calc(#{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Grid offsets */
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@for $i from 2 through 12{
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i},0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
|
@ -101,195 +95,17 @@ $grid-gutter-xl: $grid-gutter * 4;
|
|||
[class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
// Sass mixin for Multi-line grid system
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number:4, $new-gutter:$grid-gutter) {
|
||||
& > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
@if ($new-gutter != 0) {
|
||||
@if ($new-gutter != $grid-gutter){
|
||||
margin-right: -$new-gutter / 2;
|
||||
margin-left: -$new-gutter / 2;
|
||||
|
||||
& > * {
|
||||
margin-right: $new-gutter / 2;
|
||||
margin-left: $new-gutter / 2;
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
// sizing individual children
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
@for $i from 2 through 12{
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i},0);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Sizing individual children */
|
||||
@media (min-width: ($tiny + 1)) {
|
||||
.full {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||
@each $affix, $size in $grid-gutters {
|
||||
.has-gutter#{$affix} .#{$flow} {
|
||||
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-half {
|
||||
flex: 0 0 auto;
|
||||
width: calc(50% - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(50% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(50% - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(50% - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-third {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-quarter {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 4 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.one-fifth {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 5 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 5 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 5 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 5 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.two-thirds {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 3 * 2 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
.three-quarters {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 4 * 3 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
.one-sixth {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 6 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 6 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 6 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 6 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
.five-sixths {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 6 * 5 - .01px);
|
||||
|
||||
.has-gutter & {
|
||||
width: calc(100% / 6 * 5 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-l & {
|
||||
width: calc(100% / 6 * 5 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
.has-gutter-xl & {
|
||||
width: calc(100% / 6 * 5 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -297,75 +113,16 @@ $grid-gutter-xl: $grid-gutter * 4;
|
|||
// -small-X suffix means "X columns on small screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns
|
||||
@media (min-width: ($tiny + 1)) and (max-width: $small) {
|
||||
[class*="-small-4"] {
|
||||
@for $i from 1 through 4{
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / 4 - .01px);
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * {
|
||||
width: calc(100% / #{$i} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% / 4 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-3"] {
|
||||
& > * {
|
||||
width: calc(100% / 3 - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-2"] {
|
||||
& > * {
|
||||
width: calc(100% / 2 - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% / 2 - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% / 2 - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-1"] {
|
||||
& > * {
|
||||
width: calc(100% - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter > * {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-l > * {
|
||||
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||
}
|
||||
|
||||
&.has-gutter-xl > * {
|
||||
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V6.0.1 (26 octobre 2016) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com V6.0.2 (27 octobre 2016) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue