Item.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import { Platform } from 'react-native';
  2. import variable from './../variables/platform';
  3. export default (variables = variable) => {
  4. const itemTheme = {
  5. '.floatingLabel': {
  6. 'NativeBase.Input': {
  7. height: 60,
  8. top: 8,
  9. },
  10. 'NativeBase.Label': {
  11. top: 8,
  12. },
  13. 'NativeBase.Icon': {
  14. top: 6,
  15. },
  16. },
  17. '.fixedLabel': {
  18. 'NativeBase.Label': {
  19. position: null,
  20. top: null,
  21. left: null,
  22. right: null,
  23. flex: 1,
  24. height: null,
  25. width: null,
  26. fontSize: variables.inputFontSize,
  27. },
  28. 'NativeBase.Input': {
  29. flex: 2,
  30. fontSize: variables.inputFontSize,
  31. },
  32. },
  33. '.stackedLabel': {
  34. 'NativeBase.Label': {
  35. position: null,
  36. top: null,
  37. left: null,
  38. right: null,
  39. paddingTop: 5,
  40. alignSelf: 'flex-start',
  41. fontSize: variables.inputFontSize - 2,
  42. },
  43. 'NativeBase.Icon': {
  44. marginTop: 36,
  45. },
  46. 'NativeBase.Input': {
  47. alignSelf: Platform.OS === 'ios' ? 'stretch' : 'flex-start',
  48. flex: 1,
  49. width: Platform.OS === 'ios' ? null : variables.deviceWidth - 25,
  50. fontSize: variables.inputFontSize,
  51. },
  52. flexDirection: null,
  53. },
  54. '.inlineLabel': {
  55. 'NativeBase.Label': {
  56. position: null,
  57. top: null,
  58. left: null,
  59. right: null,
  60. paddingRight: 20,
  61. height: null,
  62. width: null,
  63. fontSize: variables.inputFontSize,
  64. },
  65. 'NativeBase.Input': {
  66. paddingLeft: 5,
  67. fontSize: variables.inputFontSize,
  68. },
  69. flexDirection: 'row',
  70. },
  71. 'NativeBase.Label': {
  72. fontSize: variables.inputFontSize,
  73. color: variables.inputColorPlaceholder,
  74. paddingRight: 5,
  75. },
  76. 'NativeBase.Icon': {
  77. fontSize: 24,
  78. paddingRight: 8,
  79. },
  80. 'NativeBase.IconNB': {
  81. fontSize: 24,
  82. paddingRight: 8,
  83. },
  84. 'NativeBase.Input': {
  85. '.multiline': {
  86. height: null,
  87. },
  88. height: variables.inputHeightBase,
  89. color: variables.inputColor,
  90. flex: 1,
  91. top: Platform.OS === 'ios' ? 1.5 : undefined,
  92. fontSize: variables.inputFontSize,
  93. lineHeight: variables.inputLineHeight,
  94. },
  95. '.underline': {
  96. 'NativeBase.Input': {
  97. paddingLeft: 15,
  98. },
  99. '.success': {
  100. borderColor: variables.inputSuccessBorderColor,
  101. },
  102. '.error': {
  103. borderColor: variables.inputErrorBorderColor,
  104. },
  105. borderWidth: variables.borderWidth * 2,
  106. borderTopWidth: 0,
  107. borderRightWidth: 0,
  108. borderLeftWidth: 0,
  109. borderColor: variables.inputBorderColor,
  110. },
  111. '.regular': {
  112. 'NativeBase.Input': {
  113. paddingLeft: 8,
  114. },
  115. 'NativeBase.Icon': {
  116. paddingLeft: 10,
  117. },
  118. '.success': {
  119. borderColor: variables.inputSuccessBorderColor,
  120. },
  121. '.error': {
  122. borderColor: variables.inputErrorBorderColor,
  123. },
  124. borderWidth: variables.borderWidth * 2,
  125. borderColor: variables.inputBorderColor,
  126. },
  127. '.rounded': {
  128. 'NativeBase.Input': {
  129. paddingLeft: 8,
  130. },
  131. 'NativeBase.Icon': {
  132. paddingLeft: 10,
  133. },
  134. '.success': {
  135. borderColor: variables.inputSuccessBorderColor,
  136. },
  137. '.error': {
  138. borderColor: variables.inputErrorBorderColor,
  139. },
  140. borderWidth: variables.borderWidth * 2,
  141. borderRadius: 30,
  142. borderColor: variables.inputBorderColor,
  143. },
  144. '.success': {
  145. 'NativeBase.Icon': {
  146. color: variables.inputSuccessBorderColor,
  147. },
  148. 'NativeBase.IconNB': {
  149. color: variables.inputSuccessBorderColor,
  150. },
  151. '.rounded': {
  152. borderRadius: 30,
  153. borderColor: variables.inputSuccessBorderColor,
  154. },
  155. '.regular': {
  156. borderColor: variables.inputSuccessBorderColor,
  157. },
  158. '.underline': {
  159. borderWidth: variables.borderWidth * 2,
  160. borderTopWidth: 0,
  161. borderRightWidth: 0,
  162. borderLeftWidth: 0,
  163. borderColor: variables.inputSuccessBorderColor,
  164. },
  165. borderColor: variables.inputSuccessBorderColor,
  166. },
  167. '.error': {
  168. 'NativeBase.Icon': {
  169. color: variables.inputErrorBorderColor,
  170. },
  171. 'NativeBase.IconNB': {
  172. color: variables.inputErrorBorderColor,
  173. },
  174. '.rounded': {
  175. borderRadius: 30,
  176. borderColor: variables.inputErrorBorderColor,
  177. },
  178. '.regular': {
  179. borderColor: variables.inputErrorBorderColor,
  180. },
  181. '.underline': {
  182. borderWidth: variables.borderWidth * 2,
  183. borderTopWidth: 0,
  184. borderRightWidth: 0,
  185. borderLeftWidth: 0,
  186. borderColor: variables.inputErrorBorderColor,
  187. },
  188. borderColor: variables.inputErrorBorderColor,
  189. },
  190. '.disabled': {
  191. 'NativeBase.Icon': {
  192. color: '#384850',
  193. },
  194. 'NativeBase.IconNB': {
  195. color: '#384850',
  196. },
  197. },
  198. borderWidth: variables.borderWidth * 2,
  199. borderTopWidth: 0,
  200. borderRightWidth: 0,
  201. borderLeftWidth: 0,
  202. borderColor: variables.inputBorderColor,
  203. backgroundColor: 'transparent',
  204. flexDirection: 'row',
  205. alignItems: 'center',
  206. marginLeft: 2,
  207. };
  208. return itemTheme;
  209. };