]>
Commit | Line | Data |
---|---|---|
1 | @use '_variables' as *; | |
2 | ||
3 | @mixin chevron ($size, $border-width) { | |
4 | border-style: solid; | |
5 | border-width: $border-width $border-width 0 0; | |
6 | content: ''; | |
7 | display: inline-block; | |
8 | transform: rotate(-45deg); | |
9 | height: $size; | |
10 | width: $size; | |
11 | position: relative; | |
12 | } | |
13 | ||
14 | @mixin chevron-right ($size, $border-width) { | |
15 | @include chevron($size, $border-width); | |
16 | ||
17 | left: 0; | |
18 | transform: rotate(45deg); | |
19 | } | |
20 | ||
21 | @mixin chevron-down ($size, $border-width) { | |
22 | @include chevron($size, $border-width); | |
23 | ||
24 | bottom: 0.15em; | |
25 | transform: rotate(135deg); | |
26 | } | |
27 | ||
28 | @mixin chevron-up ($size, $border-width) { | |
29 | @include chevron($size, $border-width); | |
30 | ||
31 | top: 0.15em; | |
32 | transform: rotate(-45deg); | |
33 | } | |
34 | ||
35 | @mixin chevron-left ($size, $border-width) { | |
36 | @include chevron($size, $border-width); | |
37 | ||
38 | left: 0.25em; | |
39 | transform: rotate(-135deg); | |
40 | } | |
41 | ||
42 | // --------------------------------------------------------------------------- | |
43 | ||
44 | @mixin arrow-up ($size) { | |
45 | width: 0; | |
46 | height: 0; | |
47 | border-left: $size solid transparent; | |
48 | border-right: $size solid transparent; | |
49 | border-bottom: $size solid pvar(--mainForegroundColor); | |
50 | } | |
51 | ||
52 | @mixin arrow-down ($size) { | |
53 | width: 0; | |
54 | height: 0; | |
55 | border-left: $size solid transparent; | |
56 | border-right: $size solid transparent; | |
57 | border-top: $size solid pvar(--mainForegroundColor); | |
58 | } |