_icons-object.scss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. // Icon time
  2. .icon-time {
  3. border: $icon-border-width solid currentColor;
  4. border-radius: 50%;
  5. &::before {
  6. background: currentColor;
  7. content: "";
  8. height: .4em;
  9. transform: translate(-50%, -75%);
  10. width: $icon-border-width;
  11. }
  12. &::after {
  13. background: currentColor;
  14. content: "";
  15. height: .3em;
  16. transform: translate(-50%, -75%) rotate(90deg);
  17. transform-origin: 50% 90%;
  18. width: $icon-border-width;
  19. }
  20. }
  21. // Icon mail
  22. .icon-mail {
  23. &::before {
  24. border: $icon-border-width solid currentColor;
  25. border-radius: $border-radius;
  26. content: "";
  27. height: .8em;
  28. width: 1em;
  29. }
  30. &::after {
  31. border: $icon-border-width solid currentColor;
  32. border-right: 0;
  33. border-top: 0;
  34. content: "";
  35. height: .5em;
  36. transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
  37. width: .5em;
  38. }
  39. }
  40. // Icon people
  41. .icon-people {
  42. &::before {
  43. border: $icon-border-width solid currentColor;
  44. border-radius: 50%;
  45. content: "";
  46. height: .45em;
  47. top: 25%;
  48. width: .45em;
  49. }
  50. &::after {
  51. border: $icon-border-width solid currentColor;
  52. border-radius: 50% 50% 0 0;
  53. content: "";
  54. height: .4em;
  55. top: 75%;
  56. width: .9em;
  57. }
  58. }
  59. // Icon message
  60. .icon-message {
  61. border: $icon-border-width solid currentColor;
  62. border-bottom: 0;
  63. border-radius: $border-radius;
  64. border-right: 0;
  65. &::before {
  66. border: $icon-border-width solid currentColor;
  67. border-bottom-right-radius: $border-radius;
  68. border-left: 0;
  69. border-top: 0;
  70. content: "";
  71. height: .8em;
  72. left: 65%;
  73. top: 40%;
  74. width: .7em;
  75. }
  76. &::after {
  77. background: currentColor;
  78. border-radius: $border-radius;
  79. content: "";
  80. height: .3em;
  81. left: 10%;
  82. top: 100%;
  83. transform: translate(0, -90%) rotate(45deg);
  84. width: $icon-border-width;
  85. }
  86. }
  87. // Icon photo
  88. .icon-photo {
  89. border: $icon-border-width solid currentColor;
  90. border-radius: $border-radius;
  91. &::before {
  92. border: $icon-border-width solid currentColor;
  93. border-radius: 50%;
  94. content: "";
  95. height: .25em;
  96. left: 35%;
  97. top: 35%;
  98. width: .25em;
  99. }
  100. &::after {
  101. border: $icon-border-width solid currentColor;
  102. border-bottom: 0;
  103. border-left: 0;
  104. content: "";
  105. height: .5em;
  106. left: 60%;
  107. transform: translate(-50%, 25%) rotate(-45deg);
  108. width: .5em;
  109. }
  110. }
  111. // Icon link
  112. .icon-link {
  113. &::before,
  114. &::after {
  115. border: $icon-border-width solid currentColor;
  116. border-radius: 5em 0 0 5em;
  117. border-right: 0;
  118. content: "";
  119. height: .5em;
  120. width: .75em;
  121. }
  122. &::before {
  123. transform: translate(-70%, -45%) rotate(-45deg);
  124. }
  125. &::after {
  126. transform: translate(-30%, -55%) rotate(135deg);
  127. }
  128. }
  129. // Icon location
  130. .icon-location {
  131. &::before {
  132. border: $icon-border-width solid currentColor;
  133. border-radius: 50% 50% 50% 0;
  134. content: "";
  135. height: .8em;
  136. transform: translate(-50%, -60%) rotate(-45deg);
  137. width: .8em;
  138. }
  139. &::after {
  140. border: $icon-border-width solid currentColor;
  141. border-radius: 50%;
  142. content: "";
  143. height: .2em;
  144. transform: translate(-50%, -80%);
  145. width: .2em;
  146. }
  147. }
  148. // Icon emoji
  149. .icon-emoji {
  150. border: $icon-border-width solid currentColor;
  151. border-radius: 50%;
  152. &::before {
  153. border-radius: 50%;
  154. box-shadow: -.17em -.15em, .17em -.15em;
  155. content: "";
  156. height: .1em;
  157. width: .1em;
  158. }
  159. &::after {
  160. border: $icon-border-width solid currentColor;
  161. border-bottom-color: transparent;
  162. border-radius: 50%;
  163. border-right-color: transparent;
  164. content: "";
  165. height: .5em;
  166. transform: translate(-50%, -40%) rotate(-135deg);
  167. width: .5em;
  168. }
  169. }