From 5ba63da3d4b2b15701b6302b7760978cef15d966 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 28 Jan 2020 20:07:21 +0100 Subject: [PATCH] Updated native base theme --- native-base-theme/components/Badge.js | 33 +- native-base-theme/components/Body.js | 6 +- native-base-theme/components/Button.js | 340 +++++----- native-base-theme/components/Card.js | 14 +- native-base-theme/components/CardItem.js | 136 ++-- native-base-theme/components/CheckBox.js | 20 +- native-base-theme/components/Container.js | 11 +- native-base-theme/components/Content.js | 10 +- native-base-theme/components/Fab.js | 28 +- native-base-theme/components/Footer.js | 69 +- native-base-theme/components/FooterTab.js | 52 +- native-base-theme/components/Form.js | 56 +- native-base-theme/components/H1.js | 6 +- native-base-theme/components/H2.js | 6 +- native-base-theme/components/H3.js | 4 +- native-base-theme/components/Header.js | 323 +++++---- native-base-theme/components/Icon.js | 6 +- native-base-theme/components/Input.js | 4 +- native-base-theme/components/InputGroup.js | 68 +- native-base-theme/components/Item.js | 143 ++-- native-base-theme/components/Label.js | 6 +- native-base-theme/components/Left.js | 6 +- native-base-theme/components/ListItem.js | 324 ++++----- .../components/Picker.android.js | 8 +- native-base-theme/components/Picker.ios.js | 4 +- native-base-theme/components/Picker.js | 8 +- native-base-theme/components/Radio.js | 35 +- native-base-theme/components/Right.js | 8 +- native-base-theme/components/Segment.js | 37 +- native-base-theme/components/Separator.js | 20 +- native-base-theme/components/Spinner.js | 4 +- native-base-theme/components/Subtitle.js | 13 +- native-base-theme/components/SwipeRow.js | 52 +- native-base-theme/components/Switch.js | 6 +- native-base-theme/components/Tab.js | 6 +- native-base-theme/components/TabBar.js | 44 +- native-base-theme/components/TabContainer.js | 26 +- native-base-theme/components/TabHeading.js | 31 +- native-base-theme/components/Text.js | 8 +- native-base-theme/components/Textarea.js | 10 +- native-base-theme/components/Thumbnail.js | 20 +- native-base-theme/components/Title.js | 15 +- native-base-theme/components/Toast.js | 31 +- native-base-theme/components/View.js | 6 +- native-base-theme/components/index.js | 197 +++--- native-base-theme/variables/commonColor.js | 270 ++++---- native-base-theme/variables/material.js | 221 +++--- native-base-theme/variables/platform.js | 640 ++++++++++-------- native-base-theme/variables/platformDark.js | 640 ++++++++++-------- 49 files changed, 2092 insertions(+), 1939 deletions(-) diff --git a/native-base-theme/components/Badge.js b/native-base-theme/components/Badge.js index b164a6c..8a38fc0 100644 --- a/native-base-theme/components/Badge.js +++ b/native-base-theme/components/Badge.js @@ -1,36 +1,37 @@ // @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 = { - ".primary": { - backgroundColor: variables.btnPrimaryBg + '.primary': { + backgroundColor: variables.buttonPrimaryBg }, - ".warning": { - backgroundColor: variables.btnWarningBg + '.warning': { + backgroundColor: variables.buttonWarningBg }, - ".info": { - backgroundColor: variables.btnInfoBg + '.info': { + backgroundColor: variables.buttonInfoBg }, - ".success": { - backgroundColor: variables.btnSuccessBg + '.success': { + backgroundColor: variables.buttonSuccessBg }, - ".danger": { - backgroundColor: variables.btnDangerBg + '.danger': { + backgroundColor: variables.buttonDangerBg }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.badgeColor, fontSize: variables.fontSizeBase, lineHeight: variables.lineHeight - 1, - textAlign: "center", + textAlign: 'center', paddingHorizontal: 3 }, backgroundColor: variables.badgeBg, padding: variables.badgePadding, paddingHorizontal: 6, - alignSelf: "flex-start", - justifyContent: variables.platform === "ios" ? "center" : undefined, + alignSelf: 'flex-start', + justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined, borderRadius: 13.5, height: 27 }; diff --git a/native-base-theme/components/Body.js b/native-base-theme/components/Body.js index 0f85f4a..6de0c88 100644 --- a/native-base-theme/components/Body.js +++ b/native-base-theme/components/Body.js @@ -1,12 +1,10 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const bodyTheme = { flex: 1, alignItems: 'center', - alignSelf: 'center', + alignSelf: 'center' }; return bodyTheme; diff --git a/native-base-theme/components/Button.js b/native-base-theme/components/Button.js index c373fdc..507b6ec 100644 --- a/native-base-theme/components/Button.js +++ b/native-base-theme/components/Button.js @@ -1,158 +1,159 @@ // @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 platform = variables.platform; const darkCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.brandDark }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.brandDark }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.brandDark } }; const lightCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.brandLight }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.brandLight }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.brandLight } }; const primaryCommon = { - "NativeBase.Text": { - color: variables.btnPrimaryBg + 'NativeBase.Text': { + color: variables.buttonPrimaryBg }, - "NativeBase.Icon": { - color: variables.btnPrimaryBg + 'NativeBase.Icon': { + color: variables.buttonPrimaryBg }, - "NativeBase.IconNB": { - color: variables.btnPrimaryBg + 'NativeBase.IconNB': { + color: variables.buttonPrimaryBg } }; const successCommon = { - "NativeBase.Text": { - color: variables.btnSuccessBg + 'NativeBase.Text': { + color: variables.buttonSuccessBg }, - "NativeBase.Icon": { - color: variables.btnSuccessBg + 'NativeBase.Icon': { + color: variables.buttonSuccessBg }, - "NativeBase.IconNB": { - color: variables.btnSuccessBg + 'NativeBase.IconNB': { + color: variables.buttonSuccessBg } }; const infoCommon = { - "NativeBase.Text": { - color: variables.btnInfoBg + 'NativeBase.Text': { + color: variables.buttonInfoBg }, - "NativeBase.Icon": { - color: variables.btnInfoBg + 'NativeBase.Icon': { + color: variables.buttonInfoBg }, - "NativeBase.IconNB": { - color: variables.btnInfoBg + 'NativeBase.IconNB': { + color: variables.buttonInfoBg } }; const warningCommon = { - "NativeBase.Text": { - color: variables.btnWarningBg + 'NativeBase.Text': { + color: variables.buttonWarningBg }, - "NativeBase.Icon": { - color: variables.btnWarningBg + 'NativeBase.Icon': { + color: variables.buttonWarningBg }, - "NativeBase.IconNB": { - color: variables.btnWarningBg + 'NativeBase.IconNB': { + color: variables.buttonWarningBg } }; const dangerCommon = { - "NativeBase.Text": { - color: variables.btnDangerBg + 'NativeBase.Text': { + color: variables.buttonDangerBg }, - "NativeBase.Icon": { - color: variables.btnDangerBg + 'NativeBase.Icon': { + color: variables.buttonDangerBg }, - "NativeBase.IconNB": { - color: variables.btnDangerBg + 'NativeBase.IconNB': { + color: variables.buttonDangerBg } }; const buttonTheme = { - ".disabled": { - ".transparent": { - backgroundColor: null, - "NativeBase.Text": { - color: variables.btnDisabledBg + '.disabled': { + '.transparent': { + backgroundColor: 'transparent', + 'NativeBase.Text': { + color: variables.buttonDisabledBg }, - "NativeBase.Icon": { - color: variables.btnDisabledBg + 'NativeBase.Icon': { + color: variables.buttonDisabledBg }, - "NativeBase.IconNB": { - color: variables.btnDisabledBg + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.brandLight }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.brandLight }, - backgroundColor: variables.btnDisabledBg + backgroundColor: variables.buttonDisabledBg }, - ".bordered": { - ".dark": { + '.bordered': { + '.dark': { ...darkCommon, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: variables.brandDark, borderWidth: variables.borderWidth * 2 }, - ".light": { + '.light': { ...lightCommon, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: variables.brandLight, borderWidth: variables.borderWidth * 2 }, - ".primary": { + '.primary': { ...primaryCommon, - backgroundColor: "transparent", - borderColor: variables.btnPrimaryBg, + backgroundColor: 'transparent', + borderColor: variables.buttonPrimaryBg, borderWidth: variables.borderWidth * 2 }, - ".success": { + '.success': { ...successCommon, - backgroundColor: "transparent", - borderColor: variables.btnSuccessBg, + backgroundColor: 'transparent', + borderColor: variables.buttonSuccessBg, borderWidth: variables.borderWidth * 2 }, - ".info": { + '.info': { ...infoCommon, - backgroundColor: "transparent", - borderColor: variables.btnInfoBg, + backgroundColor: 'transparent', + borderColor: variables.buttonInfoBg, borderWidth: variables.borderWidth * 2 }, - ".warning": { + '.warning': { ...warningCommon, - backgroundColor: "transparent", - borderColor: variables.btnWarningBg, + backgroundColor: 'transparent', + borderColor: variables.buttonWarningBg, borderWidth: variables.borderWidth * 2 }, - ".danger": { + '.danger': { ...dangerCommon, - backgroundColor: "transparent", - borderColor: variables.btnDangerBg, + backgroundColor: 'transparent', + borderColor: variables.buttonDangerBg, borderWidth: variables.borderWidth * 2 }, - ".disabled": { - backgroundColor: null, - borderColor: variables.btnDisabledBg, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, borderWidth: variables.borderWidth * 2, - "NativeBase.Text": { - color: variables.btnDisabledBg + 'NativeBase.Text': { + color: variables.buttonDisabledBg } }, ...primaryCommon, @@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => { shadowOffset: null, shadowOpacity: null, shadowRadius: null, - backgroundColor: "transparent" + backgroundColor: 'transparent' }, - ".dark": { - ".bordered": { + '.dark': { + '.bordered': { ...darkCommon }, backgroundColor: variables.brandDark }, - ".light": { - ".transparent": { + '.light': { + '.transparent': { ...lightCommon, - backgroundColor: null + backgroundColor: 'transparent' }, - ".bordered": { + '.bordered': { ...lightCommon }, ...darkCommon, backgroundColor: variables.brandLight }, - ".primary": { - ".bordered": { + '.primary': { + '.bordered': { ...primaryCommon }, - backgroundColor: variables.btnPrimaryBg + backgroundColor: variables.buttonPrimaryBg }, - ".success": { - ".bordered": { + '.success': { + '.bordered': { ...successCommon }, - backgroundColor: variables.btnSuccessBg + backgroundColor: variables.buttonSuccessBg }, - ".info": { - ".bordered": { + '.info': { + '.bordered': { ...infoCommon }, - backgroundColor: variables.btnInfoBg + backgroundColor: variables.buttonInfoBg }, - ".warning": { - ".bordered": { + '.warning': { + '.bordered': { ...warningCommon }, - backgroundColor: variables.btnWarningBg + backgroundColor: variables.buttonWarningBg }, - ".danger": { - ".bordered": { + '.danger': { + '.bordered': { ...dangerCommon }, - backgroundColor: variables.btnDangerBg + backgroundColor: variables.buttonDangerBg }, - ".block": { - justifyContent: "center", - alignSelf: "stretch" + '.block': { + justifyContent: 'center', + alignSelf: 'stretch' }, - ".full": { - justifyContent: "center", - alignSelf: "stretch", + '.full': { + justifyContent: 'center', + alignSelf: 'stretch', borderRadius: 0 }, - ".rounded": { - // paddingHorizontal: variables.buttonPadding + 20, + '.rounded': { borderRadius: variables.borderRadiusLarge }, - ".transparent": { - backgroundColor: "transparent", + '.transparent': { + backgroundColor: 'transparent', elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, ...primaryCommon, - ".dark": { + '.dark': { ...darkCommon, - backgroundColor: null }, - ".danger": { + '.danger': { ...dangerCommon, - backgroundColor: null }, - ".warning": { + '.warning': { ...warningCommon, - backgroundColor: null }, - ".info": { + '.info': { ...infoCommon, - backgroundColor: null }, - ".primary": { + '.primary': { ...primaryCommon, - backgroundColor: null }, - ".success": { + '.success': { ...successCommon, - backgroundColor: null }, - ".light": { + '.light': { ...lightCommon, - backgroundColor: null }, - ".disabled": { - backgroundColor: "transparent", - borderColor: variables.btnDisabledBg, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, borderWidth: variables.borderWidth * 2, - "NativeBase.Text": { - color: variables.btnDisabledBg + 'NativeBase.Text': { + color: variables.buttonDisabledBg }, - "NativeBase.Icon": { - color: variables.btnDisabledBg + 'NativeBase.Icon': { + color: variables.buttonDisabledBg }, - "NativeBase.IconNB": { - color: variables.btnDisabledBg + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg } } }, - ".small": { + '.small': { height: 30, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: 14 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 20, paddingTop: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: 20, paddingTop: 0 } }, - ".large": { + '.large': { height: 60, - "NativeBase.Text": { - fontSize: 22, + 'NativeBase.Text': { + fontSize: 22 } }, - ".capitalize": {}, + '.capitalize': {}, - ".vertical": { - flexDirection: "column", + '.vertical': { + flexDirection: 'column', height: null }, - "NativeBase.Text": { - fontFamily: variables.btnFontFamily, + 'NativeBase.Text': { + fontFamily: variables.buttonFontFamily, marginLeft: 0, marginRight: 0, - color: variables.btnTextColor, - fontSize: variables.btnTextSize, + color: variables.buttonTextColor, + fontSize: variables.buttonTextSize, paddingHorizontal: 16, - backgroundColor: "transparent" - // childPosition: 1 + backgroundColor: 'transparent' }, - "NativeBase.Icon": { - color: variables.btnTextColor, + 'NativeBase.Icon': { + color: variables.buttonTextColor, fontSize: 24, marginHorizontal: 16, - paddingTop: platform === "ios" ? 2 : undefined + paddingTop: platform === PLATFORM.IOS ? 2 : undefined }, - "NativeBase.IconNB": { - color: variables.btnTextColor, + 'NativeBase.IconNB': { + color: variables.buttonTextColor, fontSize: 24, marginHorizontal: 16, - paddingTop: platform === "ios" ? 2 : undefined + paddingTop: platform === PLATFORM.IOS ? 2 : undefined }, - ".iconLeft": { - "NativeBase.Text": { + '.iconLeft': { + 'NativeBase.Text': { marginLeft: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { marginRight: 0, marginLeft: 16 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginRight: 0, marginLeft: 16 } }, - ".iconRight": { - "NativeBase.Text": { + '.iconRight': { + 'NativeBase.Text': { marginRight: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { marginLeft: 0, marginRight: 16 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginLeft: 0, marginRight: 16 } }, - ".picker": { - "NativeBase.Text": { - ".note": { + '.picker': { + 'NativeBase.Text': { + '.note': { fontSize: 16, lineHeight: null } } }, - paddingVertical: variables.buttonPadding, - // paddingHorizontal: variables.buttonPadding + 10, - backgroundColor: variables.btnPrimaryBg, + backgroundColor: variables.buttonPrimaryBg, borderRadius: variables.borderRadiusBase, - borderColor: variables.btnPrimaryBg, + borderColor: variables.buttonPrimaryBg, borderWidth: null, height: 45, - alignSelf: "flex-start", - flexDirection: "row", + flexDirection: 'row', elevation: 2, - shadowColor: platformStyle === "material" ? variables.brandDark : undefined, + shadowColor: + platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined, shadowOffset: - platformStyle === "material" ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === "material" ? 0.2 : undefined, - shadowRadius: platformStyle === "material" ? 1.2 : undefined, - alignItems: "center", - justifyContent: "space-between" + platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, + shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, + alignItems: 'center', + justifyContent: 'space-between' }; return buttonTheme; }; diff --git a/native-base-theme/components/Card.js b/native-base-theme/components/Card.js index f917e20..de4f9f4 100644 --- a/native-base-theme/components/Card.js +++ b/native-base-theme/components/Card.js @@ -1,19 +1,19 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const cardTheme = { - ".transparent": { + '.transparent': { shadowColor: null, shadowOffset: null, shadowOpacity: null, shadowRadius: null, elevation: null, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderWidth: 0 }, - ".noShadow": { + '.noShadow': { shadowColor: null, shadowOffset: null, shadowOpacity: null, @@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => { borderWidth: variables.borderWidth, borderRadius: variables.cardBorderRadius, borderColor: variables.cardBorderColor, - flexWrap: "nowrap", + flexWrap: 'nowrap', backgroundColor: variables.cardDefaultBg, - shadowColor: "#000", + shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 1.5, diff --git a/native-base-theme/components/CardItem.js b/native-base-theme/components/CardItem.js index 57724ac..bfb1757 100644 --- a/native-base-theme/components/CardItem.js +++ b/native-base-theme/components/CardItem.js @@ -1,21 +1,23 @@ // @flow -import { StyleSheet } from "react-native"; -import variable from "./../variables/platform"; +import { StyleSheet } from 'react-native'; -export default (variables /*: * */ = variable) => { +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { const platform = variables.platform; const transparentBtnCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: variables.DefaultFontSize - 3, color: variables.sTabBarActiveTextColor }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: variables.iconFontSize - 10, color: variables.sTabBarActiveTextColor, marginHorizontal: null }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: variables.iconFontSize - 10, color: variables.sTabBarActiveTextColor }, @@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => { }; const cardItemTheme = { - "NativeBase.Left": { - "NativeBase.Body": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "400", + fontWeight: '400', marginRight: 20 } }, @@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => { marginLeft: 10, alignItems: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: variables.iconFontSize }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: variables.iconFontSize }, - "NativeBase.Text": { + 'NativeBase.Text': { marginLeft: 10, - alignSelf: "center" + alignSelf: 'center' }, - "NativeBase.Button": { - ".transparent": { + 'NativeBase.Button': { + '.transparent': { ...transparentBtnCommon, paddingRight: variables.cardItemPadding + 5 } }, flex: 1, - flexDirection: "row", - alignItems: "center" + flexDirection: 'row', + alignItems: 'center' }, - ".content": { - "NativeBase.Text": { - color: platform === "ios" ? "#555" : "#222", + '.content': { + 'NativeBase.Text': { + color: platform === PLATFORM.IOS ? '#555' : '#222', fontSize: variables.DefaultFontSize - 2 } }, - ".cardBody": { + '.cardBody': { padding: -5, - "NativeBase.Text": { + 'NativeBase.Text': { marginTop: 5 } }, - "NativeBase.Body": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200", + fontWeight: '200', marginRight: 20 } }, - "NativeBase.Button": { - ".transparent": { + 'NativeBase.Button': { + '.transparent': { ...transparentBtnCommon, paddingRight: variables.cardItemPadding + 5, - alignSelf: "stretch" + alignSelf: 'stretch' } }, flex: 1, - alignSelf: "stretch", - alignItems: "flex-start" + alignSelf: 'stretch', + alignItems: 'flex-start' }, - "NativeBase.Right": { - "NativeBase.Badge": { + 'NativeBase.Right': { + 'NativeBase.Badge': { alignSelf: null }, - "NativeBase.Button": { - ".transparent": { + 'NativeBase.Button': { + '.transparent': { ...transparentBtnCommon }, alignSelf: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { alignSelf: null, fontSize: variables.iconFontSize - 8, color: variables.cardBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { alignSelf: null, fontSize: variables.iconFontSize - 8, color: variables.cardBorderColor }, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: variables.DefaultFontSize - 1, alignSelf: null }, - "NativeBase.Thumbnail": { + 'NativeBase.Thumbnail': { alignSelf: null }, - "NativeBase.Image": { + 'NativeBase.Image': { alignSelf: null }, - "NativeBase.Radio": { + 'NativeBase.Radio': { alignSelf: null }, - "NativeBase.Checkbox": { + 'NativeBase.Checkbox': { alignSelf: null }, - "NativeBase.Switch": { + 'NativeBase.Switch': { alignSelf: null }, flex: 0.8 }, - ".header": { - "NativeBase.Text": { + '.header': { + 'NativeBase.Text': { fontSize: 16, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, - ".bordered": { - "NativeBase.Text": { + '.bordered': { + 'NativeBase.Text': { color: variables.brandPrimary, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, borderBottomWidth: variables.borderWidth }, borderBottomWidth: null, paddingVertical: variables.cardItemPadding + 5 }, - ".footer": { - "NativeBase.Text": { + '.footer': { + 'NativeBase.Text': { fontSize: 16, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, - ".bordered": { - "NativeBase.Text": { + '.bordered': { + 'NativeBase.Text': { color: variables.brandPrimary, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, borderTopWidth: variables.borderWidth }, borderBottomWidth: null }, - "NativeBase.Text": { - ".note": { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { width: variables.iconFontSize + 5, fontSize: variables.iconFontSize - 2 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { width: variables.iconFontSize + 5, fontSize: variables.iconFontSize - 2 }, - ".bordered": { + '.bordered': { borderBottomWidth: StyleSheet.hairlineWidth, borderColor: variables.cardBorderColor }, - ".first": { + '.first': { borderTopLeftRadius: variables.cardBorderRadius, borderTopRightRadius: variables.cardBorderRadius }, - ".last": { + '.last': { borderBottomLeftRadius: variables.cardBorderRadius, borderBottomRightRadius: variables.cardBorderRadius }, - flexDirection: "row", - alignItems: "center", + flexDirection: 'row', + alignItems: 'center', borderRadius: variables.cardBorderRadius, padding: variables.cardItemPadding + 5, paddingVertical: variables.cardItemPadding, diff --git a/native-base-theme/components/CheckBox.js b/native-base-theme/components/CheckBox.js index d143e07..7a858c3 100644 --- a/native-base-theme/components/CheckBox.js +++ b/native-base-theme/components/CheckBox.js @@ -1,31 +1,31 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const checkBoxTheme = { - ".checked": { - "NativeBase.Icon": { + '.checked': { + 'NativeBase.Icon': { color: variables.checkboxTickColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.checkboxTickColor } }, - "NativeBase.Icon": { - color: "transparent", + 'NativeBase.Icon': { + color: 'transparent', lineHeight: variables.CheckboxIconSize, marginTop: variables.CheckboxIconMarginTop, fontSize: variables.CheckboxFontSize }, - "NativeBase.IconNB": { - color: "transparent", + 'NativeBase.IconNB': { + color: 'transparent', lineHeight: variables.CheckboxIconSize, marginTop: variables.CheckboxIconMarginTop, fontSize: variables.CheckboxFontSize }, borderRadius: variables.CheckboxRadius, - overflow: "hidden", + overflow: 'hidden', width: variables.checkboxSize, height: variables.checkboxSize, borderWidth: variables.CheckboxBorderWidth, diff --git a/native-base-theme/components/Container.js b/native-base-theme/components/Container.js index 7a93fcc..cfd7e28 100644 --- a/native-base-theme/components/Container.js +++ b/native-base-theme/components/Container.js @@ -1,14 +1,15 @@ // @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; -export default (variables /*: * */ = variable) => { +const deviceHeight = Dimensions.get('window').height; +export default (variables /* : * */ = variable) => { const theme = { flex: 1, - height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20, + height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20, backgroundColor: variables.containerBgColor }; diff --git a/native-base-theme/components/Content.js b/native-base-theme/components/Content.js index 72230c4..97bd81c 100644 --- a/native-base-theme/components/Content.js +++ b/native-base-theme/components/Content.js @@ -1,14 +1,12 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const contentTheme = { flex: 1, - backgroundColor: "transparent", - "NativeBase.Segment": { + backgroundColor: 'transparent', + 'NativeBase.Segment': { borderWidth: 0, - backgroundColor: "transparent" + backgroundColor: 'transparent' } }; diff --git a/native-base-theme/components/Fab.js b/native-base-theme/components/Fab.js index c3314da..4d2b9cb 100644 --- a/native-base-theme/components/Fab.js +++ b/native-base-theme/components/Fab.js @@ -1,28 +1,24 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { - const platform = variables.platform; - +export default () => { const fabTheme = { - "NativeBase.Button": { - alignItems: "center", + 'NativeBase.Button': { + alignItems: 'center', padding: null, - justifyContent: "center", - "NativeBase.Icon": { - alignSelf: "center", + justifyContent: 'center', + 'NativeBase.Icon': { + alignSelf: 'center', fontSize: 20, marginLeft: 0, - marginRight: 0, + marginRight: 0 }, - "NativeBase.IconNB": { - alignSelf: "center", + 'NativeBase.IconNB': { + alignSelf: 'center', fontSize: 20, marginLeft: 0, - marginRight: 0, - }, - }, + marginRight: 0 + } + } }; return fabTheme; diff --git a/native-base-theme/components/Footer.js b/native-base-theme/components/Footer.js index 0021508..292b35c 100644 --- a/native-base-theme/components/Footer.js +++ b/native-base-theme/components/Footer.js @@ -1,31 +1,32 @@ // @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 platform = variables.platform; const iconCommon = { - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.tabBarActiveTextColor } }; const iconNBCommon = { - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.tabBarActiveTextColor } }; const textCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.tabBarActiveTextColor } }; const footerTheme = { - "NativeBase.Left": { - "NativeBase.Button": { - ".transparent": { - backgroundColor: "transparent", + 'NativeBase.Left': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => { }, alignSelf: null, ...iconCommon, - ...iconNBCommon, + ...iconNBCommon // ...textCommon }, flex: 1, - alignSelf: "center", - alignItems: "flex-start" + alignSelf: 'center', + alignItems: 'flex-start' }, - "NativeBase.Body": { + 'NativeBase.Body': { flex: 1, - alignItems: "center", - alignSelf: "center", - flexDirection: "row", - "NativeBase.Button": { - alignSelf: "center", - ".transparent": { - backgroundColor: "transparent", + alignItems: 'center', + alignSelf: 'center', + flexDirection: 'row', + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => { ...iconNBCommon, ...textCommon }, - ".full": { + '.full': { height: variables.footerHeight, paddingBottom: variables.footerPaddingBottom, flex: 1 }, ...iconCommon, - ...iconNBCommon, + ...iconNBCommon // ...textCommon } }, - "NativeBase.Right": { - "NativeBase.Button": { - ".transparent": { - backgroundColor: "transparent", + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => { }, alignSelf: null, ...iconCommon, - ...iconNBCommon, + ...iconNBCommon // ...textCommon }, flex: 1, - alignSelf: "center", - alignItems: "flex-end" + alignSelf: 'center', + alignItems: 'flex-end' }, backgroundColor: variables.footerDefaultBg, - flexDirection: "row", - justifyContent: "center", + flexDirection: 'row', + justifyContent: 'center', borderTopWidth: - platform === "ios" && platformStyle !== "material" + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? variables.borderWidth : undefined, borderColor: - platform === "ios" && platformStyle !== "material" - ? "#cbcbcb" + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? '#cbcbcb' : undefined, height: variables.footerHeight, paddingBottom: variables.footerPaddingBottom, diff --git a/native-base-theme/components/FooterTab.js b/native-base-theme/components/FooterTab.js index 8fcdf03..abaa023 100644 --- a/native-base-theme/components/FooterTab.js +++ b/native-base-theme/components/FooterTab.js @@ -1,78 +1,78 @@ // @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 footerTabTheme = { - "NativeBase.Button": { - ".active": { - "NativeBase.Text": { + 'NativeBase.Button': { + '.active': { + 'NativeBase.Text': { color: variables.tabBarActiveTextColor, fontSize: variables.tabBarTextSize, lineHeight: 16 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.tabBarActiveTextColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.tabBarActiveTextColor }, backgroundColor: variables.tabActiveBgColor }, flexDirection: null, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, - alignSelf: "center", + alignSelf: 'center', flex: 1, height: variables.footerHeight, - justifyContent: "center", - ".badge": { - "NativeBase.Badge": { - "NativeBase.Text": { + justifyContent: 'center', + '.badge': { + 'NativeBase.Badge': { + 'NativeBase.Text': { fontSize: 11, - fontWeight: platform === "ios" ? "600" : undefined, + fontWeight: platform === PLATFORM.IOS ? '600' : undefined, lineHeight: 14 }, top: -3, - alignSelf: "center", + alignSelf: 'center', left: 10, zIndex: 99, height: 18, padding: 1.7, paddingHorizontal: 3 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginTop: -18 } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.tabBarTextColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.tabBarTextColor }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.tabBarTextColor, fontSize: variables.tabBarTextSize, lineHeight: 16 } }, - backgroundColor: Platform.OS === "android" - ? variables.footerDefaultBg - : undefined, - flexDirection: "row", - justifyContent: "space-between", + backgroundColor: + Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined, + flexDirection: 'row', + justifyContent: 'space-between', flex: 1, - alignSelf: "stretch" + alignSelf: 'stretch' }; return footerTabTheme; diff --git a/native-base-theme/components/Form.js b/native-base-theme/components/Form.js index 8d7aedc..3040f30 100644 --- a/native-base-theme/components/Form.js +++ b/native-base-theme/components/Form.js @@ -1,85 +1,81 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { - const platform = variables.platform; - +export default () => { const theme = { - "NativeBase.Item": { - ".fixedLabel": { - "NativeBase.Label": { + 'NativeBase.Item': { + '.fixedLabel': { + 'NativeBase.Label': { paddingLeft: null }, marginLeft: 15 }, - ".inlineLabel": { - "NativeBase.Label": { + '.inlineLabel': { + 'NativeBase.Label': { paddingLeft: null }, marginLeft: 15 }, - ".placeholderLabel": { - "NativeBase.Input": {} + '.placeholderLabel': { + 'NativeBase.Input': {} }, - ".stackedLabel": { - "NativeBase.Label": { + '.stackedLabel': { + 'NativeBase.Label': { top: 5, paddingLeft: null }, - "NativeBase.Input": { + 'NativeBase.Input': { paddingLeft: null, marginLeft: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginTop: 36 }, marginLeft: 15 }, - ".floatingLabel": { - "NativeBase.Input": { + '.floatingLabel': { + 'NativeBase.Input': { paddingLeft: null, top: 10, marginLeft: null }, - "NativeBase.Label": { + 'NativeBase.Label': { left: 0, top: 6 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { top: 6 }, marginTop: 15, marginLeft: 15 }, - ".regular": { - "NativeBase.Label": { + '.regular': { + 'NativeBase.Label': { left: 0 }, marginLeft: 0 }, - ".rounded": { - "NativeBase.Label": { + '.rounded': { + 'NativeBase.Label': { left: 0 }, marginLeft: 0 }, - ".underline": { - "NativeBase.Label": { + '.underline': { + 'NativeBase.Label': { left: 0, top: 0, - position: "relative" + position: 'relative' }, - "NativeBase.Input": { + 'NativeBase.Input': { left: -15 }, marginLeft: 15 }, - ".last": { + '.last': { marginLeft: 0, paddingLeft: 15 }, - "NativeBase.Label": { + 'NativeBase.Label': { paddingRight: 5 }, marginLeft: 15 diff --git a/native-base-theme/components/H1.js b/native-base-theme/components/H1.js index dd87958..20aa8db 100644 --- a/native-base-theme/components/H1.js +++ b/native-base-theme/components/H1.js @@ -1,12 +1,12 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const h1Theme = { color: variables.textColor, fontSize: variables.fontSizeH1, - lineHeight: variables.lineHeightH1, + lineHeight: variables.lineHeightH1 }; return h1Theme; diff --git a/native-base-theme/components/H2.js b/native-base-theme/components/H2.js index 0a1aa77..cad4057 100644 --- a/native-base-theme/components/H2.js +++ b/native-base-theme/components/H2.js @@ -1,12 +1,12 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const h2Theme = { color: variables.textColor, fontSize: variables.fontSizeH2, - lineHeight: variables.lineHeightH2, + lineHeight: variables.lineHeightH2 }; return h2Theme; diff --git a/native-base-theme/components/H3.js b/native-base-theme/components/H3.js index 45e5891..19917f5 100644 --- a/native-base-theme/components/H3.js +++ b/native-base-theme/components/H3.js @@ -1,8 +1,8 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const h3Theme = { color: variables.textColor, fontSize: variables.fontSizeH3, diff --git a/native-base-theme/components/Header.js b/native-base-theme/components/Header.js index 9e7f30f..944f6c3 100644 --- a/native-base-theme/components/Header.js +++ b/native-base-theme/components/Header.js @@ -1,65 +1,70 @@ // @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 platform = variables.platform; const headerTheme = { - ".span": { + '.span': { height: 128, - "NativeBase.Left": { - alignSelf: "flex-start" + 'NativeBase.Left': { + alignSelf: 'flex-start' }, - "NativeBase.Body": { - alignSelf: "flex-end", - alignItems: "flex-start", - justifyContent: "center", + 'NativeBase.Body': { + alignSelf: 'flex-end', + alignItems: 'flex-start', + justifyContent: 'center', paddingBottom: 26 }, - "NativeBase.Right": { - alignSelf: "flex-start" + 'NativeBase.Right': { + alignSelf: 'flex-start' } }, - ".hasSubtitle": { - "NativeBase.Body": { - "NativeBase.Title": { + '.hasSubtitle': { + 'NativeBase.Body': { + 'NativeBase.Title': { fontSize: variables.titleFontSize - 2, fontFamily: variables.titleFontfamily, - textAlign: "center", - fontWeight: "500", + textAlign: 'center', + fontWeight: '500', paddingBottom: 3 }, - "NativeBase.Subtitle": { + 'NativeBase.Subtitle': { fontSize: variables.subTitleFontSize, fontFamily: variables.titleFontfamily, color: variables.subtitleColor, - textAlign: "center" + textAlign: 'center' } } }, - ".transparent": { - backgroundColor: "transparent", - borderBottomColor: "transparent", + '.transparent': { + backgroundColor: 'transparent', + borderBottomColor: 'transparent', elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, - paddingTop: platform === "android" ? StatusBar.currentHeight : undefined, - height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight + paddingTop: + platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined, + height: + platform === PLATFORM.ANDROID + ? variables.toolbarHeight + StatusBar.currentHeight + : variables.toolbarHeight }, - ".noShadow": { + '.noShadow': { elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null }, - ".hasTabs": { + '.hasTabs': { elevation: 0, shadowColor: null, shadowOffset: null, @@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => { shadowOpacity: null, borderBottomWidth: null }, - ".hasSegment": { + '.hasSegment': { elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, borderBottomWidth: null, - "NativeBase.Left": { + 'NativeBase.Left': { flex: 0.3 }, - "NativeBase.Right": { + 'NativeBase.Right': { flex: 0.3 }, - "NativeBase.Body": { + 'NativeBase.Body': { flex: 1, - "NativeBase.Segment": { + 'NativeBase.Segment': { marginRight: 0, - alignSelf: "center", - "NativeBase.Button": { + alignSelf: 'center', + 'NativeBase.Button': { paddingLeft: 0, paddingRight: 0 } } } }, - ".noLeft": { - "NativeBase.Left": { - width: platform === "ios" ? undefined : 0, - flex: platform === "ios" ? 1 : 0 + '.noLeft': { + 'NativeBase.Left': { + width: platform === PLATFORM.IOS ? undefined : 0, + flex: platform === PLATFORM.IOS ? 1 : 0 }, - "NativeBase.Body": { - "NativeBase.Title": { - paddingLeft: platform === "ios" ? undefined : 10 + 'NativeBase.Body': { + 'NativeBase.Title': { + paddingLeft: platform === PLATFORM.IOS ? undefined : 10 }, - "NativeBase.Subtitle": { - paddingLeft: platform === "ios" ? undefined : 10 + 'NativeBase.Subtitle': { + paddingLeft: platform === PLATFORM.IOS ? undefined : 10 } } }, - "NativeBase.Button": { - justifyContent: "center", - alignSelf: "center", - alignItems: "center", - ".transparent": { - "NativeBase.Text": { + 'NativeBase.Button': { + justifyContent: 'center', + alignSelf: 'center', + alignItems: 'center', + '.transparent': { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontWeight: "600" + fontWeight: '600' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, paddingHorizontal: variables.buttonPadding }, paddingHorizontal: 15 }, - ".searchBar": { - "NativeBase.Item": { - "NativeBase.Icon": { - backgroundColor: "transparent", + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', color: variables.dropdownLinkColor, fontSize: variables.toolbarSearchIconSize, - alignItems: "center", + alignItems: 'center', marginTop: 2, paddingRight: 10, paddingLeft: 10 }, - "NativeBase.IconNB": { - backgroundColor: "transparent", + 'NativeBase.IconNB': { + backgroundColor: 'transparent', color: null, - alignSelf: "center" + alignSelf: 'center' }, - "NativeBase.Input": { - alignSelf: "center", + 'NativeBase.Input': { + alignSelf: 'center', lineHeight: null, height: variables.searchBarInputHeight }, - alignSelf: "center", - alignItems: "center", - justifyContent: "flex-start", + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', flex: 1, height: variables.searchBarHeight, - borderColor: "transparent", + borderColor: 'transparent', backgroundColor: variables.toolbarInputColor }, - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { - fontWeight: "500" + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500' }, paddingHorizontal: null, - paddingLeft: platform === "ios" ? 10 : null + paddingLeft: platform === PLATFORM.IOS ? 10 : null }, - paddingHorizontal: platform === "ios" ? undefined : null, - width: platform === "ios" ? undefined : 0, - height: platform === "ios" ? undefined : 0 + paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, + width: platform === PLATFORM.IOS ? undefined : 0, + height: platform === PLATFORM.IOS ? undefined : 0 } }, - ".rounded": { - "NativeBase.Item": { + '.rounded': { + 'NativeBase.Item': { borderRadius: - platform === "ios" && platformStyle !== "material" ? 25 : 3 + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 25 + : 3 } }, - "NativeBase.Left": { - "NativeBase.Button": { - ".hasText": { + 'NativeBase.Left': { + 'NativeBase.Button': { + '.hasText': { marginLeft: -10, height: 30, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize, marginTop: 2, marginRight: 5, marginLeft: 2 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 0, + fontSize: platform === PLATFORM.IOS ? 17 : 0, marginLeft: 7, lineHeight: 19.5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize, marginTop: 2, @@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => { marginLeft: 2 } }, - ".transparent": { + '.transparent': { marginLeft: - platform === "ios" && platformStyle !== "material" ? -3 : 0, - "NativeBase.Icon": { + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? -3 + : 0, + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: - platform === "ios" && variables.platformStyle !== "material" + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL ? variables.iconHeaderSize + 1 : variables.iconHeaderSize, marginTop: 0, @@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => { marginLeft: 1, paddingTop: 1 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: - platform === "ios" && variables.platformStyle !== "material" + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL ? variables.iconHeaderSize + 1 : variables.iconHeaderSize - 2, marginTop: 0, @@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => { marginLeft: 1, paddingTop: 1 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 0, - top: platform === "ios" ? 1 : -1.5, + fontSize: platform === PLATFORM.IOS ? 17 : 0, + top: platform === PLATFORM.IOS ? 1 : -1.5, paddingLeft: - platform === "ios" && platformStyle !== "material" ? 2 : 5, + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 2 + : 5, paddingRight: - platform === "ios" && platformStyle !== "material" + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? undefined : 10 }, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => { shadowRadius: null, shadowOpacity: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, alignSelf: null, 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, - alignSelf: "center", - alignItems: "flex-start" + flex: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 1 + : 0.4, + alignSelf: 'center', + alignItems: 'flex-start' }, - "NativeBase.Body": { + 'NativeBase.Body': { flex: 1, alignItems: - platform === "ios" && platformStyle !== "material" - ? "center" - : "flex-start", - alignSelf: "center", - "NativeBase.Segment": { + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 'center' + : 'flex-start', + alignSelf: 'center', + 'NativeBase.Segment': { borderWidth: 0, - alignSelf: "flex-end", - marginRight: platform === "ios" ? -40 : -55 + alignSelf: 'flex-end', + marginRight: platform === PLATFORM.IOS ? -40 : -55 }, - "NativeBase.Button": { - alignSelf: "center", - ".transparent": { - backgroundColor: "transparent" + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.inverseTextColor, - backgroundColor: "transparent" + backgroundColor: 'transparent' } } }, - "NativeBase.Right": { - "NativeBase.Button": { - ".hasText": { + 'NativeBase.Right': { + 'NativeBase.Button': { + '.hasText': { height: 30, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 2, marginRight: 2, marginLeft: 5 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 14, + fontSize: platform === PLATFORM.IOS ? 17 : 14, lineHeight: 19.5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 2, @@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => { marginLeft: 5 } }, - ".transparent": { - marginRight: platform === "ios" ? -9 : -5, + '.transparent': { + marginRight: platform === PLATFORM.IOS ? -9 : -5, paddingLeft: 15, paddingRight: 12, paddingHorizontal: 15, borderRadius: 50, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 0, @@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => { marginRight: 0 // paddingTop: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 0, @@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => { marginRight: 0 // paddingTop: 0 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 14, - top: platform === "ios" ? 1 : -1.5, + fontSize: platform === PLATFORM.IOS ? 17 : 14, + top: platform === PLATFORM.IOS ? 1 : -1.5, paddingRight: - platform === "ios" && variables.platformStyle !== "material" + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL ? 0 : undefined }, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => { shadowRadius: null, shadowOpacity: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, alignSelf: null, paddingHorizontal: variables.buttonPadding }, flex: 1, - alignSelf: "center", - alignItems: "flex-end", - flexDirection: "row", - justifyContent: "flex-end" + alignSelf: 'center', + alignItems: 'flex-end', + flexDirection: 'row', + justifyContent: 'flex-end' }, backgroundColor: variables.toolbarDefaultBg, - flexDirection: "row", + flexDirection: 'row', // paddingHorizontal: 10, paddingLeft: - platform === "ios" && variables.platformStyle !== "material" ? 6 : 10, + platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL + ? 6 + : 10, paddingRight: 10, - justifyContent: "center", - paddingTop: platform === "ios" ? 18 : 0, + justifyContent: 'center', + paddingTop: platform === PLATFORM.IOS ? 18 : 0, borderBottomWidth: - platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, + platform === PLATFORM.IOS + ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) + : 0, borderBottomColor: variables.toolbarDefaultBorder, height: - variables.platform === "ios" && variables.platformStyle === "material" + variables.platform === PLATFORM.IOS && + variables.platformStyle === PLATFORM.MATERIAL ? variables.toolbarHeight + 10 : variables.toolbarHeight, elevation: 3, - shadowColor: platformStyle === "material" ? "#000" : undefined, + shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, shadowOffset: - platformStyle === "material" ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === "material" ? 0.2 : undefined, - shadowRadius: platformStyle === "material" ? 1.2 : undefined, + platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, + shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, top: 0, left: 0, right: 0 diff --git a/native-base-theme/components/Icon.js b/native-base-theme/components/Icon.js index 0b75534..5cff95d 100644 --- a/native-base-theme/components/Icon.js +++ b/native-base-theme/components/Icon.js @@ -1,11 +1,11 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const iconTheme = { fontSize: variables.iconFontSize, - color: "#000" + color: variable.textColor }; return iconTheme; diff --git a/native-base-theme/components/Input.js b/native-base-theme/components/Input.js index ad0abff..d0dd6af 100644 --- a/native-base-theme/components/Input.js +++ b/native-base-theme/components/Input.js @@ -2,10 +2,10 @@ import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const inputTheme = { '.multiline': { - height: null, + height: null }, height: variables.inputHeightBase, color: variables.inputColor, diff --git a/native-base-theme/components/InputGroup.js b/native-base-theme/components/InputGroup.js index 9d33525..7988ca5 100644 --- a/native-base-theme/components/InputGroup.js +++ b/native-base-theme/components/InputGroup.js @@ -1,20 +1,20 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const inputGroupTheme = { - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 24, color: variables.sTabBarActiveTextColor, paddingHorizontal: 5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: 24, color: variables.sTabBarActiveTextColor, paddingHorizontal: 5 }, - "NativeBase.Input": { + 'NativeBase.Input': { height: variables.inputHeightBase, color: variables.inputColor, paddingLeft: 5, @@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => { fontSize: variables.inputFontSize, lineHeight: variables.inputLineHeight }, - ".underline": { - ".success": { + '.underline': { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, paddingLeft: 5, @@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => { borderLeftWidth: 0, borderColor: variables.inputBorderColor }, - ".regular": { - ".success": { + '.regular': { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, paddingLeft: 5, borderWidth: variables.borderWidth, borderColor: variables.inputBorderColor }, - ".rounded": { - ".success": { + '.rounded': { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, paddingLeft: 5, @@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputBorderColor }, - ".success": { - "NativeBase.Icon": { + '.success': { + 'NativeBase.Icon': { color: variables.inputSuccessBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputSuccessBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputSuccessBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputSuccessBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth, borderTopWidth: 0, borderRightWidth: 0, @@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputSuccessBorderColor }, - ".error": { - "NativeBase.Icon": { + '.error': { + 'NativeBase.Icon': { color: variables.inputErrorBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputErrorBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputErrorBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputErrorBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth, borderTopWidth: 0, borderRightWidth: 0, @@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => { }, borderColor: variables.inputErrorBorderColor }, - ".disabled": { - "NativeBase.Icon": { - color: "#384850" + '.disabled': { + 'NativeBase.Icon': { + color: '#384850' }, - "NativeBase.IconNB": { - color: "#384850" + 'NativeBase.IconNB': { + color: '#384850' } }, @@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => { borderRightWidth: 0, borderLeftWidth: 0, borderColor: variables.inputBorderColor, - backgroundColor: "transparent", - flexDirection: "row", - alignItems: "center" + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center' }; return inputGroupTheme; diff --git a/native-base-theme/components/Item.js b/native-base-theme/components/Item.js index 447f297..2305604 100644 --- a/native-base-theme/components/Item.js +++ b/native-base-theme/components/Item.js @@ -1,37 +1,38 @@ // @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 = { - ".floatingLabel": { - "NativeBase.Input": { + '.floatingLabel': { + 'NativeBase.Input': { height: 50, top: 8, paddingTop: 3, paddingBottom: 7, - ".multiline": { + '.multiline': { minHeight: variables.inputHeightBase, - paddingTop: Platform.OS === "ios" ? 10 : 3, - paddingBottom: Platform.OS === "ios" ? 14 : 10 + paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3, + paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10 } }, - "NativeBase.Label": { + 'NativeBase.Label': { paddingTop: 5 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { top: 6, paddingTop: 8 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { top: 6, paddingTop: 8 } }, - ".fixedLabel": { - "NativeBase.Label": { + '.fixedLabel': { + 'NativeBase.Label': { position: null, top: null, left: null, @@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => { width: null, fontSize: variables.inputFontSize }, - "NativeBase.Input": { + 'NativeBase.Input': { flex: 2, fontSize: variables.inputFontSize } }, - ".stackedLabel": { - "NativeBase.Label": { + '.stackedLabel': { + 'NativeBase.Label': { position: null, top: null, left: null, right: null, paddingTop: 5, - alignSelf: "flex-start", + alignSelf: 'flex-start', fontSize: variables.inputFontSize - 2 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginTop: 36 }, - "NativeBase.Input": { - alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start", + 'NativeBase.Input': { + alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start', flex: 1, - width: Platform.OS === "ios" ? null : variables.deviceWidth - 25, + width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25, fontSize: variables.inputFontSize, lineHeight: variables.inputLineHeight - 6, - ".secureTextEntry": { - fontSize: variables.inputFontSize - 4 + '.secureTextEntry': { + fontSize: variables.inputFontSize }, - ".multiline": { - paddingTop: Platform.OS === "ios" ? 9 : undefined, - paddingBottom: Platform.OS === "ios" ? 9 : undefined + '.multiline': { + paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined, + paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined } }, flexDirection: null, minHeight: variables.inputHeightBase + 15 }, - ".inlineLabel": { - "NativeBase.Label": { + '.inlineLabel': { + 'NativeBase.Label': { position: null, top: null, left: null, @@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => { width: null, fontSize: variables.inputFontSize }, - "NativeBase.Input": { + 'NativeBase.Input': { paddingLeft: 5, fontSize: variables.inputFontSize }, - flexDirection: "row" + flexDirection: 'row' }, - "NativeBase.Label": { + 'NativeBase.Label': { fontSize: variables.inputFontSize, color: variables.inputColorPlaceholder, paddingRight: 5 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 24, paddingRight: 8 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: 24, paddingRight: 8 }, - "NativeBase.Input": { - ".multiline": { + 'NativeBase.Input': { + '.multiline': { height: null }, height: variables.inputHeightBase, color: variables.inputColor, flex: 1, - top: Platform.OS === "ios" ? 1.5 : undefined, + top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined, fontSize: variables.inputFontSize }, - ".underline": { - "NativeBase.Input": { + '.underline': { + 'NativeBase.Input': { paddingLeft: 15 }, - ".success": { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, borderWidth: variables.borderWidth * 2, @@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => { borderLeftWidth: 0, borderColor: variables.inputBorderColor }, - ".regular": { - "NativeBase.Input": { + '.regular': { + 'NativeBase.Input': { paddingLeft: 8 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { paddingLeft: 10 }, - ".success": { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, borderWidth: variables.borderWidth * 2, borderColor: variables.inputBorderColor }, - ".rounded": { - "NativeBase.Input": { + '.rounded': { + 'NativeBase.Input': { paddingLeft: 8 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { paddingLeft: 10 }, - ".success": { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, borderWidth: variables.borderWidth * 2, @@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputBorderColor }, - ".success": { - "NativeBase.Icon": { + '.success': { + 'NativeBase.Icon': { color: variables.inputSuccessBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputSuccessBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputSuccessBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputSuccessBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth * 2, borderTopWidth: 0, borderRightWidth: 0, @@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputSuccessBorderColor }, - ".error": { - "NativeBase.Icon": { + '.error': { + 'NativeBase.Icon': { color: variables.inputErrorBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputErrorBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputErrorBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputErrorBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth * 2, borderTopWidth: 0, borderRightWidth: 0, @@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => { }, borderColor: variables.inputErrorBorderColor }, - ".disabled": { - "NativeBase.Icon": { - color: "#384850" + '.disabled': { + 'NativeBase.Icon': { + color: '#384850' }, - "NativeBase.IconNB": { - color: "#384850" + 'NativeBase.IconNB': { + color: '#384850' } }, - ".picker": { + '.picker': { marginLeft: 0 }, @@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => { borderRightWidth: 0, borderLeftWidth: 0, borderColor: variables.inputBorderColor, - backgroundColor: "transparent", - flexDirection: "row", - alignItems: "center", + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center', marginLeft: 2 }; diff --git a/native-base-theme/components/Label.js b/native-base-theme/components/Label.js index 01aa47b..118f648 100644 --- a/native-base-theme/components/Label.js +++ b/native-base-theme/components/Label.js @@ -1,10 +1,8 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const labelTheme = { - ".focused": { + '.focused': { width: 0 }, fontSize: 17 diff --git a/native-base-theme/components/Left.js b/native-base-theme/components/Left.js index 0a4bc96..e01d693 100644 --- a/native-base-theme/components/Left.js +++ b/native-base-theme/components/Left.js @@ -1,12 +1,10 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const leftTheme = { flex: 1, alignSelf: 'center', - alignItems: 'flex-start', + alignItems: 'flex-start' }; return leftTheme; diff --git a/native-base-theme/components/ListItem.js b/native-base-theme/components/ListItem.js index 94a345d..c41ec5d 100644 --- a/native-base-theme/components/ListItem.js +++ b/native-base-theme/components/ListItem.js @@ -1,244 +1,246 @@ // @flow -import { Platform, PixelRatio } from "react-native"; +import { Platform, PixelRatio } from 'react-native'; -import pickerTheme from "./Picker"; -import variable from "./../variables/platform"; +import pickerTheme from './Picker'; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platform = variables.platform; const selectedStyle = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.listItemSelected }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.listItemSelected } }; const listItemTheme = { - "NativeBase.InputGroup": { - "NativeBase.Icon": { + 'NativeBase.InputGroup': { + 'NativeBase.Icon': { paddingRight: 5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { paddingRight: 5 }, - "NativeBase.Input": { + 'NativeBase.Input': { paddingHorizontal: 5 }, flex: 1, borderWidth: null, margin: -10, - borderBottomColor: "transparent" + borderBottomColor: 'transparent' }, - ".searchBar": { - "NativeBase.Item": { - "NativeBase.Icon": { - backgroundColor: "transparent", + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', color: variables.dropdownLinkColor, fontSize: - platform === "ios" + platform === PLATFORM.IOS ? variables.iconFontSize - 10 : variables.iconFontSize - 5, - alignItems: "center", + alignItems: 'center', marginTop: 2, paddingRight: 8 }, - "NativeBase.IconNB": { - backgroundColor: "transparent", + 'NativeBase.IconNB': { + backgroundColor: 'transparent', color: null, - alignSelf: "center" + alignSelf: 'center' }, - "NativeBase.Input": { - alignSelf: "center" + 'NativeBase.Input': { + alignSelf: 'center' }, - alignSelf: "center", - alignItems: "center", - justifyContent: "flex-start", + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', flex: 1, - height: platform === "ios" ? 30 : 40, - borderColor: "transparent", - backgroundColor: "#fff", + height: platform === PLATFORM.IOS ? 30 : 40, + borderColor: 'transparent', + backgroundColor: '#fff', borderRadius: 5 }, - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { - fontWeight: "500" + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500' }, paddingHorizontal: null, - paddingLeft: platform === "ios" ? 10 : null + paddingLeft: platform === PLATFORM.IOS ? 10 : null }, - paddingHorizontal: platform === "ios" ? undefined : null, - width: platform === "ios" ? undefined : 0, - height: platform === "ios" ? undefined : 0 + paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, + width: platform === PLATFORM.IOS ? undefined : 0, + height: platform === PLATFORM.IOS ? undefined : 0 }, backgroundColor: variables.toolbarInputColor, padding: 10, marginLeft: null }, - "NativeBase.CheckBox": { + 'NativeBase.CheckBox': { marginLeft: -10, marginRight: 10 }, - ".first": { - ".itemHeader": { + '.first': { + '.itemHeader': { paddingTop: variables.listItemPadding + 3 } }, - ".itemHeader": { - ".first": { + '.itemHeader': { + '.first': { paddingTop: variables.listItemPadding + 3 }, - borderBottomWidth: platform === "ios" ? variables.borderWidth : null, + borderBottomWidth: + platform === PLATFORM.IOS ? variables.borderWidth : null, marginLeft: null, padding: variables.listItemPadding, paddingLeft: variables.listItemPadding + 5, paddingTop: - platform === "ios" ? variables.listItemPadding + 25 : undefined, + platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined, paddingBottom: - platform === "android" ? variables.listItemPadding + 20 : undefined, - flexDirection: "row", + platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined, + flexDirection: 'row', borderColor: variables.listBorderColor, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: 14, - color: platform === "ios" ? undefined : variables.listNoteColor + color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor } }, - ".itemDivider": { + '.itemDivider': { borderBottomWidth: null, marginLeft: null, padding: variables.listItemPadding, paddingLeft: variables.listItemPadding + 5, backgroundColor: variables.listDividerBg, - flexDirection: "row", + flexDirection: 'row', borderColor: variables.listBorderColor }, - ".selected": { - "NativeBase.Left": { + '.selected': { + 'NativeBase.Left': { ...selectedStyle }, - "NativeBase.Body": { + 'NativeBase.Body': { ...selectedStyle }, - "NativeBase.Right": { + 'NativeBase.Right': { ...selectedStyle }, ...selectedStyle }, - "NativeBase.Left": { - "NativeBase.Body": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' }, - fontWeight: "600" + fontWeight: '600' }, marginLeft: 10, alignItems: null, alignSelf: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { width: variables.iconFontSize - 10, fontSize: variables.iconFontSize - 10 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { width: variables.iconFontSize - 10, fontSize: variables.iconFontSize - 10 }, - "NativeBase.Text": { - alignSelf: "center" + 'NativeBase.Text': { + alignSelf: 'center' }, - flexDirection: "row" + flexDirection: 'row' }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginHorizontal: variables.listItemPadding, - ".note": { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' } }, alignSelf: null, alignItems: null }, - "NativeBase.Right": { - "NativeBase.Badge": { + 'NativeBase.Right': { + 'NativeBase.Badge': { alignSelf: null }, - "NativeBase.PickerNB": { - "NativeBase.Button": { + 'NativeBase.PickerNB': { + 'NativeBase.Button': { marginRight: -15, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.topTabBarActiveTextColor } } }, - "NativeBase.Button": { + 'NativeBase.Button': { alignSelf: null, - ".transparent": { - "NativeBase.Text": { + '.transparent': { + 'NativeBase.Text': { color: variables.topTabBarActiveTextColor } } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { alignSelf: null, fontSize: variables.iconFontSize - 8, - color: "#c9c8cd" + color: '#c9c8cd' }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { alignSelf: null, fontSize: variables.iconFontSize - 8, - color: "#c9c8cd" + color: '#c9c8cd' }, - "NativeBase.Text": { - ".note": { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' }, alignSelf: null }, - "NativeBase.Thumbnail": { + 'NativeBase.Thumbnail': { alignSelf: null }, - "NativeBase.Image": { + 'NativeBase.Image': { alignSelf: null }, - "NativeBase.Radio": { + 'NativeBase.Radio': { alignSelf: null }, - "NativeBase.Checkbox": { + 'NativeBase.Checkbox': { alignSelf: null }, - "NativeBase.Switch": { + 'NativeBase.Switch': { alignSelf: null }, padding: null, flex: 0.28 }, - "NativeBase.Text": { - ".note": { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' }, - alignSelf: "center" + alignSelf: 'center' }, - ".last": { + '.last': { marginLeft: -(variables.listItemPadding + 5), paddingLeft: (variables.listItemPadding + 5) * 2, top: 1 }, - ".avatar": { - "NativeBase.Left": { + '.avatar': { + 'NativeBase.Left': { flex: 0, - alignSelf: "flex-start", + alignSelf: 'flex-start', paddingTop: 14 }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginLeft: null }, flex: 1, @@ -247,24 +249,24 @@ export default (variables /*: * */ = variable) => { borderColor: variables.listBorderColor, marginLeft: variables.listItemPadding + 5 }, - "NativeBase.Right": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Right': { + 'NativeBase.Text': { + '.note': { fontSize: variables.noteFontSize - 2 } }, flex: 0, paddingRight: variables.listItemPadding + 5, - alignSelf: "stretch", + alignSelf: 'stretch', paddingVertical: variables.listItemPadding, borderBottomWidth: variables.borderWidth, borderColor: variables.listBorderColor }, - ".noBorder": { - "NativeBase.Body": { + '.noBorder': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null } }, @@ -272,12 +274,12 @@ export default (variables /*: * */ = variable) => { paddingVertical: null, paddingRight: null }, - ".thumbnail": { - "NativeBase.Left": { + '.thumbnail': { + 'NativeBase.Left': { flex: 0 }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginLeft: null }, flex: 1, @@ -286,10 +288,10 @@ export default (variables /*: * */ = variable) => { borderColor: variables.listBorderColor, marginLeft: variables.listItemPadding + 5 }, - "NativeBase.Right": { - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { fontSize: variables.listNoteSize, color: variables.sTabBarActiveTextColor } @@ -297,18 +299,18 @@ export default (variables /*: * */ = variable) => { height: null }, flex: 0, - justifyContent: "center", - alignSelf: "stretch", + justifyContent: 'center', + alignSelf: 'stretch', paddingRight: variables.listItemPadding + 5, paddingVertical: variables.listItemPadding + 5, borderBottomWidth: variables.borderWidth, borderColor: variables.listBorderColor }, - ".noBorder": { - "NativeBase.Body": { + '.noBorder': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null } }, @@ -316,103 +318,103 @@ export default (variables /*: * */ = variable) => { paddingVertical: null, paddingRight: null }, - ".icon": { - ".last": { - "NativeBase.Body": { + '.icon': { + '.last': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null }, borderBottomWidth: variables.borderWidth, borderColor: variables.listBorderColor }, - "NativeBase.Left": { - "NativeBase.Button": { - "NativeBase.IconNB": { + 'NativeBase.Left': { + 'NativeBase.Button': { + 'NativeBase.IconNB': { marginHorizontal: null, fontSize: variables.iconFontSize - 5 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginHorizontal: null, fontSize: variables.iconFontSize - 8 }, - alignSelf: "center", + alignSelf: 'center', height: 29, width: 29, borderRadius: 6, paddingVertical: null, paddingHorizontal: null, - alignItems: "center", - justifyContent: "center" + alignItems: 'center', + justifyContent: 'center' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { width: variables.iconFontSize - 5, fontSize: variables.iconFontSize - 2 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { width: variables.iconFontSize - 5, fontSize: variables.iconFontSize - 2 }, paddingRight: variables.listItemPadding + 5, flex: 0, height: 44, - justifyContent: "center", - alignItems: "center" + justifyContent: 'center', + alignItems: 'center' }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginLeft: null, fontSize: 17 }, flex: 1, height: 44, - justifyContent: "center", + justifyContent: 'center', borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), borderColor: variables.listBorderColor }, - "NativeBase.Right": { - "NativeBase.Text": { - textAlign: "center", - color: "#8F8E95", + 'NativeBase.Right': { + 'NativeBase.Text': { + textAlign: 'center', + color: '#8F8E95', fontSize: 17 }, - "NativeBase.IconNB": { - color: "#C8C7CC", + 'NativeBase.IconNB': { + color: '#C8C7CC', fontSize: variables.iconFontSize - 10, - alignSelf: "center", + alignSelf: 'center', paddingLeft: 10, paddingTop: 3 }, - "NativeBase.Icon": { - color: "#C8C7CC", + 'NativeBase.Icon': { + color: '#C8C7CC', fontSize: variables.iconFontSize - 10, - alignSelf: "center", + alignSelf: 'center', paddingLeft: 10, paddingTop: 3 }, - "NativeBase.Switch": { - marginRight: Platform.OS === "ios" ? undefined : -5, + 'NativeBase.Switch': { + marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5, alignSelf: null }, - "NativeBase.PickerNB": { + 'NativeBase.PickerNB': { ...pickerTheme() }, - flexDirection: "row", - alignItems: "center", + flexDirection: 'row', + alignItems: 'center', flex: 0, - alignSelf: "stretch", + alignSelf: 'stretch', height: 44, - justifyContent: "flex-end", + justifyContent: 'flex-end', borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), borderColor: variables.listBorderColor, paddingRight: variables.listItemPadding + 5 }, - ".noBorder": { - "NativeBase.Body": { + '.noBorder': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null } }, @@ -420,18 +422,18 @@ export default (variables /*: * */ = variable) => { paddingVertical: null, paddingRight: null, height: 44, - justifyContent: "center" + justifyContent: 'center' }, - ".noBorder": { + '.noBorder': { borderBottomWidth: null }, - ".noIndent": { + '.noIndent': { marginLeft: null, padding: variables.listItemPadding, paddingLeft: variables.listItemPadding + 6 }, - alignItems: "center", - flexDirection: "row", + alignItems: 'center', + flexDirection: 'row', paddingRight: variables.listItemPadding + 6, paddingVertical: variables.listItemPadding + 3, marginLeft: variables.listItemPadding + 6, diff --git a/native-base-theme/components/Picker.android.js b/native-base-theme/components/Picker.android.js index b1867f9..300a743 100644 --- a/native-base-theme/components/Picker.android.js +++ b/native-base-theme/components/Picker.android.js @@ -1,11 +1,9 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const pickerTheme = { - ".note": { - color: "#8F8E95" + '.note': { + color: '#8F8E95' }, // width: 90, marginRight: -4, diff --git a/native-base-theme/components/Picker.ios.js b/native-base-theme/components/Picker.ios.js index 36ea854..b81b056 100644 --- a/native-base-theme/components/Picker.ios.js +++ b/native-base-theme/components/Picker.ios.js @@ -1,8 +1,6 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const pickerTheme = {}; return pickerTheme; diff --git a/native-base-theme/components/Picker.js b/native-base-theme/components/Picker.js index b1867f9..300a743 100644 --- a/native-base-theme/components/Picker.js +++ b/native-base-theme/components/Picker.js @@ -1,11 +1,9 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const pickerTheme = { - ".note": { - color: "#8F8E95" + '.note': { + color: '#8F8E95' }, // width: 90, marginRight: -4, diff --git a/native-base-theme/components/Radio.js b/native-base-theme/components/Radio.js index b6fb0ea..d1e0e5f 100644 --- a/native-base-theme/components/Radio.js +++ b/native-base-theme/components/Radio.js @@ -1,26 +1,29 @@ // @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 = { - ".selected": { - "NativeBase.IconNB": { - color: Platform.OS === "ios" - ? variables.radioColor - : variables.radioSelectedColorAndroid, - lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight, - height: Platform.OS === "ios" ? 20 : undefined + '.selected': { + 'NativeBase.IconNB': { + color: + Platform.OS === PLATFORM.IOS + ? variables.radioColor + : variables.radioSelectedColorAndroid, + lineHeight: + Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight, + height: Platform.OS === PLATFORM.IOS ? 20 : undefined } }, - "NativeBase.IconNB": { - color: Platform.OS === "ios" ? "transparent" : undefined, - lineHeight: Platform.OS === "ios" - ? undefined - : variables.radioBtnLineHeight, - fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize + 'NativeBase.IconNB': { + color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined, + lineHeight: + Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight, + fontSize: + Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize } }; diff --git a/native-base-theme/components/Right.js b/native-base-theme/components/Right.js index 382e70b..53b3308 100644 --- a/native-base-theme/components/Right.js +++ b/native-base-theme/components/Right.js @@ -1,15 +1,13 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const rightTheme = { 'NativeBase.Button': { - alignSelf: null, + alignSelf: null }, flex: 1, alignSelf: 'center', - alignItems: 'flex-end', + alignItems: 'flex-end' }; return rightTheme; diff --git a/native-base-theme/components/Segment.js b/native-base-theme/components/Segment.js index 6ff15c2..8ad669c 100644 --- a/native-base-theme/components/Segment.js +++ b/native-base-theme/components/Segment.js @@ -1,50 +1,51 @@ // @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 segmentTheme = { height: 45, borderColor: variables.segmentBorderColorMain, - flexDirection: "row", - justifyContent: "center", + flexDirection: 'row', + justifyContent: 'center', backgroundColor: variables.segmentBackgroundColor, - "NativeBase.Button": { - alignSelf: "center", + 'NativeBase.Button': { + alignSelf: 'center', borderRadius: 0, paddingTop: 3, paddingBottom: 3, height: 30, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderWidth: 1, borderLeftWidth: 0, borderColor: variables.segmentBorderColor, elevation: 0, - ".active": { + '.active': { backgroundColor: variables.segmentActiveBackgroundColor, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.segmentActiveTextColor }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.segmentActiveTextColor } }, - ".first": { - borderTopLeftRadius: platform === "ios" ? 5 : undefined, - borderBottomLeftRadius: platform === "ios" ? 5 : undefined, + '.first': { + borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, borderLeftWidth: 1 }, - ".last": { - borderTopRightRadius: platform === "ios" ? 5 : undefined, - borderBottomRightRadius: platform === "ios" ? 5 : undefined + '.last': { + borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.segmentTextColor, fontSize: 14 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 22, paddingTop: 0, color: variables.segmentTextColor diff --git a/native-base-theme/components/Separator.js b/native-base-theme/components/Separator.js index f31b48a..7fdf313 100644 --- a/native-base-theme/components/Separator.js +++ b/native-base-theme/components/Separator.js @@ -2,7 +2,7 @@ import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const theme = { '.group': { height: 50, @@ -11,38 +11,38 @@ export default (variables /*: * */ = variable) => { '.bordered': { height: 50, paddingVertical: variables.listItemPadding - 8, - paddingTop: variables.listItemPadding + 12, - }, + paddingTop: variables.listItemPadding + 12 + } }, '.bordered': { '.noTopBorder': { - borderTopWidth: 0, + borderTopWidth: 0 }, '.noBottomBorder': { - borderBottomWidth: 0, + borderBottomWidth: 0 }, height: 35, paddingTop: variables.listItemPadding + 2, paddingBottom: variables.listItemPadding, borderBottomWidth: variables.borderWidth, borderTopWidth: variables.borderWidth, - borderColor: variables.listBorderColor, + borderColor: variables.listBorderColor }, 'NativeBase.Text': { fontSize: variables.tabBarTextSize - 2, - color: '#777', + color: '#777' }, '.noTopBorder': { - borderTopWidth: 0, + borderTopWidth: 0 }, '.noBottomBorder': { - borderBottomWidth: 0, + borderBottomWidth: 0 }, height: 38, backgroundColor: '#F0EFF5', flex: 1, justifyContent: 'center', - paddingLeft: variables.listItemPadding + 5, + paddingLeft: variables.listItemPadding + 5 }; return theme; diff --git a/native-base-theme/components/Spinner.js b/native-base-theme/components/Spinner.js index edc811b..a453b3f 100644 --- a/native-base-theme/components/Spinner.js +++ b/native-base-theme/components/Spinner.js @@ -1,8 +1,6 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const spinnerTheme = { height: 80 }; diff --git a/native-base-theme/components/Subtitle.js b/native-base-theme/components/Subtitle.js index 897c560..bb8ea0a 100644 --- a/native-base-theme/components/Subtitle.js +++ b/native-base-theme/components/Subtitle.js @@ -1,17 +1,18 @@ // @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 = { fontSize: variables.subTitleFontSize, fontFamily: variables.titleFontfamily, color: variables.subtitleColor, - textAlign: "center", - paddingLeft: Platform.OS === "ios" ? 4 : 0, - marginLeft: Platform.OS === "ios" ? undefined : -3 + textAlign: 'center', + paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, + marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3 }; return subtitleTheme; diff --git a/native-base-theme/components/SwipeRow.js b/native-base-theme/components/SwipeRow.js index 3686582..41d6083 100644 --- a/native-base-theme/components/SwipeRow.js +++ b/native-base-theme/components/SwipeRow.js @@ -1,47 +1,45 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const swipeRowTheme = { - "NativeBase.ListItem": { - ".list": { - backgroundColor: "#FFF", + 'NativeBase.ListItem': { + '.list': { + backgroundColor: '#FFF' }, - marginLeft: 0, + marginLeft: 0 }, - "NativeBase.Left": { + 'NativeBase.Left': { flex: 0, alignSelf: null, alignItems: null, - "NativeBase.Button": { + 'NativeBase.Button': { flex: 1, - alignItems: "center", - justifyContent: "center", - alignSelf: "stretch", - borderRadius: 0, - }, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } }, - "NativeBase.Right": { + 'NativeBase.Right': { flex: 0, alignSelf: null, alignItems: null, - "NativeBase.Button": { + 'NativeBase.Button': { flex: 1, - alignItems: "center", - justifyContent: "center", - alignSelf: "stretch", - borderRadius: 0, - }, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } }, - "NativeBase.Button": { + 'NativeBase.Button': { flex: 1, height: null, - alignItems: "center", - justifyContent: "center", - alignSelf: "stretch", - borderRadius: 0, - }, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } }; return swipeRowTheme; diff --git a/native-base-theme/components/Switch.js b/native-base-theme/components/Switch.js index 116fa8f..6b667bc 100644 --- a/native-base-theme/components/Switch.js +++ b/native-base-theme/components/Switch.js @@ -1,10 +1,8 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const switchTheme = { - marginVertical: -5, + marginVertical: -5 }; return switchTheme; diff --git a/native-base-theme/components/Tab.js b/native-base-theme/components/Tab.js index 35ede8b..b242306 100644 --- a/native-base-theme/components/Tab.js +++ b/native-base-theme/components/Tab.js @@ -1,11 +1,9 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const tabTheme = { flex: 1, - backgroundColor: "#FFF" + backgroundColor: '#FFF' }; return tabTheme; diff --git a/native-base-theme/components/TabBar.js b/native-base-theme/components/TabBar.js index 9714cdc..fa1490d 100644 --- a/native-base-theme/components/TabBar.js +++ b/native-base-theme/components/TabBar.js @@ -1,55 +1,55 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const tabBarTheme = { - ".tabIcon": { + '.tabIcon': { height: undefined }, - ".vertical": { + '.vertical': { height: 60 }, - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { fontSize: variables.tabFontSize, color: variables.sTabBarActiveTextColor, - fontWeight: "400" + fontWeight: '400' }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.sTabBarActiveTextColor } }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.sTabBarActiveTextColor }, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: variables.tabFontSize, color: variables.sTabBarActiveTextColor, - fontWeight: "400" + fontWeight: '400' }, - ".isTabActive": { - "NativeBase.Text": { - fontWeight: "900" + '.isTabActive': { + 'NativeBase.Text': { + fontWeight: '900' } }, flex: 1, - alignSelf: "stretch", - alignItems: "center", - justifyContent: "center", + alignSelf: 'stretch', + alignItems: 'center', + justifyContent: 'center', borderRadius: null, - borderBottomColor: "transparent", + borderBottomColor: 'transparent', backgroundColor: variables.tabBgColor }, height: 45, - flexDirection: "row", - justifyContent: "space-around", + flexDirection: 'row', + justifyContent: 'space-around', borderWidth: 1, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, - borderBottomColor: "#ccc", + borderBottomColor: '#ccc', backgroundColor: variables.tabBgColor }; diff --git a/native-base-theme/components/TabContainer.js b/native-base-theme/components/TabContainer.js index 44d4886..fa91548 100644 --- a/native-base-theme/components/TabContainer.js +++ b/native-base-theme/components/TabContainer.js @@ -1,24 +1,24 @@ // @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 platform = variables.platform; const tabContainerTheme = { elevation: 3, height: 50, - flexDirection: "row", - shadowColor: platformStyle === "material" ? "#000" : undefined, - shadowOffset: platformStyle === "material" - ? { width: 0, height: 2 } - : undefined, - shadowOpacity: platformStyle === "material" ? 0.2 : undefined, - shadowRadius: platformStyle === "material" ? 1.2 : undefined, - justifyContent: "space-around", - borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0, + flexDirection: 'row', + shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, + shadowOffset: + platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, + shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, + justifyContent: 'space-around', + borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0, borderColor: variables.topTabBarBorderColor }; diff --git a/native-base-theme/components/TabHeading.js b/native-base-theme/components/TabHeading.js index 9f79903..74cd6f4 100644 --- a/native-base-theme/components/TabHeading.js +++ b/native-base-theme/components/TabHeading.js @@ -1,35 +1,36 @@ // @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 tabHeadingTheme = { - flexDirection: "row", + flexDirection: 'row', backgroundColor: variables.tabDefaultBg, flex: 1, - alignItems: "center", - justifyContent: "center", - ".scrollable": { + alignItems: 'center', + justifyContent: 'center', + '.scrollable': { paddingHorizontal: 20, - flex: platform === "android" ? 0 : 1, - minWidth: platform === "android" ? undefined : 60 + flex: platform === PLATFORM.ANDROID ? 0 : 1, + minWidth: platform === PLATFORM.ANDROID ? undefined : 60 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.topTabBarTextColor, marginHorizontal: 7 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.topTabBarTextColor, - fontSize: platform === "ios" ? 26 : undefined + fontSize: platform === PLATFORM.IOS ? 26 : undefined }, - ".active": { - "NativeBase.Text": { + '.active': { + 'NativeBase.Text': { color: variables.topTabBarActiveTextColor, - fontWeight: "600" + fontWeight: '600' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.topTabBarActiveTextColor } } diff --git a/native-base-theme/components/Text.js b/native-base-theme/components/Text.js index 2c95ce1..8c3fa24 100644 --- a/native-base-theme/components/Text.js +++ b/native-base-theme/components/Text.js @@ -1,14 +1,14 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const textTheme = { fontSize: variables.DefaultFontSize, fontFamily: variables.fontFamily, color: variables.textColor, - ".note": { - color: "#a7a7a7", + '.note': { + color: '#a7a7a7', fontSize: variables.noteFontSize } }; diff --git a/native-base-theme/components/Textarea.js b/native-base-theme/components/Textarea.js index f5e3974..a46d93b 100644 --- a/native-base-theme/components/Textarea.js +++ b/native-base-theme/components/Textarea.js @@ -1,15 +1,15 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const textAreaTheme = { - ".underline": { + '.underline': { borderBottomWidth: variables.borderWidth, marginTop: 5, borderColor: variables.inputBorderColor }, - ".bordered": { + '.bordered': { borderWidth: 1, marginTop: 5, borderColor: variables.inputBorderColor @@ -18,7 +18,7 @@ export default (variables /*: * */ = variable) => { paddingLeft: 10, paddingRight: 5, fontSize: 15, - textAlignVertical: "top" + textAlignVertical: 'top' }; return textAreaTheme; diff --git a/native-base-theme/components/Thumbnail.js b/native-base-theme/components/Thumbnail.js index efff792..c6c9f68 100644 --- a/native-base-theme/components/Thumbnail.js +++ b/native-base-theme/components/Thumbnail.js @@ -1,41 +1,39 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const thumbnailTheme = { '.square': { borderRadius: 0, '.small': { width: 36, height: 36, - borderRadius: 0, + borderRadius: 0 }, '.large': { width: 80, height: 80, - borderRadius: 0, - }, + borderRadius: 0 + } }, '.small': { width: 36, height: 36, borderRadius: 18, '.square': { - borderRadius: 0, - }, + borderRadius: 0 + } }, '.large': { width: 80, height: 80, borderRadius: 40, '.square': { - borderRadius: 0, - }, + borderRadius: 0 + } }, width: 56, height: 56, - borderRadius: 28, + borderRadius: 28 }; return thumbnailTheme; diff --git a/native-base-theme/components/Title.js b/native-base-theme/components/Title.js index 5792e57..33e96bf 100644 --- a/native-base-theme/components/Title.js +++ b/native-base-theme/components/Title.js @@ -1,18 +1,19 @@ // @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 = { fontSize: variables.titleFontSize, fontFamily: variables.titleFontfamily, color: variables.titleFontColor, - fontWeight: Platform.OS === "ios" ? "700" : undefined, - textAlign: "center", - paddingLeft: Platform.OS === "ios" ? 4 : 0, - marginLeft: Platform.OS === "ios" ? undefined : -3, + fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined, + textAlign: 'center', + paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, + marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3, paddingTop: 1 }; diff --git a/native-base-theme/components/Toast.js b/native-base-theme/components/Toast.js index a595308..f01db74 100644 --- a/native-base-theme/components/Toast.js +++ b/native-base-theme/components/Toast.js @@ -1,36 +1,37 @@ // @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 toastTheme = { - ".danger": { + '.danger': { backgroundColor: variables.brandDanger }, - ".warning": { + '.warning': { backgroundColor: variables.brandWarning }, - ".success": { + '.success': { backgroundColor: variables.brandSuccess }, - backgroundColor: "rgba(0,0,0,0.8)", - borderRadius: platform === "ios" ? 5 : 0, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", + backgroundColor: 'rgba(0,0,0,0.8)', + borderRadius: platform === PLATFORM.IOS ? 5 : 0, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', padding: 10, minHeight: 50, - "NativeBase.Text": { - color: "#fff", + 'NativeBase.Text': { + color: '#fff', flex: 1 }, - "NativeBase.Button": { - backgroundColor: "transparent", + 'NativeBase.Button': { + backgroundColor: 'transparent', height: 30, elevation: 0, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: 14 } } diff --git a/native-base-theme/components/View.js b/native-base-theme/components/View.js index b9c7aeb..827581e 100644 --- a/native-base-theme/components/View.js +++ b/native-base-theme/components/View.js @@ -1,10 +1,10 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const viewTheme = { - ".padder": { + '.padder': { padding: variables.contentPadding } }; diff --git a/native-base-theme/components/index.js b/native-base-theme/components/index.js index d1102fd..8b6be3e 100644 --- a/native-base-theme/components/index.js +++ b/native-base-theme/components/index.js @@ -1,216 +1,218 @@ +/* eslint-disable no-param-reassign */ // @flow -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"; +import _ from 'lodash'; -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 = { variables, - "NativeBase.Left": { + 'NativeBase.Left': { ...leftTheme(variables) }, - "NativeBase.Right": { + 'NativeBase.Right': { ...rightTheme(variables) }, - "NativeBase.Body": { + 'NativeBase.Body': { ...bodyTheme(variables) }, - "NativeBase.Header": { + 'NativeBase.Header': { ...headerTheme(variables) }, - "NativeBase.Button": { + 'NativeBase.Button': { ...buttonTheme(variables) }, - "NativeBase.Title": { + 'NativeBase.Title': { ...titleTheme(variables) }, - "NativeBase.Subtitle": { + 'NativeBase.Subtitle': { ...subtitleTheme(variables) }, - "NativeBase.InputGroup": { + 'NativeBase.InputGroup': { ...inputGroupTheme(variables) }, - "NativeBase.Input": { + 'NativeBase.Input': { ...inputTheme(variables) }, - "NativeBase.Badge": { + 'NativeBase.Badge': { ...badgeTheme(variables) }, - "NativeBase.CheckBox": { + 'NativeBase.CheckBox': { ...checkBoxTheme(variables) }, - "NativeBase.Radio": { + 'NativeBase.Radio': { ...radioTheme(variables) }, - "NativeBase.Card": { + 'NativeBase.Card': { ...cardTheme(variables) }, - "NativeBase.CardItem": { + 'NativeBase.CardItem': { ...cardItemTheme(variables) }, - "NativeBase.Toast": { + 'NativeBase.Toast': { ...toastTheme(variables) }, - "NativeBase.H1": { + 'NativeBase.H1': { ...h1Theme(variables) }, - "NativeBase.H2": { + 'NativeBase.H2': { ...h2Theme(variables) }, - "NativeBase.H3": { + 'NativeBase.H3': { ...h3Theme(variables) }, - "NativeBase.Form": { + 'NativeBase.Form': { ...formTheme(variables) }, - "NativeBase.Container": { + 'NativeBase.Container': { ...containerTheme(variables) }, - "NativeBase.Content": { + 'NativeBase.Content': { ...contentTheme(variables) }, - "NativeBase.Footer": { + 'NativeBase.Footer': { ...footerTheme(variables) }, - "NativeBase.Tabs": { + 'NativeBase.Tabs': { flex: 1 }, - "NativeBase.FooterTab": { + 'NativeBase.FooterTab': { ...footerTabTheme(variables) }, - "NativeBase.ListItem": { + 'NativeBase.ListItem': { ...listItemTheme(variables) }, - "NativeBase.ListItem1": { + 'NativeBase.ListItem1': { ...listItemTheme(variables) }, - "NativeBase.Icon": { + 'NativeBase.Icon': { ...iconTheme(variables) }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { ...iconTheme(variables) }, - "NativeBase.Text": { + 'NativeBase.Text': { ...textTheme(variables) }, - "NativeBase.Spinner": { + 'NativeBase.Spinner': { ...spinnerTheme(variables) }, - "NativeBase.Fab": { + 'NativeBase.Fab': { ...fabTheme(variables) }, - "NativeBase.Item": { + 'NativeBase.Item': { ...itemTheme(variables) }, - "NativeBase.Label": { + 'NativeBase.Label': { ...labelTheme(variables) }, - "NativeBase.Textarea": { + 'NativeBase.Textarea': { ...textAreaTheme(variables) }, - "NativeBase.PickerNB": { + 'NativeBase.PickerNB': { ...pickerTheme(variables), - "NativeBase.Button": { - "NativeBase.Text": {} + 'NativeBase.Button': { + 'NativeBase.Text': {} } }, - "NativeBase.Tab": { + 'NativeBase.Tab': { ...tabTheme(variables) }, - "NativeBase.Segment": { + 'NativeBase.Segment': { ...segmentTheme(variables) }, - "NativeBase.TabBar": { + 'NativeBase.TabBar': { ...tabBarTheme(variables) }, - "NativeBase.ViewNB": { + 'NativeBase.ViewNB': { ...viewTheme(variables) }, - "NativeBase.TabHeading": { + 'NativeBase.TabHeading': { ...tabHeadingTheme(variables) }, - "NativeBase.TabContainer": { + 'NativeBase.TabContainer': { ...tabContainerTheme(variables) }, - "NativeBase.Switch": { + 'NativeBase.Switch': { ...switchTheme(variables) }, - "NativeBase.Separator": { + 'NativeBase.Separator': { ...separatorTheme(variables) }, - "NativeBase.SwipeRow": { + 'NativeBase.SwipeRow': { ...swipeRowTheme(variables) }, - "NativeBase.Thumbnail": { + 'NativeBase.Thumbnail': { ...thumbnailTheme(variables) } }; @@ -218,9 +220,9 @@ export default (variables /*: * */ = variable) => { const cssifyTheme = (grandparent, parent, parentKey) => { _.forEach(parent, (style, styleName) => { if ( - styleName.indexOf(".") === 0 && + styleName.indexOf('.') === 0 && parentKey && - parentKey.indexOf(".") === 0 + parentKey.indexOf('.') === 0 ) { if (grandparent) { 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); } }); diff --git a/native-base-theme/variables/commonColor.js b/native-base-theme/variables/commonColor.js index c004877..5b3aa80 100644 --- a/native-base-theme/variables/commonColor.js +++ b/native-base-theme/variables/commonColor.js @@ -1,79 +1,104 @@ // @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 deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; 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 { platformStyle, platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + // Accordion + headerStyle: '#edebed', + iconStyle: '#000', + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + 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, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === PLATFORM.IOS ? 3 : 0, // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnDisabledBg: "#b5b5b5", + buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + buttonDisabledBg: '#b5b5b5', buttonPadding: 6, - get btnPrimaryBg() { + get buttonPrimaryBg() { return this.brandPrimary; }, - get btnPrimaryColor() { + get buttonPrimaryColor() { return this.inverseTextColor; }, - get btnInfoBg() { + get buttonInfoBg() { return this.brandInfo; }, - get btnInfoColor() { + get buttonInfoColor() { return this.inverseTextColor; }, - get btnSuccessBg() { + get buttonSuccessBg() { return this.brandSuccess; }, - get btnSuccessColor() { + get buttonSuccessColor() { return this.inverseTextColor; }, - get btnDangerBg() { + get buttonDangerBg() { return this.brandDanger; }, - get btnDangerColor() { + get buttonDangerColor() { return this.inverseTextColor; }, - get btnWarningBg() { + get buttonWarningBg() { return this.brandWarning; }, - get btnWarningColor() { + get buttonWarningColor() { return this.inverseTextColor; }, - get btnTextSize() { - return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; + get buttonTextSize() { + return platform === PLATFORM.IOS + ? this.fontSizeBase * 1.1 + : this.fontSizeBase - 1; }, - get btnTextSizeLarge() { + get buttonTextSizeLarge() { return this.fontSizeBase * 1.5; }, - get btnTextSizeSmall() { + get buttonTextSizeSmall() { return this.fontSizeBase * 0.8; }, get borderRadiusLarge() { @@ -87,42 +112,45 @@ export default { }, // Card - cardDefaultBg: "#fff", - cardBorderColor: "#ccc", + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', cardBorderRadius: 2, - cardItemPadding: platform === "ios" ? 10 : 12, + cardItemPadding: platform === 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: "#039BE5", + 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: '#039BE5', checkboxSize: 20, - checkboxTickColor: "#fff", + checkboxTickColor: '#fff', // Color - brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", + brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#f4f4f4', - //Container - containerBgColor: "#fff", + // Container + containerBgColor: '#fff', - //Date Picker - datePickerTextColor: "#000", - datePickerBg: "transparent", + // Date Picker + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabWidth: 56, // Font DefaultFontSize: 16, - fontFamily: platform === "ios" ? "System" : "Roboto", + fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', fontSizeBase: 15, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -136,28 +164,28 @@ export default { // Footer footerHeight: 55, - footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", + footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', footerPaddingBottom: 0, // FooterTab - tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea", - tabBarTextSize: platform === "ios" ? 14 : 11, - activeTab: platform === "ios" ? "#007aff" : "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff", - tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", + tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea', + tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, + activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff', + tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', // Header - toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff", - toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", - toolbarHeight: platform === "ios" ? 64 : 56, - toolbarSearchIconSize: platform === "ios" ? 20 : 23, - toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 30 : 50, - toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff", - iosStatusbar: "dark-content", - toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", + toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + 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 ? '#007aff' : '#fff', + iosStatusbar: 'dark-content', + toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', get statusBarColor() { return color(this.toolbarDefaultBg) .darken(0.2) @@ -170,102 +198,102 @@ export default { }, // Icon - iconFamily: "Ionicons", - iconFontSize: platform === "ios" ? 30 : 28, - iconHeaderSize: platform === "ios" ? 33 : 24, + iconFamily: 'Ionicons', + iconFontSize: platform === PLATFORM.IOS ? 30 : 28, + iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, // InputGroup inputFontSize: 17, - inputBorderColor: "#D9D5DC", - inputSuccessBorderColor: "#2b8339", - inputErrorBorderColor: "#ed2f2f", + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', inputHeightBase: 50, get inputColor() { return this.textColor; }, get inputColorPlaceholder() { - return "#575757"; + return '#575757'; }, // Line Height - btnLineHeight: 19, + buttonLineHeight: 19, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, - lineHeight: platform === "ios" ? 20 : 24, + lineHeight: platform === PLATFORM.IOS ? 20 : 24, // List - listBg: "transparent", - listBorderColor: "#c9c9c9", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#DDD", - listItemPadding: platform === "ios" ? 10 : 12, - listNoteColor: "#808080", + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', + listItemPadding: platform === PLATFORM.IOS ? 10 : 12, + listNoteColor: '#808080', listNoteSize: 13, - listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5", + listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', // Radio Button - radioBtnSize: platform === "ios" ? 25 : 23, - radioSelectedColorAndroid: "#3F51B5", - radioBtnLineHeight: platform === "ios" ? 29 : 24, + radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, + radioSelectedColorAndroid: '#3F51B5', + radioBtnLineHeight: platform === 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", + 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: "#45D56E", - inverseSpinnerColor: "#1A191B", + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', // Tab - tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", - topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", - topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", - topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", + tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', + topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', + topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', + topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', + topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', // Tabs - tabBgColor: "#F8F8F8", + tabBgColor: '#F8F8F8', tabFontSize: 15, // Text - textColor: "#000", - inverseTextColor: "#fff", + textColor: '#000', + 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" ? "#000" : "#fff", - titleFontColor: platform === "ios" ? "#000" : "#fff", + titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + titleFontSize: platform === PLATFORM.IOS ? 17 : 19, + subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, + subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff', + titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff', // Other - borderRadiusBase: platform === "ios" ? 5 : 2, + borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), contentPadding: 10, - dropdownLinkColor: "#414142", + dropdownLinkColor: '#414142', inputLineHeight: 24, deviceWidth, deviceHeight, isIphoneX, inputGroupRoundedBorderRadius: 30, - //iPhoneX SafeArea + // iPhoneX SafeArea Inset: { portrait: { topInset: 24, diff --git a/native-base-theme/variables/material.js b/native-base-theme/variables/material.js index ce917a1..13329ff 100644 --- a/native-base-theme/variables/material.js +++ b/native-base-theme/variables/material.js @@ -1,79 +1,97 @@ // @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 deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; -const platformStyle = "material"; +const platformStyle = PLATFORM.MATERIAL; 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 { platformStyle, platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + // Accordion + headerStyle: '#edebed', + iconStyle: '#000', + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + 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 androidRipple: true, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", + badgeBg: '#ED1727', + badgeColor: '#fff', badgePadding: 0, // Button - btnFontFamily: "Roboto", - btnDisabledBg: "#b5b5b5", + buttonFontFamily: 'Roboto', + buttonDisabledBg: '#b5b5b5', buttonPadding: 6, - get btnPrimaryBg() { + get buttonPrimaryBg() { return this.brandPrimary; }, - get btnPrimaryColor() { + get buttonPrimaryColor() { return this.inverseTextColor; }, - get btnInfoBg() { + get buttonInfoBg() { return this.brandInfo; }, - get btnInfoColor() { + get buttonInfoColor() { return this.inverseTextColor; }, - get btnSuccessBg() { + get buttonSuccessBg() { return this.brandSuccess; }, - get btnSuccessColor() { + get buttonSuccessColor() { return this.inverseTextColor; }, - get btnDangerBg() { + get buttonDangerBg() { return this.brandDanger; }, - get btnDangerColor() { + get buttonDangerColor() { return this.inverseTextColor; }, - get btnWarningBg() { + get buttonWarningBg() { return this.brandWarning; }, - get btnWarningColor() { + get buttonWarningColor() { return this.inverseTextColor; }, - get btnTextSize() { + get buttonTextSize() { return this.fontSizeBase - 1; }, - get btnTextSizeLarge() { + get buttonTextSizeLarge() { return this.fontSizeBase * 1.5; }, - get btnTextSizeSmall() { + get buttonTextSizeSmall() { return this.fontSizeBase * 0.8; }, get borderRadiusLarge() { @@ -87,10 +105,10 @@ export default { }, // Card - cardDefaultBg: "#fff", - cardBorderColor: "#ccc", + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', cardBorderRadius: 2, - cardItemPadding: platform === "ios" ? 10 : 12, + cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, // CheckBox CheckboxRadius: 0, @@ -100,29 +118,32 @@ export default { CheckboxIconSize: 16, CheckboxIconMarginTop: 1, CheckboxFontSize: 17, - checkboxBgColor: "#039BE5", + checkboxBgColor: '#039BE5', checkboxSize: 20, - checkboxTickColor: "#fff", + checkboxTickColor: '#fff', // Color - brandPrimary: "#3F51B5", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", + brandPrimary: '#3F51B5', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#f4f4f4', - //Container - containerBgColor: "#fff", + // Container + containerBgColor: '#fff', - //Date Picker - datePickerTextColor: "#000", - datePickerBg: "transparent", + // Date Picker + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabWidth: 56, // Font DefaultFontSize: 16, - fontFamily: "Roboto", + fontFamily: 'Roboto', fontSizeBase: 15, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -136,28 +157,28 @@ export default { // Footer footerHeight: 55, - footerDefaultBg: "#3F51B5", + footerDefaultBg: '#3F51B5', footerPaddingBottom: 0, // FooterTab - tabBarTextColor: "#bfc6ea", + tabBarTextColor: '#bfc6ea', tabBarTextSize: 11, - activeTab: "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: "#fff", - tabActiveBgColor: "#3F51B5", + activeTab: '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: '#fff', + tabActiveBgColor: '#3F51B5', // Header - toolbarBtnColor: "#fff", - toolbarDefaultBg: "#3F51B5", + toolbarBtnColor: '#fff', + toolbarDefaultBg: '#3F51B5', toolbarHeight: 56, toolbarSearchIconSize: 23, - toolbarInputColor: "#fff", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 40 : 50, - toolbarBtnTextColor: "#fff", - toolbarDefaultBorder: "#3F51B5", - iosStatusbar: "light-content", + toolbarInputColor: '#fff', + searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, + searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50, + toolbarBtnTextColor: '#fff', + toolbarDefaultBorder: '#3F51B5', + iosStatusbar: 'light-content', get statusBarColor() { return color(this.toolbarDefaultBg) .darken(0.2) @@ -170,102 +191,102 @@ export default { }, // Icon - iconFamily: "Ionicons", + iconFamily: 'Ionicons', iconFontSize: 28, iconHeaderSize: 24, // InputGroup inputFontSize: 17, - inputBorderColor: "#D9D5DC", - inputSuccessBorderColor: "#2b8339", - inputErrorBorderColor: "#ed2f2f", + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', inputHeightBase: 50, get inputColor() { return this.textColor; }, get inputColorPlaceholder() { - return "#575757"; + return '#575757'; }, // Line Height - btnLineHeight: 19, + buttonLineHeight: 19, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, lineHeight: 24, // List - listBg: "transparent", - listBorderColor: "#c9c9c9", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#DDD", + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', listItemPadding: 12, - listNoteColor: "#808080", + listNoteColor: '#808080', listNoteSize: 13, - listItemSelected: "#3F51B5", + listItemSelected: '#3F51B5', // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', // Radio Button radioBtnSize: 23, - radioSelectedColorAndroid: "#3F51B5", + radioSelectedColorAndroid: '#3F51B5', radioBtnLineHeight: 24, get radioColor() { return this.brandPrimary; }, // Segment - segmentBackgroundColor: "#3F51B5", - segmentActiveBackgroundColor: "#fff", - segmentTextColor: "#fff", - segmentActiveTextColor: "#3F51B5", - segmentBorderColor: "#fff", - segmentBorderColorMain: "#3F51B5", + segmentBackgroundColor: '#3F51B5', + segmentActiveBackgroundColor: '#fff', + segmentTextColor: '#fff', + segmentActiveTextColor: '#3F51B5', + segmentBorderColor: '#fff', + segmentBorderColorMain: '#3F51B5', // Spinner - defaultSpinnerColor: "#45D56E", - inverseSpinnerColor: "#1A191B", + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', // Tab - tabDefaultBg: "#3F51B5", - topTabBarTextColor: "#b3c7f9", - topTabBarActiveTextColor: "#fff", - topTabBarBorderColor: "#fff", - topTabBarActiveBorderColor: "#fff", + tabDefaultBg: '#3F51B5', + topTabBarTextColor: '#b3c7f9', + topTabBarActiveTextColor: '#fff', + topTabBarBorderColor: '#fff', + topTabBarActiveBorderColor: '#fff', // Tabs - tabBgColor: "#F8F8F8", + tabBgColor: '#F8F8F8', tabFontSize: 15, // Text - textColor: "#000", - inverseTextColor: "#fff", + textColor: '#000', + inverseTextColor: '#fff', noteFontSize: 14, get defaultTextColor() { return this.textColor; }, // Title - titleFontfamily: "Roboto", + titleFontfamily: 'Roboto', titleFontSize: 19, subTitleFontSize: 14, - subtitleColor: "#FFF", - titleFontColor: "#FFF", + subtitleColor: '#FFF', + titleFontColor: '#FFF', // Other borderRadiusBase: 2, borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), contentPadding: 10, - dropdownLinkColor: "#414142", + dropdownLinkColor: '#414142', inputLineHeight: 24, deviceWidth, deviceHeight, isIphoneX, inputGroupRoundedBorderRadius: 30, - //iPhoneX SafeArea + // iPhoneX SafeArea Inset: { portrait: { topInset: 24, diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js index 39fbab0..b458413 100644 --- a/native-base-theme/variables/platform.js +++ b/native-base-theme/variables/platform.js @@ -1,311 +1,361 @@ // @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 deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; 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 { - platformStyle, - platform, + platformStyle, + platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + // Accordion + accordionBorderColor: '#d3d3d3', + accordionContentPadding: 10, + accordionIconFontSize: 18, + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + headerStyle: '#edebed', + iconStyle: '#000', - // Android - androidRipple: true, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + // 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', - // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, - // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnTextColor: '#fff', - btnDisabledBg: "#b5b5b5", - buttonPadding: 6, - get btnPrimaryBg() { - return this.brandPrimary; + // Badge + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === PLATFORM.IOS ? 3 : 0, + + // Button + 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() { - return this.inverseTextColor; - }, - get btnInfoBg() { - return this.brandInfo; - }, - 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 - } + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 } + } }; diff --git a/native-base-theme/variables/platformDark.js b/native-base-theme/variables/platformDark.js index 0701b4f..cce16c1 100644 --- a/native-base-theme/variables/platformDark.js +++ b/native-base-theme/variables/platformDark.js @@ -1,311 +1,361 @@ // @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 deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; 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 { - platformStyle, - platform, + platformStyle, + platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + // Accordion + accordionBorderColor: '#d3d3d3', + accordionContentPadding: 10, + accordionIconFontSize: 18, + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + headerStyle: '#edebed', + iconStyle: '#000', - // Android - androidRipple: true, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + // 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', - // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, - // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnTextColor: '#fff', - btnDisabledBg: "#b5b5b5", - buttonPadding: 6, - get btnPrimaryBg() { - return this.brandPrimary; + // Badge + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === PLATFORM.IOS ? 3 : 0, + + // Button + 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() { - return this.textColor; - }, - get btnInfoBg() { - return this.brandInfo; - }, - 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 - } + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 } + } };