Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 
 
 

317 líneas
5.8 KiB

  1. // Icon resize
  2. .icon-resize-horiz,
  3. .icon-resize-vert {
  4. &::before,
  5. &::after {
  6. border: $icon-border-width solid currentColor;
  7. border-bottom: 0;
  8. border-right: 0;
  9. content: "";
  10. height: .45em;
  11. width: .45em;
  12. }
  13. &::before {
  14. transform: translate(-50%, -90%) rotate(45deg);
  15. }
  16. &::after {
  17. transform: translate(-50%, -10%) rotate(225deg);
  18. }
  19. }
  20. .icon-resize-horiz {
  21. &::before {
  22. transform: translate(-90%, -50%) rotate(-45deg);
  23. }
  24. &::after {
  25. transform: translate(-10%, -50%) rotate(135deg);
  26. }
  27. }
  28. // Icon more
  29. .icon-more-horiz,
  30. .icon-more-vert {
  31. &::before {
  32. background: currentColor;
  33. box-shadow: -.4em 0, .4em 0;
  34. border-radius: 50%;
  35. content: "";
  36. height: 3px;
  37. width: 3px;
  38. }
  39. }
  40. .icon-more-vert {
  41. &::before {
  42. box-shadow: 0 -.4em, 0 .4em;
  43. }
  44. }
  45. // Icon plus, minus, cross
  46. .icon-plus,
  47. .icon-minus,
  48. .icon-cross {
  49. &::before {
  50. background: currentColor;
  51. content: "";
  52. height: $icon-border-width;
  53. width: 100%;
  54. }
  55. }
  56. .icon-plus,
  57. .icon-cross {
  58. &::after {
  59. background: currentColor;
  60. content: "";
  61. height: 100%;
  62. width: $icon-border-width;
  63. }
  64. }
  65. .icon-cross {
  66. &::before {
  67. width: 100%;
  68. }
  69. &::after {
  70. height: 100%;
  71. }
  72. &::before,
  73. &::after {
  74. transform: translate(-50%, -50%) rotate(45deg);
  75. }
  76. }
  77. // Icon check
  78. .icon-check {
  79. &::before {
  80. border: $icon-border-width solid currentColor;
  81. border-right: 0;
  82. border-top: 0;
  83. content: "";
  84. height: .5em;
  85. width: .9em;
  86. transform: translate(-50%, -75%) rotate(-45deg);
  87. }
  88. }
  89. // Icon stop
  90. .icon-stop {
  91. border: $icon-border-width solid currentColor;
  92. border-radius: 50%;
  93. &::before {
  94. background: currentColor;
  95. content: "";
  96. height: $icon-border-width;
  97. transform: translate(-50%, -50%) rotate(45deg);
  98. width: 1em;
  99. }
  100. }
  101. // Icon shutdown
  102. .icon-shutdown {
  103. border: $icon-border-width solid currentColor;
  104. border-radius: 50%;
  105. border-top-color: transparent;
  106. &::before {
  107. background: currentColor;
  108. content: "";
  109. height: .5em;
  110. top: .1em;
  111. width: $icon-border-width;
  112. }
  113. }
  114. // Icon refresh
  115. .icon-refresh {
  116. &::before {
  117. border: $icon-border-width solid currentColor;
  118. border-radius: 50%;
  119. border-right-color: transparent;
  120. content: "";
  121. height: 1em;
  122. width: 1em;
  123. }
  124. &::after {
  125. border: .2em solid currentColor;
  126. border-top-color: transparent;
  127. border-left-color: transparent;
  128. content: "";
  129. height: 0;
  130. left: 80%;
  131. top: 20%;
  132. width: 0;
  133. }
  134. }
  135. // Icon search
  136. .icon-search {
  137. &::before {
  138. border: $icon-border-width solid currentColor;
  139. border-radius: 50%;
  140. content: "";
  141. height: .75em;
  142. left: 5%;
  143. top: 5%;
  144. transform: translate(0, 0) rotate(45deg);
  145. width: .75em;
  146. }
  147. &::after {
  148. background: currentColor;
  149. content: "";
  150. height: $icon-border-width;
  151. left: 80%;
  152. top: 80%;
  153. transform: translate(-50%, -50%) rotate(45deg);
  154. width: .4em;
  155. }
  156. }
  157. // Icon edit
  158. .icon-edit {
  159. &::before {
  160. border: $icon-border-width solid currentColor;
  161. content: "";
  162. height: .4em;
  163. transform: translate(-40%, -60%) rotate(-45deg);
  164. width: .85em;
  165. }
  166. &::after {
  167. border: .15em solid currentColor;
  168. border-top-color: transparent;
  169. border-right-color: transparent;
  170. content: "";
  171. height: 0;
  172. left: 5%;
  173. top: 95%;
  174. transform: translate(0, -100%);
  175. width: 0;
  176. }
  177. }
  178. // Icon delete
  179. .icon-delete {
  180. &::before {
  181. border: $icon-border-width solid currentColor;
  182. border-bottom-left-radius: $border-radius;
  183. border-bottom-right-radius: $border-radius;
  184. border-top: 0;
  185. content: "";
  186. height: .75em;
  187. top: 60%;
  188. width: .75em;
  189. }
  190. &::after {
  191. background: currentColor;
  192. box-shadow: -.25em .2em, .25em .2em;
  193. content: "";
  194. height: $icon-border-width;
  195. top: $icon-border-width/2;
  196. width: .5em;
  197. }
  198. }
  199. // Icon share
  200. .icon-share {
  201. border: $icon-border-width solid currentColor;
  202. border-radius: $border-radius;
  203. border-right: 0;
  204. border-top: 0;
  205. &::before {
  206. border: $icon-border-width solid currentColor;
  207. border-left: 0;
  208. border-top: 0;
  209. content: "";
  210. height: .4em;
  211. left: 100%;
  212. top: .25em;
  213. transform: translate(-125%, -50%) rotate(-45deg);
  214. width: .4em;
  215. }
  216. &::after {
  217. border: $icon-border-width solid currentColor;
  218. border-bottom: 0;
  219. border-right: 0;
  220. border-radius: 75% 0;
  221. content: "";
  222. height: .5em;
  223. width: .6em;
  224. }
  225. }
  226. // Icon flag
  227. .icon-flag {
  228. &::before {
  229. background: currentColor;
  230. content: "";
  231. height: 1em;
  232. left: 15%;
  233. width: $icon-border-width;
  234. }
  235. &::after {
  236. border: $icon-border-width solid currentColor;
  237. border-bottom-right-radius: $border-radius;
  238. border-left: 0;
  239. border-top-right-radius: $border-radius;
  240. content: "";
  241. height: .65em;
  242. top: 35%;
  243. left: 60%;
  244. width: .8em;
  245. }
  246. }
  247. // Icon bookmark
  248. .icon-bookmark {
  249. &::before {
  250. border: $icon-border-width solid currentColor;
  251. border-bottom: 0;
  252. border-top-left-radius: $border-radius;
  253. border-top-right-radius: $border-radius;
  254. content: "";
  255. height: .9em;
  256. width: .8em;
  257. }
  258. &::after {
  259. border: $icon-border-width solid currentColor;
  260. border-bottom: 0;
  261. border-left: 0;
  262. border-radius: $border-radius;
  263. content: "";
  264. height: .5em;
  265. transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
  266. width: .5em;
  267. }
  268. }
  269. // Icon download & upload
  270. .icon-download,
  271. .icon-upload {
  272. border-bottom: $icon-border-width solid currentColor;
  273. &::before {
  274. border: $icon-border-width solid currentColor;
  275. border-bottom: 0;
  276. border-right: 0;
  277. content: "";
  278. height: .5em;
  279. width: .5em;
  280. transform: translate(-50%, -60%) rotate(-135deg);
  281. }
  282. &::after {
  283. background: currentColor;
  284. content: "";
  285. height: .6em;
  286. top: 40%;
  287. width: $icon-border-width;
  288. }
  289. }
  290. .icon-upload {
  291. &::before {
  292. transform: translate(-50%, -60%) rotate(45deg);
  293. }
  294. &::after {
  295. top: 50%;
  296. }
  297. }