Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 
 

177 lines
3.6 KiB

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