felixarntz/theme-boilerplate

View on GitHub
assets/src/sass/modules/_alignments.scss

Summary

Maintainability
Test Coverage
.alignleft {
    display: inline;
    float: left;
    margin-right: $spacing_horizontal;
}

.alignright {
    display: inline;
    float: right;
    margin-left: $spacing_horizontal;
}

.aligncenter {
    @include center-block;

    clear: both;
}

.alignwide {
    width: auto;

    body.no-sidebar .entry-header &,
    body.no-sidebar .entry-content &,
    body.no-sidebar .entry-footer &,
    body.mce-content-body & {
        @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
            margin-right: calc(#{$site_maxwidth-text} / 2 + #{$padding_horizontal} - 50vw);
            margin-left: calc(#{$site_maxwidth-text} / 2 + #{$padding_horizontal} - 50vw);
        }

        @media (min-width: ($site_maxwidth)) {
            margin-right: ($site_maxwidth-text / 2 + $padding_horizontal - $site_maxwidth / 2);
            margin-left: ($site_maxwidth-text / 2 + $padding_horizontal - $site_maxwidth / 2);
        }
    }

    body.navbar-left.no-sidebar .entry-header &,
    body.navbar-left.no-sidebar .entry-content &,
    body.navbar-left.no-sidebar .entry-footer &,
    body.navbar-right.no-sidebar .entry-header &,
    body.navbar-right.no-sidebar .entry-content &,
    body.navbar-right.no-sidebar .entry-footer & {
        @media (min-width: ($site_maxwidth)) {
            margin-right: ($site_maxwidth-text / 2 + $padding_horizontal - ($site_maxwidth - $site_navbar-vertical-width) / 2);
            margin-left: ($site_maxwidth-text / 2 + $padding_horizontal - ($site_maxwidth - $site_navbar-vertical-width) / 2);
        }
    }
}

.alignfull {
    width: auto;

    body.no-sidebar &,
    body.mce-content-body & {
        margin-right: (- $padding_horizontal);
        margin-left: (- $padding_horizontal);
    }

    body.no-sidebar .entry-header &,
    body.no-sidebar .entry-content &,
    body.no-sidebar .entry-footer &,
    body.mce-content-body & {
        @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
            margin-right: calc(#{$site_maxwidth-text} / 2 - 50vw);
            margin-left: calc(#{$site_maxwidth-text} / 2 - 50vw);
        }
    }

    body.wrapped-layout.no-sidebar .entry-header &,
    body.wrapped-layout.no-sidebar .entry-content &,
    body.wrapped-layout.no-sidebar .entry-footer & {
        @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
            margin-right: ($site_maxwidth-text / 2 - $site_maxwidth / 2);
            margin-left: ($site_maxwidth-text / 2 - $site_maxwidth / 2);
        }
    }

    body.navbar-left.no-sidebar .entry-header &,
    body.navbar-left.no-sidebar .entry-content &,
    body.navbar-left.no-sidebar .entry-footer &,
    body.navbar-right.no-sidebar .entry-header &,
    body.navbar-right.no-sidebar .entry-content &,
    body.navbar-right.no-sidebar .entry-footer & {
        @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
            margin-right: calc(#{$site_maxwidth-text} / 2 - (50vw - #{$site_navbar-vertical-width} / 2));
            margin-left: calc(#{$site_maxwidth-text} / 2 - (50vw - #{$site_navbar-vertical-width} / 2));
        }
    }

    body.navbar-left.wrapped-layout.no-sidebar .entry-header &,
    body.navbar-left.wrapped-layout.no-sidebar .entry-content &,
    body.navbar-left.wrapped-layout.no-sidebar .entry-footer &,
    body.navbar-right.wrapped-layout.no-sidebar .entry-header &,
    body.navbar-right.wrapped-layout.no-sidebar .entry-content &,
    body.navbar-right.wrapped-layout.no-sidebar .entry-footer & {
        @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
            margin-right: ($site_maxwidth-text / 2 - ($site_maxwidth - $site_navbar-vertical-width) / 2);
            margin-left: ($site_maxwidth-text / 2 - ($site_maxwidth - $site_navbar-vertical-width) / 2);
        }
    }
}