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.

form-fields.css 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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:focus-visible {
  26. outline: none;
  27. }
  28. .choices__group {
  29. @apply text-gray-900 dark:text-white font-semibold;
  30. }
  31. .choices:not(.is-disabled) .choices__item {
  32. cursor: pointer;
  33. }
  34. /* Table Repeater Styles */
  35. :not(.is-spreadsheet) {
  36. .table-repeater-row {
  37. @apply hover:bg-gray-50 dark:hover:bg-white/5 transition-colors;
  38. }
  39. .table-repeater-column {
  40. @apply p-3;
  41. }
  42. .table-repeater-header {
  43. @apply bg-gray-50 dark:bg-white/5 border-b border-gray-200 dark:border-white/5;
  44. }
  45. .table-repeater-row {
  46. @apply divide-x-0 !important;
  47. }
  48. .table-repeater-header tr {
  49. @apply divide-x-0 text-sm;
  50. }
  51. .table-repeater-header-column {
  52. @apply p-3 text-sm font-semibold text-gray-950 dark:text-white bg-gray-50 dark:bg-white/5;
  53. }
  54. /* Chrome, Safari, Edge, Opera */
  55. input::-webkit-outer-spin-button,
  56. input::-webkit-inner-spin-button {
  57. -webkit-appearance: none;
  58. margin: 0;
  59. }
  60. /* Firefox */
  61. input[type=number] {
  62. -moz-appearance: textfield;
  63. }
  64. }
  65. /* Excel/Spreadsheet styling */
  66. .is-spreadsheet {
  67. .table-repeater-container {
  68. overflow-x: auto;
  69. max-width: 100%;
  70. -webkit-overflow-scrolling: touch;
  71. }
  72. .table-repeater-container:has(.choices.is-open) {
  73. overflow: visible;
  74. }
  75. .table-repeater-container table {
  76. min-width: 100%;
  77. width: max-content;
  78. }
  79. .table-repeater-container {
  80. border: 1px solid #e5e7eb !important;
  81. border-radius: 0 !important;
  82. @apply ring-0 !important;
  83. }
  84. .table-repeater-header {
  85. background-color: #f8f9fa !important;
  86. }
  87. .table-repeater-header-column {
  88. border: 1px solid #e5e7eb !important;
  89. background-color: #f8f9fa !important;
  90. font-weight: 600 !important;
  91. padding: 8px 12px !important;
  92. }
  93. .table-repeater-column {
  94. border: 1px solid #e5e7eb !important;
  95. padding: 8px 12px !important;
  96. }
  97. .table-repeater-column input {
  98. text-align: right !important;
  99. }
  100. .fi-input-wrapper,
  101. .fi-input {
  102. padding: 0 !important;
  103. }
  104. .fi-input-wrp,
  105. .fi-fo-file-upload .filepond--root {
  106. @apply ring-0 bg-transparent shadow-none rounded-none !important;
  107. }
  108. .fi-input-wrp input {
  109. @apply bg-transparent !important;
  110. }
  111. .table-repeater-column:focus-within {
  112. outline: 2px solid #2563eb !important;
  113. outline-offset: -2px !important;
  114. z-index: 1 !important;
  115. }
  116. input:focus,
  117. select:focus,
  118. textarea:focus {
  119. @apply ring-0 shadow-none !important;
  120. outline: none !important;
  121. }
  122. .table-repeater-row:nth-child(even) {
  123. background-color: #f9fafb;
  124. }
  125. .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
  126. .fi-fo-field-wrp:has(.fi-checkbox-input),
  127. .fi-fo-field-wrp:has(.fi-fo-radio) {
  128. @apply py-2 px-3 !important;
  129. }
  130. .fi-fo-field-wrp:has(.fi-fo-toggle) {
  131. @apply inline-block mt-1 !important;
  132. }
  133. }
  134. .is-spreadsheet .table-repeater-column .fi-input-wrp-suffix {
  135. padding-right: 0 !important;
  136. }