calcite-react
Version:
Calcite components for React
234 lines (220 loc) • 10.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StepCustomIconStyles = exports.StepIconStyle = exports.StepCompleteIconStyles = exports.StepAvatarStyles = exports.StyledStepIcon = exports.StyledStepDescription = exports.StyledStepTitle = exports.StyledStepTextContainer = exports.StyledStep = exports.StyledStepper = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _helpers = require("../utils/helpers");
var _CalciteThemeProvider = require("../CalciteThemeProvider");
var _Elements = require("../Elements");
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var StyledStepper = _styledComponents.default.div.withConfig({
displayName: "StyledStepper",
componentId: "uasgbk-0"
})(["display:flex;", ";"], function (props) {
return props.vertical && (0, _styledComponents.css)(["flex-direction:column;"]);
});
exports.StyledStepper = StyledStepper;
StyledStepper.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledStep = _styledComponents.default.div.withConfig({
displayName: "StyledStep",
componentId: "uasgbk-1"
})(["display:flex;flex:1 0 34px;margin-right:", ";overflow:hidden;html[dir='rtl'] &{margin-right:0;margin-left:", ";}&:last-of-type{margin-right:0;html[dir='rtl'] &{margin-left:0;}}", ";", ";"], function (props) {
return props.theme.baseline;
}, function (props) {
return props.theme.baseline;
}, function (props) {
return props.vertical && (0, _styledComponents.css)(["flex:unset;align-items:flex-start;margin-right:0;margin-bottom:", ";padding-bottom:", ";", ";html[dir='rtl'] &{margin-left:0;}&:last-of-type{margin-bottom:0;padding-bottom:0;}"], (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), props.theme.baseline, function (props) {
return props.small && (0, _styledComponents.css)(["margin-bottom:", ";padding-bottom:", ";", "{line-height:1.25rem;}"], (0, _helpers.unitCalc)(props.theme.baseline, 4, '/'), (0, _helpers.unitCalc)(props.theme.baseline, 3, '/'), StyledStepDescription);
});
}, function (props) {
return props.selectable && (0, _styledComponents.css)(["cursor:pointer;transition:opacity 175ms cubic-bezier(0.4,0,0.2,1);&:hover{opacity:0.7;}"]);
});
exports.StyledStep = StyledStep;
StyledStep.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledStepTextContainer = _styledComponents.default.div.withConfig({
displayName: "StyledStepTextContainer",
componentId: "uasgbk-2"
})(["display:flex;flex-direction:column;margin-left:", ";flex:1 0 34px;align-items:flex-start;html[dir='rtl'] &{margin-left:0;margin-right:", ";}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
});
exports.StyledStepTextContainer = StyledStepTextContainer;
StyledStepTextContainer.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledStepTitle = (0, _styledComponents.default)(_Elements.CalciteH6).withConfig({
displayName: "StyledStepTitle",
componentId: "uasgbk-3"
})(["margin:0;line-height:32px;position:relative;color:", ";padding-right:", ";html[dir='rtl'] &{padding-right:0;padding-left:", ";}", ";", ";", ";", ";&::after{content:'';height:1px;width:9999px;background:", ";display:block;position:absolute;top:16px;left:100%;html[dir='rtl'] &{left:auto;right:100%;}", ";", ";}*:last-of-type > * > &::after{content:none;}", ";"], function (props) {
return props.theme.palette.darkGray;
}, function (props) {
return props.theme.baseline;
}, function (props) {
return props.theme.baseline;
}, function (props) {
return props.small && (0, _styledComponents.css)(["", ";line-height:28px;"], (0, _helpers.fontSize)(-2));
}, function (props) {
return props.complete && (0, _styledComponents.css)(["color:", ";"], function (props) {
return props.theme.palette.darkestGray;
});
}, function (props) {
return props.active && (0, _styledComponents.css)(["color:", ";font-weight:500;"], function (props) {
return props.theme.palette.black;
});
}, function (props) {
return props.error && (0, _styledComponents.css)(["color:", ";"], function (props) {
return props.theme.palette.red;
});
}, function (props) {
return props.theme.palette.lighterGray;
}, function (props) {
return props.small && (0, _styledComponents.css)(["top:12px;"]);
}, function (props) {
return props.complete && (0, _styledComponents.css)(["background:", ";"], function (props) {
return props.theme.palette.blue;
});
}, function (props) {
return props.vertical && (0, _styledComponents.css)(["margin-bottom:", ";", ";&::after{content:none;}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 5, '/');
}, function (props) {
return props.small && (0, _styledComponents.css)(["margin-bottom:0;"]);
});
});
exports.StyledStepTitle = StyledStepTitle;
StyledStepTitle.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledStepDescription = (0, _styledComponents.default)(_Elements.CalciteP).withConfig({
displayName: "StyledStepDescription",
componentId: "uasgbk-4"
})(["", ";color:", ";font-weight:300;margin:0;", ";", ";", ";", ";"], (0, _helpers.fontSize)(-2), function (props) {
return props.theme.palette.gray;
}, function (props) {
return props.small && (0, _styledComponents.css)(["", ";"], (0, _helpers.fontSize)(-3));
}, function (props) {
return props.active && (0, _styledComponents.css)(["color:", ";"], function (props) {
return props.theme.palette.darkerGray;
});
}, function (props) {
return props.complete && (0, _styledComponents.css)(["color:", ";"], function (props) {
return props.theme.palette.darkGray;
});
}, function (props) {
return props.error && (0, _styledComponents.css)(["color:", ";"], function (props) {
return props.theme.palette.red;
});
});
exports.StyledStepDescription = StyledStepDescription;
StyledStepDescription.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledStepIcon = _styledComponents.default.div.withConfig({
displayName: "StyledStepIcon",
componentId: "uasgbk-5"
})(["position:relative;display:flex;align-items:center;height:32px;", ";", ";"], function (props) {
return props.vertical && (0, _styledComponents.css)(["padding-bottom:", ";&::after{content:'';width:1px;height:9999px;background:", ";display:block;position:absolute;top:100%;left:16px;html[dir='rtl'] &{left:auto;right:16px;}", ";", ";}", ";*:last-of-type > &::after{content:none;}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return props.theme.palette.lighterGray;
}, function (props) {
return props.small && (0, _styledComponents.css)(["left:12px;html[dir='rtl'] &{left:auto;right:12px;}"]);
}, function (props) {
return props.complete && (0, _styledComponents.css)(["background:", ";"], function (props) {
return props.theme.palette.blue;
});
}, function (props) {
return props.small && (0, _styledComponents.css)(["padding-bottom:", ";"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
});
});
}, function (props) {
return props.small && (0, _styledComponents.css)(["height:28px;"]);
});
exports.StyledStepIcon = StyledStepIcon;
StyledStepIcon.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StepAvatarStyles = {
default: {
width: 30,
height: 30,
color: _CalciteThemeProvider.CalciteTheme.palette.lightGray,
backgroundColor: 'transparent',
fontWeight: 300,
border: "1px solid ".concat(_CalciteThemeProvider.CalciteTheme.palette.lighterGray)
},
active: {
backgroundColor: _CalciteThemeProvider.CalciteTheme.palette.blue,
color: _CalciteThemeProvider.CalciteTheme.palette.white,
fontWeight: 400,
borderColor: _CalciteThemeProvider.CalciteTheme.palette.blue
},
complete: {
color: _CalciteThemeProvider.CalciteTheme.palette.blue,
backgroundColor: 'transparent',
borderColor: _CalciteThemeProvider.CalciteTheme.palette.blue
},
error: {
color: _CalciteThemeProvider.CalciteTheme.palette.red,
backgroundColor: 'transparent',
borderColor: _CalciteThemeProvider.CalciteTheme.palette.red
},
small: {
width: 22,
height: 22,
fontSize: '16px'
}
};
exports.StepAvatarStyles = StepAvatarStyles;
var StepCustomIconStyles = {
default: {
width: 30,
height: 30,
fill: _CalciteThemeProvider.CalciteTheme.palette.lightGray
},
active: {
fill: _CalciteThemeProvider.CalciteTheme.palette.blue
},
complete: {
fill: _CalciteThemeProvider.CalciteTheme.palette.blue
},
error: {
fill: _CalciteThemeProvider.CalciteTheme.palette.red
},
small: {
width: 22,
height: 22,
fontSize: '16px'
}
};
exports.StepCustomIconStyles = StepCustomIconStyles;
var StepCompleteIconStyles = {
fill: _CalciteThemeProvider.CalciteTheme.palette.blue
};
exports.StepCompleteIconStyles = StepCompleteIconStyles;
var StepIconStyle = {
fontSize: 'inherit'
};
exports.StepIconStyle = StepIconStyle;