Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bourbon/library/_triangle.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 @charset "UTF-8";
2
3 /// Generates a triangle pointing in a specified direction.
4 ///
5 /// @argument {string} $direction [up]
6 /// The direction the triangle should point. Accepts `up`, `up-right`,
7 /// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
8 ///
9 /// @argument {color} $color [currentColor]
10 /// Color of the triangle.
11 ///
12 /// @argument {number (with unit)} $width [1rem]
13 /// Width of the triangle.
14 ///
15 /// @argument {number (with unit)} $height [($width / 2)]
16 /// Height of the triangle.
17 ///
18 /// @example scss
19 /// .element {
20 /// &::before {
21 /// @include triangle(up, #b25c9c, 2rem);
22 /// content: "";
23 /// }
24 /// }
25 ///
26 /// // CSS Output
27 /// .element::before {
28 /// border-style: solid;
29 /// height: 0;
30 /// width: 0;
31 /// border-color: transparent transparent #b25c9c transparent;
32 /// border-width: 0 1rem 1rem;
33 /// content: "";
34 /// }
35
36 @mixin triangle(
37 $direction: up,
38 $color: currentColor,
39 $width: 1rem,
40 $height: ($width / 2)
41 ) {
42 @if not index(
43 "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
44 $direction
45 ) {
46 @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
47 "`down`, `down-left`, `left` or `up-left`.";
48 } @else if not _is-color($color) {
49 @error "`#{$color}` is not a valid color for the `$color` argument in " +
50 "the `triangle` mixin.";
51 } @else {
52 border-style: solid;
53 height: 0;
54 width: 0;
55
56 @if $direction == "up" {
57 border-color: transparent transparent $color;
58 border-width: 0 ($width / 2) $height;
59 } @else if $direction == "up-right" {
60 border-color: transparent $color transparent transparent;
61 border-width: 0 $width $width 0;
62 } @else if $direction == "right" {
63 border-color: transparent transparent transparent $color;
64 border-width: ($height / 2) 0 ($height / 2) $width;
65 } @else if $direction == "down-right" {
66 border-color: transparent transparent $color;
67 border-width: 0 0 $width $width;
68 } @else if $direction == "down" {
69 border-color: $color transparent transparent;
70 border-width: $height ($width / 2) 0;
71 } @else if $direction == "down-left" {
72 border-color: transparent transparent transparent $color;
73 border-width: $width 0 0 $width;
74 } @else if $direction == "left" {
75 border-color: transparent $color transparent transparent;
76 border-width: ($height / 2) $width ($height / 2) 0;
77 } @else if $direction == "up-left" {
78 border-color: $color transparent transparent;
79 border-width: $width $width 0 0;
80 }
81 }
82 }