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