/** * mixins * * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/plain-ui-css * */ /** * Clear Floats * * * */ @mixin clearfix() { &::before, &::after { display: table; content: ' '; } &::after { clear: both; } } /** * clear styles from list * * */ @mixin clearlist() { list-style: none; margin: 0; padding: 0; li { margin: 0; padding: 0; } } /** * media-queries as mixins * based on breakpoints from variables * * * */ @mixin media-xs() { @media only screen and (min-width: $grid__xs) { @content; } } @mixin media-sm() { @media only screen and (min-width: $grid__sm) { @content; } } @mixin media-md() { @media only screen and (min-width: $grid__md) { @content; } } @mixin media-lg() { @media only screen and (min-width: $grid__lg) { @content; } } @mixin media-xlg() { @media only screen and (min-width: $grid__xlg) { @content; } } @mixin media-xxs-only() { @media only screen and (max-width: $grid__xs) { @content; } } @mixin media-xxs-only() { @media only screen and (max-width: $grid__xs - 1) { @content; } } @mixin media-xs-only() { @media only screen and (min-width: $grid__xs) and (max-width: $grid__sm - 1) { @content; } } @mixin media-sm-only() { @media only screen and (min-width: $grid__sm) and (max-width: $grid__md - 1) { @content; } } @mixin media-md-only() { @media only screen and (min-width: $grid__md) and (max-width: $grid__lg - 1) { @content; } } @mixin media-lg-only() { @media only screen and (min-width: $grid__lg) and (max-width: $grid__xlg - 1) { @content; } } @mixin media-xlg-only() { @media only screen and (min-width: $grid__xlg) { @content; } } /** * Set property and his value for each Breakpoint * * ( * $md: 10px * ) * * * @param {css} $property * @param {map} $breakpoints * @param {Boolean} $important [false] * */ @mixin breakpoints($property, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { @if $important == false { #{$property}: $value; } @else { #{$property}: $value !important; } } } } @mixin media-breakpoints($property, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { @if $important == false { #{$property}: $value; } @else { #{$property}: $value !important; } } } } /** * Set property and his value with an factor for each Breakpoint * * ( * $md: 10px * ) * * @param {css} $property * @param {number} $factor * @param {map} $breakpoints * @param {Boolean} $important [false] * */ @mixin breakpoints-calculate($property, $factor, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { @if $important == false { #{$property}: ($value * $factor); } @else { #{$property}: ($value * $factor) !important; } } } } /** * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size * * ( * $md: 1rem * ) * * @param {map} $breakpoints * @param {unit} $font-size * @param {unit} $default * @param {Boolean} $important [false] * */ @mixin breakpoints-font-size($breakpoints, $font-size, $default, $important: false) { @each $breakpoint, $value in $breakpoints { // getting diff $factor: (stripUnit($font-size) - stripUnit($default)) + 1; // ignore if factor is zero @if $factor > 0 { @media only screen and (min-width: $breakpoint) { @if $important == false { font-size: ($value * $factor); } @else { font-size: ($value * $factor) !important; } } } } } /** * adding overlay with z-index and color * * @param {z-index} * @param {color} * */ @mixin overlay($z-index: 0, $color: transparent) { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #{$color}; transition: background-color 0.5s; z-index: #{$z-index}; content: ''; }