client/src/sass/include/_icons.scss

   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 }