@up-group-ui/react-controls
Version:
Up shared react controls
221 lines • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.RadioGroupStyles = void 0;
var tslib_1 = require("tslib");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Styled_1 = require("../_Common/Styled");
var typestyle_1 = require("typestyle");
var utils_1 = require("../../../Common/utils");
var utils_2 = require("../../../Common/theming/utils");
var baseStyles = function (props) { return ({
$nest: {
'& .up-control-indicator': {
borderRadius: '50%',
fontSize: (0, utils_2.toRem)(6),
cursor: props.readonly && 'unset',
},
'& .up-control-text': {
zIndex: 100,
},
'& input:checked ~ .up-control-wrapper .up-control-indicator::before': {
display: 'inline-block',
position: 'absolute',
top: '50%',
left: '50%',
'-webkit-transform': 'translate(-50%, -50%)',
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
background: '#ffffff',
width: (0, utils_2.toRem)(6),
height: (0, utils_2.toRem)(6),
content: '',
},
'& input:indeterminate ~ .up-control-wrapper .up-control-indicator::before': {
display: 'inline-block',
position: 'absolute',
top: '50%',
left: '50%',
'-webkit-transform': 'translate(-50%, -50%)',
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
},
},
}); };
var RadioGroupStyles = function (props) {
var _a;
return {
$nest: {
'& .up-control-text': {
fontSize: (0, utils_2.toRem)(14),
fontWeight: 'normal',
fontStyle: 'normal',
fontStretch: 'normal',
letterSpacing: 'normal',
textAlign: 'center',
color: '#4e5b59',
},
'&.upContainer__groupradio-horizontal label.up-radio': {
marginRight: "" + (props.gutter ? (0, utils_2.toRem)(props.gutter) : 0),
marginBottom: "" + (props.gutter ? (0, utils_2.toRem)(props.gutter) : 0),
width: props.nbItemsPerRow
? Math.floor(100 / props.nbItemsPerRow) - Math.ceil(((_a = props.gutter) !== null && _a !== void 0 ? _a : 0) / 16) + "%"
: 'auto',
},
'&.upContainer__groupradio-horizontal label.up-radio .up-control-text': {
flex: 2,
},
'&.upContainer__groupradio-vertical label.up-radio': {
marginTop: "" + (props.gutter ? (0, utils_2.toRem)(props.gutter) : 0),
cursor: props.readonly && 'unset',
},
'&.upContainer__groupradio-button.upContainer__groupradio-horizontal label.up-radio': {
marginLeft: "" + (props.gutter ? (0, utils_2.toRem)(props.gutter) : 0),
cursor: props.readonly && 'unset',
},
'&.upContainer__groupradio-button.upContainer__groupradio-horizontal label.up-radio .up-control-text': {
textAlign: 'left',
},
'&.upContainer__groupradio-horizontal': {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
flexWrap: 'wrap',
alignItems: 'stretch',
},
'&.upContainer__groupradio-vertical': {
height: '100%',
display: 'flex',
flexDirection: 'column',
flexWrap: props.flexWrap ? 'wrap' : 'nowrap',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
'&.upContainer__groupradio-button input:checked ~ .up-control-wrapper .up-control-indicator::before': {
visibility: 'hidden',
},
'&.upContainer__groupradio-button input:indeterminate ~ .up-control-wrapper .up-control-indicator::before': {
visibility: 'hidden',
},
'&.upContainer__groupradio-button label.up-radio': {
padding: (0, utils_2.toRem)(8),
backgroundColor: '#EEE',
border: '0.01em solid #CCC',
borderRight: (0, utils_1.isEmpty)(props.gutter) ? 0 : '0.01em solid #CCC',
position: 'relative',
marginTop: 0,
marginRight: "" + (props.gutter ? (0, utils_2.toRem)(props.gutter) : 0),
borderRadius: (0, utils_1.isEmpty)(props.gutter) ? 0 : props.theme.borderRadius,
},
'&.upContainer__groupradio-button label.up-radio:nth-child(2), &.upContainer__groupradio-button label.up-radio:nth-child(2) .up-control-wrapper .up-control-indicator': {
borderTopLeftRadius: props.theme.borderRadius,
borderBottomLeftRadius: props.theme.borderRadius,
},
'&.upContainer__groupradio-button label.up-radio:last-child': {
borderRight: '0.01em solid #CCC',
},
'&.upContainer__groupradio-button label.up-radio:last-child, &.upContainer__groupradio-button label.up-radio:last-child .up-control-wrapper .up-control-indicator': {
borderTopRightRadius: props.theme.borderRadius,
borderBottomRightRadius: props.theme.borderRadius,
},
'&.upContainer__groupradio-button .up-radio:hover input:indeterminate ~ .up-control-text': {
color: props.theme.colorMap.black1,
},
'&.upContainer__groupradio-button .up-radio:hover .up-control-text': {
color: props.theme.colorMap.black1,
},
'&.upContainer__groupradio-button .up-radio input:checked ~ .up-control-text': {
color: props.theme.colorMap.primaryFg,
},
'&.upContainer__groupradio-button label.up-radio input ~ .up-control-text': {
position: 'relative',
},
'&.upContainer__groupradio-button label.up-radio input ~ .up-control-wrapper .up-control-indicator': {
position: 'absolute',
width: '100%',
height: '100%',
border: 0,
top: 0,
left: 0,
borderRadius: (0, utils_1.isEmpty)(props.gutter) ? 0 : props.theme.borderRadius,
display: 'inline-block',
boxShadow: 'unset',
background: '#EFEFEF',
},
'&.upContainer__groupradio-button label.up-radio input:checked ~ .up-control-wrapper .up-control-indicator': {
backgroundColor: props.theme.colorMap.primary,
},
'&.upContainer__groupradio-button label.up-radio input:checked ~ .up-control-wrapper .up-control-indicator ~ *': {
color: 'white',
fontWeight: 500,
},
'&.upContainer__groupradio-large label.up-radio': {
display: 'flex',
flexDirection: 'row',
cursor: props.readonly && 'unset',
justifyContent: 'center',
paddingLeft: 0,
},
'&.upContainer__groupradio-large .up-control-wrapper': {
background: 'rgba(245, 145, 0, 0.2)',
position: 'relative',
border: "1px solid " + props.theme.colorMap.primary,
borderBottomLeftRadius: (0, utils_2.toRem)(4),
borderTopLeftRadius: (0, utils_2.toRem)(4),
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
$nest: {
'&.up-control-wrapper--adaptive-height': {
width: (0, utils_2.toRem)(60),
},
'&.up-control-wrapper--fixed-height': {
width: (0, utils_2.toRem)(80),
height: (0, utils_2.toRem)(80),
},
},
},
'&.upContainer__groupradio-large .up-control-wrapper .up-control-indicator': {
position: 'inherit',
cursor: props.readonly && 'unset',
},
'&.upContainer__groupradio-large .up-control-text': {
border: "1px solid " + props.theme.colorMap.primary,
borderBottomRightRadius: (0, utils_2.toRem)(4),
borderTopRightRadius: (0, utils_2.toRem)(4),
borderLeftWidth: (0, utils_2.toRem)(0),
verticalAlign: 'middle',
display: 'flex',
justifyContent: 'center',
$nest: {
'&.up-control-text--adaptive-height': {
flexDirection: 'column',
alignItems: 'flex-start',
padding: (0, utils_2.toRem)(5) + " " + (0, utils_2.toRem)(10),
},
'&.up-control-text--fixed-height': {
height: (0, utils_2.toRem)(80),
padding: (0, utils_2.toRem)(26),
lineHeight: 2.2,
alignItems: 'center',
},
},
},
'&.upContainer__groupradio-large .up-control-text span': {
paddingTop: (0, utils_2.toRem)(4),
},
'&.upContainer__groupradio-large .up-control-text svg,&.upContainer__groupradio-large .up-control-text svg path, &.upContainer__groupradio-large .up-control-text svg polygon, &.upContainer__groupradio-large .up-control-text svg polyline': {
color: '#4e5b59',
},
'&.upContainer__groupradio-large.upContainer__groupradio-vertical label.up-radio': {
marginTop: (0, utils_2.toRem)(12),
},
},
};
};
exports.RadioGroupStyles = RadioGroupStyles;
var getStyles = function (props) {
return (0, classnames_1.default)((0, typestyle_1.style)((0, Styled_1.getCheckableStyles)(props)), (0, typestyle_1.style)(baseStyles(props)));
};
exports.getStyles = getStyles;
//# sourceMappingURL=styles.js.map