modifications des breakpoints
This commit is contained in:
parent
725124d380
commit
204d870d31
10 changed files with 58 additions and 49 deletions
|
@ -2,8 +2,8 @@
|
|||
|
||||
// Warning : you should use your own values, regardless of the devices
|
||||
// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
|
||||
$tiny: 544px !default; // or 'em' if you prefer, of course
|
||||
$small: 768px !default;
|
||||
$medium: 1024px !default;
|
||||
$large: 1200px !default;
|
||||
$extra-large: 1440px !default;
|
||||
$tiny: 543px !default; // or 'em' if you prefer, of course
|
||||
$small: 767px !default;
|
||||
$medium: 991px !default;
|
||||
$large: 1199px !default;
|
||||
$extra-large: 1439px !default;
|
||||
|
|
|
@ -1,30 +1,36 @@
|
|||
// Additionnal "utility" breakpoints aliases
|
||||
// ex. @include respond-to("portrait-up") {...}
|
||||
// ex. @include respond-to("medium-up") {...}
|
||||
@function breakpoint($bp) {
|
||||
@if $bp == 'mobile' {
|
||||
@if $bp == 'tiny' {
|
||||
@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' {
|
||||
@else if $bp == 'small' {
|
||||
@return '(max-width: #{$small})';
|
||||
}
|
||||
@else if $bp == 'portrait-up' {
|
||||
@return '(min-width: #{$tiny + 1})';
|
||||
}
|
||||
@else if $bp == 'landscape-down' {
|
||||
@else if $bp == 'medium' {
|
||||
@return '(max-width: #{$medium})';
|
||||
}
|
||||
@else if $bp == 'landscape-up' {
|
||||
@else if $bp == 'large' {
|
||||
@return '(max-width: #{$large})';
|
||||
}
|
||||
@else if $bp == 'extra-large' {
|
||||
@return '(max-width: #{$extra-large})';
|
||||
}
|
||||
@else if $bp == 'tiny-up' {
|
||||
@return '(min-width: #{$tiny + 1})';
|
||||
}
|
||||
@else if $bp == 'small-up' {
|
||||
@return '(min-width: #{$small + 1})';
|
||||
}
|
||||
@else if $bp == 'medium-up' {
|
||||
@return '(min-width: #{$medium + 1})';
|
||||
}
|
||||
@else if $bp == 'large-up' {
|
||||
@return '(min-width: #{$large + 1})';
|
||||
}
|
||||
@else if $bp == 'extra-large-up' {
|
||||
@return '(min-width: #{$extra-large + 1})';
|
||||
}
|
||||
@else if $bp == 'retina' {
|
||||
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V6.0.4 (22 novembre 2016) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue