@stokr/components-library
Version:
STOKR - Components Library
28 lines (27 loc) • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FillProgress = exports.FillBar = exports.BarPart = exports.Bar = exports.BackBar = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Bar = exports.Bar = _styledComponents.default.div.withConfig({
displayName: "MultiProgressBarstyles__Bar",
componentId: "sc-1sn65pk-0"
})(["width:100%;position:relative;display:block;height:10px;background-color:#004bb7;border-radius:5px;overflow:hidden;"]);
const BackBar = exports.BackBar = _styledComponents.default.div.withConfig({
displayName: "MultiProgressBarstyles__BackBar",
componentId: "sc-1sn65pk-1"
})(["z-index:0;position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;"]);
const FillBar = exports.FillBar = _styledComponents.default.div.withConfig({
displayName: "MultiProgressBarstyles__FillBar",
componentId: "sc-1sn65pk-2"
})(["z-index:1;position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;transition:transform 0.3s;transform:translateX(100%);", ""], props => props.percent && "\n transform: translateX(".concat(100 - props.percent, "%);\n "));
const FillProgress = exports.FillProgress = _styledComponents.default.div.withConfig({
displayName: "MultiProgressBarstyles__FillProgress",
componentId: "sc-1sn65pk-3"
})(["z-index:1;position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;transition:transform 0.3s;transform:translateX(-100%);", ""], props => props.percent && "\n transform: translateX(".concat(props.percent - 100, "%);\n "));
const BarPart = exports.BarPart = _styledComponents.default.div.withConfig({
displayName: "MultiProgressBarstyles__BarPart",
componentId: "sc-1sn65pk-4"
})(["display:block;height:100%;float:left;background-color:#000;transition:width 0.3s;", " ", ""], props => "\n width: ".concat(props.percent || 0, "%;\n "), props => props.color && "\n ".concat(props.color === 'back-empty' ? "\n background-color: transparent;\n " : '', "\n ").concat(props.color === 'back-minimum' ? "\n background-color: #4a90e2;\n " : '', "\n ").concat(props.color === 'back-disabled' ? "\n background-color: #4a90e2;\n background-image: repeating-linear-gradient(-45deg, #004bb7, #004bb7 2px, #4a90e2 2px, #4a90e2 5px);\n " : '', "\n ").concat(props.color === 'fill-empty' ? "\n background-color: transparent;\n " : '', "\n ").concat(props.color === 'fill-minimum' ? "\n background-color: #fff;\n " : '', "\n ").concat(props.color === 'fill-minimum-grey' ? "\n background-color: #e1e1e1;\n " : '', "\n ").concat(props.color === 'fill-bought' ? "\n background-color: #69bd53;\n background-image: linear-gradient(to left, #a9ef9c, #69bd53);\n " : '', "\n "));