Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 
 
 

219 rindas
3.0 KiB

  1. :root {
  2. --primary-bg: white;
  3. --secondary-bg: #F7F9FA;
  4. --text: #4C555E;
  5. --text-light: #1D262E;
  6. --text-lighter: #28323B;
  7. --text-lightest: #A1A7AD;
  8. --outline: #DFE3E8;
  9. }
  10. body {
  11. margin: 0;
  12. }
  13. h2 {
  14. color: var(--text);
  15. }
  16. label {
  17. font-size: 16px;
  18. }
  19. section.form label {
  20. display: flex;
  21. align-items: center;
  22. }
  23. .page section.form h3 {
  24. margin: 10px 0 10px 30px;
  25. }
  26. main .panel {
  27. height: 100%;
  28. width: 100%;
  29. position: absolute;
  30. display: flex;
  31. }
  32. menu.sidebar {
  33. height: calc(100% - 50px);
  34. position: relative;
  35. margin: 0;
  36. padding: 25px 0px;
  37. background: var(--secondary-bg);
  38. list-style: none;
  39. font-size: 18px;
  40. display: flex;
  41. flex-direction: column;
  42. gap: 20px;
  43. }
  44. menu.sidebar a {
  45. color: var(--text);
  46. display: flex;
  47. align-items: center;
  48. gap: 10px;
  49. text-decoration: none;
  50. padding: 10px 10px;
  51. }
  52. menu.sidebar a.active {
  53. background: var(--primary-bg);
  54. }
  55. /* The user avatar */
  56. menu.sidebar img {
  57. width: 50px;
  58. height: 50px;
  59. margin: 0 auto;
  60. border-radius: 50%;
  61. }
  62. menu.sidebar a:hover {
  63. color: var(--text-light);
  64. cursor: pointer;
  65. }
  66. menu.sidebar svg {
  67. height: 24px;
  68. width: 24px;
  69. }
  70. .spinner {
  71. animation: rotate 2s linear infinite;
  72. z-index: 2;
  73. top: 50%;
  74. left: 50%;
  75. margin: -25px 0 0 -25px;
  76. width: 50px;
  77. height: 50px;
  78. }
  79. .spinner .path {
  80. stroke: var(--text);
  81. stroke-linecap: round;
  82. animation: dash 1.5s ease-in-out infinite;
  83. }
  84. @keyframes rotate {
  85. 100% {
  86. transform: rotate(360deg);
  87. }
  88. }
  89. @keyframes dash {
  90. 0% {
  91. stroke-dasharray: 1, 150;
  92. stroke-dashoffset: 0;
  93. }
  94. 50% {
  95. stroke-dasharray: 90, 150;
  96. stroke-dashoffset: -35;
  97. }
  98. 100% {
  99. stroke-dasharray: 90, 150;
  100. stroke-dashoffset: -124;
  101. }
  102. }
  103. .page.loading {
  104. width: 100%;
  105. display: flex;
  106. justify-content: center;
  107. align-items: center;
  108. }
  109. .page {
  110. padding: 0 2%;
  111. width: 100%;
  112. overflow-y: scroll;
  113. scrollbar-width: none;
  114. }
  115. .page section {
  116. margin-top: 50px;
  117. margin: auto;
  118. margin-bottom: 40px;
  119. max-width: 700px;
  120. }
  121. #home.page section:first-of-type {
  122. margin-top: 100px;
  123. }
  124. #home .announce {
  125. min-height: 150px;
  126. border: 1px solid var(--outline);
  127. /* border-radius: 4px; */
  128. }
  129. .page section {
  130. color: var(--text);
  131. }
  132. .page section h3 {
  133. margin-left: 10px;
  134. color: var(--text-lighter);
  135. }
  136. section.loans-list {
  137. display: flex;
  138. flex-direction: column;
  139. width: fit-content;
  140. margin: 0 0 50px 0;
  141. justify-content: center;
  142. border-left: 1px solid var(--text-lightest);
  143. padding: 10px;
  144. margin-bottom: 50px;
  145. }
  146. .loans-list h3:not(.sel) {
  147. color: var(--text-lightest);
  148. }
  149. .loans-list h3 {
  150. cursor: pointer;
  151. width: fit-content;
  152. }
  153. .loans-list .add svg {
  154. width: 35px;
  155. height: 35px;
  156. margin: auto;
  157. display: block;
  158. }
  159. .loans-list .add svg:hover {
  160. color: black;
  161. }
  162. section.form input, section.form select {
  163. border: 2px solid var(--outline);
  164. border-radius: 3px;
  165. }
  166. section.radios {
  167. display: grid;
  168. grid-template-columns: 50px 1fr;
  169. justify-content: center;
  170. row-gap: 20px;
  171. max-width: 250px;
  172. }
  173. section.inputs {
  174. display: flex;
  175. flex-flow: column;
  176. max-width: 250px;
  177. row-gap: 15px;
  178. }
  179. section.radios h3 {
  180. grid-column: 1 / 3;
  181. }
  182. .form.radios input {
  183. height: 20px;
  184. }