51 lines
1.3 KiB
Stylus
51 lines
1.3 KiB
Stylus
// Additionnal "utility" breakpoints aliases
|
|
// ex. @include respond-to("medium-up") {...}
|
|
breakpoint(bp)
|
|
if bp == 'tiny'
|
|
return '(max-width: %s)' % tiny
|
|
else if bp == 'small'
|
|
return '(max-width: %s)' % small
|
|
else if bp == 'medium'
|
|
return '(max-width: %s)' % medium
|
|
else if bp == 'large'
|
|
return '(max-width: %s)' % large
|
|
else if bp == 'extra-large'
|
|
return '(max-width: %s)' % extra-large
|
|
else if bp == 'tiny-up'
|
|
return '(min-width: %s + 1)' % tiny
|
|
else if bp == 'small-up'
|
|
return '(min-width: %s + 1)' % small
|
|
else if bp == 'medium-up'
|
|
return '(min-width: %s + 1)' % medium
|
|
else if bp == 'large-up'
|
|
return '(min-width: %s + 1)' % large
|
|
else if bp == 'extra-large-up'
|
|
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
|
|
{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
|