kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
1,115 lines (1,004 loc) • 151 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dropdownListBgdLT = exports.dropdownListBgd = exports.dropdownListShadow = exports.dropdownListHighlightBgLT = exports.dropdownListHighlightBg = exports.selectBorder = exports.selectBorderRadius = exports.selectBorderColorLT = exports.selectBorderColor = exports.selectBackgroundHoverLT = exports.selectBackgroundLT = exports.selectBackgroundHover = exports.selectBackground = exports.selectColorPlaceHolder = exports.selectFontWeightBold = exports.selectFontWeight = exports.selectFontSize = exports.selectActiveBorderColor = exports.selectColorLT = exports.selectColor = exports.secondaryInputBorderActiveColor = exports.secondaryInputBorderColor = exports.secondaryInputColor = exports.secondaryInputBgdActive = exports.secondaryInputBgdHover = exports.secondaryInputBgd = exports.inputPlaceholderFontWeight = exports.inputPlaceholderColor = exports.inputBorderRadius = exports.inputColor = exports.inputBorderActiveColor = exports.inputBorderHoverColor = exports.inputBorderColor = exports.inputBgdActive = exports.inputBgdHover = exports.inputBgd = exports.inputFontWeight = exports.inputFontSizeSmall = exports.inputFontSize = exports.inputPaddingTiny = exports.inputPaddingSmall = exports.inputPadding = exports.inputBoxHeightTiny = exports.inputBoxHeightSmall = exports.inputBoxHeight = exports.floatingBtnActColor = exports.floatingBtnColor = exports.floatingBtnBgdHover = exports.floatingBtnActBgd = exports.floatingBtnBgd = exports.negativeBtnActColor = exports.negativeBtnColor = exports.negativeBtnBgdHover = exports.negativeBtnActBgd = exports.negativeBtnBgd = exports.linkBtnActBgdHover = exports.linkBtnActColor = exports.linkBtnColor = exports.linkBtnActBgd = exports.linkBtnBgd = exports.secondaryBtnBgdHover = exports.secondaryBtnActColor = exports.secondaryBtnColor = exports.secondaryBtnActBgd = exports.secondaryBtnBgd = exports.primaryBtnRadius = exports.primaryBtnBgdHover = exports.primaryBtnActColor = exports.primaryBtnColor = exports.primaryBtnActBgd = exports.primaryBtnBgd = exports.logoColor = exports.errorColor = exports.activeColorHover = exports.activeColorLT = exports.activeColor = exports.textColorHlLT = exports.textColorHl = exports.titleTextColor = exports.subtextColorActive = exports.subtextColorLT = exports.subtextColor = exports.titleColorLT = exports.textColorLT = exports.textColor = exports.labelColorLT = exports.labelHoverColor = exports.labelColor = exports.lineHeight = exports.fontSize = exports.fontWeight = exports.fontFamily = exports.borderColorLT = exports.borderColor = exports.borderRadius = exports.boxSizing = exports.boxShadow = exports.transitionSlow = exports.transitionFast = exports.transition = void 0;
exports.themeBS = exports.themeLT = exports.theme = exports.modalScrollBar = exports.breakPoints = exports.textTruncate = exports.actionPanelHeight = exports.actionPanelWidth = exports.notificationPanelItemHeight = exports.notificationPanelItemWidth = exports.notificationPanelWidth = exports.notificationColors = exports.histogramFillOutRange = exports.histogramFillInRange = exports.rangeBrushBgd = exports.sliderMarginTop = exports.sliderMarginTopIsRange = exports.sliderInputWidth = exports.sliderInputHeight = exports.sliderHandleShadow = exports.sliderHandleHoverColor = exports.sliderHandleColor = exports.sliderHandleWidth = exports.sliderHandleHeight = exports.sliderBarHeight = exports.sliderBarRadius = exports.sliderBarHoverColor = exports.sliderBarBgd = exports.sliderBarColor = exports.modalDialogColor = exports.modalDialogBgd = exports.modalDropdownBackground = exports.modalButtonZ = exports.modalTitleZ = exports.modalFooterZ = exports.modalContentZ = exports.modalOverlayBgd = exports.modalOverLayZ = exports.modalPortableLateralPadding = exports.modalLateralPadding = exports.modalPadding = exports.modalImagePlaceHolder = exports.modalFooterBgd = exports.modalTitleFontSizeSmaller = exports.modalTitleFontSize = exports.modalTitleColor = exports.bottomPanelGap = exports.bottomInnerPdVert = exports.bottomInnerPdSide = exports.tooltipColor = exports.tooltipBg = exports.mapPanelHeaderBackgroundColor = exports.mapPanelBackgroundColor = exports.panelBorderLT = exports.panelBorder = exports.panelBorderColor = exports.panelBackgroundLT = exports.panelBorderRadius = exports.panelBoxShadow = exports.panelHeaderHeight = exports.panelHeaderIconActive = exports.panelHeaderIcon = exports.panelActiveBgLT = exports.panelActiveBg = exports.panelBackgroundHover = exports.panelBackground = exports.sideBarCloseBtnBgdHover = exports.sideBarCloseBtnColor = exports.sideBarCloseBtnBgd = exports.sidePanelScrollBarHeight = exports.sidePanelScrollBarWidth = exports.sidePanelBg = exports.sidePanelInnerPadding = exports.sidePanelHeaderBg = exports.checkboxBoxBgdChecked = exports.checkboxBoxBgd = exports.checkboxBorderColorLT = exports.checkboxBorderRadius = exports.checkboxBorderColor = exports.checkboxMargin = exports.checkboxHeight = exports.checkboxWidth = exports.secondarySwitchBtnBgd = exports.secondarySwitchTrackBgd = exports.switchBtnHeight = exports.switchBtnWidth = exports.switchBtnBorderRadius = exports.switchBtnBoxShadow = exports.switchBtnBgdActive = exports.switchBtnBgd = exports.switchTrackBorderRadius = exports.switchTrackBgdActive = exports.switchTrackBgd = exports.switchLabelMargin = exports.switchHeight = exports.switchWidth = exports.dropdownWrapperZ = exports.dropdownListBorderTop = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _styledComponents = require("styled-components");
var _defaultSettings = require("../constants/default-settings");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _templateObject27() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ::-webkit-scrollbar {\n width: 14px;\n height: 16px;\n }\n\n ::-webkit-scrollbar-track {\n background: white;\n }\n ::-webkit-scrollbar-track:horizontal {\n background: ", ";\n }\n ::-webkit-scrollbar-thumb {\n background: ", ";\n border: 4px solid white;\n }\n\n ::-webkit-scrollbar-corner {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #969da9;\n }\n\n ::-webkit-scrollbar-thumb:vertical {\n border-radius: 7px;\n }\n\n ::-webkit-scrollbar-thumb:horizontal {\n border-radius: 9px;\n border: 4px solid ", ";\n }\n"]);
_templateObject27 = function _templateObject27() {
return data;
};
return data;
}
function _templateObject26() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n }\n\n ::-webkit-scrollbar-corner {\n background: ", ";\n }\n\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: ", ";\n border: 3px solid ", "\n\n :vertical:hover {\n background: ", ";\n cursor: pointer;\n }\n\n :horizontal:hover {\n background: ", ";\n cursor: pointer;\n }\n }\n}"]);
_templateObject26 = function _templateObject26() {
return data;
};
return data;
}
function _templateObject25() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n }\n\n ::-webkit-scrollbar-corner {\n background: ", ";\n }\n\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: ", ";\n border: 3px solid ", ";\n :hover {\n background: ", ";\n cursor: pointer;\n }\n }\n"]);
_templateObject25 = function _templateObject25() {
return data;
};
return data;
}
function _templateObject24() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ::-webkit-scrollbar {\n height: ", "px;\n width: ", "px;\n }\n\n ::-webkit-scrollbar-corner {\n background: ", ";\n }\n\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: ", ";\n border: 3px solid ", ";\n\n :hover {\n background: ", ";\n cursor: pointer;\n }\n };\n}"]);
_templateObject24 = function _templateObject24() {
return data;
};
return data;
}
function _templateObject23() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n .list__item {\n ", ";\n }\n"]);
_templateObject23 = function _templateObject23() {
return data;
};
return data;
}
function _templateObject22() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow-y: auto;\n max-height: 280px;\n box-shadow: ", ";\n border-radius: 2px;\n\n .list__section {\n ", ";\n }\n .list__header {\n ", ";\n }\n\n .list__item {\n ", ";\n }\n\n .list__item__anchor {\n ", ";\n }\n\n ", ";\n"]);
_templateObject22 = function _templateObject22() {
return data;
};
return data;
}
function _templateObject21() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 0 4px 0;\n margin-bottom: 4px;\n border-bottom: 1px solid ", ";\n"]);
_templateObject21 = function _templateObject21() {
return data;
};
return data;
}
function _templateObject20() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 11px;\n padding: 5px 9px;\n color: ", ";\n"]);
_templateObject20 = function _templateObject20() {
return data;
};
return data;
}
function _templateObject19() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n color: ", ";\n\n &.hover,\n &:hover {\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n\n .list__item__anchor {\n color: ", ";\n }\n }\n"]);
_templateObject19 = function _templateObject19() {
return data;
};
return data;
}
function _templateObject18() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n &.hover,\n &:hover {\n cursor: pointer;\n background-color: ", ";\n\n .list__item__anchor {\n color: ", ";\n }\n }\n"]);
_templateObject18 = function _templateObject18() {
return data;
};
return data;
}
function _templateObject17() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 11px;\n padding: 3px 9px;\n font-weight: 500;\n white-space: nowrap;\n"]);
_templateObject17 = function _templateObject17() {
return data;
};
return data;
}
function _templateObject16() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n padding-left: 3px;\n"]);
_templateObject16 = function _templateObject16() {
return data;
};
return data;
}
function _templateObject15() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n }\n\n ::-webkit-scrollbar-corner {\n background: ", ";\n }\n\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: ", ";\n border: 3px solid ", ";\n };\n\n :vertical:hover {\n background: ", ";\n cursor: pointer;\n }\n}"]);
_templateObject15 = function _templateObject15() {
return data;
};
return data;
}
function _templateObject14() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n :before {\n ", " background: ", ";\n }\n\n :after {\n ", "\n background: ", ";\n }\n"]);
_templateObject14 = function _templateObject14() {
return data;
};
return data;
}
function _templateObject13() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n position: relative;\n padding-left: 32px;\n margin-bottom: 24px;\n line-height: 20px;\n vertical-align: middle;\n cursor: pointer;\n font-size: 12px;\n color: ", ";\n margin-left: -", "px;\n\n :before {\n ", ";\n }\n\n :after {\n ", ";\n }\n"]);
_templateObject13 = function _templateObject13() {
return data;
};
return data;
}
function _templateObject12() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 10px;\n height: 5px;\n border-bottom: 2px solid white;\n border-left: 2px solid white;\n top: 4px;\n left: 3px;\n transform: rotate(-45deg);\n display: block;\n position: absolute;\n opacity: ", ";\n content: '';\n"]);
_templateObject12 = function _templateObject12() {
return data;
};
return data;
}
function _templateObject11() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: ", "px;\n height: ", "px;\n background: ", ";\n border: 1px solid\n ", ";\n border-radius: 2px;\n content: '';\n"]);
_templateObject11 = function _templateObject11() {
return data;
};
return data;
}
function _templateObject10() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n cursor: pointer;\n line-height: 16px;\n font-weight: 500;\n font-size: 12px;\n color: ", ";\n position: relative;\n display: inline-block;\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n padding-left: ", "px;\n\n :before {\n ", ";\n }\n\n :after {\n ", ";\n }\n"]);
_templateObject10 = function _templateObject10() {
return data;
};
return data;
}
function _templateObject9() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n transition: ", ";\n position: absolute;\n top: 0;\n left: ", "px;\n content: '';\n display: block;\n height: ", ";\n width: ", ";\n background: ", ";\n box-shadow: ", ";\n border-radius: ", ";\n"]);
_templateObject9 = function _templateObject9() {
return data;
};
return data;
}
function _templateObject8() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n position: absolute;\n top: 0;\n left: ", "px;\n content: '';\n display: block;\n width: ", "px;\n height: ", "px;\n border-radius: ", ";\n"]);
_templateObject8 = function _templateObject8() {
return data;
};
return data;
}
function _templateObject7() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", " color: ", ";\n font-size: 13px;\n letter-spacing: 0.43px;\n line-height: 18px;\n height: 24px;\n font-weight: 400;\n padding-left: 4px;\n margin-left: -4px;\n background-color: transparent;\n border: 1px solid transparent;\n\n :hover {\n height: 24px;\n cursor: text;\n background-color: transparent;\n border: 1px solid ", ";\n }\n\n :active,\n .active,\n :focus {\n background-color: transparent;\n border: 1px solid ", ";\n }\n"]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n"]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n flex-wrap: wrap;\n height: auto;\n justify-content: start;\n margin-bottom: 2px;\n padding: 0px 7px 0px 4px;\n white-space: normal;\n\n .chickleted-input__placeholder {\n line-height: 24px;\n margin: 4px;\n }\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n color: ", ";\n background-color: ", ";\n border: 1px solid\n ", ";\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n border-color: ", ";\n }\n\n :active,\n &.active {\n background-color: ", ";\n border-color: ", ";\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n\n background-color: ", ";\n border: 1px solid\n ", ";\n color: ", ";\n caret-color: ", ";\n\n ::-webkit-input-placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n :active,\n :focus,\n &.focus,\n &.active {\n background-color: ", ";\n border-color: ", ";\n }\n\n :hover {\n background-color: ", ";\n cursor: ", ";\n border-color: ", ";\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n align-items: center;\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: 2px;\n caret-color: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n height: ", ";\n justify-content: space-between;\n outline: none;\n overflow: hidden;\n padding: ", ";\n text-overflow: ellipsis;\n transition: ", ";\n white-space: nowrap;\n width: 100%;\n word-wrap: normal;\n pointer-events: ", ";\n opacity: ", ";\n\n :hover {\n cursor: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n\n :active,\n :focus,\n &.focus,\n &.active {\n background-color: ", ";\n border-color: ", ";\n }\n\n ::placeholder {\n color: ", ";\n font-weight: ", ";\n }\n\n /* Disable Arrows on Number Inputs */\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var transition = 'all .4s ease';
exports.transition = transition;
var transitionFast = 'all .2s ease';
exports.transitionFast = transitionFast;
var transitionSlow = 'all .8s ease';
exports.transitionSlow = transitionSlow;
var boxShadow = '0 1px 2px 0 rgba(0,0,0,0.10)';
exports.boxShadow = boxShadow;
var boxSizing = 'border-box';
exports.boxSizing = boxSizing;
var borderRadius = '1px';
exports.borderRadius = borderRadius;
var borderColor = '#3A414C';
exports.borderColor = borderColor;
var borderColorLT = '#F1F1F1'; // TEXT
exports.borderColorLT = borderColorLT;
var fontFamily = "ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif";
exports.fontFamily = fontFamily;
var fontWeight = 400;
exports.fontWeight = fontWeight;
var fontSize = '0.875em';
exports.fontSize = fontSize;
var lineHeight = 1.71429;
exports.lineHeight = lineHeight;
var labelColor = '#6A7485';
exports.labelColor = labelColor;
var labelHoverColor = '#C6C6C6';
exports.labelHoverColor = labelHoverColor;
var labelColorLT = '#6A7485';
exports.labelColorLT = labelColorLT;
var textColor = '#A0A7B4';
exports.textColor = textColor;
var textColorLT = '#3A414C';
exports.textColorLT = textColorLT;
var titleColorLT = '#29323C';
exports.titleColorLT = titleColorLT;
var subtextColor = '#6A7485';
exports.subtextColor = subtextColor;
var subtextColorLT = '#A0A7B4';
exports.subtextColorLT = subtextColorLT;
var subtextColorActive = '#FFFFFF';
exports.subtextColorActive = subtextColorActive;
var titleTextColor = '#FFFFFF';
exports.titleTextColor = titleTextColor;
var textColorHl = '#F0F0F0';
exports.textColorHl = textColorHl;
var textColorHlLT = '#000000';
exports.textColorHlLT = textColorHlLT;
var activeColor = '#1FBAD6';
exports.activeColor = activeColor;
var activeColorLT = '#2473BD';
exports.activeColorLT = activeColorLT;
var activeColorHover = '#108188';
exports.activeColorHover = activeColorHover;
var errorColor = '#F9042C';
exports.errorColor = errorColor;
var logoColor = activeColor; // Button
exports.logoColor = logoColor;
var primaryBtnBgd = '#0F9668';
exports.primaryBtnBgd = primaryBtnBgd;
var primaryBtnActBgd = '#13B17B';
exports.primaryBtnActBgd = primaryBtnActBgd;
var primaryBtnColor = '#FFFFFF';
exports.primaryBtnColor = primaryBtnColor;
var primaryBtnActColor = '#FFFFFF';
exports.primaryBtnActColor = primaryBtnActColor;
var primaryBtnBgdHover = '#13B17B';
exports.primaryBtnBgdHover = primaryBtnBgdHover;
var primaryBtnRadius = '2px';
exports.primaryBtnRadius = primaryBtnRadius;
var secondaryBtnBgd = '#6A7485';
exports.secondaryBtnBgd = secondaryBtnBgd;
var secondaryBtnActBgd = '#A0A7B4';
exports.secondaryBtnActBgd = secondaryBtnActBgd;
var secondaryBtnColor = '#FFFFFF';
exports.secondaryBtnColor = secondaryBtnColor;
var secondaryBtnActColor = '#FFFFFF';
exports.secondaryBtnActColor = secondaryBtnActColor;
var secondaryBtnBgdHover = '#A0A7B4';
exports.secondaryBtnBgdHover = secondaryBtnBgdHover;
var linkBtnBgd = 'transparent';
exports.linkBtnBgd = linkBtnBgd;
var linkBtnActBgd = linkBtnBgd;
exports.linkBtnActBgd = linkBtnActBgd;
var linkBtnColor = '#A0A7B4';
exports.linkBtnColor = linkBtnColor;
var linkBtnActColor = '#F1F1F1';
exports.linkBtnActColor = linkBtnActColor;
var linkBtnActBgdHover = linkBtnBgd;
exports.linkBtnActBgdHover = linkBtnActBgdHover;
var negativeBtnBgd = errorColor;
exports.negativeBtnBgd = negativeBtnBgd;
var negativeBtnActBgd = '#FF193E';
exports.negativeBtnActBgd = negativeBtnActBgd;
var negativeBtnBgdHover = '#FF193E';
exports.negativeBtnBgdHover = negativeBtnBgdHover;
var negativeBtnColor = '#FFFFFF';
exports.negativeBtnColor = negativeBtnColor;
var negativeBtnActColor = '#FFFFFF';
exports.negativeBtnActColor = negativeBtnActColor;
var floatingBtnBgd = '#29323C';
exports.floatingBtnBgd = floatingBtnBgd;
var floatingBtnActBgd = '#3A4552';
exports.floatingBtnActBgd = floatingBtnActBgd;
var floatingBtnBgdHover = '#3A4552';
exports.floatingBtnBgdHover = floatingBtnBgdHover;
var floatingBtnColor = subtextColor;
exports.floatingBtnColor = floatingBtnColor;
var floatingBtnActColor = subtextColorActive; // Input
exports.floatingBtnActColor = floatingBtnActColor;
var inputBoxHeight = '34px';
exports.inputBoxHeight = inputBoxHeight;
var inputBoxHeightSmall = '24px';
exports.inputBoxHeightSmall = inputBoxHeightSmall;
var inputBoxHeightTiny = '18px';
exports.inputBoxHeightTiny = inputBoxHeightTiny;
var inputPadding = '4px 10px';
exports.inputPadding = inputPadding;
var inputPaddingSmall = '4px 6px';
exports.inputPaddingSmall = inputPaddingSmall;
var inputPaddingTiny = '2px 4px';
exports.inputPaddingTiny = inputPaddingTiny;
var inputFontSize = '11px';
exports.inputFontSize = inputFontSize;
var inputFontSizeSmall = '10px';
exports.inputFontSizeSmall = inputFontSizeSmall;
var inputFontWeight = 500;
exports.inputFontWeight = inputFontWeight;
var inputBgd = '#29323C';
exports.inputBgd = inputBgd;
var inputBgdHover = '#3A414C';
exports.inputBgdHover = inputBgdHover;
var inputBgdActive = '#3A414C';
exports.inputBgdActive = inputBgdActive;
var inputBorderColor = '#29323C';
exports.inputBorderColor = inputBorderColor;
var inputBorderHoverColor = '#3A414C';
exports.inputBorderHoverColor = inputBorderHoverColor;
var inputBorderActiveColor = '#D3D8E0';
exports.inputBorderActiveColor = inputBorderActiveColor;
var inputColor = '#A0A7B4';
exports.inputColor = inputColor;
var inputBorderRadius = '1px';
exports.inputBorderRadius = inputBorderRadius;
var inputPlaceholderColor = '#6A7485';
exports.inputPlaceholderColor = inputPlaceholderColor;
var inputPlaceholderFontWeight = 400;
exports.inputPlaceholderFontWeight = inputPlaceholderFontWeight;
var secondaryInputBgd = '#242730';
exports.secondaryInputBgd = secondaryInputBgd;
var secondaryInputBgdHover = '#3A414C';
exports.secondaryInputBgdHover = secondaryInputBgdHover;
var secondaryInputBgdActive = '#3A414C';
exports.secondaryInputBgdActive = secondaryInputBgdActive;
var secondaryInputColor = '#A0A7B4';
exports.secondaryInputColor = secondaryInputColor;
var secondaryInputBorderColor = '#242730';
exports.secondaryInputBorderColor = secondaryInputBorderColor;
var secondaryInputBorderActiveColor = '#D3D8E0'; // Select
exports.secondaryInputBorderActiveColor = secondaryInputBorderActiveColor;
var selectColor = inputColor;
exports.selectColor = selectColor;
var selectColorLT = titleColorLT;
exports.selectColorLT = selectColorLT;
var selectActiveBorderColor = '#D3D8E0';
exports.selectActiveBorderColor = selectActiveBorderColor;
var selectFontSize = '11px';
exports.selectFontSize = selectFontSize;
var selectFontWeight = '400';
exports.selectFontWeight = selectFontWeight;
var selectFontWeightBold = '500';
exports.selectFontWeightBold = selectFontWeightBold;
var selectColorPlaceHolder = '#6A7485';
exports.selectColorPlaceHolder = selectColorPlaceHolder;
var selectBackground = inputBgd;
exports.selectBackground = selectBackground;
var selectBackgroundHover = inputBgdHover;
exports.selectBackgroundHover = selectBackgroundHover;
var selectBackgroundLT = '#FFFFFF';
exports.selectBackgroundLT = selectBackgroundLT;
var selectBackgroundHoverLT = '#F8F8F9';
exports.selectBackgroundHoverLT = selectBackgroundHoverLT;
var selectBorderColor = '#D3D8E0';
exports.selectBorderColor = selectBorderColor;
var selectBorderColorLT = '#D3D8E0';
exports.selectBorderColorLT = selectBorderColorLT;
var selectBorderRadius = '1px';
exports.selectBorderRadius = selectBorderRadius;
var selectBorder = 0;
exports.selectBorder = selectBorder;
var dropdownListHighlightBg = '#6A7485';
exports.dropdownListHighlightBg = dropdownListHighlightBg;
var dropdownListHighlightBgLT = '#F8F8F9';
exports.dropdownListHighlightBgLT = dropdownListHighlightBgLT;
var dropdownListShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
exports.dropdownListShadow = dropdownListShadow;
var dropdownListBgd = '#3A414C';
exports.dropdownListBgd = dropdownListBgd;
var dropdownListBgdLT = '#FFFFFF';
exports.dropdownListBgdLT = dropdownListBgdLT;
var dropdownListBorderTop = '#242730';
exports.dropdownListBorderTop = dropdownListBorderTop;
var dropdownWrapperZ = 100; // Switch
exports.dropdownWrapperZ = dropdownWrapperZ;
var switchWidth = 24;
exports.switchWidth = switchWidth;
var switchHeight = 12;
exports.switchHeight = switchHeight;
var switchLabelMargin = 12;
exports.switchLabelMargin = switchLabelMargin;
var switchTrackBgd = '#29323C';
exports.switchTrackBgd = switchTrackBgd;
var switchTrackBgdActive = activeColor;
exports.switchTrackBgdActive = switchTrackBgdActive;
var switchTrackBorderRadius = '1px';
exports.switchTrackBorderRadius = switchTrackBorderRadius;
var switchBtnBgd = '#6A7485';
exports.switchBtnBgd = switchBtnBgd;
var switchBtnBgdActive = '#D3D8E0';
exports.switchBtnBgdActive = switchBtnBgdActive;
var switchBtnBoxShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
exports.switchBtnBoxShadow = switchBtnBoxShadow;
var switchBtnBorderRadius = '0';
exports.switchBtnBorderRadius = switchBtnBorderRadius;
var switchBtnWidth = '12px';
exports.switchBtnWidth = switchBtnWidth;
var switchBtnHeight = '12px';
exports.switchBtnHeight = switchBtnHeight;
var secondarySwitchTrackBgd = '#242730';
exports.secondarySwitchTrackBgd = secondarySwitchTrackBgd;
var secondarySwitchBtnBgd = '#3A414C'; // Checkbox
exports.secondarySwitchBtnBgd = secondarySwitchBtnBgd;
var checkboxWidth = 16;
exports.checkboxWidth = checkboxWidth;
var checkboxHeight = 16;
exports.checkboxHeight = checkboxHeight;
var checkboxMargin = 12;
exports.checkboxMargin = checkboxMargin;
var checkboxBorderColor = selectBorderColor;
exports.checkboxBorderColor = checkboxBorderColor;
var checkboxBorderRadius = '2px';
exports.checkboxBorderRadius = checkboxBorderRadius;
var checkboxBorderColorLT = selectBorderColorLT;
exports.checkboxBorderColorLT = checkboxBorderColorLT;
var checkboxBoxBgd = 'white';
exports.checkboxBoxBgd = checkboxBoxBgd;
var checkboxBoxBgdChecked = primaryBtnBgd; // Side Panel
exports.checkboxBoxBgdChecked = checkboxBoxBgdChecked;
var sidePanelHeaderBg = '#29323C';
exports.sidePanelHeaderBg = sidePanelHeaderBg;
var sidePanelInnerPadding = 16;
exports.sidePanelInnerPadding = sidePanelInnerPadding;
var sidePanelBg = '#242730';
exports.sidePanelBg = sidePanelBg;
var sidePanelScrollBarWidth = 10;
exports.sidePanelScrollBarWidth = sidePanelScrollBarWidth;
var sidePanelScrollBarHeight = 10;
exports.sidePanelScrollBarHeight = sidePanelScrollBarHeight;
var sideBarCloseBtnBgd = secondaryBtnBgd;
exports.sideBarCloseBtnBgd = sideBarCloseBtnBgd;
var sideBarCloseBtnColor = '#29323C';
exports.sideBarCloseBtnColor = sideBarCloseBtnColor;
var sideBarCloseBtnBgdHover = secondaryBtnActBgd;
exports.sideBarCloseBtnBgdHover = sideBarCloseBtnBgdHover;
var panelBackground = '#29323C';
exports.panelBackground = panelBackground;
var panelBackgroundHover = '#3A4552';
exports.panelBackgroundHover = panelBackgroundHover;
var panelActiveBg = '#3A4552';
exports.panelActiveBg = panelActiveBg;
var panelActiveBgLT = '#6A7485';
exports.panelActiveBgLT = panelActiveBgLT;
var panelHeaderIcon = '#6A7485';
exports.panelHeaderIcon = panelHeaderIcon;
var panelHeaderIconActive = '#A0A7B4';
exports.panelHeaderIconActive = panelHeaderIconActive;
var panelHeaderHeight = 48;
exports.panelHeaderHeight = panelHeaderHeight;
var panelBoxShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
exports.panelBoxShadow = panelBoxShadow;
var panelBorderRadius = '2px';
exports.panelBorderRadius = panelBorderRadius;
var panelBackgroundLT = '#F8F8F9';
exports.panelBackgroundLT = panelBackgroundLT;
var panelBorderColor = '#3A414C';
exports.panelBorderColor = panelBorderColor;
var panelBorder = "1px solid ".concat(borderColor);
exports.panelBorder = panelBorder;
var panelBorderLT = "1px solid ".concat(borderColorLT);
exports.panelBorderLT = panelBorderLT;
var mapPanelBackgroundColor = '#242730';
exports.mapPanelBackgroundColor = mapPanelBackgroundColor;
var mapPanelHeaderBackgroundColor = '#29323C';
exports.mapPanelHeaderBackgroundColor = mapPanelHeaderBackgroundColor;
var tooltipBg = '#F8F8F9';
exports.tooltipBg = tooltipBg;
var tooltipColor = '#333334'; // Bottom Panel
exports.tooltipColor = tooltipColor;
var bottomInnerPdSide = 32;
exports.bottomInnerPdSide = bottomInnerPdSide;
var bottomInnerPdVert = 6;
exports.bottomInnerPdVert = bottomInnerPdVert;
var bottomPanelGap = 20; // Modal
exports.bottomPanelGap = bottomPanelGap;
var modalTitleColor = '#3A414C';
exports.modalTitleColor = modalTitleColor;
var modalTitleFontSize = '24px';
exports.modalTitleFontSize = modalTitleFontSize;
var modalTitleFontSizeSmaller = '18px';
exports.modalTitleFontSizeSmaller = modalTitleFontSizeSmaller;
var modalFooterBgd = '#F8F8F9';
exports.modalFooterBgd = modalFooterBgd;
var modalImagePlaceHolder = '#DDDFE3';
exports.modalImagePlaceHolder = modalImagePlaceHolder;
var modalPadding = '10px 0';
exports.modalPadding = modalPadding;
var modalLateralPadding = '72px';
exports.modalLateralPadding = modalLateralPadding;
var modalPortableLateralPadding = '36px';
exports.modalPortableLateralPadding = modalPortableLateralPadding;
var modalOverLayZ = 1001;
exports.modalOverLayZ = modalOverLayZ;
var modalOverlayBgd = 'rgba(0, 0, 0, 0.5)';
exports.modalOverlayBgd = modalOverlayBgd;
var modalContentZ = 10002;
exports.modalContentZ = modalContentZ;
var modalFooterZ = 10001;
exports.modalFooterZ = modalFooterZ;
var modalTitleZ = 10003;
exports.modalTitleZ = modalTitleZ;
var modalButtonZ = 10005;
exports.modalButtonZ = modalButtonZ;
var modalDropdownBackground = '#FFFFFF'; // Modal Dialog (Dark)
exports.modalDropdownBackground = modalDropdownBackground;
var modalDialogBgd = '#3A414C';
exports.modalDialogBgd = modalDialogBgd;
var modalDialogColor = textColorHl; // Slider
exports.modalDialogColor = modalDialogColor;
var sliderBarColor = '#6A7485';
exports.sliderBarColor = sliderBarColor;
var sliderBarBgd = '#3A414C';
exports.sliderBarBgd = sliderBarBgd;
var sliderBarHoverColor = '#D3D8E0';
exports.sliderBarHoverColor = sliderBarHoverColor;
var sliderBarRadius = '1px';
exports.sliderBarRadius = sliderBarRadius;
var sliderBarHeight = 4;
exports.sliderBarHeight = sliderBarHeight;
var sliderHandleHeight = 12;
exports.sliderHandleHeight = sliderHandleHeight;
var sliderHandleWidth = 12;
exports.sliderHandleWidth = sliderHandleWidth;
var sliderHandleColor = '#D3D8E0';
exports.sliderHandleColor = sliderHandleColor;
var sliderHandleHoverColor = '#FFFFFF';
exports.sliderHandleHoverColor = sliderHandleHoverColor;
var sliderHandleShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
exports.sliderHandleShadow = sliderHandleShadow;
var sliderInputHeight = 24;
exports.sliderInputHeight = sliderInputHeight;
var sliderInputWidth = 56;
exports.sliderInputWidth = sliderInputWidth;
var sliderMarginTopIsRange = 0;
exports.sliderMarginTopIsRange = sliderMarginTopIsRange;
var sliderMarginTop = 12; // Plot
exports.sliderMarginTop = sliderMarginTop;
var rangeBrushBgd = '#3A414C';
exports.rangeBrushBgd = rangeBrushBgd;
var histogramFillInRange = activeColor;
exports.histogramFillInRange = histogramFillInRange;
var histogramFillOutRange = sliderBarColor; // Notification
exports.histogramFillOutRange = histogramFillOutRange;
var notificationColors = {
info: '#276ef1',
error: '#f25138',
success: '#47b275',
warning: '#ffc043'
};
exports.notificationColors = notificationColors;
var notificationPanelWidth = 240;
exports.notificationPanelWidth = notificationPanelWidth;
var notificationPanelItemWidth = notificationPanelWidth - 60;
exports.notificationPanelItemWidth = notificationPanelItemWidth;
var notificationPanelItemHeight = 60; // Data Table
exports.notificationPanelItemHeight = notificationPanelItemHeight;
var headerRowHeight = 70;
var rowHeight = 32;
var headerPaddingTop = 6;
var headerPaddingBottom = 8;
var cellPaddingSide = 10;
var edgeCellPaddingSide = 10;
var cellFontSize = 10;
var gridPaddingSide = 24;
var headerCellBackground = '#FFFFFF';
var headerCellBorderColor = '#E0E0E0';
var headerCellIconColor = '#666666';
var cellBorderColor = '#E0E0E0';
var evenRowBackground = '#FFFFFF';
var oddRowBackground = '#F7F7F7';
var optionButtonColor = '#6A7485';
var pinnedGridBorderColor = '#E0E0E0'; // Floating Time display
var timeDisplayBorderRadius = 32;
var timeDisplayHeight = 64;
var timeDisplayMinWidth = 176;
var timeDisplayOpacity = 0.8;
var timeDisplayPadding = '0 24px'; // Export map modal
var exportIntraSectionMargin = '8'; // Action Panel
var actionPanelWidth = 110;
exports.actionPanelWidth = actionPanelWidth;
var actionPanelHeight = 32;
exports.actionPanelHeight = actionPanelHeight;
var textTruncate = {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
wordWrap: 'normal'
}; // This breakpoints are used for responsive design
exports.textTruncate = textTruncate;
var breakPoints = {
palm: 588,
desk: 768
}; // theme is passed to kepler.gl when it's mounted,
// it is used by styled-components to pass along to
// all child components
exports.breakPoints = breakPoints;
var input = (0, _styledComponents.css)(_templateObject(), function (props) {
return props.theme.inputBgd;
}, function (props) {
return props.active ? props.theme.inputBorderActiveColor : props.error ? props.theme.errorColor : props.theme.inputBgd;
}, function (props) {
return props.theme.inputBorderActiveColor;
}, function (props) {
return props.theme.inputColor;
}, function (props) {
return ['small', 'tiny'].includes(props.size) ? props.theme.inputFontSizeSmall : props.theme.inputFontSize;
}, function (props) {
return props.theme.inputFontWeight;
}, function (props) {
return props.size === 'small' ? props.theme.inputBoxHeightSmall : props.size === 'tiny' ? props.theme.inputBoxHeightTiny : props.theme.inputBoxHeight;
}, function (props) {
return props.size === 'small' ? props.theme.inputPaddingSmall : props.size === 'tiny' ? props.theme.inputPaddingTiny : props.theme.inputPadding;
}, function (props) {
return props.theme.transition;
}, function (props) {
return props.disabled ? 'none' : 'all';
}, function (props) {
return props.disabled ? 0.5 : 1;
}, function (props) {
return props.type === 'number' ? 'text' : 'pointer';
}, function (props) {
return props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover;
}, function (props) {
return props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor;
}, function (props) {
return props.theme.inputBgdActive;
}, function (props) {
return props.theme.inputBorderActiveColor;
}, function (props) {
return props.theme.inputPlaceholderColor;
}, function (props) {
return props.theme.inputPlaceholderFontWeight;
});
var inputLT = (0, _styledComponents.css)(_templateObject2(), input, function (props) {
return props.theme.selectBackgroundLT;
}, function (props) {
return props.active ? props.theme.selectActiveBorderColor : props.error ? props.theme.errorColor : props.theme.selectBorderColorLT;
}, function (props) {
return props.theme.selectColorLT;
}, function (props) {
return props.theme.selectColorLT;
}, function (props) {
return props.theme.subtextColorLT;
}, function (props) {
return props.theme.selectBackgroundLT;
}, function (props) {
return props.theme.textColorLT;
}, function (props) {
return props.theme.selectBackgroundLT;
}, function (props) {
return ['number', 'text'].includes(props.type) ? 'text' : 'pointer';
}, function (props) {
return props.active ? props.theme.textColorLT : props.theme.subtextColor;
});
var secondaryInput = (0, _styledComponents.css)(_templateObject3(), function (props) {
return props.theme.input;
}, function (props) {
return props.theme.secondaryInputColor;
}, function (props) {
return props.theme.secondaryInputBgd;
}, function (props) {
return props.error ? props.theme.errorColor : props.theme.secondaryInputBorderColor;
}, function (props) {
return props.theme.secondaryInputBgdHover;
}, function (props) {
return props.theme.secondaryInputBgdHover;
}, function (props) {
return props.theme.secondaryInputBgdActive;
}, function (props) {
return props.theme.secondaryInputBorderActiveColor;
});
var chickletedInputContainer = (0, _styledComponents.css)(_templateObject4());
var chickletedInput = (0, _styledComponents.css)(_templateObject5(), function (props) {
return props.theme.input;
}, function (props) {
return props.theme.chickletedInputContainer;
});
var secondaryChickletedInput = (0, _styledComponents.css)(_templateObject6(), function (props) {
return props.theme.secondaryInput;
}, function (props) {
return props.theme.chickletedInputContainer;
});
var inlineInput = (0, _styledComponents.css)(_templateObject7(), function (props) {
return props.theme.input;
}, function (props) {
return props.theme.textColor;
}, function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.inputBorderActiveColor;
});
var switchTrack = (0, _styledComponents.css)(_templateObject8(), function (props) {
return props.checked ? props.theme.switchTrackBgdActive : props.theme.switchTrackBgd;
}, function (props) {
return -props.theme.switchLabelMargin;
}, function (props) {
return props.theme.switchWidth;
}, function (props) {
return props.theme.switchHeight;
}, function (props) {
return props.theme.switchTrackBorderRadius;
});
var switchButton = (0, _styledComponents.css)(_templateObject9(), function (props) {
return props.theme.transition;
}, function (props) {
return (props.checked ? props.theme.switchWidth / 2 : -1) - props.theme.switchLabelMargin;
}, function (props) {
return props.theme.switchBtnHeight;
}, function (props) {
return props.theme.switchBtnWidth;
}, function (props) {
return props.checked ? props.theme.switchBtnBgdActive : props.theme.switchBtnBgd;
}, function (props) {
return props.theme.switchBtnBoxShadow;
}, function (props) {
return props.theme.switchBtnBorderRadius;
});
var inputSwitch = (0, _styledComponents.css)(_templateObject10(), function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.switchWidth;
}, function (props) {
return props.theme.switchTrack;
}, function (props) {
return props.theme.switchButton;
}); // This is a light version checkbox
var checkboxBox = (0, _styledComponents.css)(_templateObject11(), function (props) {
return props.theme.checkboxWidth;
}, function (props) {
return props.theme.checkboxHeight;
}, function (props) {
return props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBoxBgd;
}, function (props) {
return props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBorderColor;
});
var checkboxCheck = (0, _styledComponents.css)(_templateObject12(), function (props) {
return props.checked ? 1 : 0;
});
var inputCheckbox = (0, _styledComponents.css)(_templateObject13(), function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.switchLabelMargin;
}, function (props) {
return props.theme.checkboxBox;
}, function (props) {
return props.theme.checkboxCheck;
});
var secondarySwitch = (0, _styledComponents.css)(_templateObject14(), function (props) {
return props.theme.inputSwitch;
}, function (props) {
return props.theme.switchTrack;
}, function (props) {
return props.checked ? props.theme.switchTrackBgdActive : props.theme.secondarySwitchTrackBgd;
}, function (props) {
return props.theme.switchButton;
}, function (props) {
return props.checked ? props.theme.switchBtnBgdActive : props.theme.secondarySwitchBtnBgd;
});
var dropdownScrollBar = (0, _styledComponents.css)(_templateObject15(), function (props) {
return props.theme.dropdownListBgd;
}, function (props) {
return props.theme.dropdownListBgd;
}, function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.dropdownListBgd;
}, function (props) {
return props.theme.textColorHl;
});
var dropdownListAnchor = (0, _styledComponents.css)(_templateObject16(), function (props) {
return props.theme.selectColor;
});
var dropdownListSize = (0, _styledComponents.css)(_templateObject17());
var dropdownListItem = (0, _styledComponents.css)(_templateObject18(), dropdownListSize, function (props) {
return props.theme.dropdownListHighlightBg;
}, function (props) {
return props.theme.textColorHl;
});
var dropdownListItemLT = (0, _styledComponents.css)(_templateObject19(), dropdownListSize, function (props) {
return props.theme.textColorLT;
}, function (props) {
return props.theme.textColorHlLT;
}, function (props) {
return props.theme.dropdownListHighlightBgLT;
}, function (props) {
return props.theme.textColorHlLT;
});
var dropdownListHeader = (0, _styledComponents.css)(_templateObject20(), function (props) {
return props.theme.labelColor;
});
var dropdownListSection = (0, _styledComponents.css)(_templateObject21(), function (props) {
return props.theme.labelColor;
});
var dropdownList = (0, _styledComponents.css)(_templateObject22(), function (props) {
return props.theme.dropdownListShadow;
}, function (props) {
return props.theme.dropdownListSection;
}, function (props) {
return props.theme.dropdownListHeader;
}, function (props) {
return props.theme.dropdownListItem;
}, function (props) {
return props.theme.dropdownListAnchor;
}, function (props) {
return props.theme.dropdownScrollBar;
});
var dropdownListLT = (0, _styledComponents.css)(_templateObject23(), dropdownList, function (props) {
return props.theme.dropdownListItemLT;
});
var sidePanelScrollBar = (0, _styledComponents.css)(_templateObject24(), function (props) {
return props.theme.sidePanelScrollBarHeight;
}, function (props) {
return props.theme.sidePanelScrollBarWidth;
}, function (props) {
return props.theme.sidePanelBg;
}, function (props) {
return props.theme.sidePanelBg;
}, function (props) {
return props.theme.panelBackgroundHover;
}, function (props) {
return props.theme.sidePanelBg;
}, function (props) {
return props.theme.labelColor;
});
var panelDropdownScrollBar = (0, _styledComponents.css)(_templateObject25(), function (props) {
return props.theme.panelBackground;
}, function (props) {
return props.theme.panelBackground;
}, function (props) {
return props.theme.panelBackgroundHover;
}, function (props) {
return props.theme.panelBackground;
}, function (props) {
return props.theme.labelColor;
});
var scrollBar = (0, _styledComponents.css)(_templateObject26(), function (props) {
return props.theme.panelBackground;
}, function (props) {
return props.theme.panelBackground;
}, function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.panelBackground;
}, function (props) {
return props.theme.textColorHl;
}, function (props) {
return props.theme.textColorHl;
});
var modalScrollBar = (0, _styledComponents.css)(_templateObject27(), function (props) {
return props.theme.textColorHl;
}, function (props) {
return props.theme.labelColorLT;
}, function (props) {
return props.theme.textColorHl;
}, function (props) {
return props.theme.textColorHl;
});
exports.modalScrollBar = modalScrollBar;
var theme = _objectSpread({}, _defaultSettings.DIMENSIONS, {
// templates
input: input,
inputLT: inputLT,
inlineInput: inlineInput,
chickletedInput: chickletedInput,
chickletedInputContainer: chickletedInputContainer,
secondaryChickletedInput: secondaryChickletedInput,
borderColor: borderColor,
borderColorLT: borderColorLT,
secondaryInput: secondaryInput,
dropdownScrollBar: dropdownScrollBar,
dropdownList: dropdownList,
dropdownListLT: dropdownListLT,
dropdownListItem: dropdownListItem,
dropdownListItemLT: dropdownListItemLT,
dropdownListAnchor: dropdownListAnchor,
dropdownListHeader: dropdownListHeader,
dropdownListSection: dropdownListSection,
dropdownListShadow: dropdownListShadow,
dropdownWrapperZ: dropdownWrapperZ,
modalScrollBar: modalScrollBar,
scrollBar: scrollBar,
sidePanelScrollBar: sidePanelScrollBar,
inputSwitch: inputSwitch,
secondarySwitch: secondarySwitch,
switchTrack: switchTrack,
switchButton: switchButton,
inputCheckbox: inputCheckbox,
checkboxBox: checkboxBox,
checkboxCheck: checkboxCheck,
// Transitions
transition: transition,
transitionFast: transitionFast,
transitionSlow: transitionSlow,
// styles
activeColor: activeColor,
activeColorHover: activeColorHover,
borderRadius: borderRadius,
boxShadow: boxShadow,
errorColor: errorColor,
dropdownListHighlightBg: dropdownListHighlightBg,
dropdownListHighlightBgLT: dropdownListHighlightBgLT,
dropdownListBgd: dropdownListBgd,
dropdownListBgdLT: dropdownListBgdLT,
dropdownListBorderTop: dropdownListBorderTop,
labelColor: labelColor,
labelColorLT: labelColorLT,
labelHoverColor: labelHoverColor,
mapPanelBackgroundColor: mapPanelBackgroundColor,
mapPanelHeaderBackgroundColor: mapPanelHeaderBackgroundColor,
// Select
selectActiveBorderColor: selectActiveBorderColor,
selectBackground: selectBackground,
selectBackgroundLT: selectBackgroundLT,
selectBackgroundHover: selectBackgroundHover,
selectBackgroundHoverLT: selectBackgroundHoverLT,
selectBorder: selectBorder,
selectBorderColor: selectBorderColor,
selectBorderRadius: selectBorderRadius,
selectBorderColorLT: selectBorderColorLT,
selectColor: selectColor,
selectColorPlaceHolder: selectColorPlaceHolder,
selectFontSize: selectFontSize,
selectFontWeight: selectFontWeight,
selectColorLT: selectColorLT,
selectFontWeightBold: selectFontWeightBold,
// Input
inputBgd: inputBgd,
inputBgdHover: inputBgdHover,
inputBgdActive: inputBgdActive,
inputBoxHeight: inputBoxHeight,
inputBoxHeightSmall: inputBoxHeightSmall,
inputBoxHeightTiny: inputBoxHeightTiny,
inputBorderColor: inputBorderColor,
inputBorderActiveColor: inputBorderActiveColor,
inputBorderHoverColor: inputBorderHoverColor,
inputBorderRadius: inputBorderRadius,
inputColor: inputColor,
inputPadding: inputPadding,
inputPaddingSmall: inputPaddingSmall,
inputPaddingTiny: inputPaddingTiny,
inputFontSize: inputFontSize,
inputFontSizeSmall: inputFontSizeSmall,
inputFontWeight: inputFontWeight,
inputPlaceholderColor: inputPlaceholderColor,
inputPlaceholderFontWeight: inputPlaceholderFontWeight,
secondaryInputBgd: secondaryInputBgd,
secondaryInputBgdHover: secondaryInputBgdHover,
secondaryInputBgdActive: secondaryInputBgdActive,
secondaryInputColor: secondaryInputColor,
secondaryInputBorderColor: secondaryInputBorderColor,
secondaryInputBorderActiveColor: secondaryInputBorderActiveColor,
// Switch
switchWidth: switchWidth,
switchHeight: switchHeight,
switchTrackBgd: switchTrackBgd,
switchTrackBgdActive: switchTrackBgdActive,
switchTrackBorderRadius: switchTrackBorderRadius,
switchBtnBgd: switchBtnBgd,
switchBtnBgdActive: switchBtnBgdActive,
switchBtnBoxShadow: switchBtnBoxShadow,
switchBtnBorderRadius: switchBtnBorderRadius,
switchBtnWidth: switchBtnWidth,
switchBtnHeight: switchBtnHeight,
switchLabelMargin: switchLabelMargin,
secondarySwitchTrackBgd: secondarySwitchTrackBgd,
secondarySwitchBtnBgd: secondarySwitchBtnBgd,
// Checkbox
checkboxWidth: checkboxWidth,
checkboxHeight: checkboxHeight,
checkboxMargin: checkboxMargin,
checkboxBorderColor: checkboxBorderColor,
checkboxBo