Archived
278 lines
6.4 KiB
JavaScript
278 lines
6.4 KiB
JavaScript
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;
|
|
|
|
export default {
|
|
platformStyle,
|
|
platform,
|
|
// AndroidRipple
|
|
androidRipple: true,
|
|
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
|
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
|
|
|
// Badge
|
|
badgeBg: "#ED1727",
|
|
badgeColor: "#fff",
|
|
// New Variable
|
|
badgePadding: platform === "ios" ? 3 : 0,
|
|
|
|
// Button
|
|
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
|
btnDisabledBg: "#b5b5b5",
|
|
btnDisabledClr: "#f1f1f1",
|
|
|
|
// 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 : 14,
|
|
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
|
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18,
|
|
DefaultFontSize: 17,
|
|
checkboxBgColor: "#039BE5",
|
|
checkboxSize: 20,
|
|
checkboxTickColor: "#fff",
|
|
|
|
// Segment
|
|
segmentBackgroundColor: "#3F51B5",
|
|
segmentActiveBackgroundColor: "#fff",
|
|
segmentTextColor: "#fff",
|
|
segmentActiveTextColor: "#3F51B5",
|
|
segmentBorderColor: "#fff",
|
|
segmentBorderColorMain: "#3F51B5",
|
|
|
|
// New Variable
|
|
get defaultTextColor() {
|
|
return this.textColor;
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
buttonPadding: 6,
|
|
|
|
get iconSizeLarge() {
|
|
return this.iconFontSize * 1.5;
|
|
},
|
|
get iconSizeSmall() {
|
|
return this.iconFontSize * 0.6;
|
|
},
|
|
|
|
// Card
|
|
cardDefaultBg: "#fff",
|
|
|
|
// Color
|
|
brandPrimary: "#f58220",
|
|
brandInfo: "#62B1F6",
|
|
brandSuccess: "#5cb85c",
|
|
brandDanger: "#d9534f",
|
|
brandWarning: "#f0ad4e",
|
|
brandSidebar: "#252932",
|
|
|
|
// Font
|
|
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: "#2874F0",
|
|
|
|
// FooterTab
|
|
tabBarTextColor: "#8bb3f4",
|
|
tabBarTextSize: platform === "ios" ? 14 : 11,
|
|
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
|
sTabBarActiveTextColor: "#007aff",
|
|
tabBarActiveTextColor: "#fff",
|
|
tabActiveBgColor: platform === "ios" ? "#1569f4" : undefined,
|
|
|
|
// Tab
|
|
tabDefaultBg: "#2874F0",
|
|
topTabBarTextColor: "#b3c7f9",
|
|
topTabBarActiveTextColor: "#fff",
|
|
topTabActiveBgColor: platform === "ios" ? "#1569f4" : undefined,
|
|
topTabBarBorderColor: "#fff",
|
|
topTabBarActiveBorderColor: "#fff",
|
|
|
|
// Header
|
|
toolbarBtnColor: "#fff",
|
|
toolbarDefaultBg: "#2874F0",
|
|
toolbarHeight: platform === "ios" ? 64 : 56,
|
|
toolbarIconSize: platform === "ios" ? 20 : 22,
|
|
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
|
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
|
searchBarHeight: platform === "ios" ? 30 : 40,
|
|
toolbarInverseBg: "#222",
|
|
toolbarTextColor: "#fff",
|
|
iosStatusbar: "light-content",
|
|
toolbarDefaultBorder: "#2874F0",
|
|
get statusBarColor() {
|
|
return color(this.toolbarDefaultBg).darken(0.2).hex();
|
|
},
|
|
|
|
// Icon
|
|
iconFamily: "Ionicons",
|
|
iconFontSize: platform === "ios" ? 30 : 28,
|
|
iconMargin: 7,
|
|
iconHeaderSize: platform === "ios" ? 33 : 24,
|
|
|
|
// InputGroup
|
|
inputFontSize: 17,
|
|
inputBorderColor: "#D9D5DC",
|
|
inputSuccessBorderColor: "#2b8339",
|
|
inputErrorBorderColor: "#ed2f2f",
|
|
|
|
get inputColor() {
|
|
return this.textColor;
|
|
},
|
|
get inputColorPlaceholder() {
|
|
return "#575757";
|
|
},
|
|
|
|
inputGroupMarginBottom: 10,
|
|
inputHeightBase: 50,
|
|
inputPaddingLeft: 5,
|
|
|
|
get inputPaddingLeftIcon() {
|
|
return this.inputPaddingLeft * 8;
|
|
},
|
|
|
|
// Line Height
|
|
btnLineHeight: 19,
|
|
lineHeightH1: 32,
|
|
lineHeightH2: 27,
|
|
lineHeightH3: 22,
|
|
iconLineHeight: platform === "ios" ? 37 : 30,
|
|
lineHeight: platform === "ios" ? 20 : 24,
|
|
|
|
// List
|
|
listBorderColor: "#c9c9c9",
|
|
listDividerBg: "#f4f4f4",
|
|
listItemHeight: 45,
|
|
listBtnUnderlayColor: "#DDD",
|
|
|
|
// Card
|
|
cardBorderColor: "#ccc",
|
|
|
|
// Changed Variable
|
|
listItemPadding: platform === "ios" ? 10 : 12,
|
|
|
|
listNoteColor: "#808080",
|
|
listNoteSize: 13,
|
|
|
|
// Progress Bar
|
|
defaultProgressColor: "#E4202D",
|
|
inverseProgressColor: "#1A191B",
|
|
|
|
// Radio Button
|
|
radioBtnSize: platform === "ios" ? 25 : 23,
|
|
radioSelectedColorAndroid: "#5067FF",
|
|
|
|
// New Variable
|
|
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
|
|
|
radioColor: "#7e7e7e",
|
|
|
|
get radioSelectedColor() {
|
|
return color(this.radioColor).darken(0.2).hex();
|
|
},
|
|
|
|
// Spinner
|
|
defaultSpinnerColor: "#45D56E",
|
|
inverseSpinnerColor: "#1A191B",
|
|
|
|
// Tabs
|
|
tabBgColor: "#F8F8F8",
|
|
tabFontSize: 15,
|
|
tabTextColor: "#222222",
|
|
|
|
// Text
|
|
textColor: "#000",
|
|
inverseTextColor: "#fff",
|
|
noteFontSize: 14,
|
|
|
|
// Title
|
|
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
|
titleFontSize: platform === "ios" ? 17 : 19,
|
|
subTitleFontSize: platform === "ios" ? 12 : 14,
|
|
subtitleColor: "#FFF",
|
|
|
|
// New Variable
|
|
titleFontColor: "#FFF",
|
|
|
|
// Other
|
|
borderRadiusBase: platform === "ios" ? 5 : 2,
|
|
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
|
contentPadding: 10,
|
|
|
|
get darkenHeader() {
|
|
return color(this.tabBgColor).darken(0.03).hex();
|
|
},
|
|
|
|
dropdownBg: "#000",
|
|
dropdownLinkColor: "#414142",
|
|
inputLineHeight: 24,
|
|
jumbotronBg: "#C9C9CE",
|
|
jumbotronPadding: 30,
|
|
deviceWidth,
|
|
deviceHeight,
|
|
|
|
// New Variable
|
|
inputGroupRoundedBorderRadius: 30
|
|
};
|