Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/mixins/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// MIXINS - Triangle
// ==============================================

/**
 * Becareful : when you switch to horizontal position (left and right),
 * width become height and height become width
 */

@mixin triangle ($position, $borderWidth: 20px, $borderHeight: 10px, $borderColor: currentColor) {

    $widthHalf: $borderWidth/2;
    $heighthHalf: $borderHeight/2;

    position: relative;

    &::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;

        @if( $position == top) {

            top: $borderHeight * -1;
            left: calc(50%);
            transform: translateX(-50%);
            border-width: 0 $widthHalf $borderHeight $widthHalf;
            border-color: transparent transparent $borderColor transparent;

        } @else if( $position == right ) {

            top: calc(50%);
            transform: translateY(-50%);
            right: $borderWidth * -1;
            border-width: $heighthHalf 0 $heighthHalf $borderWidth;
            border-color: transparent transparent transparent $borderColor;

        } @else if( $position == bottom ) {

            left: calc(50%);
            transform: translateX(-50%);
            bottom: $borderHeight * -1;
            border-width: $borderHeight $widthHalf 0 $widthHalf;
            border-color: $borderColor transparent transparent transparent;

        } @else if ( $position == left ) {

            top: calc(50%);
            transform: translateY(-50%);
            left: $borderWidth * -1;
            border-width: $heighthHalf $borderWidth $heighthHalf 0;
            border-color: transparent $borderColor transparent transparent;
        }
    }
}