Creation de mixin multinavigateurs et comp grillade
This commit is contained in:
Arnaud CARIOU
parent
7a8701c929
commit
603e9c2fa9
2 changed files with 80 additions and 247 deletions
|
|
@ -2,32 +2,50 @@
|
|||
// ex. @include respond-to("medium-up") {...}
|
||||
breakpoint(bp)
|
||||
if bp == 'tiny'
|
||||
return '(max-width: {tiny})'
|
||||
return '(max-width: %s)' % tiny
|
||||
else if bp == 'small'
|
||||
return '(max-width: {small})'
|
||||
return '(max-width: %s)' % small
|
||||
else if bp == 'medium'
|
||||
return '(max-width: {medium})'
|
||||
return '(max-width: %s)' % medium
|
||||
else if bp == 'large'
|
||||
return '(max-width: {large})'
|
||||
return '(max-width: %s)' % large
|
||||
else if bp == 'extra-large'
|
||||
return '(max-width: {extra-large})'
|
||||
return '(max-width: %s)' % extra-large
|
||||
else if bp == 'tiny-up'
|
||||
return '(min-width: {tiny + 1})'
|
||||
return '(min-width: %s + 1)' % tiny
|
||||
else if bp == 'small-up'
|
||||
return '(min-width: {small + 1})'
|
||||
return '(min-width: %s + 1)' % small
|
||||
else if bp == 'medium-up'
|
||||
return '(min-width: {medium + 1})'
|
||||
return '(min-width: %s + 1)' % medium
|
||||
else if bp == 'large-up'
|
||||
return '(min-width: {large + 1})'
|
||||
return '(min-width: %s + 1)' % large
|
||||
else if bp == 'extra-large-up'
|
||||
return '(min-width: {extra-large + 1})'
|
||||
return '(min-width: %s + 1)' % extra-large
|
||||
else if bp == 'retina'
|
||||
return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
|
||||
|
||||
|
||||
/*
|
||||
respond-to(value)
|
||||
string = breakpoint(value)
|
||||
@media screen and {string}
|
||||
@media screen and string
|
||||
{block}
|
||||
*/
|
||||
|
||||
displayFlex()
|
||||
display: -webkit-box
|
||||
display: -ms-flexbox
|
||||
display: flex
|
||||
|
||||
box-orient()
|
||||
-webkit-box-orient arguments
|
||||
|
||||
box-direction()
|
||||
-webkit-box-direction arguments
|
||||
|
||||
flex-direction()
|
||||
-ms-flex-direction arguments
|
||||
flex-direction arguments
|
||||
|
||||
flex-wrap()
|
||||
-ms-flex-wrap arguments
|
||||
flex-wrap arguments
|
||||
|
|
|
|||
|
|
@ -14,16 +14,11 @@ medium = 991px
|
|||
large = 1199px
|
||||
extra-large = 1439px
|
||||
|
||||
displayFlex()
|
||||
display: -webkit-box
|
||||
display: -ms-flexbox
|
||||
display: flex
|
||||
|
||||
@media (min-width: tiny + 1)
|
||||
[class*=" grid-"]
|
||||
[class^="grid-"]
|
||||
displayFlex()
|
||||
-webkit-box-orient: horizontal
|
||||
box-orient(horizontal)
|
||||
-webkit-box-direction: normal
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
|
|
@ -36,20 +31,18 @@ displayFlex()
|
|||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
grid(grid-number = 1, own-gutter = 0)
|
||||
& > *
|
||||
width: calc(100% / grid-number - iefix)
|
||||
|
||||
for key, size in grid-gutters
|
||||
width 'calc(100% / %s - %s)' % (grid-number iefix)
|
||||
for key, size in grid-gutters
|
||||
&.has-gutter{key}
|
||||
margin-right: -(size / 2)
|
||||
margin-left: -(size / 2)
|
||||
margin-right -(size / 2)
|
||||
margin-left -(size / 2)
|
||||
& > *
|
||||
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
|
||||
width 'calc(100% / %s - %s - %s)' % (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)
|
||||
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: tiny + 1)
|
||||
|
|
@ -57,14 +50,13 @@ grid(grid-number = 1, own-gutter = 0)
|
|||
.grid--reverse
|
||||
displayFlex()
|
||||
& > *
|
||||
flex: 1 1 0%
|
||||
box-sizing: border-box
|
||||
min-width: 0
|
||||
min-height: 0
|
||||
|
||||
flex 1 1 0%
|
||||
box-sizing border-box
|
||||
min-width 0
|
||||
min-height 0
|
||||
for key, size in grid-gutters
|
||||
&.has-gutter{key} > * + *
|
||||
margin-left: size - iefix
|
||||
margin-left 'calc(%s - %s)' % (size iefix)
|
||||
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: tiny + 1)
|
||||
|
|
@ -73,221 +65,44 @@ grid(grid-number = 1, own-gutter = 0)
|
|||
[class*={grid-selector}] > *
|
||||
grid(i, 0)
|
||||
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.push
|
||||
margin-left auto !important
|
||||
|
||||
.pull {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.pull
|
||||
margin-right auto !important
|
||||
|
||||
.item-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -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;
|
||||
}
|
||||
.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;
|
||||
}*/
|
||||
[class*="grid-"][class*="--reverse"]
|
||||
-webkit-box-orient: horizontal
|
||||
-webkit-box-direction: reverse
|
||||
flex-direction row-reverse
|
||||
|
||||
/*@media (min-width: 544px) {
|
||||
.full {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 1 - 0.01px);
|
||||
}
|
||||
.has-gutter .full {
|
||||
width: calc(100% / 1 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .full {
|
||||
width: calc(100% / 1 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .full {
|
||||
width: calc(100% / 1 - 4rem - 0.01px);
|
||||
}
|
||||
.one-half {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / 2 - 0.01px);
|
||||
}
|
||||
.has-gutter .one-half {
|
||||
width: calc(100% / 2 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .one-half {
|
||||
width: calc(100% / 2 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .one-half {
|
||||
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 - 0.01px);
|
||||
}
|
||||
.has-gutter .one-third {
|
||||
width: calc(100% / 3 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .one-third {
|
||||
width: calc(100% / 3 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .one-third {
|
||||
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 - 0.01px);
|
||||
}
|
||||
.has-gutter .one-quarter {
|
||||
width: calc(100% / 4 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .one-quarter {
|
||||
width: calc(100% / 4 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .one-quarter {
|
||||
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 - 0.01px);
|
||||
}
|
||||
.has-gutter .one-fifth {
|
||||
width: calc(100% / 5 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .one-fifth {
|
||||
width: calc(100% / 5 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .one-fifth {
|
||||
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 - 0.01px);
|
||||
}
|
||||
.has-gutter .one-sixth {
|
||||
width: calc(100% / 6 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .one-sixth {
|
||||
width: calc(100% / 6 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .one-sixth {
|
||||
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 - 0.01px);
|
||||
}
|
||||
.has-gutter .five-sixths {
|
||||
width: calc(100% / 6 * 5 - 1rem - 0.01px);
|
||||
}
|
||||
.has-gutter-l .five-sixths {
|
||||
width: calc(100% / 6 * 5 - 2rem - 0.01px);
|
||||
}
|
||||
.has-gutter-xl .five-sixths {
|
||||
width: calc(100% / 6 * 5 - 4rem - 0.01px);
|
||||
}
|
||||
}*/
|
||||
@media (min-width: tiny + 1)
|
||||
flowToDivid = {'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}
|
||||
for flow, divider in flowToDivid
|
||||
.{flow}
|
||||
flex 0 0 auto
|
||||
width 'calc(100% / %s - %s)' % (divider iefix)
|
||||
for key, size in grid-gutters
|
||||
.has-gutter{key} .{flow}
|
||||
width 'calc(100% / %s - %s - %s)' % (divider size iefix)
|
||||
|
||||
/* Responsive Small Breakpoint */
|
||||
/*
|
||||
@media (min-width: 544px) and (max-width: 991px) {
|
||||
[class*="-small-1"] > * {
|
||||
width: calc(100% / 1 - 0.01px);
|
||||
}
|
||||
[class*="-small-1"].has-gutter > * {
|
||||
width: calc(100% / 1 - 1rem - 0.01px);
|
||||
}
|
||||
[class*="-small-1"].has-gutter-l > * {
|
||||
width: calc(100% / 1 - 2rem - 0.01px);
|
||||
}
|
||||
[class*="-small-1"].has-gutter-xl > * {
|
||||
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);
|
||||
}
|
||||
}
|
||||
*/
|
||||
@media (min-width: tiny + 1) and (max-width: small)
|
||||
for i in 1..4
|
||||
index = '-small-%s' % i
|
||||
[class*={index}]
|
||||
& > *
|
||||
width: 'calc(100% / %s - %s)' % (i iefix)
|
||||
for key, size in grid-gutters
|
||||
&.has-gutter{key} > *
|
||||
width: 'calc(100% / %s - %s - %s)' % (i size iefix)
|
||||
|
|
|
|||
Loading…
Reference in a new issue