dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refonte des breakpoints

Browse source
This commit is contained in:
Raphael Goetter 2016-09-21 10:05:29 +02:00
parent c940647d2d
commit 3b87077ae3
10 changed files with 66 additions and 597 deletions
Download patch file Download diff file Expand all files Collapse all files

38
sass/_config/_mixins.scss Normal file
View file

@ -0,0 +1,38 @@
// Additionnal "utility" breakpoints aliases
// ex. @include respond-to("portrait-up") {...}
@function breakpoint($bp) {
@if $bp == 'mobile' {
@return '(max-width: #{$tiny})';
}
@else if $bp == 'portrait' {
@return '(min-width: #{$tiny + 1}) and (max-width: #{$small})';
}
@else if $bp == 'landscape' {
@return '(min-width: #{$small + 1}) and (max-width: #{$medium})';
}
@else if $bp == 'desktop' {
@return '(min-width: #{$medium + 1})';
}
@else if $bp == 'portrait-down' {
@return '(max-width: #{$small})';
}
@else if $bp == 'portrait-up' {
@return '(min-width: #{$tiny + 1})';
}
@else if $bp == 'landscape-down' {
@return '(max-width: #{$medium})';
}
@else if $bp == 'landscape-up' {
@return '(min-width: #{$small + 1})';
}
@else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
}
}
@mixin respond-to($value) {
$string: breakpoint($value);
@media screen and #{$string} {
@content;
}
}