wagtail/client/scss/tools/_mixins.general.scss

// =============================================================================
// Mixins
// =============================================================================
// Please note that the mixins partial shouldn't include any classes. This is so
// it can be included in any file without accidentally producing output

// Turns on font-smoothing when used. Use sparingly.
@mixin font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@mixin clearfix() {
    &:before,
    &:after {
        content: ' ';
        display: table;
    }

    &:after {
        clear: both;
    }
}

@mixin unlist() {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none;
    font-style: normal;

    li {
        list-style-type: none;
        font-style: normal;
    }
}


// remove list styles, but only for the immediate element -
// allow nested lists inside it to keep the default style

@mixin unlistimmediate() {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none;
    font-style: normal;

    > li {
        list-style-type: none;
        font-style: normal;
    }
}

@mixin transition($transition...) {
    body.ready & {
        transition: $transition;
    }
}

@mixin visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


@mixin visuallyvisible {
    clip: auto;
    height: auto;
    width: auto;
    margin: initial;
    overflow: visible;
    position: initial;
}

@mixin svg-icon ($size: 1.5em, $position: text-top) {
    width: $size;
    height: $size;
    vertical-align: $position;
}

@mixin icon () {
    @include font-smoothing;
    font-family: 'wagtail';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    speak: none;
    text-decoration: none;
    width: 1.3em;
    line-height: 1em;
    text-align: left;
    vertical-align: middle;
    margin-right: 0.2em;
}

@mixin svg-icon ($size: 1.5em, $position: text-top) {
    width: $size;
    height: $size;
    vertical-align: $position;
}

// Applies given rules on hover, except for touch screens.
// Relies on feature detection to add a no-touch class on the html element.
@mixin hover {
    .no-touch &:hover {
        @content;
    }
}

// Where included, show the focus outline within focusable items instead of around them.
// This is useful when focusable items are tightly packed and there is no space in-between.
@mixin show-focus-outline-inside {
    outline-offset: -1 * $focus-outline-width;
}