_icons-navigation.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. // Icon arrows
  2. .icon-arrow-down,
  3. .icon-arrow-left,
  4. .icon-arrow-right,
  5. .icon-arrow-up,
  6. .icon-downward,
  7. .icon-back,
  8. .icon-forward,
  9. .icon-upward {
  10. &::before {
  11. border: $icon-border-width solid currentColor;
  12. border-bottom: 0;
  13. border-right: 0;
  14. content: "";
  15. height: .65em;
  16. width: .65em;
  17. }
  18. }
  19. .icon-arrow-down {
  20. &::before {
  21. transform: translate(-50%, -75%) rotate(225deg);
  22. }
  23. }
  24. .icon-arrow-left {
  25. &::before {
  26. transform: translate(-25%, -50%) rotate(-45deg);
  27. }
  28. }
  29. .icon-arrow-right {
  30. &::before {
  31. transform: translate(-75%, -50%) rotate(135deg);
  32. }
  33. }
  34. .icon-arrow-up {
  35. &::before {
  36. transform: translate(-50%, -25%) rotate(45deg);
  37. }
  38. }
  39. .icon-back,
  40. .icon-forward {
  41. &::after {
  42. background: currentColor;
  43. content: "";
  44. height: $icon-border-width;
  45. width: .8em;
  46. }
  47. }
  48. .icon-downward,
  49. .icon-upward {
  50. &::after {
  51. background: currentColor;
  52. content: "";
  53. height: .8em;
  54. width: $icon-border-width;
  55. }
  56. }
  57. .icon-back {
  58. &::after {
  59. left: 55%;
  60. }
  61. &::before {
  62. transform: translate(-50%, -50%) rotate(-45deg);
  63. }
  64. }
  65. .icon-downward {
  66. &::after {
  67. top: 45%;
  68. }
  69. &::before {
  70. transform: translate(-50%, -50%) rotate(-135deg);
  71. }
  72. }
  73. .icon-forward {
  74. &::after {
  75. left: 45%;
  76. }
  77. &::before {
  78. transform: translate(-50%, -50%) rotate(135deg);
  79. }
  80. }
  81. .icon-upward {
  82. &::after {
  83. top: 55%;
  84. }
  85. &::before {
  86. transform: translate(-50%, -50%) rotate(45deg);
  87. }
  88. }
  89. // Icon caret
  90. .icon-caret {
  91. &::before {
  92. border-top: .3em solid currentColor;
  93. border-right: .3em solid transparent;
  94. border-left: .3em solid transparent;
  95. content: "";
  96. height: 0;
  97. transform: translate(-50%, -25%);
  98. width: 0;
  99. }
  100. }
  101. // Icon menu
  102. .icon-menu {
  103. &::before {
  104. background: currentColor;
  105. box-shadow: 0 -.35em, 0 .35em;
  106. content: "";
  107. height: $icon-border-width;
  108. width: 100%;
  109. }
  110. }
  111. // Icon apps
  112. .icon-apps {
  113. &::before {
  114. background: currentColor;
  115. box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
  116. content: "";
  117. height: 3px;
  118. width: 3px;
  119. }
  120. }