]>
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-right-default { | |
22 | @include chevron-right(0.55rem, 0.15rem); | |
23 | ||
24 | margin: 0 8px; | |
25 | } | |
26 | ||
27 | @mixin chevron-down ($size, $border-width) { | |
28 | @include chevron($size, $border-width); | |
29 | ||
30 | bottom: 0.15em; | |
31 | transform: rotate(135deg); | |
32 | } | |
33 | ||
34 | @mixin chevron-down-default { | |
35 | @include chevron-down(0.55rem, 0.15rem); | |
36 | ||
37 | margin: 0 8px; | |
38 | } | |
39 | ||
40 | @mixin chevron-up ($size, $border-width) { | |
41 | @include chevron($size, $border-width); | |
42 | ||
43 | top: 0.15em; | |
44 | transform: rotate(-45deg); | |
45 | } | |
46 | ||
47 | @mixin chevron-up-default { | |
48 | @include chevron-up(0.55rem, 0.15rem); | |
49 | ||
50 | margin: 0 8px; | |
51 | } | |
52 | ||
53 | @mixin chevron-left ($size, $border-width) { | |
54 | @include chevron($size, $border-width); | |
55 | ||
56 | left: 0.25em; | |
57 | transform: rotate(-135deg); | |
58 | } | |
59 | ||
60 | @mixin chevron-left-default { | |
61 | @include chevron-left(0.55rem, 0.15rem); | |
62 | ||
63 | margin: 0 8px; | |
64 | } | |
65 | ||
66 | // --------------------------------------------------------------------------- | |
67 | ||
68 | @mixin arrow-up ($size) { | |
69 | width: 0; | |
70 | height: 0; | |
71 | border-left: $size solid transparent; | |
72 | border-right: $size solid transparent; | |
73 | border-bottom: $size solid pvar(--mainForegroundColor); | |
74 | } | |
75 | ||
76 | @mixin arrow-down ($size) { | |
77 | width: 0; | |
78 | height: 0; | |
79 | border-left: $size solid transparent; | |
80 | border-right: $size solid transparent; | |
81 | border-top: $size solid pvar(--mainForegroundColor); | |
82 | } |