diff options
| author | Jordan Wiens <jordan@psifertex.com> | 2016-07-24 19:13:40 -0400 |
|---|---|---|
| committer | Jordan Wiens <jordan@psifertex.com> | 2016-07-24 19:13:40 -0400 |
| commit | b1900d6ebcc39738885f90fa9f18b28206a74947 (patch) | |
| tree | 2d4975fe0a347af7101200c48e4a8df82ca780ae /mkdocs-material/src/assets/stylesheets/mixins | |
| parent | 754ea372c66afad144988fcab2d7cf1fdbb3f2fc (diff) | |
very early checkin of template for user-docs, only a few pages filled out
Diffstat (limited to 'mkdocs-material/src/assets/stylesheets/mixins')
| -rw-r--r-- | mkdocs-material/src/assets/stylesheets/mixins/_break.scss | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/mkdocs-material/src/assets/stylesheets/mixins/_break.scss b/mkdocs-material/src/assets/stylesheets/mixins/_break.scss new file mode 100644 index 00000000..468fa2ec --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/mixins/_break.scss @@ -0,0 +1,206 @@ +/* + * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com> + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to + * deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or + * sell copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + * IN THE SOFTWARE. + */ + +/* ---------------------------------------------------------------------------- + * Defaults + * ------------------------------------------------------------------------- */ + +$break: ( + devices: ( + mobile: ( + portrait: 220px 479px, + landscape: 480px 719px + ), + tablet: ( + portrait: 720px 959px, + landscape: 960px 1199px + ), + screen: 1200px + ) +) !default; + +/* ---------------------------------------------------------------------------- + * Helper functions + * ------------------------------------------------------------------------- */ + +/* + * Choose minimum and maximum device widths. + */ +@function break-select-min-max($devices) { + $min: 1000000; $max: 0; + @each $key, $value in $devices { + @while type-of($value) == map { + $value: break-select-min-max($value); + } + @if type-of($value) == list { + @each $number in $value { + @if type-of($number) == number { + $min: min($number, $min); + @if $max != null { + $max: max($number, $max); + } + } @else { + @warn "Invalid number: #{$number}"; + } + } + } @elseif type-of($value) == number { + $min: min($value, $min); + $max: null; + } @else { + @warn "Invalid tuple: #{$value}"; + } + } + @return $min, $max; +} + +/* + * Select minimum and maximum widths for a device breakpoint. + */ +@function break-select-device($device) { + $devices: map-get($break, devices); + @for $n from 1 through length($device) { + @if type-of($devices) == map { + $devices: map-get($devices, nth($device, $n)); + } @else { + @warn "Invalid device map: #{$devices}"; + } + } + @if type-of($devices) == list or + type-of($devices) == number { + $devices: (default: $devices); + } + @return break-select-min-max($devices); +} + +/* ---------------------------------------------------------------------------- + * Mixins for numeric breakpoints + * ------------------------------------------------------------------------- */ + +/* + * A minimum-maximum media query breakpoint. + */ +@mixin break-at($breakpoint) { + @if type-of($breakpoint) == number { + @media only screen and (min-width: $breakpoint) { + @content; + } + } @elseif type-of($breakpoint) == list { + $min: nth($breakpoint, 1); $max: nth($breakpoint, 2); + @if type-of($min) == number and type-of($max) == number { + @media only screen and (min-width: $min) and (max-width: $max) { + @content; + } + } @else { + @warn "Invalid breakpoint: #{$breakpoint}"; + } + } @else { + @warn "Invalid breakpoint: #{$breakpoint}"; + } +} + +/* + * An orientation media query breakpoint. + */ +@mixin break-at-orientation($breakpoint) { + @if type-of($breakpoint) == string { + @media only screen and (orientation: $breakpoint) { + @content; + } + } @else { + @warn "Invalid breakpoint: #{$breakpoint}"; + } +} + +/* + * A maximum-aspect-ratio media query breakpoint. + */ +@mixin break-at-ratio($breakpoint) { + @if type-of($breakpoint) == number { + @media only screen and (max-aspect-ratio: $breakpoint) { + @content; + } + } @else { + @warn "Invalid breakpoint: #{$breakpoint}"; + } +} + +/* ---------------------------------------------------------------------------- + * Mixins for device breakpoints + * ------------------------------------------------------------------------- */ + +/* + * A minimum-maximum media query device breakpoint. + */ +@mixin break-at-device($device) { + @if type-of($device) == string { + $device: $device,; + } + @if type-of($device) == list { + $breakpoint: break-select-device($device); + @if nth($breakpoint, 2) != null { + $min: nth($breakpoint, 1); $max: nth($breakpoint, 2); + @media only screen and (min-width: $min) and (max-width: $max) { + @content; + } + } @else { + @warn "Invalid device: #{$device}"; + } + } @else { + @warn "Invalid device: #{$device}"; + } +} + +/* + * A minimum media query device breakpoint. + */ +@mixin break-from-device($device) { + @if type-of($device) == string { + $device: $device,; + } + @if type-of($device) == list { + $breakpoint: break-select-device($device); + $min: nth($breakpoint, 1); + @media only screen and (min-width: $min) { + @content; + } + } @else { + @warn "Invalid device: #{$device}"; + } +} + +/* + * A maximum media query device breakpoint. + */ +@mixin break-to-device($device) { + @if type-of($device) == string { + $device: $device,; + } + @if type-of($device) == list { + $breakpoint: break-select-device($device); + $max: nth($breakpoint, 1) - 1; + @media only screen and (max-width: $max) { + @content; + } + } @else { + @warn "Invalid device: #{$device}"; + } +}
\ No newline at end of file |
