123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396 |
- // @flow
-
- import variable from "./../variables/platform";
-
- 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.btnPrimaryBg
- },
- "NativeBase.Icon": {
- color: variables.btnPrimaryBg
- },
- "NativeBase.IconNB": {
- color: variables.btnPrimaryBg
- }
- };
- const successCommon = {
- "NativeBase.Text": {
- color: variables.btnSuccessBg
- },
- "NativeBase.Icon": {
- color: variables.btnSuccessBg
- },
- "NativeBase.IconNB": {
- color: variables.btnSuccessBg
- }
- };
- const infoCommon = {
- "NativeBase.Text": {
- color: variables.btnInfoBg
- },
- "NativeBase.Icon": {
- color: variables.btnInfoBg
- },
- "NativeBase.IconNB": {
- color: variables.btnInfoBg
- }
- };
- const warningCommon = {
- "NativeBase.Text": {
- color: variables.btnWarningBg
- },
- "NativeBase.Icon": {
- color: variables.btnWarningBg
- },
- "NativeBase.IconNB": {
- color: variables.btnWarningBg
- }
- };
- const dangerCommon = {
- "NativeBase.Text": {
- color: variables.btnDangerBg
- },
- "NativeBase.Icon": {
- color: variables.btnDangerBg
- },
- "NativeBase.IconNB": {
- color: variables.btnDangerBg
- }
- };
- const buttonTheme = {
- ".disabled": {
- ".transparent": {
- backgroundColor: null,
- "NativeBase.Text": {
- color: variables.btnDisabledBg
- },
- "NativeBase.Icon": {
- color: variables.btnDisabledBg
- },
- "NativeBase.IconNB": {
- color: variables.btnDisabledBg
- }
- },
- "NativeBase.Icon": {
- color: variables.brandLight
- },
- "NativeBase.IconNB": {
- color: variables.brandLight
- },
- backgroundColor: variables.btnDisabledBg
- },
- ".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.btnPrimaryBg,
- borderWidth: variables.borderWidth * 2
- },
- ".success": {
- ...successCommon,
- backgroundColor: "transparent",
- borderColor: variables.btnSuccessBg,
- borderWidth: variables.borderWidth * 2
- },
- ".info": {
- ...infoCommon,
- backgroundColor: "transparent",
- borderColor: variables.btnInfoBg,
- borderWidth: variables.borderWidth * 2
- },
- ".warning": {
- ...warningCommon,
- backgroundColor: "transparent",
- borderColor: variables.btnWarningBg,
- borderWidth: variables.borderWidth * 2
- },
- ".danger": {
- ...dangerCommon,
- backgroundColor: "transparent",
- borderColor: variables.btnDangerBg,
- borderWidth: variables.borderWidth * 2
- },
- ".disabled": {
- backgroundColor: null,
- borderColor: variables.btnDisabledBg,
- borderWidth: variables.borderWidth * 2,
- "NativeBase.Text": {
- color: variables.btnDisabledBg
- }
- },
- ...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: null
- },
- ".bordered": {
- ...lightCommon
- },
- ...darkCommon,
- backgroundColor: variables.brandLight
- },
-
- ".primary": {
- ".bordered": {
- ...primaryCommon
- },
- backgroundColor: variables.btnPrimaryBg
- },
-
- ".success": {
- ".bordered": {
- ...successCommon
- },
- backgroundColor: variables.btnSuccessBg
- },
-
- ".info": {
- ".bordered": {
- ...infoCommon
- },
- backgroundColor: variables.btnInfoBg
- },
-
- ".warning": {
- ".bordered": {
- ...warningCommon
- },
- backgroundColor: variables.btnWarningBg
- },
-
- ".danger": {
- ".bordered": {
- ...dangerCommon
- },
- backgroundColor: variables.btnDangerBg
- },
-
- ".block": {
- justifyContent: "center",
- alignSelf: "stretch"
- },
-
- ".full": {
- justifyContent: "center",
- alignSelf: "stretch",
- borderRadius: 0
- },
-
- ".rounded": {
- // paddingHorizontal: variables.buttonPadding + 20,
- borderRadius: variables.borderRadiusLarge
- },
-
- ".transparent": {
- backgroundColor: "transparent",
- elevation: 0,
- shadowColor: null,
- shadowOffset: null,
- shadowRadius: null,
- shadowOpacity: null,
- ...primaryCommon,
- ".dark": {
- ...darkCommon,
- backgroundColor: null
- },
- ".danger": {
- ...dangerCommon,
- backgroundColor: null
- },
- ".warning": {
- ...warningCommon,
- backgroundColor: null
- },
- ".info": {
- ...infoCommon,
- backgroundColor: null
- },
- ".primary": {
- ...primaryCommon,
- backgroundColor: null
- },
- ".success": {
- ...successCommon,
- backgroundColor: null
- },
- ".light": {
- ...lightCommon,
- backgroundColor: null
- },
- ".disabled": {
- backgroundColor: "transparent",
- borderColor: variables.btnDisabledBg,
- borderWidth: variables.borderWidth * 2,
- "NativeBase.Text": {
- color: variables.btnDisabledBg
- },
- "NativeBase.Icon": {
- color: variables.btnDisabledBg
- },
- "NativeBase.IconNB": {
- color: variables.btnDisabledBg
- }
- }
- },
-
- ".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.btnFontFamily,
- marginLeft: 0,
- marginRight: 0,
- color: variables.inverseTextColor,
- fontSize: variables.btnTextSize,
- paddingHorizontal: 16,
- backgroundColor: "transparent"
- // childPosition: 1
- },
-
- "NativeBase.Icon": {
- color: variables.inverseTextColor,
- fontSize: 24,
- marginHorizontal: 16,
- paddingTop: platform === "ios" ? 2 : undefined
- },
- "NativeBase.IconNB": {
- color: variables.inverseTextColor,
- fontSize: 24,
- marginHorizontal: 16,
- paddingTop: 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,
- // paddingHorizontal: variables.buttonPadding + 10,
- backgroundColor: variables.btnPrimaryBg,
- borderRadius: variables.borderRadiusBase,
- borderColor: variables.btnPrimaryBg,
- borderWidth: null,
- height: 45,
- alignSelf: "flex-start",
- flexDirection: "row",
- elevation: 2,
- shadowColor: platformStyle === "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"
- };
- return buttonTheme;
- };
|