summaryrefslogtreecommitdiff
path: root/mkdocs-material/src/assets/stylesheets/mixins
diff options
context:
space:
mode:
authorJordan Wiens <jordan@psifertex.com>2016-07-24 19:13:40 -0400
committerJordan Wiens <jordan@psifertex.com>2016-07-24 19:13:40 -0400
commitb1900d6ebcc39738885f90fa9f18b28206a74947 (patch)
tree2d4975fe0a347af7101200c48e4a8df82ca780ae /mkdocs-material/src/assets/stylesheets/mixins
parent754ea372c66afad144988fcab2d7cf1fdbb3f2fc (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.scss206
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