plain-ui/src/scss/_mixins.scss

/**
 *  mixins
 *
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */


/**
 *  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: '';
}