@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
166 lines • 7.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
require("react-dates/lib/css/_datepicker.css");
var utils_1 = require("../../../Common/theming/utils");
var typestyle_1 = require("typestyle");
var getStyles = function (props) { return typestyle_1.style({
marginTop: props.floatingLabel ? utils_1.toRem(14) : 0,
position: "relative",
backgroundColor: "transparent",
$nest: {
"& .SingleDatePicker": tslib_1.__assign({}, (props.fullWidth && { width: "100%" })),
"& .SingleDatePickerInput": tslib_1.__assign(tslib_1.__assign({}, (props.fullWidth && { width: "100%" })), { minHeight: utils_1.toRem(29) }),
"& label": {
fontSize: utils_1.toRem(14),
position: "absolute",
top: utils_1.toRem(-10),
left: 0,
color: props.theme.colorMap.gray6,
transformOrigin: "top left",
transform: "translate(0, " + utils_1.toRem(16) + ") scale(1)",
transition: "all .1s ease-in-out",
cursor: "text",
marginLeft: props.iconPosition == "left" ? utils_1.toRem(36) : 0
},
"& .DateInput": tslib_1.__assign({}, (props.fullWidth ? { width: "100%" } : { width: 'auto' })),
"& .SingleDatePickerInput, & .SingleDatePickerInput input, & .SingleDatePickerInput .DateInput": {
backgroundColor: "transparent",
color: props.theme.colorMap.grey1,
paddingBottom: 0
},
"&.up-input-focused svg, &.up-input-focused svg path, &.up-input-focused svg polygon, &.up-input-focused svg polyline": {
fill: props.theme.colorMap.primary
},
"&.up-input-focused label, &.up-input-valued label": {
transform: "translate(0, 2px)",
fontSize: utils_1.toRem(12),
color: props.theme.colorMap.primary,
marginLeft: 0
},
"& .SingleDatePickerInput__withBorder": {
borderWidth: props.theme.inputBorderLess ? "0 0 1px 0" : "1px",
borderColor: props.focused ? props.theme.colorMap.primary : props.theme.colorMap.darkGray4,
borderRadius: props.theme.inputBorderLess ? 0 : props.theme.borderRadius
},
"& .SingleDatePickerInput__withBorder:hover": {
borderColor: props.theme.colorMap.primary
},
"& .SingleDatePickerInput_calendarIcon": {
margin: props.theme.inputBorderLess ? "0 " + (props.iconPosition === "left" ? utils_1.toRem(5) : utils_1.toRem(0)) + " 0 0" : "0 " + utils_1.toRem(5) + " 0 " + utils_1.toRem(10),
padding: utils_1.toRem(4),
position: 'absolute',
right: 0,
top: utils_1.toRem(2)
},
"& .SingleDatePickerInput_calendarIcon svg, & .SingleDatePickerInput_calendarIcon svg path": {
fill: props.focused
? props.theme.colorMap.primary
: props.theme.colorMap.darkGray4
},
"& .SingleDatePickerInput_clearDate svg, & .SingleDatePickerInput_clearDate svg path": {
fill: props.focused
? props.theme.colorMap.primary
: props.theme.colorMap.darkGray4
},
"& .SingleDatePickerInput__withBorder:hover svg, & .SingleDatePickerInput__withBorder:hover svg path ": {
fill: props.theme.colorMap.primary
},
"& .DateInput_input": {
padding: utils_1.toRem(6),
paddingLeft: props.iconPosition == "right" ? 0 : utils_1.toRem(6),
fontSize: utils_1.toRem(14),
color: "#354052",
lineHeight: 1.3
},
"& .DateInput_input__focused": {
borderWidth: 0
},
"& .DateInput_input__disabled": {
fontSize: utils_1.toRem(14),
lineHeight: 1.3,
fontStyle: 'normal'
},
"& .SingleDatePickerInput__showClearDate": {
paddingRight: props.iconPosition == "left" ? utils_1.toRem(30) : 0
},
"& .SingleDatePickerInput_clearDate": {
right: props.iconPosition == "left" ? 0 : utils_1.toRem(9)
},
"& .SingleDatePickerInput_clearDate:hover": {
backgroundColor: "transparent"
},
"& .SingleDatePickerInput_clearDate:hover svg, & .SingleDatePickerInput_clearDate:hover svg path": {
fill: props.theme.colorMap.primary
},
"& .CalendarDay": {
borderRadius: '50%',
border: 'unset',
},
"& .CalendarDay:hover": {
backgroundColor: props.theme.colorMap.lightGrey1,
color: props.theme.colorMap.grey1,
borderColor: props.theme.colorMap.lightGrey1,
},
"& .CalendarDay__selected": {
backgroundColor: props.theme.colorMap.primary,
color: props.theme.colorMap.primaryFg,
borderColor: props.theme.colorMap.primary,
},
"& .DayPickerNavigation_button svg, & .DayPickerNavigation_button svg path": {
fill: props.theme.colorMap.primary
},
"& .DayPickerNavigation_button:hover": {
borderColor: props.theme.colorMap.primary
},
"& .SingleDatePicker_picker": {
zIndex: 20,
top: utils_1.toRem(32) + " !important"
},
"& .DateInput_fang": {
display: 'none',
},
"& .CalendarDay__outside, & .CalendarDay__outside:hover": {
backgroundColor: props.theme.colorMap.primaryFg,
color: props.theme.colorMap.disabledFg,
},
"& button:focus": {
outline: "none !important"
}
}
}); };
exports.default = getStyles;
exports.selectStyle = typestyle_1.style({
$nest: {
'& > select': {
display: 'inline-block',
padding: '0.5em',
backgroundImage: 'linear-gradient(45deg, transparent 50%, gray 50%),linear-gradient(135deg, gray 50%, transparent 50%),linear-gradient(to right, #ccc, #ccc)',
backgroundPosition: 'calc(100% - 4px) calc(0.25em + 0.5px), calc(100% - 3.3px) calc(0.25em + 0.5px), calc(100% - 0.6em) 0.13em',
backgroundSize: '5px 5px, 5px 5px, 1px 1.5em',
backgroundRepeat: 'no-repeat',
backgroundColor: 'transparent',
border: 0,
margin: 0,
'-webkit-box-sizing': 'border-box',
'-moz-box-sizing': 'border-box',
boxSizing: 'border-box',
'-webkit-appearance': 'none',
'-moz-appearance': 'none'
},
'& > select:focus': {
backgroundImage: 'linear-gradient(45deg, green 50%, transparent 50%),linear-gradient(135deg, transparent 50%, green 50%),linear-gradient(to right, #ccc, #ccc)',
backgroundPosition: 'calc(100% - 3.3px) 0.25em, calc(100% - 5px) 0.25em, calc(100% - 0.6em) 0.13em;',
backgroundSize: '5px 5px, 5px 5px, 1px 1.5em',
backgroundRepeat: 'no-repeat',
border: 0,
borderColor: 'green',
zIndex: 99
},
'& > select:-moz-focusring': {
color: 'transparent',
textShadow: '0 0 0 #000',
}
}
});
//# sourceMappingURL=styles.js.map