Mercurial > nebulaweb3
diff default/assets/scss/vendors/bourbon/library/_triangle.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/assets/scss/vendors/bourbon/library/_triangle.scss Sat May 31 09:21:51 2025 +0800 @@ -0,0 +1,82 @@ +@charset "UTF-8"; + +/// Generates a triangle pointing in a specified direction. +/// +/// @argument {string} $direction [up] +/// The direction the triangle should point. Accepts `up`, `up-right`, +/// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`. +/// +/// @argument {color} $color [currentColor] +/// Color of the triangle. +/// +/// @argument {number (with unit)} $width [1rem] +/// Width of the triangle. +/// +/// @argument {number (with unit)} $height [($width / 2)] +/// Height of the triangle. +/// +/// @example scss +/// .element { +/// &::before { +/// @include triangle(up, #b25c9c, 2rem); +/// content: ""; +/// } +/// } +/// +/// // CSS Output +/// .element::before { +/// border-style: solid; +/// height: 0; +/// width: 0; +/// border-color: transparent transparent #b25c9c transparent; +/// border-width: 0 1rem 1rem; +/// content: ""; +/// } + +@mixin triangle( + $direction: up, + $color: currentColor, + $width: 1rem, + $height: ($width / 2) + ) { + @if not index( + "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left", + $direction + ) { + @error "Direction must be `up`, `up-right`, `right`, `down-right`, " + + "`down`, `down-left`, `left` or `up-left`."; + } @else if not _is-color($color) { + @error "`#{$color}` is not a valid color for the `$color` argument in " + + "the `triangle` mixin."; + } @else { + border-style: solid; + height: 0; + width: 0; + + @if $direction == "up" { + border-color: transparent transparent $color; + border-width: 0 ($width / 2) $height; + } @else if $direction == "up-right" { + border-color: transparent $color transparent transparent; + border-width: 0 $width $width 0; + } @else if $direction == "right" { + border-color: transparent transparent transparent $color; + border-width: ($height / 2) 0 ($height / 2) $width; + } @else if $direction == "down-right" { + border-color: transparent transparent $color; + border-width: 0 0 $width $width; + } @else if $direction == "down" { + border-color: $color transparent transparent; + border-width: $height ($width / 2) 0; + } @else if $direction == "down-left" { + border-color: transparent transparent transparent $color; + border-width: $width 0 0 $width; + } @else if $direction == "left" { + border-color: transparent $color transparent transparent; + border-width: ($height / 2) $width ($height / 2) 0; + } @else if $direction == "up-left" { + border-color: $color transparent transparent; + border-width: $width $width 0 0; + } + } +}