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