forked from vergnet/application-amicale
284 lines
7.3 KiB
JavaScript
284 lines
7.3 KiB
JavaScript
|
// @flow
|
||
|
|
|
||
|
|
import color from "color";
|
||
|
|
|
||
|
|
import { Platform, Dimensions, PixelRatio } from "react-native";
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
export default {
|
||
|
|
platformStyle,
|
||
|
|
platform,
|
||
|
|
|
||
|
|
//Accordion
|
||
|
|
headerStyle: "#edebed",
|
||
|
|
iconStyle: "#000",
|
||
|
|
contentStyle: "#f5f4f5",
|
||
|
|
expandedIconStyle: "#000",
|
||
|
|
accordionBorderColor: "#d3d3d3",
|
||
|
|
|
||
|
|
//Android
|
||
|
|
androidRipple: true,
|
||
|
|
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
||
|
|
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
||
|
|
btnUppercaseAndroidText: true,
|
||
|
|
|
||
|
|
// Badge
|
||
|
|
badgeBg: "#ED1727",
|
||
|
|
badgeColor: "#fff",
|
||
|
|
badgePadding: platform === "ios" ? 3 : 0,
|
||
|
|
|
||
|
|
// Button
|
||
|
|
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
||
|
|
btnDisabledBg: "#b5b5b5",
|
||
|
|
buttonPadding: 6,
|
||
|
|
get btnPrimaryBg() {
|
||
|
|
return this.brandPrimary;
|
||
|
|
},
|
||
|
|
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: "#039BE5",
|
||
|
|
checkboxSize: 20,
|
||
|
|
checkboxTickColor: "#fff",
|
||
|
|
|
||
|
|
// Color
|
||
|
|
brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
|
||
|
|
brandInfo: "#62B1F6",
|
||
|
|
brandSuccess: "#5cb85c",
|
||
|
|
brandDanger: "#d9534f",
|
||
|
|
brandWarning: "#f0ad4e",
|
||
|
|
brandDark: "#000",
|
||
|
|
brandLight: "#f4f4f4",
|
||
|
|
|
||
|
|
//Container
|
||
|
|
containerBgColor: "#fff",
|
||
|
|
|
||
|
|
//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" : "#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",
|
||
|
|
|
||
|
|
// 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",
|
||
|
|
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,
|
||
|
|
|
||
|
|
// List
|
||
|
|
listBg: "transparent",
|
||
|
|
listBorderColor: "#c9c9c9",
|
||
|
|
listDividerBg: "#f4f4f4",
|
||
|
|
listBtnUnderlayColor: "#DDD",
|
||
|
|
listItemPadding: platform === "ios" ? 10 : 12,
|
||
|
|
listNoteColor: "#808080",
|
||
|
|
listNoteSize: 13,
|
||
|
|
listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5",
|
||
|
|
|
||
|
|
// Progress Bar
|
||
|
|
defaultProgressColor: "#E4202D",
|
||
|
|
inverseProgressColor: "#1A191B",
|
||
|
|
|
||
|
|
// Radio Button
|
||
|
|
radioBtnSize: platform === "ios" ? 25 : 23,
|
||
|
|
radioSelectedColorAndroid: "#3F51B5",
|
||
|
|
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: "#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",
|
||
|
|
|
||
|
|
// Tabs
|
||
|
|
tabBgColor: "#F8F8F8",
|
||
|
|
tabFontSize: 15,
|
||
|
|
|
||
|
|
// Text
|
||
|
|
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",
|
||
|
|
|
||
|
|
// 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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|