ui-neu
Version:
Neu UI, a responsive React component library.
36 lines (32 loc) • 2.57 kB
JavaScript
import _taggedTemplateLiteral from "/home/runner/work/neu_ui/neu_ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral";
function _templateObject() {
var data = _taggedTemplateLiteral(["\n width: 20rem;\n height: 0.8rem;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border: none;\n\n border-radius: 0.5rem;\n background-color: rgba(204, 218, 226, 0.349);\n box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n\n ::-webkit-progress-bar {\n border-radius: 0.5rem;\n background-color: rgba(204, 218, 226, 0.349);\n box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n }\n\n ::-webkit-progress-value {\n border-radius: 0.5rem;\n height: 0.8rem;\n border: none;\n outline: none;\n background: linear-gradient(\n 90deg,\n rgba(244, 167, 129, 1) 0%,\n rgba(245, 186, 125, 1) 63%,\n rgba(245, 203, 122, 1) 100%\n );\n box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2); /* needs uniformity */\n }\n\n ::-moz-progress-bar {\n border-radius: 0.5rem;\n height: 0.8rem;\n border: none;\n outline: none;\n background: linear-gradient(\n 90deg,\n rgba(244, 167, 129, 1) 0%,\n rgba(245, 186, 125, 1) 63%,\n rgba(245, 203, 122, 1) 100%\n );\n box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2); /* needs uniformity */\n }\n\n ::-ms-fill {\n border-radius: 0.5rem;\n height: 0.8rem;\n border: none;\n outline: none;\n background: linear-gradient(\n 90deg,\n rgba(244, 167, 129, 1) 0%,\n rgba(245, 186, 125, 1) 63%,\n rgba(245, 203, 122, 1) 100%\n );\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
import React from "react";
import { Label } from "../forms/Label";
import styled from "styled-components";
var StyledProgress = styled.progress(_templateObject());
export var Progress = function Progress(_ref) {
var id = _ref.id,
children = _ref.children,
max = _ref.max,
value = _ref.value;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
htmlFor: id
}, children), /*#__PURE__*/React.createElement(StyledProgress, {
id: id,
max: max,
value: value
})));
};
Progress.defaultProps = {
children: null,
max: 100,
value: 0,
id: null,
htmlFor: null
};