diff options
Diffstat (limited to 'client/src/sass/include/_icons.scss')
-rw-r--r-- | client/src/sass/include/_icons.scss | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss new file mode 100644 index 000000000..5d8a312db --- /dev/null +++ b/client/src/sass/include/_icons.scss | |||
@@ -0,0 +1,58 @@ | |||
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 | } | ||