felixarntz/theme-boilerplate

View on GitHub
assets/src/sass/mixins/_mixins-master.scss

Summary

Maintainability
Test Coverage
// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
    font-size: ($sizeValue * 16) * 1px;
    font-size: $sizeValue * 1rem;
}

// Center block
@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

// Center flex
@mixin center-flex {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

// Center grid
@mixin center-grid {
    display: grid;
    margin-left: auto;
    margin-right: auto;
}

// Clearfix
@mixin clearfix() {
    content: "";
    display: table;
    table-layout: fixed;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
    clear: both;
}

@mixin override-screen-reader-text() {
    position: relative !important;
    clip: auto;
    width: auto;
    height: auto;
    font-weight: 400;

    @include font-size(1);
}

// Horizontal padding
@mixin horizontal-padding() {
    padding-right: $padding_horizontal;
    padding-left: $padding_horizontal;
}

// No horizontal padding
@mixin no-horizontal-padding() {
    padding-right: 0;
    padding-left: 0;
}