_icons-object.scss 3.3 KB

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