You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

form-fields.css 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /* Filament Repeater Styles */
  2. .fi-fo-repeater.uncontained .fi-fo-repeater-item {
  3. @apply divide-y-0 rounded-none bg-none shadow-none ring-0 ring-gray-950/5 dark:divide-white/10 dark:bg-white/5 dark:ring-white/10;
  4. .fi-fo-repeater-item-header {
  5. @apply px-0;
  6. > h4 {
  7. @apply text-base font-semibold leading-6 text-gray-950 dark:text-white;
  8. }
  9. }
  10. .fi-fo-repeater-item-content {
  11. @apply py-4 px-0;
  12. }
  13. }
  14. .fi-fo-repeater-item {
  15. @apply divide-y divide-gray-200 rounded-xl bg-white dark:bg-gray-900;
  16. }
  17. /* Report Field Styles */
  18. .fi-fo-field-wrp.report-hidden-label > div.grid.gap-y-2 > div.flex.items-center {
  19. @apply hidden;
  20. }
  21. .fi-fo-field-wrp.report-hidden-label {
  22. @apply lg:mt-8;
  23. }
  24. /* Choices.js select field overrides */
  25. .choices__list.choices__list--single {
  26. @apply w-full;
  27. }
  28. .choices:focus-visible {
  29. outline: none;
  30. }
  31. .choices__group {
  32. @apply text-gray-900 dark:text-white font-semibold;
  33. }
  34. .choices[data-type="select-one"] .choices__inner {
  35. line-height: 1.5;
  36. display: flex;
  37. align-items: center;
  38. min-height: 2.25rem;
  39. box-sizing: border-box;
  40. }
  41. .choices:not(.is-disabled) .choices__item {
  42. cursor: pointer;
  43. }
  44. /* Base horizontal scrolling */
  45. .table-repeater-container {
  46. overflow-x: auto;
  47. max-width: 100%;
  48. -webkit-overflow-scrolling: touch;
  49. }
  50. .table-repeater-container:has(.choices.is-open) {
  51. overflow: visible;
  52. }
  53. .table-repeater-container table {
  54. min-width: 100%;
  55. width: max-content;
  56. }
  57. .fi-ta-table:has(.budget-items-relation-manager) {
  58. .fi-ta-row {
  59. @apply divide-x divide-gray-200 dark:divide-gray-700;
  60. }
  61. .fi-ta-summary-row-heading {
  62. @apply px-3 py-3 !important;
  63. }
  64. .fi-ta-text-summary {
  65. @apply px-3 py-3 !important;
  66. > span {
  67. @apply font-medium text-gray-950 dark:text-white;
  68. }
  69. }
  70. .fi-ta-text {
  71. @apply px-3 py-0 !important;
  72. }
  73. .fi-ta-text-input {
  74. @apply px-0 py-0 !important;
  75. }
  76. .fi-ta-icon {
  77. @apply px-3 py-0 !important;
  78. }
  79. .fi-ta-text-input {
  80. .fi-input-wrp,
  81. .fi-input {
  82. @apply ring-0 bg-transparent shadow-none rounded-none !important;
  83. }
  84. }
  85. .fi-ta-cell:focus-within {
  86. outline: 2px solid #2563eb;
  87. outline-offset: -2px;
  88. z-index: 1;
  89. }
  90. .fi-ta-col-wrp button:focus {
  91. outline: none !important;
  92. box-shadow: none !important;
  93. }
  94. }
  95. /* Excel/Spreadsheet styling */
  96. .is-spreadsheet {
  97. .table-repeater-container {
  98. border: 1px solid #e5e7eb !important;
  99. border-radius: 0 !important;
  100. @apply ring-0 !important;
  101. }
  102. .table-repeater-header {
  103. background-color: #f8f9fa !important;
  104. }
  105. .table-repeater-header-column {
  106. border: 1px solid #e5e7eb !important;
  107. background-color: #f8f9fa !important;
  108. font-weight: 600 !important;
  109. padding: 8px 12px !important;
  110. }
  111. .table-repeater-column {
  112. border: 1px solid #e5e7eb !important;
  113. padding: 8px 12px !important;
  114. }
  115. .table-repeater-column input {
  116. text-align: right !important;
  117. }
  118. .fi-input-wrapper,
  119. .fi-input {
  120. padding: 0 !important;
  121. }
  122. .fi-input-wrp,
  123. .fi-fo-file-upload .filepond--root {
  124. @apply ring-0 bg-transparent shadow-none rounded-none !important;
  125. }
  126. .fi-input-wrp input {
  127. @apply bg-transparent !important;
  128. }
  129. .table-repeater-column:focus-within {
  130. outline: 2px solid #2563eb !important;
  131. outline-offset: -2px !important;
  132. z-index: 1 !important;
  133. }
  134. input:focus,
  135. select:focus,
  136. textarea:focus {
  137. @apply ring-0 shadow-none !important;
  138. outline: none !important;
  139. }
  140. .table-repeater-row:nth-child(even) {
  141. background-color: #f9fafb;
  142. }
  143. .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
  144. .fi-fo-field-wrp:has(.fi-checkbox-input),
  145. .fi-fo-field-wrp:has(.fi-fo-radio) {
  146. @apply py-2 px-3 !important;
  147. }
  148. .fi-fo-field-wrp:has(.fi-fo-toggle) {
  149. @apply inline-block mt-1 !important;
  150. }
  151. }
  152. /* Responsive behavior */
  153. @media (max-width: theme('screens.sm')) {
  154. .table-repeater-component.break-point-sm .table-repeater-container {
  155. overflow-x: visible;
  156. }
  157. }
  158. @media (max-width: theme('screens.md')) {
  159. .table-repeater-component.break-point-md .table-repeater-container {
  160. overflow-x: visible;
  161. }
  162. }
  163. @media (max-width: theme('screens.lg')) {
  164. .table-repeater-component.break-point-lg .table-repeater-container {
  165. overflow-x: visible;
  166. }
  167. }
  168. @media (max-width: theme('screens.xl')) {
  169. .table-repeater-component.break-point-xl .table-repeater-container {
  170. overflow-x: visible;
  171. }
  172. }
  173. @media (max-width: theme('screens.2xl')) {
  174. .table-repeater-component.break-point-2xl .table-repeater-container {
  175. overflow-x: visible;
  176. }
  177. }
  178. .is-spreadsheet .table-repeater-column .fi-input-wrp-suffix {
  179. padding-right: 0 !important;
  180. }