Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

_icons-object.scss 3.6 KiB

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. }