123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386 |
- // @flow
-
- import variable from './../variables/platform';
- import { PLATFORM } from './../variables/commonColor';
-
- export default (variables /* : * */ = variable) => {
- const platformStyle = variables.platformStyle;
- const platform = variables.platform;
- const darkCommon = {
- 'NativeBase.Text': {
- color: variables.brandDark
- },
- 'NativeBase.Icon': {
- color: variables.brandDark
- },
- 'NativeBase.IconNB': {
- color: variables.brandDark
- }
- };
- const lightCommon = {
- 'NativeBase.Text': {
- color: variables.brandLight
- },
- 'NativeBase.Icon': {
- color: variables.brandLight
- },
- 'NativeBase.IconNB': {
- color: variables.brandLight
- }
- };
- const primaryCommon = {
- 'NativeBase.Text': {
- color: variables.buttonPrimaryBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonPrimaryBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonPrimaryBg
- }
- };
- const successCommon = {
- 'NativeBase.Text': {
- color: variables.buttonSuccessBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonSuccessBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonSuccessBg
- }
- };
- const infoCommon = {
- 'NativeBase.Text': {
- color: variables.buttonInfoBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonInfoBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonInfoBg
- }
- };
- const warningCommon = {
- 'NativeBase.Text': {
- color: variables.buttonWarningBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonWarningBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonWarningBg
- }
- };
- const dangerCommon = {
- 'NativeBase.Text': {
- color: variables.buttonDangerBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonDangerBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonDangerBg
- }
- };
- const buttonTheme = {
- '.disabled': {
- '.transparent': {
- backgroundColor: 'transparent',
- 'NativeBase.Text': {
- color: variables.buttonDisabledBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonDisabledBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonDisabledBg
- }
- },
- 'NativeBase.Icon': {
- color: variables.brandLight
- },
- 'NativeBase.IconNB': {
- color: variables.brandLight
- },
- backgroundColor: variables.buttonDisabledBg
- },
- '.bordered': {
- '.dark': {
- ...darkCommon,
- backgroundColor: 'transparent',
- borderColor: variables.brandDark,
- borderWidth: variables.borderWidth * 2
- },
- '.light': {
- ...lightCommon,
- backgroundColor: 'transparent',
- borderColor: variables.brandLight,
- borderWidth: variables.borderWidth * 2
- },
- '.primary': {
- ...primaryCommon,
- backgroundColor: 'transparent',
- borderColor: variables.buttonPrimaryBg,
- borderWidth: variables.borderWidth * 2
- },
- '.success': {
- ...successCommon,
- backgroundColor: 'transparent',
- borderColor: variables.buttonSuccessBg,
- borderWidth: variables.borderWidth * 2
- },
- '.info': {
- ...infoCommon,
- backgroundColor: 'transparent',
- borderColor: variables.buttonInfoBg,
- borderWidth: variables.borderWidth * 2
- },
- '.warning': {
- ...warningCommon,
- backgroundColor: 'transparent',
- borderColor: variables.buttonWarningBg,
- borderWidth: variables.borderWidth * 2
- },
- '.danger': {
- ...dangerCommon,
- backgroundColor: 'transparent',
- borderColor: variables.buttonDangerBg,
- borderWidth: variables.borderWidth * 2
- },
- '.disabled': {
- backgroundColor: 'transparent',
- borderColor: variables.buttonDisabledBg,
- borderWidth: variables.borderWidth * 2,
- 'NativeBase.Text': {
- color: variables.buttonDisabledBg
- }
- },
- ...primaryCommon,
- borderWidth: variables.borderWidth * 2,
- elevation: null,
- shadowColor: null,
- shadowOffset: null,
- shadowOpacity: null,
- shadowRadius: null,
- backgroundColor: 'transparent'
- },
-
- '.dark': {
- '.bordered': {
- ...darkCommon
- },
- backgroundColor: variables.brandDark
- },
- '.light': {
- '.transparent': {
- ...lightCommon,
- backgroundColor: 'transparent'
- },
- '.bordered': {
- ...lightCommon
- },
- ...darkCommon,
- backgroundColor: variables.brandLight
- },
-
- '.primary': {
- '.bordered': {
- ...primaryCommon
- },
- backgroundColor: variables.buttonPrimaryBg
- },
-
- '.success': {
- '.bordered': {
- ...successCommon
- },
- backgroundColor: variables.buttonSuccessBg
- },
-
- '.info': {
- '.bordered': {
- ...infoCommon
- },
- backgroundColor: variables.buttonInfoBg
- },
-
- '.warning': {
- '.bordered': {
- ...warningCommon
- },
- backgroundColor: variables.buttonWarningBg
- },
-
- '.danger': {
- '.bordered': {
- ...dangerCommon
- },
- backgroundColor: variables.buttonDangerBg
- },
-
- '.block': {
- justifyContent: 'center',
- alignSelf: 'stretch'
- },
-
- '.full': {
- justifyContent: 'center',
- alignSelf: 'stretch',
- borderRadius: 0
- },
-
- '.rounded': {
- borderRadius: variables.borderRadiusLarge
- },
-
- '.transparent': {
- backgroundColor: 'transparent',
- elevation: 0,
- shadowColor: null,
- shadowOffset: null,
- shadowRadius: null,
- shadowOpacity: null,
- ...primaryCommon,
- '.dark': {
- ...darkCommon,
- },
- '.danger': {
- ...dangerCommon,
- },
- '.warning': {
- ...warningCommon,
- },
- '.info': {
- ...infoCommon,
- },
- '.primary': {
- ...primaryCommon,
- },
- '.success': {
- ...successCommon,
- },
- '.light': {
- ...lightCommon,
- },
- '.disabled': {
- backgroundColor: 'transparent',
- borderColor: variables.buttonDisabledBg,
- borderWidth: variables.borderWidth * 2,
- 'NativeBase.Text': {
- color: variables.buttonDisabledBg
- },
- 'NativeBase.Icon': {
- color: variables.buttonDisabledBg
- },
- 'NativeBase.IconNB': {
- color: variables.buttonDisabledBg
- }
- }
- },
-
- '.small': {
- height: 30,
- 'NativeBase.Text': {
- fontSize: 14
- },
- 'NativeBase.Icon': {
- fontSize: 20,
- paddingTop: 0
- },
- 'NativeBase.IconNB': {
- fontSize: 20,
- paddingTop: 0
- }
- },
-
- '.large': {
- height: 60,
- 'NativeBase.Text': {
- fontSize: 22
- }
- },
-
- '.capitalize': {},
-
- '.vertical': {
- flexDirection: 'column',
- height: null
- },
-
- 'NativeBase.Text': {
- fontFamily: variables.buttonFontFamily,
- marginLeft: 0,
- marginRight: 0,
- color: variables.buttonTextColor,
- fontSize: variables.buttonTextSize,
- paddingHorizontal: 16,
- backgroundColor: 'transparent'
- },
-
- 'NativeBase.Icon': {
- color: variables.buttonTextColor,
- fontSize: 24,
- marginHorizontal: 16,
- paddingTop: platform === PLATFORM.IOS ? 2 : undefined
- },
- 'NativeBase.IconNB': {
- color: variables.buttonTextColor,
- fontSize: 24,
- marginHorizontal: 16,
- paddingTop: platform === PLATFORM.IOS ? 2 : undefined
- },
-
- '.iconLeft': {
- 'NativeBase.Text': {
- marginLeft: 0
- },
- 'NativeBase.IconNB': {
- marginRight: 0,
- marginLeft: 16
- },
- 'NativeBase.Icon': {
- marginRight: 0,
- marginLeft: 16
- }
- },
- '.iconRight': {
- 'NativeBase.Text': {
- marginRight: 0
- },
- 'NativeBase.IconNB': {
- marginLeft: 0,
- marginRight: 16
- },
- 'NativeBase.Icon': {
- marginLeft: 0,
- marginRight: 16
- }
- },
- '.picker': {
- 'NativeBase.Text': {
- '.note': {
- fontSize: 16,
- lineHeight: null
- }
- }
- },
- paddingVertical: variables.buttonPadding,
- backgroundColor: variables.buttonPrimaryBg,
- borderRadius: variables.borderRadiusBase,
- borderColor: variables.buttonPrimaryBg,
- borderWidth: null,
- height: 45,
- flexDirection: 'row',
- elevation: 2,
- shadowColor:
- platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
- shadowOffset:
- 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;
- };
|