@braineet/ui/dist/esm/components/progressBar/styles.js

Braineet design system

import styled from 'styled-components';
import Box from '../box';
export var ContainerBar = styled(Box).withConfig({
  displayName: "styles__ContainerBar",
  componentId: "sc-12xvorc-0"
})(["position:relative;height:", ";overflow:hidden;border-radius:", ";&::after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;opacity:0.1;background-color:", ";}"], function (props) {
  return props.theme.spaces.sm;
}, function (props) {
  return props.theme.borderRadius.lg;
}, function (props) {
  return props.theme.utils.lighten('black', 0.1);
});
export var ProgressingBar = styled(Box).withConfig({
  displayName: "styles__ProgressingBar",
  componentId: "sc-12xvorc-1"
})(["position:absolute;left:0;top:0;width:", "%;transition:width 0.3s;height:100%;border-radius:", ";background-color:", ";"], function (props) {
  return props.progressValue * 100 / props.maxValue;
}, function (props) {
  return props.theme.borderRadius.lg;
}, function (props) {
  return props.theme.colors.brand;
});
export default {
  ContainerBar: ContainerBar,
  ProgressingBar: ProgressingBar
};