<commit_before>// CSS TRIANGLE
// Include this mixin on the element you want to have a triangle on it
// By default the arrow is centered on the bottom of an element, change mixin
// options to amend it's location and position

// Mixin arguments
// ==================================
// $color: hex/variable/named color.
//    -- default: #000
// $width: px/rem(px)
// $height: px/rem(px)
//    -- default: 10px
//    Increase width to create a wider arrow or height to 
//    create a narrower arrow. Include the unit in the argument.
// $location: bottom | top | left | right
//    -- default: bottom
// $position: centered | from-top | from-bottom | from-left | from-right
//    -- default: centered
// $position-value: px/rem(px)
//    -- default: none
//    If using the default of centered, this is not required
//    If using any other position, this is required in px/rem(px)/%
// $pseudo: before | after
//   -- default: after

// Mixin use examples
// ==================================
// 15px triangle on the bottom middle of an element:
// @include triangle(green, 15px)
//
// 10px triangle on the right middle of an element:
// @include triangle (green, 10px, 10px, right)
//
// 15px triangle on the left of an element, 20px from the top:
// @include triangle(green, 15px, 15px, left, from-top, 20px)
//
// Narrow tall triangle on the bottom of an element, 5px from the right:
// @include triangle(green, 5px, 15px, bottom, from-right, 5px)

@mixin triangle($color: #000, $width: 10px, $height: $width, $location: bottom, $position: centered, $position-value: none, $pseudo: after)
    position: relative
    &::#{$pseudo}
        content: ''
        height: 0
        width: 0
        position: absolute

        @if ($location == "bottom" or $location == "top")
            @if $position == "centered"
                @include transform(translateX(-50%))
                left: 50%
            @else if $position == "from-left"
                left: $position-value
            @else if $position == "from-right"
                right: $position-value

        @if $location == "bottom"
            top: 100%
            border: solid transparent
                width: $width
                top-width: $height
                bottom-width: 0
                top-color: $color

        @if $location == "top"
            bottom: 100%
            border: solid transparent
                width: $width
                top-width: 0
                bottom-width: $height
                bottom-color: $color

        @if ($location == "left" or $location == "right")
            @if $position == "centered"
                @include transform(translateY(-50%))
                top: 50%
            @else if $position == "from-top"
                top: $position-value
            @else if $position == "from-bottom"
                bottom: $position-value

        @if $location == "left"
            right: 100%
            border: solid transparent
                width: $width
                right-width: $height
                left-width: 0
                right-color: $color

        @if $location == "right"
            left: 100%
            border: solid transparent
                width: $width
                right-width: 0
                left-width: $height
                left-color: $color<commit_msg>Change order of properties in the mixin<commit_after>// CSS TRIANGLE
// Include this mixin on the element you want to have a triangle on it
// By default the arrow is centered on the bottom of an element, change mixin
// options to amend it's location and position

// Mixin arguments
// ==================================
// $color: hex/variable/named color.
//    -- default: #000
// $width: px/rem(px)
// $height: px/rem(px)
//    -- default: 10px
//    Increase width to create a wider arrow or height to 
//    create a narrower arrow. Include the unit in the argument.
// $location: bottom | top | left | right
//    -- default: bottom
// $position: middle | from-top | from-bottom | from-left | from-right
//    -- default: middle
// $position-value: px/rem(px)
//    -- default: none
//    If using the default of middle, this is not required
//    If using any other position, this is required in px/rem(px)/%
// $pseudo: before | after
//   -- default: after

// Mixin use examples
// ==================================
// 15px triangle on the bottom middle of an element:
// @include triangle(bottom, middle, green, 15px)
//
// 10px triangle on the right middle of an element:
// @include triangle (right, middle, green)
//
// 15px triangle on the left of an element, 20px from the top:
// @include triangle(left, from-top, green, 15px, 15px, 20px)
//
// Narrow tall triangle on the bottom of an element, 5px from the right:
// @include triangle(bottom, from-right, green, 5px, 15px, 5px)

@mixin triangle($location: bottom, $position: middle, $color: #000, $width: 10px, $height: $width, $position-value: none, $pseudo: after)
    position: relative
    &::#{$pseudo}
        content: ''
        height: 0
        width: 0
        position: absolute

        @if ($location == "bottom" or $location == "top")
            @if $position == "middle"
                @include transform(translateX(-50%))
                left: 50%
            @else if $position == "from-left"
                left: $position-value
            @else if $position == "from-right"
                right: $position-value

        @if $location == "bottom"
            top: 100%
            border: solid transparent
                width: $width
                top-width: $height
                bottom-width: 0
                top-color: $color

        @if $location == "top"
            bottom: 100%
            border: solid transparent
                width: $width
                top-width: 0
                bottom-width: $height
                bottom-color: $color

        @if ($location == "left" or $location == "right")
            @if $position == "middle"
                @include transform(translateY(-50%))
                top: 50%
            @else if $position == "from-top"
                top: $position-value
            @else if $position == "from-bottom"
                bottom: $position-value

        @if $location == "left"
            right: 100%
            border: solid transparent
                width: $width
                right-width: $height
                left-width: 0
                right-color: $color

        @if $location == "right"
            left: 100%
            border: solid transparent
                width: $width
                right-width: 0
                left-width: $height
                left-color: $color
{'fraction_non_alphanumeric': 0.13690653926545238, 'fraction_numerical': 0.01761719916392953, 'mean_word_length': 1.802928870292887, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3608079', 'n_tokens_mistral': 1956, 'n_tokens_neox': 1769, 'n_words': 652}