136 lines
3.0 KiB
JavaScript
136 lines
3.0 KiB
JavaScript
let colorInfo = {
|
|
text: "#000000",
|
|
textInverse: "#FFFFFF",
|
|
textPlaceholder: "#EEEEEE",
|
|
textAlert: "#FF0000",
|
|
textGray: "#B0B0B0",
|
|
textDisabled: "#AAAAAA",
|
|
|
|
border: "#B2B2B2",
|
|
|
|
modalShadow: "#000000",
|
|
modalBackground: "#FFFFFF",
|
|
|
|
inputBackground: "#FFFFFF",
|
|
|
|
buttonBackground: "#3498DB",
|
|
buttonBackgroundHover: "#3CB0FD",
|
|
buttonBackgroundActive: "#1A72AC",
|
|
buttonDisabledBackground: "#E0E0E0",
|
|
|
|
headerBorder: "#B2B2B2",
|
|
headerButtonBackground: "#FAFAFA",
|
|
headerButtonBackgroundHover: "#DADADA",
|
|
headerButtonBackgroundActive: "#AAAAAA",
|
|
|
|
checkboxUnchecked: "#A0A0A0",
|
|
checkboxUncheckedHover: "#808080",
|
|
checkmark: "#FFFFFF",
|
|
|
|
listBackground: "#FFFFFF",
|
|
listBackgroundActive: "#E7E5E5",
|
|
|
|
dropdownBackground: "#FFFFFF",
|
|
}
|
|
|
|
Object.assign(colorInfo, {
|
|
panelButtonBackground: colorInfo.headerButtonBackground,
|
|
panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
|
|
panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
|
|
panelDisabledButtonBackground: colorInfo.buttonDisabledBackground,
|
|
|
|
listBackgroundHover: colorInfo.headerButtonBackgroundHover,
|
|
listBorder: colorInfo.headerBorder,
|
|
|
|
dropdownBorder: colorInfo.headerBorder,
|
|
dropdownBackground: colorInfo.listBackground,
|
|
dropdownBackgroundActive: colorInfo.listBackgroundActive,
|
|
dropdownBackgroundHover: colorInfo.headerButtonBackgroundHover,
|
|
})
|
|
|
|
const sizeInfo = {
|
|
imageDefaultMargin: 5,
|
|
iconDefaultMargin: 10,
|
|
|
|
headerHeight: 40,
|
|
headerBorderWidth: 1,
|
|
headerPaddingLeft: 10,
|
|
headerTextOffset: 2,
|
|
headerButtonMargin: 8,
|
|
|
|
footerTextMargin: "5px 0px 5px 10px",
|
|
|
|
buttonHeight: 40,
|
|
buttonPadding: "0 15px 0 15px",
|
|
buttonWidth: 125,
|
|
buttonWideWidth: 225,
|
|
|
|
checkboxSize: 25,
|
|
checkmarkBorder: "0 3px 3px 0",
|
|
|
|
panelButton: 200,
|
|
panelButtonIcon: 170,
|
|
panelButtonIconMargin: 0,
|
|
panelButtonIconOffset: -10,
|
|
panelButtonBorderRadius: 25,
|
|
panelButtonBorderWidth: 2,
|
|
panelButtonTextOffset: 120,
|
|
panelButtonSpacing: 30,
|
|
|
|
formBoxRadius: 5,
|
|
formColumnSpacing: 20,
|
|
formRowSpacing: 20,
|
|
formBoundIcon: 30,
|
|
formBoundIconMargin: 0,
|
|
|
|
formButtonIcon: 24,
|
|
formButtonIconMargin: 0,
|
|
formButtonIconBorderRadius: 4,
|
|
formButtonIconPadding: 3,
|
|
|
|
listBorderWidth: 1,
|
|
listTopBottomGap: 10,
|
|
listIcon: 25,
|
|
listIconMargin: "5px 10px 5px 10px",
|
|
|
|
dropdownIconSize: 20,
|
|
dropdownItems: 6,
|
|
dropdownBorderWidth: 1,
|
|
dropdownIcon: 25,
|
|
dropdownIconMargin: "5px 10px 5px 10px",
|
|
|
|
modalWidth: 450,
|
|
modalShadowWidth: 25,
|
|
modalMessageIcon: 150,
|
|
|
|
profileWidth: "65vw",
|
|
|
|
inputPadding: 5,
|
|
inputBorderRadius: 5,
|
|
|
|
loaderSize: 20,
|
|
loaderSpacing: 5,
|
|
|
|
loginLogoWidth: 250,
|
|
}
|
|
|
|
const fontInfo = {
|
|
family: "Hind, sans-serif", // https://fonts.google.com/specimen/Hind?selection.family=Hind
|
|
size: {
|
|
small: "10pt",
|
|
medium: "12pt",
|
|
large: "14pt",
|
|
huge: "26pt",
|
|
header: "18pt",
|
|
footer: "8pt",
|
|
},
|
|
color: {
|
|
normal: colorInfo.text,
|
|
inverse: colorInfo.textInverse,
|
|
alert: colorInfo.textAlert,
|
|
dimmed: colorInfo.textGray,
|
|
},
|
|
}
|
|
|
|
export { colorInfo, sizeInfo, fontInfo }
|