PageRenderTime 18ms CodeModel.GetById 10ms app.highlight 5ms RepoModel.GetById 1ms app.codeStats 0ms

/glozzom/scss/bootstrap/mixins/_breakpoints.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 123 lines | 69 code | 10 blank | 44 comment | 18 complexity | c55d743435c2c7f7611ec6c1cbec776d MD5 | raw file
  1// Breakpoint viewport sizes and media queries.
  2//
  3// Breakpoints are defined as a map of (name: minimum width), order from small to large:
  4//
  5//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
  6//
  7// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
  8
  9// Name of the next breakpoint, or null for the last breakpoint.
 10//
 11//    >> breakpoint-next(sm)
 12//    md
 13//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 14//    md
 15//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 16//    md
 17@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
 18  $n: index($breakpoint-names, $name);
 19  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 20}
 21
 22// Minimum breakpoint width. Null for the smallest (first) breakpoint.
 23//
 24//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 25//    576px
 26@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
 27  $min: map-get($breakpoints, $name);
 28  @return if($min != 0, $min, null);
 29}
 30
 31// Maximum breakpoint width. Null for the largest (last) breakpoint.
 32// The maximum value is calculated as the minimum of the next one less 0.02px
 33// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
 34// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
 35// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 36// See https://bugs.webkit.org/show_bug.cgi?id=178261
 37//
 38//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 39//    767.98px
 40@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
 41  $next: breakpoint-next($name, $breakpoints);
 42  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
 43}
 44
 45// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
 46// Useful for making responsive utilities.
 47//
 48//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 49//    ""  (Returns a blank string)
 50//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 51//    "-sm"
 52@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
 53  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
 54}
 55
 56// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 57// Makes the @content apply to the given breakpoint and wider.
 58@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
 59  $min: breakpoint-min($name, $breakpoints);
 60  @if $min {
 61    @media (min-width: $min) {
 62      @content;
 63    }
 64  } @else {
 65    @content;
 66  }
 67}
 68
 69// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 70// Makes the @content apply to the given breakpoint and narrower.
 71@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
 72  $max: breakpoint-max($name, $breakpoints);
 73  @if $max {
 74    @media (max-width: $max) {
 75      @content;
 76    }
 77  } @else {
 78    @content;
 79  }
 80}
 81
 82// Media that spans multiple breakpoint widths.
 83// Makes the @content apply between the min and max breakpoints
 84@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
 85  $min: breakpoint-min($lower, $breakpoints);
 86  $max: breakpoint-max($upper, $breakpoints);
 87
 88  @if $min != null and $max != null {
 89    @media (min-width: $min) and (max-width: $max) {
 90      @content;
 91    }
 92  } @else if $max == null {
 93    @include media-breakpoint-up($lower, $breakpoints) {
 94      @content;
 95    }
 96  } @else if $min == null {
 97    @include media-breakpoint-down($upper, $breakpoints) {
 98      @content;
 99    }
100  }
101}
102
103// Media between the breakpoint's minimum and maximum widths.
104// No minimum for the smallest breakpoint, and no maximum for the largest one.
105// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
106@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
107  $min: breakpoint-min($name, $breakpoints);
108  $max: breakpoint-max($name, $breakpoints);
109
110  @if $min != null and $max != null {
111    @media (min-width: $min) and (max-width: $max) {
112      @content;
113    }
114  } @else if $max == null {
115    @include media-breakpoint-up($name, $breakpoints) {
116      @content;
117    }
118  } @else if $min == null {
119    @include media-breakpoint-down($name, $breakpoints) {
120      @content;
121    }
122  }
123}