123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444 |
- // @flow
-
- import { Platform, PixelRatio } from "react-native";
-
- import pickerTheme from "./Picker";
- import variable from "./../variables/platform";
-
- export default (variables /*: * */ = variable) => {
- const platform = variables.platform;
- const selectedStyle = {
- "NativeBase.Text": {
- color: variables.listItemSelected
- },
- "NativeBase.Icon": {
- color: variables.listItemSelected
- }
- };
-
- const listItemTheme = {
- "NativeBase.InputGroup": {
- "NativeBase.Icon": {
- paddingRight: 5
- },
- "NativeBase.IconNB": {
- paddingRight: 5
- },
- "NativeBase.Input": {
- paddingHorizontal: 5
- },
- flex: 1,
- borderWidth: null,
- margin: -10,
- borderBottomColor: "transparent"
- },
- ".searchBar": {
- "NativeBase.Item": {
- "NativeBase.Icon": {
- backgroundColor: "transparent",
- color: variables.dropdownLinkColor,
- fontSize:
- platform === "ios"
- ? variables.iconFontSize - 10
- : variables.iconFontSize - 5,
- alignItems: "center",
- marginTop: 2,
- paddingRight: 8
- },
- "NativeBase.IconNB": {
- backgroundColor: "transparent",
- color: null,
- alignSelf: "center"
- },
- "NativeBase.Input": {
- alignSelf: "center"
- },
- alignSelf: "center",
- alignItems: "center",
- justifyContent: "flex-start",
- flex: 1,
- height: platform === "ios" ? 30 : 40,
- borderColor: "transparent",
- backgroundColor: "#fff",
- borderRadius: 5
- },
- "NativeBase.Button": {
- ".transparent": {
- "NativeBase.Text": {
- fontWeight: "500"
- },
- paddingHorizontal: null,
- paddingLeft: platform === "ios" ? 10 : null
- },
- paddingHorizontal: platform === "ios" ? undefined : null,
- width: platform === "ios" ? undefined : 0,
- height: platform === "ios" ? undefined : 0
- },
- backgroundColor: variables.toolbarInputColor,
- padding: 10,
- marginLeft: null
- },
- "NativeBase.CheckBox": {
- marginLeft: -10,
- marginRight: 10
- },
- ".first": {
- ".itemHeader": {
- paddingTop: variables.listItemPadding + 3
- }
- },
- ".itemHeader": {
- ".first": {
- paddingTop: variables.listItemPadding + 3
- },
- borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
- marginLeft: null,
- padding: variables.listItemPadding,
- paddingLeft: variables.listItemPadding + 5,
- paddingTop:
- platform === "ios" ? variables.listItemPadding + 25 : undefined,
- paddingBottom:
- platform === "android" ? variables.listItemPadding + 20 : undefined,
- flexDirection: "row",
- borderColor: variables.listBorderColor,
- "NativeBase.Text": {
- fontSize: 14,
- color: platform === "ios" ? undefined : variables.listNoteColor
- }
- },
- ".itemDivider": {
- borderBottomWidth: null,
- marginLeft: null,
- padding: variables.listItemPadding,
- paddingLeft: variables.listItemPadding + 5,
- backgroundColor: variables.listDividerBg,
- flexDirection: "row",
- borderColor: variables.listBorderColor
- },
- ".selected": {
- "NativeBase.Left": {
- ...selectedStyle
- },
- "NativeBase.Body": {
- ...selectedStyle
- },
- "NativeBase.Right": {
- ...selectedStyle
- },
- ...selectedStyle
- },
- "NativeBase.Left": {
- "NativeBase.Body": {
- "NativeBase.Text": {
- ".note": {
- color: variables.listNoteColor,
- fontWeight: "200"
- },
- fontWeight: "600"
- },
- marginLeft: 10,
- alignItems: null,
- alignSelf: null
- },
- "NativeBase.Icon": {
- width: variables.iconFontSize - 10,
- fontSize: variables.iconFontSize - 10
- },
- "NativeBase.IconNB": {
- width: variables.iconFontSize - 10,
- fontSize: variables.iconFontSize - 10
- },
- "NativeBase.Text": {
- alignSelf: "center"
- },
- flexDirection: "row"
- },
- "NativeBase.Body": {
- "NativeBase.Text": {
- marginHorizontal: variables.listItemPadding,
- ".note": {
- color: variables.listNoteColor,
- fontWeight: "200"
- }
- },
- alignSelf: null,
- alignItems: null
- },
- "NativeBase.Right": {
- "NativeBase.Badge": {
- alignSelf: null
- },
- "NativeBase.PickerNB": {
- "NativeBase.Button": {
- marginRight: -15,
- "NativeBase.Text": {
- color: variables.topTabBarActiveTextColor
- }
- }
- },
- "NativeBase.Button": {
- alignSelf: null,
- ".transparent": {
- "NativeBase.Text": {
- color: variables.topTabBarActiveTextColor
- }
- }
- },
- "NativeBase.Icon": {
- alignSelf: null,
- fontSize: variables.iconFontSize - 8,
- color: "#c9c8cd"
- },
- "NativeBase.IconNB": {
- alignSelf: null,
- fontSize: variables.iconFontSize - 8,
- color: "#c9c8cd"
- },
- "NativeBase.Text": {
- ".note": {
- color: variables.listNoteColor,
- fontWeight: "200"
- },
- alignSelf: null
- },
- "NativeBase.Thumbnail": {
- alignSelf: null
- },
- "NativeBase.Image": {
- alignSelf: null
- },
- "NativeBase.Radio": {
- alignSelf: null
- },
- "NativeBase.Checkbox": {
- alignSelf: null
- },
- "NativeBase.Switch": {
- alignSelf: null
- },
- padding: null,
- flex: 0.28
- },
- "NativeBase.Text": {
- ".note": {
- color: variables.listNoteColor,
- fontWeight: "200"
- },
- alignSelf: "center"
- },
- ".last": {
- marginLeft: -(variables.listItemPadding + 5),
- paddingLeft: (variables.listItemPadding + 5) * 2,
- top: 1
- },
- ".avatar": {
- "NativeBase.Left": {
- flex: 0,
- alignSelf: "flex-start",
- paddingTop: 14
- },
- "NativeBase.Body": {
- "NativeBase.Text": {
- marginLeft: null
- },
- flex: 1,
- paddingVertical: variables.listItemPadding,
- borderBottomWidth: variables.borderWidth,
- borderColor: variables.listBorderColor,
- marginLeft: variables.listItemPadding + 5
- },
- "NativeBase.Right": {
- "NativeBase.Text": {
- ".note": {
- fontSize: variables.noteFontSize - 2
- }
- },
- flex: 0,
- paddingRight: variables.listItemPadding + 5,
- alignSelf: "stretch",
- paddingVertical: variables.listItemPadding,
- borderBottomWidth: variables.borderWidth,
- borderColor: variables.listBorderColor
- },
- ".noBorder": {
- "NativeBase.Body": {
- borderBottomWidth: null
- },
- "NativeBase.Right": {
- borderBottomWidth: null
- }
- },
- borderBottomWidth: null,
- paddingVertical: null,
- paddingRight: null
- },
- ".thumbnail": {
- "NativeBase.Left": {
- flex: 0
- },
- "NativeBase.Body": {
- "NativeBase.Text": {
- marginLeft: null
- },
- flex: 1,
- paddingVertical: variables.listItemPadding + 8,
- borderBottomWidth: variables.borderWidth,
- borderColor: variables.listBorderColor,
- marginLeft: variables.listItemPadding + 5
- },
- "NativeBase.Right": {
- "NativeBase.Button": {
- ".transparent": {
- "NativeBase.Text": {
- fontSize: variables.listNoteSize,
- color: variables.sTabBarActiveTextColor
- }
- },
- height: null
- },
- flex: 0,
- justifyContent: "center",
- alignSelf: "stretch",
- paddingRight: variables.listItemPadding + 5,
- paddingVertical: variables.listItemPadding + 5,
- borderBottomWidth: variables.borderWidth,
- borderColor: variables.listBorderColor
- },
- ".noBorder": {
- "NativeBase.Body": {
- borderBottomWidth: null
- },
- "NativeBase.Right": {
- borderBottomWidth: null
- }
- },
- borderBottomWidth: null,
- paddingVertical: null,
- paddingRight: null
- },
- ".icon": {
- ".last": {
- "NativeBase.Body": {
- borderBottomWidth: null
- },
- "NativeBase.Right": {
- borderBottomWidth: null
- },
- borderBottomWidth: variables.borderWidth,
- borderColor: variables.listBorderColor
- },
- "NativeBase.Left": {
- "NativeBase.Button": {
- "NativeBase.IconNB": {
- marginHorizontal: null,
- fontSize: variables.iconFontSize - 5
- },
- "NativeBase.Icon": {
- marginHorizontal: null,
- fontSize: variables.iconFontSize - 8
- },
- alignSelf: "center",
- height: 29,
- width: 29,
- borderRadius: 6,
- paddingVertical: null,
- paddingHorizontal: null,
- alignItems: "center",
- justifyContent: "center"
- },
- "NativeBase.Icon": {
- width: variables.iconFontSize - 5,
- fontSize: variables.iconFontSize - 2
- },
- "NativeBase.IconNB": {
- width: variables.iconFontSize - 5,
- fontSize: variables.iconFontSize - 2
- },
- paddingRight: variables.listItemPadding + 5,
- flex: 0,
- height: 44,
- justifyContent: "center",
- alignItems: "center"
- },
- "NativeBase.Body": {
- "NativeBase.Text": {
- marginLeft: null,
- fontSize: 17
- },
- flex: 1,
- height: 44,
- justifyContent: "center",
- borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
- borderColor: variables.listBorderColor
- },
- "NativeBase.Right": {
- "NativeBase.Text": {
- textAlign: "center",
- color: "#8F8E95",
- fontSize: 17
- },
- "NativeBase.IconNB": {
- color: "#C8C7CC",
- fontSize: variables.iconFontSize - 10,
- alignSelf: "center",
- paddingLeft: 10,
- paddingTop: 3
- },
- "NativeBase.Icon": {
- color: "#C8C7CC",
- fontSize: variables.iconFontSize - 10,
- alignSelf: "center",
- paddingLeft: 10,
- paddingTop: 3
- },
- "NativeBase.Switch": {
- marginRight: Platform.OS === "ios" ? undefined : -5,
- alignSelf: null
- },
- "NativeBase.PickerNB": {
- ...pickerTheme()
- },
- flexDirection: "row",
- alignItems: "center",
- flex: 0,
- alignSelf: "stretch",
- height: 44,
- justifyContent: "flex-end",
- borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
- borderColor: variables.listBorderColor,
- paddingRight: variables.listItemPadding + 5
- },
- ".noBorder": {
- "NativeBase.Body": {
- borderBottomWidth: null
- },
- "NativeBase.Right": {
- borderBottomWidth: null
- }
- },
- borderBottomWidth: null,
- paddingVertical: null,
- paddingRight: null,
- height: 44,
- justifyContent: "center"
- },
- ".noBorder": {
- borderBottomWidth: null
- },
- ".noIndent": {
- marginLeft: null,
- padding: variables.listItemPadding,
- paddingLeft: variables.listItemPadding + 6
- },
- alignItems: "center",
- flexDirection: "row",
- paddingRight: variables.listItemPadding + 6,
- paddingVertical: variables.listItemPadding + 3,
- marginLeft: variables.listItemPadding + 6,
- borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
- backgroundColor: variables.listBg,
- borderColor: variables.listBorderColor
- };
-
- return listItemTheme;
- };
|