lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Updated native base theme

Browse source
This commit is contained in:
keplyx 2020-01-28 20:07:21 +01:00
parent 35acbff1cf
commit 5ba63da3d4
49 changed files with 2092 additions and 1939 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
native-base-theme/components/Badge.js
View file

@ -1,36 +1,37 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const badgeTheme = { const badgeTheme = {
".primary": { '.primary': {
backgroundColor: variables.btnPrimaryBg backgroundColor: variables.buttonPrimaryBg
}, },
".warning": { '.warning': {
backgroundColor: variables.btnWarningBg backgroundColor: variables.buttonWarningBg
}, },
".info": { '.info': {
backgroundColor: variables.btnInfoBg backgroundColor: variables.buttonInfoBg
}, },
".success": { '.success': {
backgroundColor: variables.btnSuccessBg backgroundColor: variables.buttonSuccessBg
}, },
".danger": { '.danger': {
backgroundColor: variables.btnDangerBg backgroundColor: variables.buttonDangerBg
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.badgeColor, color: variables.badgeColor,
fontSize: variables.fontSizeBase, fontSize: variables.fontSizeBase,
lineHeight: variables.lineHeight - 1, lineHeight: variables.lineHeight - 1,
textAlign: "center", textAlign: 'center',
paddingHorizontal: 3 paddingHorizontal: 3
}, },
backgroundColor: variables.badgeBg, backgroundColor: variables.badgeBg,
padding: variables.badgePadding, padding: variables.badgePadding,
paddingHorizontal: 6, paddingHorizontal: 6,
alignSelf: "flex-start", alignSelf: 'flex-start',
justifyContent: variables.platform === "ios" ? "center" : undefined, justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
borderRadius: 13.5, borderRadius: 13.5,
height: 27 height: 27
}; };

6
native-base-theme/components/Body.js
View file

@ -1,12 +1,10 @@
// @flow // @flow
import variable from './../variables/platform'; export default () => {
export default (variables /*: * */ = variable) => {
const bodyTheme = { const bodyTheme = {
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
alignSelf: 'center', alignSelf: 'center'
}; };
return bodyTheme; return bodyTheme;

340
native-base-theme/components/Button.js
View file

@ -1,158 +1,159 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platformStyle = variables.platformStyle; const platformStyle = variables.platformStyle;
const platform = variables.platform; const platform = variables.platform;
const darkCommon = { const darkCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.brandDark color: variables.brandDark
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.brandDark color: variables.brandDark
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.brandDark color: variables.brandDark
} }
}; };
const lightCommon = { const lightCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.brandLight color: variables.brandLight
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.brandLight color: variables.brandLight
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.brandLight color: variables.brandLight
} }
}; };
const primaryCommon = { const primaryCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnPrimaryBg color: variables.buttonPrimaryBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnPrimaryBg color: variables.buttonPrimaryBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnPrimaryBg color: variables.buttonPrimaryBg
} }
}; };
const successCommon = { const successCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnSuccessBg color: variables.buttonSuccessBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnSuccessBg color: variables.buttonSuccessBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnSuccessBg color: variables.buttonSuccessBg
} }
}; };
const infoCommon = { const infoCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnInfoBg color: variables.buttonInfoBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnInfoBg color: variables.buttonInfoBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnInfoBg color: variables.buttonInfoBg
} }
}; };
const warningCommon = { const warningCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnWarningBg color: variables.buttonWarningBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnWarningBg color: variables.buttonWarningBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnWarningBg color: variables.buttonWarningBg
} }
}; };
const dangerCommon = { const dangerCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnDangerBg color: variables.buttonDangerBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnDangerBg color: variables.buttonDangerBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnDangerBg color: variables.buttonDangerBg
} }
}; };
const buttonTheme = { const buttonTheme = {
".disabled": { '.disabled': {
".transparent": { '.transparent': {
backgroundColor: null, backgroundColor: 'transparent',
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
} }
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.brandLight color: variables.brandLight
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.brandLight color: variables.brandLight
}, },
backgroundColor: variables.btnDisabledBg backgroundColor: variables.buttonDisabledBg
}, },
".bordered": { '.bordered': {
".dark": { '.dark': {
...darkCommon, ...darkCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.brandDark, borderColor: variables.brandDark,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".light": { '.light': {
...lightCommon, ...lightCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.brandLight, borderColor: variables.brandLight,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".primary": { '.primary': {
...primaryCommon, ...primaryCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.btnPrimaryBg, borderColor: variables.buttonPrimaryBg,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".success": { '.success': {
...successCommon, ...successCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.btnSuccessBg, borderColor: variables.buttonSuccessBg,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".info": { '.info': {
...infoCommon, ...infoCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.btnInfoBg, borderColor: variables.buttonInfoBg,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".warning": { '.warning': {
...warningCommon, ...warningCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.btnWarningBg, borderColor: variables.buttonWarningBg,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".danger": { '.danger': {
...dangerCommon, ...dangerCommon,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.btnDangerBg, borderColor: variables.buttonDangerBg,
borderWidth: variables.borderWidth * 2 borderWidth: variables.borderWidth * 2
}, },
".disabled": { '.disabled': {
backgroundColor: null, backgroundColor: 'transparent',
borderColor: variables.btnDisabledBg, borderColor: variables.buttonDisabledBg,
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
} }
}, },
...primaryCommon, ...primaryCommon,
@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => {
shadowOffset: null, shadowOffset: null,
shadowOpacity: null, shadowOpacity: null,
shadowRadius: null, shadowRadius: null,
backgroundColor: "transparent" backgroundColor: 'transparent'
}, },
".dark": { '.dark': {
".bordered": { '.bordered': {
...darkCommon ...darkCommon
}, },
backgroundColor: variables.brandDark backgroundColor: variables.brandDark
}, },
".light": { '.light': {
".transparent": { '.transparent': {
...lightCommon, ...lightCommon,
backgroundColor: null backgroundColor: 'transparent'
}, },
".bordered": { '.bordered': {
...lightCommon ...lightCommon
}, },
...darkCommon, ...darkCommon,
backgroundColor: variables.brandLight backgroundColor: variables.brandLight
}, },
".primary": { '.primary': {
".bordered": { '.bordered': {
...primaryCommon ...primaryCommon
}, },
backgroundColor: variables.btnPrimaryBg backgroundColor: variables.buttonPrimaryBg
}, },
".success": { '.success': {
".bordered": { '.bordered': {
...successCommon ...successCommon
}, },
backgroundColor: variables.btnSuccessBg backgroundColor: variables.buttonSuccessBg
}, },
".info": { '.info': {
".bordered": { '.bordered': {
...infoCommon ...infoCommon
}, },
backgroundColor: variables.btnInfoBg backgroundColor: variables.buttonInfoBg
}, },
".warning": { '.warning': {
".bordered": { '.bordered': {
...warningCommon ...warningCommon
}, },
backgroundColor: variables.btnWarningBg backgroundColor: variables.buttonWarningBg
}, },
".danger": { '.danger': {
".bordered": { '.bordered': {
...dangerCommon ...dangerCommon
}, },
backgroundColor: variables.btnDangerBg backgroundColor: variables.buttonDangerBg
}, },
".block": { '.block': {
justifyContent: "center", justifyContent: 'center',
alignSelf: "stretch" alignSelf: 'stretch'
}, },
".full": { '.full': {
justifyContent: "center", justifyContent: 'center',
alignSelf: "stretch", alignSelf: 'stretch',
borderRadius: 0 borderRadius: 0
}, },
".rounded": { '.rounded': {
// paddingHorizontal: variables.buttonPadding + 20,
borderRadius: variables.borderRadiusLarge borderRadius: variables.borderRadiusLarge
}, },
".transparent": { '.transparent': {
backgroundColor: "transparent", backgroundColor: 'transparent',
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowRadius: null, shadowRadius: null,
shadowOpacity: null, shadowOpacity: null,
...primaryCommon, ...primaryCommon,
".dark": { '.dark': {
...darkCommon, ...darkCommon,
backgroundColor: null
}, },
".danger": { '.danger': {
...dangerCommon, ...dangerCommon,
backgroundColor: null
}, },
".warning": { '.warning': {
...warningCommon, ...warningCommon,
backgroundColor: null
}, },
".info": { '.info': {
...infoCommon, ...infoCommon,
backgroundColor: null
}, },
".primary": { '.primary': {
...primaryCommon, ...primaryCommon,
backgroundColor: null
}, },
".success": { '.success': {
...successCommon, ...successCommon,
backgroundColor: null
}, },
".light": { '.light': {
...lightCommon, ...lightCommon,
backgroundColor: null
}, },
".disabled": { '.disabled': {
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: variables.btnDisabledBg, borderColor: variables.buttonDisabledBg,
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnDisabledBg color: variables.buttonDisabledBg
} }
} }
}, },
".small": { '.small': {
height: 30, height: 30,
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: 14 fontSize: 14
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
fontSize: 20, fontSize: 20,
paddingTop: 0 paddingTop: 0
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
fontSize: 20, fontSize: 20,
paddingTop: 0 paddingTop: 0
} }
}, },
".large": { '.large': {
height: 60, height: 60,
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: 22, fontSize: 22
} }
}, },
".capitalize": {}, '.capitalize': {},
".vertical": { '.vertical': {
flexDirection: "column", flexDirection: 'column',
height: null height: null
}, },
"NativeBase.Text": { 'NativeBase.Text': {
fontFamily: variables.btnFontFamily, fontFamily: variables.buttonFontFamily,
marginLeft: 0, marginLeft: 0,
marginRight: 0, marginRight: 0,
color: variables.btnTextColor, color: variables.buttonTextColor,
fontSize: variables.btnTextSize, fontSize: variables.buttonTextSize,
paddingHorizontal: 16, paddingHorizontal: 16,
backgroundColor: "transparent" backgroundColor: 'transparent'
// childPosition: 1
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.btnTextColor, color: variables.buttonTextColor,
fontSize: 24, fontSize: 24,
marginHorizontal: 16, marginHorizontal: 16,
paddingTop: platform === "ios" ? 2 : undefined paddingTop: platform === PLATFORM.IOS ? 2 : undefined
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.btnTextColor, color: variables.buttonTextColor,
fontSize: 24, fontSize: 24,
marginHorizontal: 16, marginHorizontal: 16,
paddingTop: platform === "ios" ? 2 : undefined paddingTop: platform === PLATFORM.IOS ? 2 : undefined
}, },
".iconLeft": { '.iconLeft': {
"NativeBase.Text": { 'NativeBase.Text': {
marginLeft: 0 marginLeft: 0
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
marginRight: 0, marginRight: 0,
marginLeft: 16 marginLeft: 16
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
marginRight: 0, marginRight: 0,
marginLeft: 16 marginLeft: 16
} }
}, },
".iconRight": { '.iconRight': {
"NativeBase.Text": { 'NativeBase.Text': {
marginRight: 0 marginRight: 0
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
marginLeft: 0, marginLeft: 0,
marginRight: 16 marginRight: 16
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
marginLeft: 0, marginLeft: 0,
marginRight: 16 marginRight: 16
} }
}, },
".picker": { '.picker': {
"NativeBase.Text": { 'NativeBase.Text': {
".note": { '.note': {
fontSize: 16, fontSize: 16,
lineHeight: null lineHeight: null
} }
} }
}, },
paddingVertical: variables.buttonPadding, paddingVertical: variables.buttonPadding,
// paddingHorizontal: variables.buttonPadding + 10, backgroundColor: variables.buttonPrimaryBg,
backgroundColor: variables.btnPrimaryBg,
borderRadius: variables.borderRadiusBase, borderRadius: variables.borderRadiusBase,
borderColor: variables.btnPrimaryBg, borderColor: variables.buttonPrimaryBg,
borderWidth: null, borderWidth: null,
height: 45, height: 45,
alignSelf: "flex-start", flexDirection: 'row',
flexDirection: "row",
elevation: 2, elevation: 2,
shadowColor: platformStyle === "material" ? variables.brandDark : undefined, shadowColor:
platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
shadowOffset: shadowOffset:
platformStyle === "material" ? { width: 0, height: 2 } : undefined, platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined, shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined, shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
alignItems: "center", alignItems: 'center',
justifyContent: "space-between" justifyContent: 'space-between'
}; };
return buttonTheme; return buttonTheme;
}; };

14
native-base-theme/components/Card.js
View file

@ -1,19 +1,19 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const cardTheme = { const cardTheme = {
".transparent": { '.transparent': {
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowOpacity: null, shadowOpacity: null,
shadowRadius: null, shadowRadius: null,
elevation: null, elevation: null,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderWidth: 0 borderWidth: 0
}, },
".noShadow": { '.noShadow': {
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowOpacity: null, shadowOpacity: null,
@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => {
borderWidth: variables.borderWidth, borderWidth: variables.borderWidth,
borderRadius: variables.cardBorderRadius, borderRadius: variables.cardBorderRadius,
borderColor: variables.cardBorderColor, borderColor: variables.cardBorderColor,
flexWrap: "nowrap", flexWrap: 'nowrap',
backgroundColor: variables.cardDefaultBg, backgroundColor: variables.cardDefaultBg,
shadowColor: "#000", shadowColor: '#000',
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: 1.5, shadowRadius: 1.5,

136
native-base-theme/components/CardItem.js
View file

@ -1,21 +1,23 @@
// @flow // @flow
import { StyleSheet } from "react-native"; import { StyleSheet } from 'react-native';
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => { import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const platform = variables.platform; const platform = variables.platform;
const transparentBtnCommon = { const transparentBtnCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: variables.DefaultFontSize - 3, fontSize: variables.DefaultFontSize - 3,
color: variables.sTabBarActiveTextColor color: variables.sTabBarActiveTextColor
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
fontSize: variables.iconFontSize - 10, fontSize: variables.iconFontSize - 10,
color: variables.sTabBarActiveTextColor, color: variables.sTabBarActiveTextColor,
marginHorizontal: null marginHorizontal: null
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
fontSize: variables.iconFontSize - 10, fontSize: variables.iconFontSize - 10,
color: variables.sTabBarActiveTextColor color: variables.sTabBarActiveTextColor
}, },
@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => {
}; };
const cardItemTheme = { const cardItemTheme = {
"NativeBase.Left": { 'NativeBase.Left': {
"NativeBase.Body": { 'NativeBase.Body': {
"NativeBase.Text": { 'NativeBase.Text': {
".note": { '.note': {
color: variables.listNoteColor, color: variables.listNoteColor,
fontWeight: "400", fontWeight: '400',
marginRight: 20 marginRight: 20
} }
}, },
@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => {
marginLeft: 10, marginLeft: 10,
alignItems: null alignItems: null
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
fontSize: variables.iconFontSize fontSize: variables.iconFontSize
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
fontSize: variables.iconFontSize fontSize: variables.iconFontSize
}, },
"NativeBase.Text": { 'NativeBase.Text': {
marginLeft: 10, marginLeft: 10,
alignSelf: "center" alignSelf: 'center'
}, },
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
...transparentBtnCommon, ...transparentBtnCommon,
paddingRight: variables.cardItemPadding + 5 paddingRight: variables.cardItemPadding + 5
} }
}, },
flex: 1, flex: 1,
flexDirection: "row", flexDirection: 'row',
alignItems: "center" alignItems: 'center'
}, },
".content": { '.content': {
"NativeBase.Text": { 'NativeBase.Text': {
color: platform === "ios" ? "#555" : "#222", color: platform === PLATFORM.IOS ? '#555' : '#222',
fontSize: variables.DefaultFontSize - 2 fontSize: variables.DefaultFontSize - 2
} }
}, },
".cardBody": { '.cardBody': {
padding: -5, padding: -5,
"NativeBase.Text": { 'NativeBase.Text': {
marginTop: 5 marginTop: 5
} }
}, },
"NativeBase.Body": { 'NativeBase.Body': {
"NativeBase.Text": { 'NativeBase.Text': {
".note": { '.note': {
color: variables.listNoteColor, color: variables.listNoteColor,
fontWeight: "200", fontWeight: '200',
marginRight: 20 marginRight: 20
} }
}, },
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
...transparentBtnCommon, ...transparentBtnCommon,
paddingRight: variables.cardItemPadding + 5, paddingRight: variables.cardItemPadding + 5,
alignSelf: "stretch" alignSelf: 'stretch'
} }
}, },
flex: 1, flex: 1,
alignSelf: "stretch", alignSelf: 'stretch',
alignItems: "flex-start" alignItems: 'flex-start'
}, },
"NativeBase.Right": { 'NativeBase.Right': {
"NativeBase.Badge": { 'NativeBase.Badge': {
alignSelf: null alignSelf: null
}, },
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
...transparentBtnCommon ...transparentBtnCommon
}, },
alignSelf: null alignSelf: null
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
alignSelf: null, alignSelf: null,
fontSize: variables.iconFontSize - 8, fontSize: variables.iconFontSize - 8,
color: variables.cardBorderColor color: variables.cardBorderColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
alignSelf: null, alignSelf: null,
fontSize: variables.iconFontSize - 8, fontSize: variables.iconFontSize - 8,
color: variables.cardBorderColor color: variables.cardBorderColor
}, },
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: variables.DefaultFontSize - 1, fontSize: variables.DefaultFontSize - 1,
alignSelf: null alignSelf: null
}, },
"NativeBase.Thumbnail": { 'NativeBase.Thumbnail': {
alignSelf: null alignSelf: null
}, },
"NativeBase.Image": { 'NativeBase.Image': {
alignSelf: null alignSelf: null
}, },
"NativeBase.Radio": { 'NativeBase.Radio': {
alignSelf: null alignSelf: null
}, },
"NativeBase.Checkbox": { 'NativeBase.Checkbox': {
alignSelf: null alignSelf: null
}, },
"NativeBase.Switch": { 'NativeBase.Switch': {
alignSelf: null alignSelf: null
}, },
flex: 0.8 flex: 0.8
}, },
".header": { '.header': {
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: 16, fontSize: 16,
fontWeight: platform === "ios" ? "600" : "500" fontWeight: platform === PLATFORM.IOS ? '600' : '500'
}, },
".bordered": { '.bordered': {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.brandPrimary, color: variables.brandPrimary,
fontWeight: platform === "ios" ? "600" : "500" fontWeight: platform === PLATFORM.IOS ? '600' : '500'
}, },
borderBottomWidth: variables.borderWidth borderBottomWidth: variables.borderWidth
}, },
borderBottomWidth: null, borderBottomWidth: null,
paddingVertical: variables.cardItemPadding + 5 paddingVertical: variables.cardItemPadding + 5
}, },
".footer": { '.footer': {
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: 16, fontSize: 16,
fontWeight: platform === "ios" ? "600" : "500" fontWeight: platform === PLATFORM.IOS ? '600' : '500'
}, },
".bordered": { '.bordered': {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.brandPrimary, color: variables.brandPrimary,
fontWeight: platform === "ios" ? "600" : "500" fontWeight: platform === PLATFORM.IOS ? '600' : '500'
}, },
borderTopWidth: variables.borderWidth borderTopWidth: variables.borderWidth
}, },
borderBottomWidth: null borderBottomWidth: null
}, },
"NativeBase.Text": { 'NativeBase.Text': {
".note": { '.note': {
color: variables.listNoteColor, color: variables.listNoteColor,
fontWeight: "200" fontWeight: '200'
} }
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
width: variables.iconFontSize + 5, width: variables.iconFontSize + 5,
fontSize: variables.iconFontSize - 2 fontSize: variables.iconFontSize - 2
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
width: variables.iconFontSize + 5, width: variables.iconFontSize + 5,
fontSize: variables.iconFontSize - 2 fontSize: variables.iconFontSize - 2
}, },
".bordered": { '.bordered': {
borderBottomWidth: StyleSheet.hairlineWidth, borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: variables.cardBorderColor borderColor: variables.cardBorderColor
}, },
".first": { '.first': {
borderTopLeftRadius: variables.cardBorderRadius, borderTopLeftRadius: variables.cardBorderRadius,
borderTopRightRadius: variables.cardBorderRadius borderTopRightRadius: variables.cardBorderRadius
}, },
".last": { '.last': {
borderBottomLeftRadius: variables.cardBorderRadius, borderBottomLeftRadius: variables.cardBorderRadius,
borderBottomRightRadius: variables.cardBorderRadius borderBottomRightRadius: variables.cardBorderRadius
}, },
flexDirection: "row", flexDirection: 'row',
alignItems: "center", alignItems: 'center',
borderRadius: variables.cardBorderRadius, borderRadius: variables.cardBorderRadius,
padding: variables.cardItemPadding + 5, padding: variables.cardItemPadding + 5,
paddingVertical: variables.cardItemPadding, paddingVertical: variables.cardItemPadding,

20
native-base-theme/components/CheckBox.js
View file

@ -1,31 +1,31 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const checkBoxTheme = { const checkBoxTheme = {
".checked": { '.checked': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.checkboxTickColor color: variables.checkboxTickColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.checkboxTickColor color: variables.checkboxTickColor
} }
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: "transparent", color: 'transparent',
lineHeight: variables.CheckboxIconSize, lineHeight: variables.CheckboxIconSize,
marginTop: variables.CheckboxIconMarginTop, marginTop: variables.CheckboxIconMarginTop,
fontSize: variables.CheckboxFontSize fontSize: variables.CheckboxFontSize
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: "transparent", color: 'transparent',
lineHeight: variables.CheckboxIconSize, lineHeight: variables.CheckboxIconSize,
marginTop: variables.CheckboxIconMarginTop, marginTop: variables.CheckboxIconMarginTop,
fontSize: variables.CheckboxFontSize fontSize: variables.CheckboxFontSize
}, },
borderRadius: variables.CheckboxRadius, borderRadius: variables.CheckboxRadius,
overflow: "hidden", overflow: 'hidden',
width: variables.checkboxSize, width: variables.checkboxSize,
height: variables.checkboxSize, height: variables.checkboxSize,
borderWidth: variables.CheckboxBorderWidth, borderWidth: variables.CheckboxBorderWidth,

11
native-base-theme/components/Container.js
View file

@ -1,14 +1,15 @@
// @flow // @flow
import { Platform, Dimensions } from "react-native"; import { Platform, Dimensions } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get('window').height;
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const theme = { const theme = {
flex: 1, flex: 1,
height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20, height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
backgroundColor: variables.containerBgColor backgroundColor: variables.containerBgColor
}; };

10
native-base-theme/components/Content.js
View file

@ -1,14 +1,12 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const contentTheme = { const contentTheme = {
flex: 1, flex: 1,
backgroundColor: "transparent", backgroundColor: 'transparent',
"NativeBase.Segment": { 'NativeBase.Segment': {
borderWidth: 0, borderWidth: 0,
backgroundColor: "transparent" backgroundColor: 'transparent'
} }
}; };

28
native-base-theme/components/Fab.js
View file

@ -1,28 +1,24 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const platform = variables.platform;
const fabTheme = { const fabTheme = {
"NativeBase.Button": { 'NativeBase.Button': {
alignItems: "center", alignItems: 'center',
padding: null, padding: null,
justifyContent: "center", justifyContent: 'center',
"NativeBase.Icon": { 'NativeBase.Icon': {
alignSelf: "center", alignSelf: 'center',
fontSize: 20, fontSize: 20,
marginLeft: 0, marginLeft: 0,
marginRight: 0, marginRight: 0
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
alignSelf: "center", alignSelf: 'center',
fontSize: 20, fontSize: 20,
marginLeft: 0, marginLeft: 0,
marginRight: 0, marginRight: 0
}, }
}, }
}; };
return fabTheme; return fabTheme;

69
native-base-theme/components/Footer.js
View file

@ -1,31 +1,32 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platformStyle = variables.platformStyle; const platformStyle = variables.platformStyle;
const platform = variables.platform; const platform = variables.platform;
const iconCommon = { const iconCommon = {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.tabBarActiveTextColor color: variables.tabBarActiveTextColor
} }
}; };
const iconNBCommon = { const iconNBCommon = {
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.tabBarActiveTextColor color: variables.tabBarActiveTextColor
} }
}; };
const textCommon = { const textCommon = {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.tabBarActiveTextColor color: variables.tabBarActiveTextColor
} }
}; };
const footerTheme = { const footerTheme = {
"NativeBase.Left": { 'NativeBase.Left': {
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: null, borderColor: null,
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => {
}, },
alignSelf: null, alignSelf: null,
...iconCommon, ...iconCommon,
...iconNBCommon, ...iconNBCommon
// ...textCommon // ...textCommon
}, },
flex: 1, flex: 1,
alignSelf: "center", alignSelf: 'center',
alignItems: "flex-start" alignItems: 'flex-start'
}, },
"NativeBase.Body": { 'NativeBase.Body': {
flex: 1, flex: 1,
alignItems: "center", alignItems: 'center',
alignSelf: "center", alignSelf: 'center',
flexDirection: "row", flexDirection: 'row',
"NativeBase.Button": { 'NativeBase.Button': {
alignSelf: "center", alignSelf: 'center',
".transparent": { '.transparent': {
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: null, borderColor: null,
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => {
...iconNBCommon, ...iconNBCommon,
...textCommon ...textCommon
}, },
".full": { '.full': {
height: variables.footerHeight, height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom, paddingBottom: variables.footerPaddingBottom,
flex: 1 flex: 1
}, },
...iconCommon, ...iconCommon,
...iconNBCommon, ...iconNBCommon
// ...textCommon // ...textCommon
} }
}, },
"NativeBase.Right": { 'NativeBase.Right': {
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: null, borderColor: null,
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => {
}, },
alignSelf: null, alignSelf: null,
...iconCommon, ...iconCommon,
...iconNBCommon, ...iconNBCommon
// ...textCommon // ...textCommon
}, },
flex: 1, flex: 1,
alignSelf: "center", alignSelf: 'center',
alignItems: "flex-end" alignItems: 'flex-end'
}, },
backgroundColor: variables.footerDefaultBg, backgroundColor: variables.footerDefaultBg,
flexDirection: "row", flexDirection: 'row',
justifyContent: "center", justifyContent: 'center',
borderTopWidth: borderTopWidth:
platform === "ios" && platformStyle !== "material" platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? variables.borderWidth ? variables.borderWidth
: undefined, : undefined,
borderColor: borderColor:
platform === "ios" && platformStyle !== "material" platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? "#cbcbcb" ? '#cbcbcb'
: undefined, : undefined,
height: variables.footerHeight, height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom, paddingBottom: variables.footerPaddingBottom,

52
native-base-theme/components/FooterTab.js
View file

@ -1,78 +1,78 @@
// @flow // @flow
import { Platform } from "react-native"; import { Platform } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platform = variables.platform; const platform = variables.platform;
const footerTabTheme = { const footerTabTheme = {
"NativeBase.Button": { 'NativeBase.Button': {
".active": { '.active': {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.tabBarActiveTextColor, color: variables.tabBarActiveTextColor,
fontSize: variables.tabBarTextSize, fontSize: variables.tabBarTextSize,
lineHeight: 16 lineHeight: 16
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.tabBarActiveTextColor color: variables.tabBarActiveTextColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.tabBarActiveTextColor color: variables.tabBarActiveTextColor
}, },
backgroundColor: variables.tabActiveBgColor backgroundColor: variables.tabActiveBgColor
}, },
flexDirection: null, flexDirection: null,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: null, borderColor: null,
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowRadius: null, shadowRadius: null,
shadowOpacity: null, shadowOpacity: null,
alignSelf: "center", alignSelf: 'center',
flex: 1, flex: 1,
height: variables.footerHeight, height: variables.footerHeight,
justifyContent: "center", justifyContent: 'center',
".badge": { '.badge': {
"NativeBase.Badge": { 'NativeBase.Badge': {
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: 11, fontSize: 11,
fontWeight: platform === "ios" ? "600" : undefined, fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
lineHeight: 14 lineHeight: 14
}, },
top: -3, top: -3,
alignSelf: "center", alignSelf: 'center',
left: 10, left: 10,
zIndex: 99, zIndex: 99,
height: 18, height: 18,
padding: 1.7, padding: 1.7,
paddingHorizontal: 3 paddingHorizontal: 3
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
marginTop: -18 marginTop: -18
} }
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.tabBarTextColor color: variables.tabBarTextColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.tabBarTextColor color: variables.tabBarTextColor
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.tabBarTextColor, color: variables.tabBarTextColor,
fontSize: variables.tabBarTextSize, fontSize: variables.tabBarTextSize,
lineHeight: 16 lineHeight: 16
} }
}, },
backgroundColor: Platform.OS === "android" backgroundColor:
? variables.footerDefaultBg Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
: undefined, flexDirection: 'row',
flexDirection: "row", justifyContent: 'space-between',
justifyContent: "space-between",
flex: 1, flex: 1,
alignSelf: "stretch" alignSelf: 'stretch'
}; };
return footerTabTheme; return footerTabTheme;

56
native-base-theme/components/Form.js
View file

@ -1,85 +1,81 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const platform = variables.platform;
const theme = { const theme = {
"NativeBase.Item": { 'NativeBase.Item': {
".fixedLabel": { '.fixedLabel': {
"NativeBase.Label": { 'NativeBase.Label': {
paddingLeft: null paddingLeft: null
}, },
marginLeft: 15 marginLeft: 15
}, },
".inlineLabel": { '.inlineLabel': {
"NativeBase.Label": { 'NativeBase.Label': {
paddingLeft: null paddingLeft: null
}, },
marginLeft: 15 marginLeft: 15
}, },
".placeholderLabel": { '.placeholderLabel': {
"NativeBase.Input": {} 'NativeBase.Input': {}
}, },
".stackedLabel": { '.stackedLabel': {
"NativeBase.Label": { 'NativeBase.Label': {
top: 5, top: 5,
paddingLeft: null paddingLeft: null
}, },
"NativeBase.Input": { 'NativeBase.Input': {
paddingLeft: null, paddingLeft: null,
marginLeft: null marginLeft: null
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
marginTop: 36 marginTop: 36
}, },
marginLeft: 15 marginLeft: 15
}, },
".floatingLabel": { '.floatingLabel': {
"NativeBase.Input": { 'NativeBase.Input': {
paddingLeft: null, paddingLeft: null,
top: 10, top: 10,
marginLeft: null marginLeft: null
}, },
"NativeBase.Label": { 'NativeBase.Label': {
left: 0, left: 0,
top: 6 top: 6
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
top: 6 top: 6
}, },
marginTop: 15, marginTop: 15,
marginLeft: 15 marginLeft: 15
}, },
".regular": { '.regular': {
"NativeBase.Label": { 'NativeBase.Label': {
left: 0 left: 0
}, },
marginLeft: 0 marginLeft: 0
}, },
".rounded": { '.rounded': {
"NativeBase.Label": { 'NativeBase.Label': {
left: 0 left: 0
}, },
marginLeft: 0 marginLeft: 0
}, },
".underline": { '.underline': {
"NativeBase.Label": { 'NativeBase.Label': {
left: 0, left: 0,
top: 0, top: 0,
position: "relative" position: 'relative'
}, },
"NativeBase.Input": { 'NativeBase.Input': {
left: -15 left: -15
}, },
marginLeft: 15 marginLeft: 15
}, },
".last": { '.last': {
marginLeft: 0, marginLeft: 0,
paddingLeft: 15 paddingLeft: 15
}, },
"NativeBase.Label": { 'NativeBase.Label': {
paddingRight: 5 paddingRight: 5
}, },
marginLeft: 15 marginLeft: 15

6
native-base-theme/components/H1.js
View file

@ -1,12 +1,12 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const h1Theme = { const h1Theme = {
color: variables.textColor, color: variables.textColor,
fontSize: variables.fontSizeH1, fontSize: variables.fontSizeH1,
lineHeight: variables.lineHeightH1, lineHeight: variables.lineHeightH1
}; };
return h1Theme; return h1Theme;

6
native-base-theme/components/H2.js
View file

@ -1,12 +1,12 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const h2Theme = { const h2Theme = {
color: variables.textColor, color: variables.textColor,
fontSize: variables.fontSizeH2, fontSize: variables.fontSizeH2,
lineHeight: variables.lineHeightH2, lineHeight: variables.lineHeightH2
}; };
return h2Theme; return h2Theme;

4
native-base-theme/components/H3.js
View file

@ -1,8 +1,8 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const h3Theme = { const h3Theme = {
color: variables.textColor, color: variables.textColor,
fontSize: variables.fontSizeH3, fontSize: variables.fontSizeH3,

323
native-base-theme/components/Header.js
View file

@ -1,65 +1,70 @@
// @flow // @flow
import { PixelRatio, StatusBar } from "react-native"; import { PixelRatio, StatusBar } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platformStyle = variables.platformStyle; const platformStyle = variables.platformStyle;
const platform = variables.platform; const platform = variables.platform;
const headerTheme = { const headerTheme = {
".span": { '.span': {
height: 128, height: 128,
"NativeBase.Left": { 'NativeBase.Left': {
alignSelf: "flex-start" alignSelf: 'flex-start'
}, },
"NativeBase.Body": { 'NativeBase.Body': {
alignSelf: "flex-end", alignSelf: 'flex-end',
alignItems: "flex-start", alignItems: 'flex-start',
justifyContent: "center", justifyContent: 'center',
paddingBottom: 26 paddingBottom: 26
}, },
"NativeBase.Right": { 'NativeBase.Right': {
alignSelf: "flex-start" alignSelf: 'flex-start'
} }
}, },
".hasSubtitle": { '.hasSubtitle': {
"NativeBase.Body": { 'NativeBase.Body': {
"NativeBase.Title": { 'NativeBase.Title': {
fontSize: variables.titleFontSize - 2, fontSize: variables.titleFontSize - 2,
fontFamily: variables.titleFontfamily, fontFamily: variables.titleFontfamily,
textAlign: "center", textAlign: 'center',
fontWeight: "500", fontWeight: '500',
paddingBottom: 3 paddingBottom: 3
}, },
"NativeBase.Subtitle": { 'NativeBase.Subtitle': {
fontSize: variables.subTitleFontSize, fontSize: variables.subTitleFontSize,
fontFamily: variables.titleFontfamily, fontFamily: variables.titleFontfamily,
color: variables.subtitleColor, color: variables.subtitleColor,
textAlign: "center" textAlign: 'center'
} }
} }
}, },
".transparent": { '.transparent': {
backgroundColor: "transparent", backgroundColor: 'transparent',
borderBottomColor: "transparent", borderBottomColor: 'transparent',
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowRadius: null, shadowRadius: null,
shadowOpacity: null, shadowOpacity: null,
paddingTop: platform === "android" ? StatusBar.currentHeight : undefined, paddingTop:
height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
height:
platform === PLATFORM.ANDROID
? variables.toolbarHeight + StatusBar.currentHeight
: variables.toolbarHeight
}, },
".noShadow": { '.noShadow': {
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowRadius: null, shadowRadius: null,
shadowOpacity: null shadowOpacity: null
}, },
".hasTabs": { '.hasTabs': {
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => {
shadowOpacity: null, shadowOpacity: null,
borderBottomWidth: null borderBottomWidth: null
}, },
".hasSegment": { '.hasSegment': {
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
shadowOffset: null, shadowOffset: null,
shadowRadius: null, shadowRadius: null,
shadowOpacity: null, shadowOpacity: null,
borderBottomWidth: null, borderBottomWidth: null,
"NativeBase.Left": { 'NativeBase.Left': {
flex: 0.3 flex: 0.3
}, },
"NativeBase.Right": { 'NativeBase.Right': {
flex: 0.3 flex: 0.3
}, },
"NativeBase.Body": { 'NativeBase.Body': {
flex: 1, flex: 1,
"NativeBase.Segment": { 'NativeBase.Segment': {
marginRight: 0, marginRight: 0,
alignSelf: "center", alignSelf: 'center',
"NativeBase.Button": { 'NativeBase.Button': {
paddingLeft: 0, paddingLeft: 0,
paddingRight: 0 paddingRight: 0
} }
} }
} }
}, },
".noLeft": { '.noLeft': {
"NativeBase.Left": { 'NativeBase.Left': {
width: platform === "ios" ? undefined : 0, width: platform === PLATFORM.IOS ? undefined : 0,
flex: platform === "ios" ? 1 : 0 flex: platform === PLATFORM.IOS ? 1 : 0
}, },
"NativeBase.Body": { 'NativeBase.Body': {
"NativeBase.Title": { 'NativeBase.Title': {
paddingLeft: platform === "ios" ? undefined : 10 paddingLeft: platform === PLATFORM.IOS ? undefined : 10
}, },
"NativeBase.Subtitle": { 'NativeBase.Subtitle': {
paddingLeft: platform === "ios" ? undefined : 10 paddingLeft: platform === PLATFORM.IOS ? undefined : 10
} }
} }
}, },
"NativeBase.Button": { 'NativeBase.Button': {
justifyContent: "center", justifyContent: 'center',
alignSelf: "center", alignSelf: 'center',
alignItems: "center", alignItems: 'center',
".transparent": { '.transparent': {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.toolbarBtnTextColor, color: variables.toolbarBtnTextColor,
fontWeight: "600" fontWeight: '600'
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
paddingHorizontal: variables.buttonPadding paddingHorizontal: variables.buttonPadding
}, },
paddingHorizontal: 15 paddingHorizontal: 15
}, },
".searchBar": { '.searchBar': {
"NativeBase.Item": { 'NativeBase.Item': {
"NativeBase.Icon": { 'NativeBase.Icon': {
backgroundColor: "transparent", backgroundColor: 'transparent',
color: variables.dropdownLinkColor, color: variables.dropdownLinkColor,
fontSize: variables.toolbarSearchIconSize, fontSize: variables.toolbarSearchIconSize,
alignItems: "center", alignItems: 'center',
marginTop: 2, marginTop: 2,
paddingRight: 10, paddingRight: 10,
paddingLeft: 10 paddingLeft: 10
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
backgroundColor: "transparent", backgroundColor: 'transparent',
color: null, color: null,
alignSelf: "center" alignSelf: 'center'
}, },
"NativeBase.Input": { 'NativeBase.Input': {
alignSelf: "center", alignSelf: 'center',
lineHeight: null, lineHeight: null,
height: variables.searchBarInputHeight height: variables.searchBarInputHeight
}, },
alignSelf: "center", alignSelf: 'center',
alignItems: "center", alignItems: 'center',
justifyContent: "flex-start", justifyContent: 'flex-start',
flex: 1, flex: 1,
height: variables.searchBarHeight, height: variables.searchBarHeight,
borderColor: "transparent", borderColor: 'transparent',
backgroundColor: variables.toolbarInputColor backgroundColor: variables.toolbarInputColor
}, },
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
"NativeBase.Text": { 'NativeBase.Text': {
fontWeight: "500" fontWeight: '500'
}, },
paddingHorizontal: null, paddingHorizontal: null,
paddingLeft: platform === "ios" ? 10 : null paddingLeft: platform === PLATFORM.IOS ? 10 : null
}, },
paddingHorizontal: platform === "ios" ? undefined : null, paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
width: platform === "ios" ? undefined : 0, width: platform === PLATFORM.IOS ? undefined : 0,
height: platform === "ios" ? undefined : 0 height: platform === PLATFORM.IOS ? undefined : 0
} }
}, },
".rounded": { '.rounded': {
"NativeBase.Item": { 'NativeBase.Item': {
borderRadius: borderRadius:
platform === "ios" && platformStyle !== "material" ? 25 : 3 platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 25
: 3
} }
}, },
"NativeBase.Left": { 'NativeBase.Left': {
"NativeBase.Button": { 'NativeBase.Button': {
".hasText": { '.hasText': {
marginLeft: -10, marginLeft: -10,
height: 30, height: 30,
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize, fontSize: variables.iconHeaderSize,
marginTop: 2, marginTop: 2,
marginRight: 5, marginRight: 5,
marginLeft: 2 marginLeft: 2
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.toolbarBtnTextColor, color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 0, fontSize: platform === PLATFORM.IOS ? 17 : 0,
marginLeft: 7, marginLeft: 7,
lineHeight: 19.5 lineHeight: 19.5
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize, fontSize: variables.iconHeaderSize,
marginTop: 2, marginTop: 2,
@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => {
marginLeft: 2 marginLeft: 2
} }
}, },
".transparent": { '.transparent': {
marginLeft: marginLeft:
platform === "ios" && platformStyle !== "material" ? -3 : 0, platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
"NativeBase.Icon": { ? -3
: 0,
'NativeBase.Icon': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: fontSize:
platform === "ios" && variables.platformStyle !== "material" platform === PLATFORM.IOS &&
variables.platformStyle !== PLATFORM.MATERIAL
? variables.iconHeaderSize + 1 ? variables.iconHeaderSize + 1
: variables.iconHeaderSize, : variables.iconHeaderSize,
marginTop: 0, marginTop: 0,
@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => {
marginLeft: 1, marginLeft: 1,
paddingTop: 1 paddingTop: 1
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: fontSize:
platform === "ios" && variables.platformStyle !== "material" platform === PLATFORM.IOS &&
variables.platformStyle !== PLATFORM.MATERIAL
? variables.iconHeaderSize + 1 ? variables.iconHeaderSize + 1
: variables.iconHeaderSize - 2, : variables.iconHeaderSize - 2,
marginTop: 0, marginTop: 0,
@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => {
marginLeft: 1, marginLeft: 1,
paddingTop: 1 paddingTop: 1
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.toolbarBtnTextColor, color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 0, fontSize: platform === PLATFORM.IOS ? 17 : 0,
top: platform === "ios" ? 1 : -1.5, top: platform === PLATFORM.IOS ? 1 : -1.5,
paddingLeft: paddingLeft:
platform === "ios" && platformStyle !== "material" ? 2 : 5, platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 2
: 5,
paddingRight: paddingRight:
platform === "ios" && platformStyle !== "material" platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? undefined ? undefined
: 10 : 10
}, },
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: null, borderColor: null,
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => {
shadowRadius: null, shadowRadius: null,
shadowOpacity: null shadowOpacity: null
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
alignSelf: null, alignSelf: null,
paddingRight: variables.buttonPadding, paddingRight: variables.buttonPadding,
paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8 paddingLeft:
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 4
: 8
}, },
flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4, flex:
alignSelf: "center", platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
alignItems: "flex-start" ? 1
: 0.4,
alignSelf: 'center',
alignItems: 'flex-start'
}, },
"NativeBase.Body": { 'NativeBase.Body': {
flex: 1, flex: 1,
alignItems: alignItems:
platform === "ios" && platformStyle !== "material" platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? "center" ? 'center'
: "flex-start", : 'flex-start',
alignSelf: "center", alignSelf: 'center',
"NativeBase.Segment": { 'NativeBase.Segment': {
borderWidth: 0, borderWidth: 0,
alignSelf: "flex-end", alignSelf: 'flex-end',
marginRight: platform === "ios" ? -40 : -55 marginRight: platform === PLATFORM.IOS ? -40 : -55
}, },
"NativeBase.Button": { 'NativeBase.Button': {
alignSelf: "center", alignSelf: 'center',
".transparent": { '.transparent': {
backgroundColor: "transparent" backgroundColor: 'transparent'
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.inverseTextColor, color: variables.inverseTextColor,
backgroundColor: "transparent" backgroundColor: 'transparent'
} }
} }
}, },
"NativeBase.Right": { 'NativeBase.Right': {
"NativeBase.Button": { 'NativeBase.Button': {
".hasText": { '.hasText': {
height: 30, height: 30,
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2, fontSize: variables.iconHeaderSize - 2,
marginTop: 2, marginTop: 2,
marginRight: 2, marginRight: 2,
marginLeft: 5 marginLeft: 5
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.toolbarBtnTextColor, color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 14, fontSize: platform === PLATFORM.IOS ? 17 : 14,
lineHeight: 19.5 lineHeight: 19.5
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2, fontSize: variables.iconHeaderSize - 2,
marginTop: 2, marginTop: 2,
@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => {
marginLeft: 5 marginLeft: 5
} }
}, },
".transparent": { '.transparent': {
marginRight: platform === "ios" ? -9 : -5, marginRight: platform === PLATFORM.IOS ? -9 : -5,
paddingLeft: 15, paddingLeft: 15,
paddingRight: 12, paddingRight: 12,
paddingHorizontal: 15, paddingHorizontal: 15,
borderRadius: 50, borderRadius: 50,
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2, fontSize: variables.iconHeaderSize - 2,
marginTop: 0, marginTop: 0,
@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => {
marginRight: 0 marginRight: 0
// paddingTop: 0 // paddingTop: 0
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor, color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2, fontSize: variables.iconHeaderSize - 2,
marginTop: 0, marginTop: 0,
@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => {
marginRight: 0 marginRight: 0
// paddingTop: 0 // paddingTop: 0
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.toolbarBtnTextColor, color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 14, fontSize: platform === PLATFORM.IOS ? 17 : 14,
top: platform === "ios" ? 1 : -1.5, top: platform === PLATFORM.IOS ? 1 : -1.5,
paddingRight: paddingRight:
platform === "ios" && variables.platformStyle !== "material" platform === PLATFORM.IOS &&
variables.platformStyle !== PLATFORM.MATERIAL
? 0 ? 0
: undefined : undefined
}, },
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: null, borderColor: null,
elevation: 0, elevation: 0,
shadowColor: null, shadowColor: null,
@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => {
shadowRadius: null, shadowRadius: null,
shadowOpacity: null shadowOpacity: null
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.toolbarBtnColor color: variables.toolbarBtnColor
}, },
alignSelf: null, alignSelf: null,
paddingHorizontal: variables.buttonPadding paddingHorizontal: variables.buttonPadding
}, },
flex: 1, flex: 1,
alignSelf: "center", alignSelf: 'center',
alignItems: "flex-end", alignItems: 'flex-end',
flexDirection: "row", flexDirection: 'row',
justifyContent: "flex-end" justifyContent: 'flex-end'
}, },
backgroundColor: variables.toolbarDefaultBg, backgroundColor: variables.toolbarDefaultBg,
flexDirection: "row", flexDirection: 'row',
// paddingHorizontal: 10, // paddingHorizontal: 10,
paddingLeft: paddingLeft:
platform === "ios" && variables.platformStyle !== "material" ? 6 : 10, platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
? 6
: 10,
paddingRight: 10, paddingRight: 10,
justifyContent: "center", justifyContent: 'center',
paddingTop: platform === "ios" ? 18 : 0, paddingTop: platform === PLATFORM.IOS ? 18 : 0,
borderBottomWidth: borderBottomWidth:
platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, platform === PLATFORM.IOS
? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
: 0,
borderBottomColor: variables.toolbarDefaultBorder, borderBottomColor: variables.toolbarDefaultBorder,
height: height:
variables.platform === "ios" && variables.platformStyle === "material" variables.platform === PLATFORM.IOS &&
variables.platformStyle === PLATFORM.MATERIAL
? variables.toolbarHeight + 10 ? variables.toolbarHeight + 10
: variables.toolbarHeight, : variables.toolbarHeight,
elevation: 3, elevation: 3,
shadowColor: platformStyle === "material" ? "#000" : undefined, shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
shadowOffset: shadowOffset:
platformStyle === "material" ? { width: 0, height: 2 } : undefined, platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined, shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined, shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
top: 0, top: 0,
left: 0, left: 0,
right: 0 right: 0

6
native-base-theme/components/Icon.js
View file

@ -1,11 +1,11 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const iconTheme = { const iconTheme = {
fontSize: variables.iconFontSize, fontSize: variables.iconFontSize,
color: "#000" color: variable.textColor
}; };
return iconTheme; return iconTheme;

4
native-base-theme/components/Input.js
View file

@ -2,10 +2,10 @@
import variable from './../variables/platform'; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const inputTheme = { const inputTheme = {
'.multiline': { '.multiline': {
height: null, height: null
}, },
height: variables.inputHeightBase, height: variables.inputHeightBase,
color: variables.inputColor, color: variables.inputColor,

68
native-base-theme/components/InputGroup.js
View file

@ -1,20 +1,20 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const inputGroupTheme = { const inputGroupTheme = {
"NativeBase.Icon": { 'NativeBase.Icon': {
fontSize: 24, fontSize: 24,
color: variables.sTabBarActiveTextColor, color: variables.sTabBarActiveTextColor,
paddingHorizontal: 5 paddingHorizontal: 5
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
fontSize: 24, fontSize: 24,
color: variables.sTabBarActiveTextColor, color: variables.sTabBarActiveTextColor,
paddingHorizontal: 5 paddingHorizontal: 5
}, },
"NativeBase.Input": { 'NativeBase.Input': {
height: variables.inputHeightBase, height: variables.inputHeightBase,
color: variables.inputColor, color: variables.inputColor,
paddingLeft: 5, paddingLeft: 5,
@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => {
fontSize: variables.inputFontSize, fontSize: variables.inputFontSize,
lineHeight: variables.inputLineHeight lineHeight: variables.inputLineHeight
}, },
".underline": { '.underline': {
".success": { '.success': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
paddingLeft: 5, paddingLeft: 5,
@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => {
borderLeftWidth: 0, borderLeftWidth: 0,
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".regular": { '.regular': {
".success": { '.success': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
paddingLeft: 5, paddingLeft: 5,
borderWidth: variables.borderWidth, borderWidth: variables.borderWidth,
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".rounded": { '.rounded': {
".success": { '.success': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
paddingLeft: 5, paddingLeft: 5,
@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".success": { '.success': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.inputSuccessBorderColor color: variables.inputSuccessBorderColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.inputSuccessBorderColor color: variables.inputSuccessBorderColor
}, },
".rounded": { '.rounded': {
borderRadius: 30, borderRadius: 30,
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".regular": { '.regular': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".underline": { '.underline': {
borderWidth: variables.borderWidth, borderWidth: variables.borderWidth,
borderTopWidth: 0, borderTopWidth: 0,
borderRightWidth: 0, borderRightWidth: 0,
@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.inputErrorBorderColor color: variables.inputErrorBorderColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.inputErrorBorderColor color: variables.inputErrorBorderColor
}, },
".rounded": { '.rounded': {
borderRadius: 30, borderRadius: 30,
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
".regular": { '.regular': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
".underline": { '.underline': {
borderWidth: variables.borderWidth, borderWidth: variables.borderWidth,
borderTopWidth: 0, borderTopWidth: 0,
borderRightWidth: 0, borderRightWidth: 0,
@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => {
}, },
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
".disabled": { '.disabled': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: "#384850" color: '#384850'
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: "#384850" color: '#384850'
} }
}, },
@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => {
borderRightWidth: 0, borderRightWidth: 0,
borderLeftWidth: 0, borderLeftWidth: 0,
borderColor: variables.inputBorderColor, borderColor: variables.inputBorderColor,
backgroundColor: "transparent", backgroundColor: 'transparent',
flexDirection: "row", flexDirection: 'row',
alignItems: "center" alignItems: 'center'
}; };
return inputGroupTheme; return inputGroupTheme;

143
native-base-theme/components/Item.js
View file

@ -1,37 +1,38 @@
// @flow // @flow
import { Platform } from "react-native"; import { Platform } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const itemTheme = { const itemTheme = {
".floatingLabel": { '.floatingLabel': {
"NativeBase.Input": { 'NativeBase.Input': {
height: 50, height: 50,
top: 8, top: 8,
paddingTop: 3, paddingTop: 3,
paddingBottom: 7, paddingBottom: 7,
".multiline": { '.multiline': {
minHeight: variables.inputHeightBase, minHeight: variables.inputHeightBase,
paddingTop: Platform.OS === "ios" ? 10 : 3, paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
paddingBottom: Platform.OS === "ios" ? 14 : 10 paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
} }
}, },
"NativeBase.Label": { 'NativeBase.Label': {
paddingTop: 5 paddingTop: 5
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
top: 6, top: 6,
paddingTop: 8 paddingTop: 8
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
top: 6, top: 6,
paddingTop: 8 paddingTop: 8
} }
}, },
".fixedLabel": { '.fixedLabel': {
"NativeBase.Label": { 'NativeBase.Label': {
position: null, position: null,
top: null, top: null,
left: null, left: null,
@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => {
width: null, width: null,
fontSize: variables.inputFontSize fontSize: variables.inputFontSize
}, },
"NativeBase.Input": { 'NativeBase.Input': {
flex: 2, flex: 2,
fontSize: variables.inputFontSize fontSize: variables.inputFontSize
} }
}, },
".stackedLabel": { '.stackedLabel': {
"NativeBase.Label": { 'NativeBase.Label': {
position: null, position: null,
top: null, top: null,
left: null, left: null,
right: null, right: null,
paddingTop: 5, paddingTop: 5,
alignSelf: "flex-start", alignSelf: 'flex-start',
fontSize: variables.inputFontSize - 2 fontSize: variables.inputFontSize - 2
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
marginTop: 36 marginTop: 36
}, },
"NativeBase.Input": { 'NativeBase.Input': {
alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start", alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
flex: 1, flex: 1,
width: Platform.OS === "ios" ? null : variables.deviceWidth - 25, width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
fontSize: variables.inputFontSize, fontSize: variables.inputFontSize,
lineHeight: variables.inputLineHeight - 6, lineHeight: variables.inputLineHeight - 6,
".secureTextEntry": { '.secureTextEntry': {
fontSize: variables.inputFontSize - 4 fontSize: variables.inputFontSize
}, },
".multiline": { '.multiline': {
paddingTop: Platform.OS === "ios" ? 9 : undefined, paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
paddingBottom: Platform.OS === "ios" ? 9 : undefined paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
} }
}, },
flexDirection: null, flexDirection: null,
minHeight: variables.inputHeightBase + 15 minHeight: variables.inputHeightBase + 15
}, },
".inlineLabel": { '.inlineLabel': {
"NativeBase.Label": { 'NativeBase.Label': {
position: null, position: null,
top: null, top: null,
left: null, left: null,
@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => {
width: null, width: null,
fontSize: variables.inputFontSize fontSize: variables.inputFontSize
}, },
"NativeBase.Input": { 'NativeBase.Input': {
paddingLeft: 5, paddingLeft: 5,
fontSize: variables.inputFontSize fontSize: variables.inputFontSize
}, },
flexDirection: "row" flexDirection: 'row'
}, },
"NativeBase.Label": { 'NativeBase.Label': {
fontSize: variables.inputFontSize, fontSize: variables.inputFontSize,
color: variables.inputColorPlaceholder, color: variables.inputColorPlaceholder,
paddingRight: 5 paddingRight: 5
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
fontSize: 24, fontSize: 24,
paddingRight: 8 paddingRight: 8
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
fontSize: 24, fontSize: 24,
paddingRight: 8 paddingRight: 8
}, },
"NativeBase.Input": { 'NativeBase.Input': {
".multiline": { '.multiline': {
height: null height: null
}, },
height: variables.inputHeightBase, height: variables.inputHeightBase,
color: variables.inputColor, color: variables.inputColor,
flex: 1, flex: 1,
top: Platform.OS === "ios" ? 1.5 : undefined, top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
fontSize: variables.inputFontSize fontSize: variables.inputFontSize
}, },
".underline": { '.underline': {
"NativeBase.Input": { 'NativeBase.Input': {
paddingLeft: 15 paddingLeft: 15
}, },
".success": { '.success': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => {
borderLeftWidth: 0, borderLeftWidth: 0,
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".regular": { '.regular': {
"NativeBase.Input": { 'NativeBase.Input': {
paddingLeft: 8 paddingLeft: 8
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
paddingLeft: 10 paddingLeft: 10
}, },
".success": { '.success': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".rounded": { '.rounded': {
"NativeBase.Input": { 'NativeBase.Input': {
paddingLeft: 8 paddingLeft: 8
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
paddingLeft: 10 paddingLeft: 10
}, },
".success": { '.success': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".success": { '.success': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.inputSuccessBorderColor color: variables.inputSuccessBorderColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.inputSuccessBorderColor color: variables.inputSuccessBorderColor
}, },
".rounded": { '.rounded': {
borderRadius: 30, borderRadius: 30,
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".regular": { '.regular': {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".underline": { '.underline': {
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
borderTopWidth: 0, borderTopWidth: 0,
borderRightWidth: 0, borderRightWidth: 0,
@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputSuccessBorderColor borderColor: variables.inputSuccessBorderColor
}, },
".error": { '.error': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.inputErrorBorderColor color: variables.inputErrorBorderColor
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.inputErrorBorderColor color: variables.inputErrorBorderColor
}, },
".rounded": { '.rounded': {
borderRadius: 30, borderRadius: 30,
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
".regular": { '.regular': {
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
".underline": { '.underline': {
borderWidth: variables.borderWidth * 2, borderWidth: variables.borderWidth * 2,
borderTopWidth: 0, borderTopWidth: 0,
borderRightWidth: 0, borderRightWidth: 0,
@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => {
}, },
borderColor: variables.inputErrorBorderColor borderColor: variables.inputErrorBorderColor
}, },
".disabled": { '.disabled': {
"NativeBase.Icon": { 'NativeBase.Icon': {
color: "#384850" color: '#384850'
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: "#384850" color: '#384850'
} }
}, },
".picker": { '.picker': {
marginLeft: 0 marginLeft: 0
}, },
@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => {
borderRightWidth: 0, borderRightWidth: 0,
borderLeftWidth: 0, borderLeftWidth: 0,
borderColor: variables.inputBorderColor, borderColor: variables.inputBorderColor,
backgroundColor: "transparent", backgroundColor: 'transparent',
flexDirection: "row", flexDirection: 'row',
alignItems: "center", alignItems: 'center',
marginLeft: 2 marginLeft: 2
}; };

6
native-base-theme/components/Label.js
View file

@ -1,10 +1,8 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const labelTheme = { const labelTheme = {
".focused": { '.focused': {
width: 0 width: 0
}, },
fontSize: 17 fontSize: 17

6
native-base-theme/components/Left.js
View file

@ -1,12 +1,10 @@
// @flow // @flow
import variable from './../variables/platform'; export default () => {
export default (variables /*: * */ = variable) => {
const leftTheme = { const leftTheme = {
flex: 1, flex: 1,
alignSelf: 'center', alignSelf: 'center',
alignItems: 'flex-start', alignItems: 'flex-start'
}; };
return leftTheme; return leftTheme;

324
native-base-theme/components/ListItem.js
View file

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

8
native-base-theme/components/Picker.android.js
View file

@ -1,11 +1,9 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const pickerTheme = { const pickerTheme = {
".note": { '.note': {
color: "#8F8E95" color: '#8F8E95'
}, },
// width: 90, // width: 90,
marginRight: -4, marginRight: -4,

4
native-base-theme/components/Picker.ios.js
View file

@ -1,8 +1,6 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const pickerTheme = {}; const pickerTheme = {};
return pickerTheme; return pickerTheme;

8
native-base-theme/components/Picker.js
View file

@ -1,11 +1,9 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const pickerTheme = { const pickerTheme = {
".note": { '.note': {
color: "#8F8E95" color: '#8F8E95'
}, },
// width: 90, // width: 90,
marginRight: -4, marginRight: -4,

35
native-base-theme/components/Radio.js
View file

@ -1,26 +1,29 @@
// @flow // @flow
import { Platform } from "react-native"; import { Platform } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const radioTheme = { const radioTheme = {
".selected": { '.selected': {
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: Platform.OS === "ios" color:
? variables.radioColor Platform.OS === PLATFORM.IOS
: variables.radioSelectedColorAndroid, ? variables.radioColor
lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight, : variables.radioSelectedColorAndroid,
height: Platform.OS === "ios" ? 20 : undefined lineHeight:
Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
height: Platform.OS === PLATFORM.IOS ? 20 : undefined
} }
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: Platform.OS === "ios" ? "transparent" : undefined, color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
lineHeight: Platform.OS === "ios" lineHeight:
? undefined Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
: variables.radioBtnLineHeight, fontSize:
fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
} }
}; };

8
native-base-theme/components/Right.js
View file

@ -1,15 +1,13 @@
// @flow // @flow
import variable from './../variables/platform'; export default () => {
export default (variables /*: * */ = variable) => {
const rightTheme = { const rightTheme = {
'NativeBase.Button': { 'NativeBase.Button': {
alignSelf: null, alignSelf: null
}, },
flex: 1, flex: 1,
alignSelf: 'center', alignSelf: 'center',
alignItems: 'flex-end', alignItems: 'flex-end'
}; };
return rightTheme; return rightTheme;

37
native-base-theme/components/Segment.js
View file

@ -1,50 +1,51 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platform = variables.platform; const platform = variables.platform;
const segmentTheme = { const segmentTheme = {
height: 45, height: 45,
borderColor: variables.segmentBorderColorMain, borderColor: variables.segmentBorderColorMain,
flexDirection: "row", flexDirection: 'row',
justifyContent: "center", justifyContent: 'center',
backgroundColor: variables.segmentBackgroundColor, backgroundColor: variables.segmentBackgroundColor,
"NativeBase.Button": { 'NativeBase.Button': {
alignSelf: "center", alignSelf: 'center',
borderRadius: 0, borderRadius: 0,
paddingTop: 3, paddingTop: 3,
paddingBottom: 3, paddingBottom: 3,
height: 30, height: 30,
backgroundColor: "transparent", backgroundColor: 'transparent',
borderWidth: 1, borderWidth: 1,
borderLeftWidth: 0, borderLeftWidth: 0,
borderColor: variables.segmentBorderColor, borderColor: variables.segmentBorderColor,
elevation: 0, elevation: 0,
".active": { '.active': {
backgroundColor: variables.segmentActiveBackgroundColor, backgroundColor: variables.segmentActiveBackgroundColor,
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.segmentActiveTextColor color: variables.segmentActiveTextColor
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.segmentActiveTextColor color: variables.segmentActiveTextColor
} }
}, },
".first": { '.first': {
borderTopLeftRadius: platform === "ios" ? 5 : undefined, borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
borderBottomLeftRadius: platform === "ios" ? 5 : undefined, borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
borderLeftWidth: 1 borderLeftWidth: 1
}, },
".last": { '.last': {
borderTopRightRadius: platform === "ios" ? 5 : undefined, borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
borderBottomRightRadius: platform === "ios" ? 5 : undefined borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.segmentTextColor, color: variables.segmentTextColor,
fontSize: 14 fontSize: 14
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
fontSize: 22, fontSize: 22,
paddingTop: 0, paddingTop: 0,
color: variables.segmentTextColor color: variables.segmentTextColor

20
native-base-theme/components/Separator.js
View file

@ -2,7 +2,7 @@
import variable from './../variables/platform'; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const theme = { const theme = {
'.group': { '.group': {
height: 50, height: 50,
@ -11,38 +11,38 @@ export default (variables /*: * */ = variable) => {
'.bordered': { '.bordered': {
height: 50, height: 50,
paddingVertical: variables.listItemPadding - 8, paddingVertical: variables.listItemPadding - 8,
paddingTop: variables.listItemPadding + 12, paddingTop: variables.listItemPadding + 12
}, }
}, },
'.bordered': { '.bordered': {
'.noTopBorder': { '.noTopBorder': {
borderTopWidth: 0, borderTopWidth: 0
}, },
'.noBottomBorder': { '.noBottomBorder': {
borderBottomWidth: 0, borderBottomWidth: 0
}, },
height: 35, height: 35,
paddingTop: variables.listItemPadding + 2, paddingTop: variables.listItemPadding + 2,
paddingBottom: variables.listItemPadding, paddingBottom: variables.listItemPadding,
borderBottomWidth: variables.borderWidth, borderBottomWidth: variables.borderWidth,
borderTopWidth: variables.borderWidth, borderTopWidth: variables.borderWidth,
borderColor: variables.listBorderColor, borderColor: variables.listBorderColor
}, },
'NativeBase.Text': { 'NativeBase.Text': {
fontSize: variables.tabBarTextSize - 2, fontSize: variables.tabBarTextSize - 2,
color: '#777', color: '#777'
}, },
'.noTopBorder': { '.noTopBorder': {
borderTopWidth: 0, borderTopWidth: 0
}, },
'.noBottomBorder': { '.noBottomBorder': {
borderBottomWidth: 0, borderBottomWidth: 0
}, },
height: 38, height: 38,
backgroundColor: '#F0EFF5', backgroundColor: '#F0EFF5',
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
paddingLeft: variables.listItemPadding + 5, paddingLeft: variables.listItemPadding + 5
}; };
return theme; return theme;

4
native-base-theme/components/Spinner.js
View file

@ -1,8 +1,6 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const spinnerTheme = { const spinnerTheme = {
height: 80 height: 80
}; };

13
native-base-theme/components/Subtitle.js
View file

@ -1,17 +1,18 @@
// @flow // @flow
import { Platform } from "react-native"; import { Platform } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const subtitleTheme = { const subtitleTheme = {
fontSize: variables.subTitleFontSize, fontSize: variables.subTitleFontSize,
fontFamily: variables.titleFontfamily, fontFamily: variables.titleFontfamily,
color: variables.subtitleColor, color: variables.subtitleColor,
textAlign: "center", textAlign: 'center',
paddingLeft: Platform.OS === "ios" ? 4 : 0, paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
marginLeft: Platform.OS === "ios" ? undefined : -3 marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
}; };
return subtitleTheme; return subtitleTheme;

52
native-base-theme/components/SwipeRow.js
View file

@ -1,47 +1,45 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const swipeRowTheme = { const swipeRowTheme = {
"NativeBase.ListItem": { 'NativeBase.ListItem': {
".list": { '.list': {
backgroundColor: "#FFF", backgroundColor: '#FFF'
}, },
marginLeft: 0, marginLeft: 0
}, },
"NativeBase.Left": { 'NativeBase.Left': {
flex: 0, flex: 0,
alignSelf: null, alignSelf: null,
alignItems: null, alignItems: null,
"NativeBase.Button": { 'NativeBase.Button': {
flex: 1, flex: 1,
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
alignSelf: "stretch", alignSelf: 'stretch',
borderRadius: 0, borderRadius: 0
}, }
}, },
"NativeBase.Right": { 'NativeBase.Right': {
flex: 0, flex: 0,
alignSelf: null, alignSelf: null,
alignItems: null, alignItems: null,
"NativeBase.Button": { 'NativeBase.Button': {
flex: 1, flex: 1,
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
alignSelf: "stretch", alignSelf: 'stretch',
borderRadius: 0, borderRadius: 0
}, }
}, },
"NativeBase.Button": { 'NativeBase.Button': {
flex: 1, flex: 1,
height: null, height: null,
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
alignSelf: "stretch", alignSelf: 'stretch',
borderRadius: 0, borderRadius: 0
}, }
}; };
return swipeRowTheme; return swipeRowTheme;

6
native-base-theme/components/Switch.js
View file

@ -1,10 +1,8 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const switchTheme = { const switchTheme = {
marginVertical: -5, marginVertical: -5
}; };
return switchTheme; return switchTheme;

6
native-base-theme/components/Tab.js
View file

@ -1,11 +1,9 @@
// @flow // @flow
import variable from "./../variables/platform"; export default () => {
export default (variables /*: * */ = variable) => {
const tabTheme = { const tabTheme = {
flex: 1, flex: 1,
backgroundColor: "#FFF" backgroundColor: '#FFF'
}; };
return tabTheme; return tabTheme;

44
native-base-theme/components/TabBar.js
View file

@ -1,55 +1,55 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const tabBarTheme = { const tabBarTheme = {
".tabIcon": { '.tabIcon': {
height: undefined height: undefined
}, },
".vertical": { '.vertical': {
height: 60 height: 60
}, },
"NativeBase.Button": { 'NativeBase.Button': {
".transparent": { '.transparent': {
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: variables.tabFontSize, fontSize: variables.tabFontSize,
color: variables.sTabBarActiveTextColor, color: variables.sTabBarActiveTextColor,
fontWeight: "400" fontWeight: '400'
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.sTabBarActiveTextColor color: variables.sTabBarActiveTextColor
} }
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
color: variables.sTabBarActiveTextColor color: variables.sTabBarActiveTextColor
}, },
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: variables.tabFontSize, fontSize: variables.tabFontSize,
color: variables.sTabBarActiveTextColor, color: variables.sTabBarActiveTextColor,
fontWeight: "400" fontWeight: '400'
}, },
".isTabActive": { '.isTabActive': {
"NativeBase.Text": { 'NativeBase.Text': {
fontWeight: "900" fontWeight: '900'
} }
}, },
flex: 1, flex: 1,
alignSelf: "stretch", alignSelf: 'stretch',
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
borderRadius: null, borderRadius: null,
borderBottomColor: "transparent", borderBottomColor: 'transparent',
backgroundColor: variables.tabBgColor backgroundColor: variables.tabBgColor
}, },
height: 45, height: 45,
flexDirection: "row", flexDirection: 'row',
justifyContent: "space-around", justifyContent: 'space-around',
borderWidth: 1, borderWidth: 1,
borderTopWidth: 0, borderTopWidth: 0,
borderLeftWidth: 0, borderLeftWidth: 0,
borderRightWidth: 0, borderRightWidth: 0,
borderBottomColor: "#ccc", borderBottomColor: '#ccc',
backgroundColor: variables.tabBgColor backgroundColor: variables.tabBgColor
}; };

26
native-base-theme/components/TabContainer.js
View file

@ -1,24 +1,24 @@
// @flow // @flow
import variable from "./../variables/platform"; import { Platform } from 'react-native';
import { Platform } from "react-native";
export default (variables /*: * */ = variable) => { import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const platformStyle = variables.platformStyle; const platformStyle = variables.platformStyle;
const platform = variables.platform;
const tabContainerTheme = { const tabContainerTheme = {
elevation: 3, elevation: 3,
height: 50, height: 50,
flexDirection: "row", flexDirection: 'row',
shadowColor: platformStyle === "material" ? "#000" : undefined, shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
shadowOffset: platformStyle === "material" shadowOffset:
? { width: 0, height: 2 } platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
: undefined, shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined, shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined, justifyContent: 'space-around',
justifyContent: "space-around", borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
borderColor: variables.topTabBarBorderColor borderColor: variables.topTabBarBorderColor
}; };

31
native-base-theme/components/TabHeading.js
View file

@ -1,35 +1,36 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platform = variables.platform; const platform = variables.platform;
const tabHeadingTheme = { const tabHeadingTheme = {
flexDirection: "row", flexDirection: 'row',
backgroundColor: variables.tabDefaultBg, backgroundColor: variables.tabDefaultBg,
flex: 1, flex: 1,
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
".scrollable": { '.scrollable': {
paddingHorizontal: 20, paddingHorizontal: 20,
flex: platform === "android" ? 0 : 1, flex: platform === PLATFORM.ANDROID ? 0 : 1,
minWidth: platform === "android" ? undefined : 60 minWidth: platform === PLATFORM.ANDROID ? undefined : 60
}, },
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.topTabBarTextColor, color: variables.topTabBarTextColor,
marginHorizontal: 7 marginHorizontal: 7
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.topTabBarTextColor, color: variables.topTabBarTextColor,
fontSize: platform === "ios" ? 26 : undefined fontSize: platform === PLATFORM.IOS ? 26 : undefined
}, },
".active": { '.active': {
"NativeBase.Text": { 'NativeBase.Text': {
color: variables.topTabBarActiveTextColor, color: variables.topTabBarActiveTextColor,
fontWeight: "600" fontWeight: '600'
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
color: variables.topTabBarActiveTextColor color: variables.topTabBarActiveTextColor
} }
} }

8
native-base-theme/components/Text.js
View file

@ -1,14 +1,14 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const textTheme = { const textTheme = {
fontSize: variables.DefaultFontSize, fontSize: variables.DefaultFontSize,
fontFamily: variables.fontFamily, fontFamily: variables.fontFamily,
color: variables.textColor, color: variables.textColor,
".note": { '.note': {
color: "#a7a7a7", color: '#a7a7a7',
fontSize: variables.noteFontSize fontSize: variables.noteFontSize
} }
}; };

10
native-base-theme/components/Textarea.js
View file

@ -1,15 +1,15 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const textAreaTheme = { const textAreaTheme = {
".underline": { '.underline': {
borderBottomWidth: variables.borderWidth, borderBottomWidth: variables.borderWidth,
marginTop: 5, marginTop: 5,
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
}, },
".bordered": { '.bordered': {
borderWidth: 1, borderWidth: 1,
marginTop: 5, marginTop: 5,
borderColor: variables.inputBorderColor borderColor: variables.inputBorderColor
@ -18,7 +18,7 @@ export default (variables /*: * */ = variable) => {
paddingLeft: 10, paddingLeft: 10,
paddingRight: 5, paddingRight: 5,
fontSize: 15, fontSize: 15,
textAlignVertical: "top" textAlignVertical: 'top'
}; };
return textAreaTheme; return textAreaTheme;

20
native-base-theme/components/Thumbnail.js
View file

@ -1,41 +1,39 @@
// @flow // @flow
import variable from './../variables/platform'; export default () => {
export default (variables /*: * */ = variable) => {
const thumbnailTheme = { const thumbnailTheme = {
'.square': { '.square': {
borderRadius: 0, borderRadius: 0,
'.small': { '.small': {
width: 36, width: 36,
height: 36, height: 36,
borderRadius: 0, borderRadius: 0
}, },
'.large': { '.large': {
width: 80, width: 80,
height: 80, height: 80,
borderRadius: 0, borderRadius: 0
}, }
}, },
'.small': { '.small': {
width: 36, width: 36,
height: 36, height: 36,
borderRadius: 18, borderRadius: 18,
'.square': { '.square': {
borderRadius: 0, borderRadius: 0
}, }
}, },
'.large': { '.large': {
width: 80, width: 80,
height: 80, height: 80,
borderRadius: 40, borderRadius: 40,
'.square': { '.square': {
borderRadius: 0, borderRadius: 0
}, }
}, },
width: 56, width: 56,
height: 56, height: 56,
borderRadius: 28, borderRadius: 28
}; };
return thumbnailTheme; return thumbnailTheme;

15
native-base-theme/components/Title.js
View file

@ -1,18 +1,19 @@
// @flow // @flow
import { Platform } from "react-native"; import { Platform } from 'react-native';
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const titleTheme = { const titleTheme = {
fontSize: variables.titleFontSize, fontSize: variables.titleFontSize,
fontFamily: variables.titleFontfamily, fontFamily: variables.titleFontfamily,
color: variables.titleFontColor, color: variables.titleFontColor,
fontWeight: Platform.OS === "ios" ? "700" : undefined, fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
textAlign: "center", textAlign: 'center',
paddingLeft: Platform.OS === "ios" ? 4 : 0, paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
marginLeft: Platform.OS === "ios" ? undefined : -3, marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
paddingTop: 1 paddingTop: 1
}; };

31
native-base-theme/components/Toast.js
View file

@ -1,36 +1,37 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const platform = variables.platform; const platform = variables.platform;
const toastTheme = { const toastTheme = {
".danger": { '.danger': {
backgroundColor: variables.brandDanger backgroundColor: variables.brandDanger
}, },
".warning": { '.warning': {
backgroundColor: variables.brandWarning backgroundColor: variables.brandWarning
}, },
".success": { '.success': {
backgroundColor: variables.brandSuccess backgroundColor: variables.brandSuccess
}, },
backgroundColor: "rgba(0,0,0,0.8)", backgroundColor: 'rgba(0,0,0,0.8)',
borderRadius: platform === "ios" ? 5 : 0, borderRadius: platform === PLATFORM.IOS ? 5 : 0,
flexDirection: "row", flexDirection: 'row',
justifyContent: "space-between", justifyContent: 'space-between',
alignItems: "center", alignItems: 'center',
padding: 10, padding: 10,
minHeight: 50, minHeight: 50,
"NativeBase.Text": { 'NativeBase.Text': {
color: "#fff", color: '#fff',
flex: 1 flex: 1
}, },
"NativeBase.Button": { 'NativeBase.Button': {
backgroundColor: "transparent", backgroundColor: 'transparent',
height: 30, height: 30,
elevation: 0, elevation: 0,
"NativeBase.Text": { 'NativeBase.Text': {
fontSize: 14 fontSize: 14
} }
} }

6
native-base-theme/components/View.js
View file

@ -1,10 +1,10 @@
// @flow // @flow
import variable from "./../variables/platform"; import variable from './../variables/platform';
export default (variables /*: * */ = variable) => { export default (variables /* : * */ = variable) => {
const viewTheme = { const viewTheme = {
".padder": { '.padder': {
padding: variables.contentPadding padding: variables.contentPadding
} }
}; };

197
native-base-theme/components/index.js
View file

@ -1,216 +1,218 @@
/* eslint-disable no-param-reassign */
// @flow // @flow
import _ from "lodash"; import _ from 'lodash';
import bodyTheme from "./Body";
import leftTheme from "./Left";
import rightTheme from "./Right";
import headerTheme from "./Header";
import switchTheme from "./Switch";
import thumbnailTheme from "./Thumbnail";
import containerTheme from "./Container";
import contentTheme from "./Content";
import buttonTheme from "./Button";
import titleTheme from "./Title";
import subtitleTheme from "./Subtitle";
import inputGroupTheme from "./InputGroup";
import badgeTheme from "./Badge";
import checkBoxTheme from "./CheckBox";
import cardTheme from "./Card";
import radioTheme from "./Radio";
import h3Theme from "./H3";
import h2Theme from "./H2";
import h1Theme from "./H1";
import footerTheme from "./Footer";
import footerTabTheme from "./FooterTab";
import fabTheme from "./Fab";
import itemTheme from "./Item";
import labelTheme from "./Label";
import textAreaTheme from "./Textarea";
import textTheme from "./Text";
import toastTheme from "./Toast";
import tabTheme from "./Tab";
import tabBarTheme from "./TabBar";
import tabContainerTheme from "./TabContainer";
import viewTheme from "./View";
import tabHeadingTheme from "./TabHeading";
import iconTheme from "./Icon";
import inputTheme from "./Input";
import swipeRowTheme from "./SwipeRow";
import segmentTheme from "./Segment";
import spinnerTheme from "./Spinner";
import cardItemTheme from "./CardItem";
import listItemTheme from "./ListItem";
import formTheme from "./Form";
import separatorTheme from "./Separator";
import pickerTheme from "./Picker"
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => { import bodyTheme from './Body';
import leftTheme from './Left';
import rightTheme from './Right';
import headerTheme from './Header';
import switchTheme from './Switch';
import thumbnailTheme from './Thumbnail';
import containerTheme from './Container';
import contentTheme from './Content';
import buttonTheme from './Button';
import titleTheme from './Title';
import subtitleTheme from './Subtitle';
import inputGroupTheme from './InputGroup';
import badgeTheme from './Badge';
import checkBoxTheme from './CheckBox';
import cardTheme from './Card';
import radioTheme from './Radio';
import h3Theme from './H3';
import h2Theme from './H2';
import h1Theme from './H1';
import footerTheme from './Footer';
import footerTabTheme from './FooterTab';
import fabTheme from './Fab';
import itemTheme from './Item';
import labelTheme from './Label';
import textAreaTheme from './Textarea';
import textTheme from './Text';
import toastTheme from './Toast';
import tabTheme from './Tab';
import tabBarTheme from './TabBar';
import tabContainerTheme from './TabContainer';
import viewTheme from './View';
import tabHeadingTheme from './TabHeading';
import iconTheme from './Icon';
import inputTheme from './Input';
import swipeRowTheme from './SwipeRow';
import segmentTheme from './Segment';
import spinnerTheme from './Spinner';
import cardItemTheme from './CardItem';
import listItemTheme from './ListItem';
import formTheme from './Form';
import separatorTheme from './Separator';
import pickerTheme from './Picker';
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const theme = { const theme = {
variables, variables,
"NativeBase.Left": { 'NativeBase.Left': {
...leftTheme(variables) ...leftTheme(variables)
}, },
"NativeBase.Right": { 'NativeBase.Right': {
...rightTheme(variables) ...rightTheme(variables)
}, },
"NativeBase.Body": { 'NativeBase.Body': {
...bodyTheme(variables) ...bodyTheme(variables)
}, },
"NativeBase.Header": { 'NativeBase.Header': {
...headerTheme(variables) ...headerTheme(variables)
}, },
"NativeBase.Button": { 'NativeBase.Button': {
...buttonTheme(variables) ...buttonTheme(variables)
}, },
"NativeBase.Title": { 'NativeBase.Title': {
...titleTheme(variables) ...titleTheme(variables)
}, },
"NativeBase.Subtitle": { 'NativeBase.Subtitle': {
...subtitleTheme(variables) ...subtitleTheme(variables)
}, },
"NativeBase.InputGroup": { 'NativeBase.InputGroup': {
...inputGroupTheme(variables) ...inputGroupTheme(variables)
}, },
"NativeBase.Input": { 'NativeBase.Input': {
...inputTheme(variables) ...inputTheme(variables)
}, },
"NativeBase.Badge": { 'NativeBase.Badge': {
...badgeTheme(variables) ...badgeTheme(variables)
}, },
"NativeBase.CheckBox": { 'NativeBase.CheckBox': {
...checkBoxTheme(variables) ...checkBoxTheme(variables)
}, },
"NativeBase.Radio": { 'NativeBase.Radio': {
...radioTheme(variables) ...radioTheme(variables)
}, },
"NativeBase.Card": { 'NativeBase.Card': {
...cardTheme(variables) ...cardTheme(variables)
}, },
"NativeBase.CardItem": { 'NativeBase.CardItem': {
...cardItemTheme(variables) ...cardItemTheme(variables)
}, },
"NativeBase.Toast": { 'NativeBase.Toast': {
...toastTheme(variables) ...toastTheme(variables)
}, },
"NativeBase.H1": { 'NativeBase.H1': {
...h1Theme(variables) ...h1Theme(variables)
}, },
"NativeBase.H2": { 'NativeBase.H2': {
...h2Theme(variables) ...h2Theme(variables)
}, },
"NativeBase.H3": { 'NativeBase.H3': {
...h3Theme(variables) ...h3Theme(variables)
}, },
"NativeBase.Form": { 'NativeBase.Form': {
...formTheme(variables) ...formTheme(variables)
}, },
"NativeBase.Container": { 'NativeBase.Container': {
...containerTheme(variables) ...containerTheme(variables)
}, },
"NativeBase.Content": { 'NativeBase.Content': {
...contentTheme(variables) ...contentTheme(variables)
}, },
"NativeBase.Footer": { 'NativeBase.Footer': {
...footerTheme(variables) ...footerTheme(variables)
}, },
"NativeBase.Tabs": { 'NativeBase.Tabs': {
flex: 1 flex: 1
}, },
"NativeBase.FooterTab": { 'NativeBase.FooterTab': {
...footerTabTheme(variables) ...footerTabTheme(variables)
}, },
"NativeBase.ListItem": { 'NativeBase.ListItem': {
...listItemTheme(variables) ...listItemTheme(variables)
}, },
"NativeBase.ListItem1": { 'NativeBase.ListItem1': {
...listItemTheme(variables) ...listItemTheme(variables)
}, },
"NativeBase.Icon": { 'NativeBase.Icon': {
...iconTheme(variables) ...iconTheme(variables)
}, },
"NativeBase.IconNB": { 'NativeBase.IconNB': {
...iconTheme(variables) ...iconTheme(variables)
}, },
"NativeBase.Text": { 'NativeBase.Text': {
...textTheme(variables) ...textTheme(variables)
}, },
"NativeBase.Spinner": { 'NativeBase.Spinner': {
...spinnerTheme(variables) ...spinnerTheme(variables)
}, },
"NativeBase.Fab": { 'NativeBase.Fab': {
...fabTheme(variables) ...fabTheme(variables)
}, },
"NativeBase.Item": { 'NativeBase.Item': {
...itemTheme(variables) ...itemTheme(variables)
}, },
"NativeBase.Label": { 'NativeBase.Label': {
...labelTheme(variables) ...labelTheme(variables)
}, },
"NativeBase.Textarea": { 'NativeBase.Textarea': {
...textAreaTheme(variables) ...textAreaTheme(variables)
}, },
"NativeBase.PickerNB": { 'NativeBase.PickerNB': {
...pickerTheme(variables), ...pickerTheme(variables),
"NativeBase.Button": { 'NativeBase.Button': {
"NativeBase.Text": {} 'NativeBase.Text': {}
} }
}, },
"NativeBase.Tab": { 'NativeBase.Tab': {
...tabTheme(variables) ...tabTheme(variables)
}, },
"NativeBase.Segment": { 'NativeBase.Segment': {
...segmentTheme(variables) ...segmentTheme(variables)
}, },
"NativeBase.TabBar": { 'NativeBase.TabBar': {
...tabBarTheme(variables) ...tabBarTheme(variables)
}, },
"NativeBase.ViewNB": { 'NativeBase.ViewNB': {
...viewTheme(variables) ...viewTheme(variables)
}, },
"NativeBase.TabHeading": { 'NativeBase.TabHeading': {
...tabHeadingTheme(variables) ...tabHeadingTheme(variables)
}, },
"NativeBase.TabContainer": { 'NativeBase.TabContainer': {
...tabContainerTheme(variables) ...tabContainerTheme(variables)
}, },
"NativeBase.Switch": { 'NativeBase.Switch': {
...switchTheme(variables) ...switchTheme(variables)
}, },
"NativeBase.Separator": { 'NativeBase.Separator': {
...separatorTheme(variables) ...separatorTheme(variables)
}, },
"NativeBase.SwipeRow": { 'NativeBase.SwipeRow': {
...swipeRowTheme(variables) ...swipeRowTheme(variables)
}, },
"NativeBase.Thumbnail": { 'NativeBase.Thumbnail': {
...thumbnailTheme(variables) ...thumbnailTheme(variables)
} }
}; };
@ -218,9 +220,9 @@ export default (variables /*: * */ = variable) => {
const cssifyTheme = (grandparent, parent, parentKey) => { const cssifyTheme = (grandparent, parent, parentKey) => {
_.forEach(parent, (style, styleName) => { _.forEach(parent, (style, styleName) => {
if ( if (
styleName.indexOf(".") === 0 && styleName.indexOf('.') === 0 &&
parentKey && parentKey &&
parentKey.indexOf(".") === 0 parentKey.indexOf('.') === 0
) { ) {
if (grandparent) { if (grandparent) {
if (!grandparent[styleName]) { if (!grandparent[styleName]) {
@ -230,7 +232,12 @@ export default (variables /*: * */ = variable) => {
} }
} }
} }
if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") { if (
style &&
typeof style === 'object' &&
styleName !== 'fontVariant' &&
styleName !== 'transform'
) {
cssifyTheme(parent, style, styleName); cssifyTheme(parent, style, styleName);
} }
}); });

270
native-base-theme/variables/commonColor.js
View file

@ -1,79 +1,104 @@
// @flow // @flow
import color from "color"; import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import { Platform, Dimensions, PixelRatio } from "react-native"; export const PLATFORM = {
ANDROID: 'android',
IOS: 'ios',
MATERIAL: 'material',
WEB: 'web'
};
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS; const platform = Platform.OS;
const platformStyle = undefined; const platformStyle = undefined;
const isIphoneX = const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); platform === PLATFORM.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default { export default {
platformStyle, platformStyle,
platform, platform,
//Accordion // Accordion
headerStyle: "#edebed", headerStyle: '#edebed',
iconStyle: "#000", iconStyle: '#000',
contentStyle: "#f5f4f5", contentStyle: '#f5f4f5',
expandedIconStyle: "#000", expandedIconStyle: '#000',
accordionBorderColor: "#d3d3d3", accordionBorderColor: '#d3d3d3',
//Android // ActionSheet
elevation: 4,
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
innerTouchableBackgroundColor: '#fff',
listItemHeight: 50,
listItemBorderColor: 'transparent',
marginHorizontal: -15,
marginLeft: 14,
marginTop: 15,
minHeight: 56,
padding: 15,
touchableTextColor: '#757575',
// Android
androidRipple: true, androidRipple: true,
androidRippleColor: "rgba(256, 256, 256, 0.3)", androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: "rgba(0, 0, 0, 0.15)", androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
btnUppercaseAndroidText: true, buttonUppercaseAndroidText: true,
// Badge // Badge
badgeBg: "#ED1727", badgeBg: '#ED1727',
badgeColor: "#fff", badgeColor: '#fff',
badgePadding: platform === "ios" ? 3 : 0, badgePadding: platform === PLATFORM.IOS ? 3 : 0,
// Button // Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
btnDisabledBg: "#b5b5b5", buttonDisabledBg: '#b5b5b5',
buttonPadding: 6, buttonPadding: 6,
get btnPrimaryBg() { get buttonPrimaryBg() {
return this.brandPrimary; return this.brandPrimary;
}, },
get btnPrimaryColor() { get buttonPrimaryColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnInfoBg() { get buttonInfoBg() {
return this.brandInfo; return this.brandInfo;
}, },
get btnInfoColor() { get buttonInfoColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnSuccessBg() { get buttonSuccessBg() {
return this.brandSuccess; return this.brandSuccess;
}, },
get btnSuccessColor() { get buttonSuccessColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnDangerBg() { get buttonDangerBg() {
return this.brandDanger; return this.brandDanger;
}, },
get btnDangerColor() { get buttonDangerColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnWarningBg() { get buttonWarningBg() {
return this.brandWarning; return this.brandWarning;
}, },
get btnWarningColor() { get buttonWarningColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnTextSize() { get buttonTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
}, },
get btnTextSizeLarge() { get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5; return this.fontSizeBase * 1.5;
}, },
get btnTextSizeSmall() { get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8; return this.fontSizeBase * 0.8;
}, },
get borderRadiusLarge() { get borderRadiusLarge() {
@ -87,42 +112,45 @@ export default {
}, },
// Card // Card
cardDefaultBg: "#fff", cardDefaultBg: '#fff',
cardBorderColor: "#ccc", cardBorderColor: '#ccc',
cardBorderRadius: 2, cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12, cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox // CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0, CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2, CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2, CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5, CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16, CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1, CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17, CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
checkboxBgColor: "#039BE5", checkboxBgColor: '#039BE5',
checkboxSize: 20, checkboxSize: 20,
checkboxTickColor: "#fff", checkboxTickColor: '#fff',
// Color // Color
brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
brandInfo: "#62B1F6", brandInfo: '#62B1F6',
brandSuccess: "#5cb85c", brandSuccess: '#5cb85c',
brandDanger: "#d9534f", brandDanger: '#d9534f',
brandWarning: "#f0ad4e", brandWarning: '#f0ad4e',
brandDark: "#000", brandDark: '#000',
brandLight: "#f4f4f4", brandLight: '#f4f4f4',
//Container // Container
containerBgColor: "#fff", containerBgColor: '#fff',
//Date Picker // Date Picker
datePickerTextColor: "#000", datePickerTextColor: '#000',
datePickerBg: "transparent", datePickerBg: 'transparent',
// FAB
fabWidth: 56,
// Font // Font
DefaultFontSize: 16, DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto", fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15, fontSizeBase: 15,
get fontSizeH1() { get fontSizeH1() {
return this.fontSizeBase * 1.8; return this.fontSizeBase * 1.8;
@ -136,28 +164,28 @@ export default {
// Footer // Footer
footerHeight: 55, footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
footerPaddingBottom: 0, footerPaddingBottom: 0,
// FooterTab // FooterTab
tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea", tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
tabBarTextSize: platform === "ios" ? 14 : 11, tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff", activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
sTabBarActiveTextColor: "#007aff", sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff", tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
// Header // Header
toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff", toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
toolbarHeight: platform === "ios" ? 64 : 56, toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23, toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
searchBarHeight: platform === "ios" ? 30 : 40, searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50, searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff", toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
iosStatusbar: "dark-content", iosStatusbar: 'dark-content',
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
get statusBarColor() { get statusBarColor() {
return color(this.toolbarDefaultBg) return color(this.toolbarDefaultBg)
.darken(0.2) .darken(0.2)
@ -170,102 +198,102 @@ export default {
}, },
// Icon // Icon
iconFamily: "Ionicons", iconFamily: 'Ionicons',
iconFontSize: platform === "ios" ? 30 : 28, iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24, iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup // InputGroup
inputFontSize: 17, inputFontSize: 17,
inputBorderColor: "#D9D5DC", inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: "#2b8339", inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: "#ed2f2f", inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50, inputHeightBase: 50,
get inputColor() { get inputColor() {
return this.textColor; return this.textColor;
}, },
get inputColorPlaceholder() { get inputColorPlaceholder() {
return "#575757"; return '#575757';
}, },
// Line Height // Line Height
btnLineHeight: 19, buttonLineHeight: 19,
lineHeightH1: 32, lineHeightH1: 32,
lineHeightH2: 27, lineHeightH2: 27,
lineHeightH3: 22, lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24, lineHeight: platform === PLATFORM.IOS ? 20 : 24,
// List // List
listBg: "transparent", listBg: 'transparent',
listBorderColor: "#c9c9c9", listBorderColor: '#c9c9c9',
listDividerBg: "#f4f4f4", listDividerBg: '#f4f4f4',
listBtnUnderlayColor: "#DDD", listBtnUnderlayColor: '#DDD',
listItemPadding: platform === "ios" ? 10 : 12, listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: "#808080", listNoteColor: '#808080',
listNoteSize: 13, listNoteSize: 13,
listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5", listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
// Progress Bar // Progress Bar
defaultProgressColor: "#E4202D", defaultProgressColor: '#E4202D',
inverseProgressColor: "#1A191B", inverseProgressColor: '#1A191B',
// Radio Button // Radio Button
radioBtnSize: platform === "ios" ? 25 : 23, radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: "#3F51B5", radioSelectedColorAndroid: '#3F51B5',
radioBtnLineHeight: platform === "ios" ? 29 : 24, radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() { get radioColor() {
return this.brandPrimary; return this.brandPrimary;
}, },
// Segment // Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentTextColor: platform === "ios" ? "#007aff" : "#fff", segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
// Spinner // Spinner
defaultSpinnerColor: "#45D56E", defaultSpinnerColor: '#45D56E',
inverseSpinnerColor: "#1A191B", inverseSpinnerColor: '#1A191B',
// Tab // Tab
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
// Tabs // Tabs
tabBgColor: "#F8F8F8", tabBgColor: '#F8F8F8',
tabFontSize: 15, tabFontSize: 15,
// Text // Text
textColor: "#000", textColor: '#000',
inverseTextColor: "#fff", inverseTextColor: '#fff',
noteFontSize: 14, noteFontSize: 14,
get defaultTextColor() { get defaultTextColor() {
return this.textColor; return this.textColor;
}, },
// Title // Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
titleFontSize: platform === "ios" ? 17 : 19, titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14, subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
subtitleColor: platform === "ios" ? "#000" : "#fff", subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
titleFontColor: platform === "ios" ? "#000" : "#fff", titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
// Other // Other
borderRadiusBase: platform === "ios" ? 5 : 2, borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10, contentPadding: 10,
dropdownLinkColor: "#414142", dropdownLinkColor: '#414142',
inputLineHeight: 24, inputLineHeight: 24,
deviceWidth, deviceWidth,
deviceHeight, deviceHeight,
isIphoneX, isIphoneX,
inputGroupRoundedBorderRadius: 30, inputGroupRoundedBorderRadius: 30,
//iPhoneX SafeArea // iPhoneX SafeArea
Inset: { Inset: {
portrait: { portrait: {
topInset: 24, topInset: 24,

221
native-base-theme/variables/material.js
View file

@ -1,79 +1,97 @@
// @flow // @flow
import color from "color"; import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import { Platform, Dimensions, PixelRatio } from "react-native"; import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS; const platform = Platform.OS;
const platformStyle = "material"; const platformStyle = PLATFORM.MATERIAL;
const isIphoneX = const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); platform === PLATFORM.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default { export default {
platformStyle, platformStyle,
platform, platform,
//Accordion // Accordion
headerStyle: "#edebed", headerStyle: '#edebed',
iconStyle: "#000", iconStyle: '#000',
contentStyle: "#f5f4f5", contentStyle: '#f5f4f5',
expandedIconStyle: "#000", expandedIconStyle: '#000',
accordionBorderColor: "#d3d3d3", accordionBorderColor: '#d3d3d3',
// ActionSheet
elevation: 4,
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
innerTouchableBackgroundColor: '#fff',
listItemHeight: 50,
listItemBorderColor: 'transparent',
marginHorizontal: -15,
marginLeft: 14,
marginTop: 15,
minHeight: 56,
padding: 15,
touchableTextColor: '#757575',
// Android // Android
androidRipple: true, androidRipple: true,
androidRippleColor: "rgba(256, 256, 256, 0.3)", androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: "rgba(0, 0, 0, 0.15)", androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
btnUppercaseAndroidText: true, buttonUppercaseAndroidText: true,
// Badge // Badge
badgeBg: "#ED1727", badgeBg: '#ED1727',
badgeColor: "#fff", badgeColor: '#fff',
badgePadding: 0, badgePadding: 0,
// Button // Button
btnFontFamily: "Roboto", buttonFontFamily: 'Roboto',
btnDisabledBg: "#b5b5b5", buttonDisabledBg: '#b5b5b5',
buttonPadding: 6, buttonPadding: 6,
get btnPrimaryBg() { get buttonPrimaryBg() {
return this.brandPrimary; return this.brandPrimary;
}, },
get btnPrimaryColor() { get buttonPrimaryColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnInfoBg() { get buttonInfoBg() {
return this.brandInfo; return this.brandInfo;
}, },
get btnInfoColor() { get buttonInfoColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnSuccessBg() { get buttonSuccessBg() {
return this.brandSuccess; return this.brandSuccess;
}, },
get btnSuccessColor() { get buttonSuccessColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnDangerBg() { get buttonDangerBg() {
return this.brandDanger; return this.brandDanger;
}, },
get btnDangerColor() { get buttonDangerColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnWarningBg() { get buttonWarningBg() {
return this.brandWarning; return this.brandWarning;
}, },
get btnWarningColor() { get buttonWarningColor() {
return this.inverseTextColor; return this.inverseTextColor;
}, },
get btnTextSize() { get buttonTextSize() {
return this.fontSizeBase - 1; return this.fontSizeBase - 1;
}, },
get btnTextSizeLarge() { get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5; return this.fontSizeBase * 1.5;
}, },
get btnTextSizeSmall() { get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8; return this.fontSizeBase * 0.8;
}, },
get borderRadiusLarge() { get borderRadiusLarge() {
@ -87,10 +105,10 @@ export default {
}, },
// Card // Card
cardDefaultBg: "#fff", cardDefaultBg: '#fff',
cardBorderColor: "#ccc", cardBorderColor: '#ccc',
cardBorderRadius: 2, cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12, cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox // CheckBox
CheckboxRadius: 0, CheckboxRadius: 0,
@ -100,29 +118,32 @@ export default {
CheckboxIconSize: 16, CheckboxIconSize: 16,
CheckboxIconMarginTop: 1, CheckboxIconMarginTop: 1,
CheckboxFontSize: 17, CheckboxFontSize: 17,
checkboxBgColor: "#039BE5", checkboxBgColor: '#039BE5',
checkboxSize: 20, checkboxSize: 20,
checkboxTickColor: "#fff", checkboxTickColor: '#fff',
// Color // Color
brandPrimary: "#3F51B5", brandPrimary: '#3F51B5',
brandInfo: "#62B1F6", brandInfo: '#62B1F6',
brandSuccess: "#5cb85c", brandSuccess: '#5cb85c',
brandDanger: "#d9534f", brandDanger: '#d9534f',
brandWarning: "#f0ad4e", brandWarning: '#f0ad4e',
brandDark: "#000", brandDark: '#000',
brandLight: "#f4f4f4", brandLight: '#f4f4f4',
//Container // Container
containerBgColor: "#fff", containerBgColor: '#fff',
//Date Picker // Date Picker
datePickerTextColor: "#000", datePickerTextColor: '#000',
datePickerBg: "transparent", datePickerBg: 'transparent',
// FAB
fabWidth: 56,
// Font // Font
DefaultFontSize: 16, DefaultFontSize: 16,
fontFamily: "Roboto", fontFamily: 'Roboto',
fontSizeBase: 15, fontSizeBase: 15,
get fontSizeH1() { get fontSizeH1() {
return this.fontSizeBase * 1.8; return this.fontSizeBase * 1.8;
@ -136,28 +157,28 @@ export default {
// Footer // Footer
footerHeight: 55, footerHeight: 55,
footerDefaultBg: "#3F51B5", footerDefaultBg: '#3F51B5',
footerPaddingBottom: 0, footerPaddingBottom: 0,
// FooterTab // FooterTab
tabBarTextColor: "#bfc6ea", tabBarTextColor: '#bfc6ea',
tabBarTextSize: 11, tabBarTextSize: 11,
activeTab: "#fff", activeTab: '#fff',
sTabBarActiveTextColor: "#007aff", sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: "#fff", tabBarActiveTextColor: '#fff',
tabActiveBgColor: "#3F51B5", tabActiveBgColor: '#3F51B5',
// Header // Header
toolbarBtnColor: "#fff", toolbarBtnColor: '#fff',
toolbarDefaultBg: "#3F51B5", toolbarDefaultBg: '#3F51B5',
toolbarHeight: 56, toolbarHeight: 56,
toolbarSearchIconSize: 23, toolbarSearchIconSize: 23,
toolbarInputColor: "#fff", toolbarInputColor: '#fff',
searchBarHeight: platform === "ios" ? 30 : 40, searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 40 : 50, searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
toolbarBtnTextColor: "#fff", toolbarBtnTextColor: '#fff',
toolbarDefaultBorder: "#3F51B5", toolbarDefaultBorder: '#3F51B5',
iosStatusbar: "light-content", iosStatusbar: 'light-content',
get statusBarColor() { get statusBarColor() {
return color(this.toolbarDefaultBg) return color(this.toolbarDefaultBg)
.darken(0.2) .darken(0.2)
@ -170,102 +191,102 @@ export default {
}, },
// Icon // Icon
iconFamily: "Ionicons", iconFamily: 'Ionicons',
iconFontSize: 28, iconFontSize: 28,
iconHeaderSize: 24, iconHeaderSize: 24,
// InputGroup // InputGroup
inputFontSize: 17, inputFontSize: 17,
inputBorderColor: "#D9D5DC", inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: "#2b8339", inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: "#ed2f2f", inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50, inputHeightBase: 50,
get inputColor() { get inputColor() {
return this.textColor; return this.textColor;
}, },
get inputColorPlaceholder() { get inputColorPlaceholder() {
return "#575757"; return '#575757';
}, },
// Line Height // Line Height
btnLineHeight: 19, buttonLineHeight: 19,
lineHeightH1: 32, lineHeightH1: 32,
lineHeightH2: 27, lineHeightH2: 27,
lineHeightH3: 22, lineHeightH3: 22,
lineHeight: 24, lineHeight: 24,
// List // List
listBg: "transparent", listBg: 'transparent',
listBorderColor: "#c9c9c9", listBorderColor: '#c9c9c9',
listDividerBg: "#f4f4f4", listDividerBg: '#f4f4f4',
listBtnUnderlayColor: "#DDD", listBtnUnderlayColor: '#DDD',
listItemPadding: 12, listItemPadding: 12,
listNoteColor: "#808080", listNoteColor: '#808080',
listNoteSize: 13, listNoteSize: 13,
listItemSelected: "#3F51B5", listItemSelected: '#3F51B5',
// Progress Bar // Progress Bar
defaultProgressColor: "#E4202D", defaultProgressColor: '#E4202D',
inverseProgressColor: "#1A191B", inverseProgressColor: '#1A191B',
// Radio Button // Radio Button
radioBtnSize: 23, radioBtnSize: 23,
radioSelectedColorAndroid: "#3F51B5", radioSelectedColorAndroid: '#3F51B5',
radioBtnLineHeight: 24, radioBtnLineHeight: 24,
get radioColor() { get radioColor() {
return this.brandPrimary; return this.brandPrimary;
}, },
// Segment // Segment
segmentBackgroundColor: "#3F51B5", segmentBackgroundColor: '#3F51B5',
segmentActiveBackgroundColor: "#fff", segmentActiveBackgroundColor: '#fff',
segmentTextColor: "#fff", segmentTextColor: '#fff',
segmentActiveTextColor: "#3F51B5", segmentActiveTextColor: '#3F51B5',
segmentBorderColor: "#fff", segmentBorderColor: '#fff',
segmentBorderColorMain: "#3F51B5", segmentBorderColorMain: '#3F51B5',
// Spinner // Spinner
defaultSpinnerColor: "#45D56E", defaultSpinnerColor: '#45D56E',
inverseSpinnerColor: "#1A191B", inverseSpinnerColor: '#1A191B',
// Tab // Tab
tabDefaultBg: "#3F51B5", tabDefaultBg: '#3F51B5',
topTabBarTextColor: "#b3c7f9", topTabBarTextColor: '#b3c7f9',
topTabBarActiveTextColor: "#fff", topTabBarActiveTextColor: '#fff',
topTabBarBorderColor: "#fff", topTabBarBorderColor: '#fff',
topTabBarActiveBorderColor: "#fff", topTabBarActiveBorderColor: '#fff',
// Tabs // Tabs
tabBgColor: "#F8F8F8", tabBgColor: '#F8F8F8',
tabFontSize: 15, tabFontSize: 15,
// Text // Text
textColor: "#000", textColor: '#000',
inverseTextColor: "#fff", inverseTextColor: '#fff',
noteFontSize: 14, noteFontSize: 14,
get defaultTextColor() { get defaultTextColor() {
return this.textColor; return this.textColor;
}, },
// Title // Title
titleFontfamily: "Roboto", titleFontfamily: 'Roboto',
titleFontSize: 19, titleFontSize: 19,
subTitleFontSize: 14, subTitleFontSize: 14,
subtitleColor: "#FFF", subtitleColor: '#FFF',
titleFontColor: "#FFF", titleFontColor: '#FFF',
// Other // Other
borderRadiusBase: 2, borderRadiusBase: 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10, contentPadding: 10,
dropdownLinkColor: "#414142", dropdownLinkColor: '#414142',
inputLineHeight: 24, inputLineHeight: 24,
deviceWidth, deviceWidth,
deviceHeight, deviceHeight,
isIphoneX, isIphoneX,
inputGroupRoundedBorderRadius: 30, inputGroupRoundedBorderRadius: 30,
//iPhoneX SafeArea // iPhoneX SafeArea
Inset: { Inset: {
portrait: { portrait: {
topInset: 24, topInset: 24,

640
native-base-theme/variables/platform.js
View file

@ -1,311 +1,361 @@
// @flow // @flow
import color from "color"; import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import {Dimensions, PixelRatio, Platform} from "react-native"; import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS; const platform = Platform.OS;
const platformStyle = undefined; const platformStyle = undefined;
const isIphoneX = const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); platform === PLATFORM.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default { export default {
platformStyle, platformStyle,
platform, platform,
//Accordion // Accordion
headerStyle: "#edebed", accordionBorderColor: '#d3d3d3',
iconStyle: "#000", accordionContentPadding: 10,
contentStyle: "#f5f4f5", accordionIconFontSize: 18,
expandedIconStyle: "#000", contentStyle: '#f5f4f5',
accordionBorderColor: "#d3d3d3", expandedIconStyle: '#000',
headerStyle: '#edebed',
iconStyle: '#000',
// Android // ActionSheet
androidRipple: true, elevation: 4,
androidRippleColor: "rgba(256, 256, 256, 0.3)", containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
androidRippleColorDark: "rgba(0, 0, 0, 0.15)", innerTouchableBackgroundColor: '#fff',
btnUppercaseAndroidText: true, listItemHeight: 50,
listItemBorderColor: 'transparent',
marginHorizontal: -15,
marginLeft: 14,
marginTop: 15,
minHeight: 56,
padding: 15,
touchableTextColor: '#757575',
// Badge // Android
badgeBg: "#ED1727", androidRipple: true,
badgeColor: "#fff", androidRippleColor: 'rgba(256, 256, 256, 0.3)',
badgePadding: platform === "ios" ? 3 : 0, androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Button // Badge
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", badgeBg: '#ED1727',
btnTextColor: '#fff', badgeColor: '#fff',
btnDisabledBg: "#b5b5b5", badgePadding: platform === PLATFORM.IOS ? 3 : 0,
buttonPadding: 6,
get btnPrimaryBg() { // Button
return this.brandPrimary; buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonTextColor: '#fff',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
buttonDefaultActiveOpacity: 0.5,
buttonDefaultFlex: 1,
buttonDefaultBorderRadius: 2,
buttonDefaultBorderWidth: 1,
get buttonPrimaryBg() {
return this.brandPrimary;
},
get buttonPrimaryColor() {
return this.inverseTextColor;
},
get buttonInfoBg() {
return this.brandInfo;
},
get buttonInfoColor() {
return this.inverseTextColor;
},
get buttonSuccessBg() {
return this.brandSuccess;
},
get buttonSuccessColor() {
return this.inverseTextColor;
},
get buttonDangerBg() {
return this.brandDanger;
},
get buttonDangerColor() {
return this.inverseTextColor;
},
get buttonWarningBg() {
return this.brandWarning;
},
get buttonWarningColor() {
return this.inverseTextColor;
},
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: '#fff',
cardBorderColor: '#ccc',
cardBorderRadius: 2,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
checkboxBgColor: '#be1522',
checkboxSize: 20,
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: '#be1522',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: '#fff',
sideMenuBgColor: "#f2f2f2",
// Date Picker
datePickerFlex: 1,
datePickerPadding: 10,
datePickerTextColor: '#000',
datePickerBg: 'transparent',
// FAB
fabBackgroundColor: 'blue',
fabBorderRadius: 28,
fabBottom: 0,
fabButtonBorderRadius: 20,
fabButtonHeight: 40,
fabButtonLeft: 7,
fabButtonMarginBottom: 10,
fabContainerBottom: 20,
fabDefaultPosition: 20,
fabElevation: 4,
fabIconColor: '#fff',
fabIconSize: 24,
fabShadowColor: '#000',
fabShadowOffsetHeight: 2,
fabShadowOffsetWidth: 0,
fabShadowOpacity: 0.4,
fabShadowRadius: 2,
fabWidth: 56,
// Font
DefaultFontSize: 16,
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
// Header
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return '#575757';
},
// Line Height
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
listItemSelected: '#be1522',
// List
listBg: 'transparent',
listBorderColor: '#c9c9c9',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#DDD',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#808080',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#be1522',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
// Spinner
defaultSpinnerColor: '#be1522',
inverseSpinnerColor: '#1A191B',
// Tab
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
// Tabs
tabBgColor: '#F8F8F8',
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
tabFontSize: 15,
// Text
textColor: '#000',
textDisabledColor: "#c1c1c1",
inverseTextColor: '#fff',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
// CUSTOM
customMaterialIconColor: "#5d5d5d",
fetchedDataSectionListErrorText: "#898989",
// Calendar/Agenda
agendaBackgroundColor: '#f3f3f4',
agendaEmptyLine: '#dbdbdc',
// PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.31)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(94,104,241,0.3)",
proxiwashBrokenColor: "rgba(162,162,162,0.31)",
proxiwashErrorColor: "rgba(204,7,0,0.31)",
// Screens
planningColor: '#d9b10a',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#e91314',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
// iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
}, },
get btnPrimaryColor() { landscape: {
return this.inverseTextColor; topInset: 0,
}, leftInset: 44,
get btnInfoBg() { rightInset: 44,
return this.brandInfo; bottomInset: 21
},
get btnInfoColor() {
return this.inverseTextColor;
},
get btnSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
return this.inverseTextColor;
},
get btnDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
return this.inverseTextColor;
},
get btnWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
return this.inverseTextColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: "#fff",
cardBorderColor: "#ccc",
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#be1522",
checkboxSize: 20,
checkboxTickColor: "#fff",
// Color
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
//Container
containerBgColor: "#fff",
sideMenuBgColor: "#f2f2f2",
//Date Picker
datePickerTextColor: "#000",
datePickerBg: "transparent",
// Font
DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto",
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
// Header
toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
},
// Line Height
btnLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
listItemSelected: platform === "ios" ? "#be1522" : "#be1522",
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner
defaultSpinnerColor: "#be1522",
inverseSpinnerColor: "#1A191B",
// Tab
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
// Tabs
tabBgColor: "#F8F8F8",
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
tabFontSize: 15,
// Text
textColor: "#000",
textDisabledColor: "#c1c1c1",
inverseTextColor: "#fff",
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#000" : "#FFF",
// CUSTOM
customMaterialIconColor: "#5d5d5d",
fetchedDataSectionListErrorText: "#898989",
// Calendar/Agenda
agendaBackgroundColor: '#f3f3f4',
agendaEmptyLine: '#dbdbdc',
// PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.31)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(94,104,241,0.3)",
proxiwashBrokenColor: "rgba(162,162,162,0.31)",
proxiwashErrorColor: "rgba(204,7,0,0.31)",
// Screens
planningColor: '#d9b10a',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#e91314',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
//iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
},
landscape: {
topInset: 0,
leftInset: 44,
rightInset: 44,
bottomInset: 21
}
} }
}
}; };

640
native-base-theme/variables/platformDark.js
View file

@ -1,311 +1,361 @@
// @flow // @flow
import color from "color"; import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import {Dimensions, PixelRatio, Platform} from "react-native"; import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS; const platform = Platform.OS;
const platformStyle = undefined; const platformStyle = undefined;
const isIphoneX = const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); platform === PLATFORM.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default { export default {
platformStyle, platformStyle,
platform, platform,
//Accordion // Accordion
headerStyle: "#edebed", accordionBorderColor: '#d3d3d3',
iconStyle: "#000", accordionContentPadding: 10,
contentStyle: "#f5f4f5", accordionIconFontSize: 18,
expandedIconStyle: "#000", contentStyle: '#f5f4f5',
accordionBorderColor: "#d3d3d3", expandedIconStyle: '#000',
headerStyle: '#edebed',
iconStyle: '#000',
// Android // ActionSheet
androidRipple: true, elevation: 4,
androidRippleColor: "rgba(256, 256, 256, 0.3)", containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
androidRippleColorDark: "rgba(0, 0, 0, 0.15)", innerTouchableBackgroundColor: '#fff',
btnUppercaseAndroidText: true, listItemHeight: 50,
listItemBorderColor: 'transparent',
marginHorizontal: -15,
marginLeft: 14,
marginTop: 15,
minHeight: 56,
padding: 15,
touchableTextColor: '#757575',
// Badge // Android
badgeBg: "#ED1727", androidRipple: true,
badgeColor: "#fff", androidRippleColor: 'rgba(256, 256, 256, 0.3)',
badgePadding: platform === "ios" ? 3 : 0, androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Button // Badge
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", badgeBg: '#ED1727',
btnTextColor: '#fff', badgeColor: '#fff',
btnDisabledBg: "#b5b5b5", badgePadding: platform === PLATFORM.IOS ? 3 : 0,
buttonPadding: 6,
get btnPrimaryBg() { // Button
return this.brandPrimary; buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonTextColor: '#fff',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
buttonDefaultActiveOpacity: 0.5,
buttonDefaultFlex: 1,
buttonDefaultBorderRadius: 2,
buttonDefaultBorderWidth: 1,
get buttonPrimaryBg() {
return this.brandPrimary;
},
get buttonPrimaryColor() {
return this.textColor;
},
get buttonInfoBg() {
return this.brandInfo;
},
get buttonInfoColor() {
return this.textColor;
},
get buttonSuccessBg() {
return this.brandSuccess;
},
get buttonSuccessColor() {
return this.textColor;
},
get buttonDangerBg() {
return this.brandDanger;
},
get buttonDangerColor() {
return this.textColor;
},
get buttonWarningBg() {
return this.brandWarning;
},
get buttonWarningColor() {
return this.textColor;
},
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: '#2A2A2A',
cardBorderColor: '#1a1a1a',
cardBorderRadius: 2,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
checkboxBgColor: '#be1522',
checkboxSize: 20,
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: '#be1522',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: '#222222',
sideMenuBgColor: "#1c1c1c",
// Date Picker
datePickerFlex: 1,
datePickerPadding: 10,
datePickerTextColor: '#fff',
datePickerBg: 'transparent',
// FAB
fabBackgroundColor: 'blue',
fabBorderRadius: 28,
fabBottom: 0,
fabButtonBorderRadius: 20,
fabButtonHeight: 40,
fabButtonLeft: 7,
fabButtonMarginBottom: 10,
fabContainerBottom: 20,
fabDefaultPosition: 20,
fabElevation: 4,
fabIconColor: '#fff',
fabIconSize: 24,
fabShadowColor: '#000',
fabShadowOffsetHeight: 2,
fabShadowOffsetWidth: 0,
fabShadowOpacity: 0.4,
fabShadowRadius: 2,
fabWidth: 56,
// Font
DefaultFontSize: 16,
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
// Header
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return '#575757';
},
// Line Height
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
listItemSelected: '#be1522',
// List
listBg: 'transparent',
listBorderColor: '#3e3e3e',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#3a3a3a',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#acacac',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#be1522',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
// Spinner
defaultSpinnerColor: '#be1522',
inverseSpinnerColor: '#1A191B',
// Tab
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
// Tabs
tabBgColor: '#2b2b2b',
tabIconColor: "#fff",
tabFontSize: 15,
// Text
textColor: '#ebebeb',
textDisabledColor: "#5b5b5b",
inverseTextColor: '#000',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
// CUSTOM
customMaterialIconColor: "#b3b3b3",
fetchedDataSectionListErrorText: "#acacac",
// Calendar/Agenda
agendaBackgroundColor: '#373737',
agendaEmptyLine: '#464646',
// PROXIWASH
proxiwashFinishedColor: "rgba(17,149,32,0.53)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(29,59,175,0.65)",
proxiwashBrokenColor: "#000000",
proxiwashErrorColor: "rgba(213,8,0,0.57)",
// Screens
planningColor: '#d99e09',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#b81213',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
// iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
}, },
get btnPrimaryColor() { landscape: {
return this.textColor; topInset: 0,
}, leftInset: 44,
get btnInfoBg() { rightInset: 44,
return this.brandInfo; bottomInset: 21
},
get btnInfoColor() {
return this.textColor;
},
get btnSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
return this.textColor;
},
get btnDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
return this.textColor;
},
get btnWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
return this.textColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: "#2A2A2A",
cardBorderColor: "#1a1a1a",
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#E4202D",
checkboxSize: 20,
checkboxTickColor: "#fff",
// Color
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
//Container
containerBgColor: "#222222",
sideMenuBgColor: "#1c1c1c",
//Date Picker
datePickerTextColor: "#fff",
datePickerBg: "transparent",
// Font
DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto",
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#333333" : "#be1522",
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
// Header
toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
},
// Line Height
btnLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
listItemSelected: "#be1522",
// List
listBg: "transparent",
listBorderColor: "#3e3e3e",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#3a3a3a",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#acacac",
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return "#be1522";
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner
defaultSpinnerColor: "#be1522",
inverseSpinnerColor: "#1A191B",
// Tab
tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
// Tabs
tabBgColor: "#2b2b2b",
tabIconColor: "#fff",
tabFontSize: 15,
// Text
textColor: "#ebebeb",
textDisabledColor: "#5b5b5b",
inverseTextColor: "#000",
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
// CUSTOM
customMaterialIconColor: "#b3b3b3",
fetchedDataSectionListErrorText: "#acacac",
// Calendar/Agenda
agendaBackgroundColor: '#373737',
agendaEmptyLine: '#464646',
// PROXIWASH
proxiwashFinishedColor: "rgba(17,149,32,0.53)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(29,59,175,0.65)",
proxiwashBrokenColor: "#000000",
proxiwashErrorColor: "rgba(213,8,0,0.57)",
// Screens
planningColor: '#d99e09',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#b81213',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
//iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
},
landscape: {
topInset: 0,
leftInset: 44,
rightInset: 44,
bottomInset: 21
}
} }
}
}; };