squidex/frontend/app/theme/_mixins.scss

@mixin build-icon($color) {
    & {
        color: $color;
        transition: color .3s ease;
    }

    &:hover,
    &:focus {
        color: darken($color, 10%);
    }
}

@mixin build-toggle-button($color, $background) {
    & {
        background: $background;
        border-color: $color;
        color: $color;
        z-index: 1000;
    }
}

@mixin build-text-button($color) {
    & {
        color: $color;
    }

    &:disabled
    &.disabled {
        opacity: .4;
    }  

    &:focus,
    &.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
    }
    
    &:active,
    &:hover {
        color: darken($color, 15%);
    }
}

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
    &::-webkit-scrollbar {
        height: $size;
        width:  $size;
    }

    &::-webkit-scrollbar-thumb {
        background: $foreground-color;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
        background: $background-color;
    }

    & {
        scrollbar-color: $foreground-color $background-color;
        scrollbar-face-color: $foreground-color;
        scrollbar-track-color: $background-color;
        scrollbar-width: thin;
    }
}

@mixin clearfix {
    &::after {
        clear: both;
        content: '';
        display: table;
    }
}

@mixin hidden() {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
}

@mixin force-width($width) {
    width:  $width;
    // Ensure that we use the minimum width in flex scenarios.
    max-width: $width;
    min-width: $width;
}

@mixin force-height($height) {
    height:  $height;
    // Ensure that we use the minimum width in flex scenarios.
    max-height: $height;
    min-height: $height;
}

@mixin caret-top($color, $size: .6rem) {
    @include caret;
    border: $size solid transparent;
    border-bottom-color: $color;
}

@mixin caret-left($color, $size: .6rem) {
    @include caret;
    border: $size solid transparent;
    border-right-color: $color;
}

@mixin caret-right($color, $size: .6rem) {
    @include caret;
    border: $size solid transparent;
    border-left-color: $color;
}

@mixin caret-bottom($color, $size: .6rem) {
    @include caret;
    border: $size solid transparent;
    border-top-color: $color;
}

@mixin caret {
    @include force-height(0);
    @include force-width(0);
    content: '';
    display: inline-block;
}
 
@mixin circle($size) {
    @include border-radius($size * .5);
    @include force-height($size);
    @include force-width($size);
    display: inline-block;
}

@mixin placeholder-color($color) {
    ::placeholder {
        color: $color;
    }

    &::-webkit-input-placeholder {
        color: $color;
    }

    &:-moz-placeholder {
        color: $color;
        opacity: 1;
    }

    &::-moz-placeholder {
        color: $color;
        opacity: 1;
    }

    &:-ms-input-placeholder {
        color: $color;
    }
}

@mixin hover-visible($selector, $display: block) {
    #{$selector} {
        display: none;
    }

    &:hover {
        #{$selector} {
            display: $display;
        }
    }
}

@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
    box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
}

@mixin box-shadow2($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
    box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
}

@mixin box-shadow-inner($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
    box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
}

@mixin border-radius ($radius: 4px) {
    border-radius: $radius;
}

@mixin border-radius-left ($radius: 4px) {
    border-radius: $radius 0 0 $radius;
}

@mixin border-radius-right ($radius: 4px) {
    border-radius: 0 $radius $radius 0;
}

@mixin border-radius-bottom ($radius: 4px) {
    border-radius: 0 0 $radius $radius;
}

@mixin border-radius-top ($radius: 4px) {
    border-radius: $radius $radius 0 0;
}

@mixin position($t: null, $r: null, $b: null, $l: null) {
    bottom: $b; left: $l; right: $r; top: $t;
}

@mixin absolute($t: null, $r: null, $b: null, $l: null) {
    @include position($t, $r, $b, $l);
    position: absolute;
}

@mixin fixed($t: null, $r: null, $b: null, $l: null) {
    @include position($t, $r, $b, $l);
    position: fixed;
}

@mixin truncate-nowidth {
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin truncate {
    @include truncate-nowidth;
    max-width: 100%;
    min-width: 0;
    width: auto;
}