kwikid-components-react/components/kwikui/progress/progress-line/ProgressLine.style.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KwikUIStyleProgressLineContainer = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Shape = require("../../../../shared/definitions/Shape");
var _Size = require("../../../../shared/definitions/Size");
var _ProgressLine = require("./ProgressLine.definition");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const KwikUIStyleProgressLineContainer = exports.KwikUIStyleProgressLineContainer = _styledComponents.default.progress`
  /* Get RID of Default Styles across all systems START */
  /* Turns off styling - not usually needed, but good to know. */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /* gets rid of default border in Firefox and Opera. */
  border: none;
  /* Needs to be in here for Safari polyfill so background images work as expected. */
  background-size: auto;
  /* Get RID of Default Styles across all systems END */

  width: 100%;

  ${_ref => {
  let {
    shape
  } = _ref;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
          border-radius: 2em;
        `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
          border-radius: 0.5em;
        `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
          border-radius: 0em;
        `;
  }
}}

  ${_ref2 => {
  let {
    size
  } = _ref2;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          height: calc(var(--kwikui-font-size-s));
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          height: calc(var(--kwikui-font-size-m));
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          height: calc(var(--kwikui-font-size-l));
        `;
  }
}}


  /* Chrome, Safari, Edge, Opera */
  ::-webkit-progress-bar {
    background-color: #f5f5f5;
    border: 2px solid var(--kwikui-color-primary);

    ${_ref3 => {
  let {
    appearance
  } = _ref3;
  switch (appearance) {
    case _ProgressLine.IKwikUIProgressLineAppearance.PRIMARY:
      return (0, _styledComponents.css)`
            border: 2px solid var(--kwikui-color-primary);
          `;
    case _ProgressLine.IKwikUIProgressLineAppearance.SECONDARY:
      return (0, _styledComponents.css)`
            border: 2px solid var(--kwikui-color-secondary);
          `;
    case _ProgressLine.IKwikUIProgressLineAppearance.OUTLINED:
      return (0, _styledComponents.css)`
            border: 2px solid var(--kwikui-color-primary);
            padding: 2px;
            color: var(--kwikui-color-primary);
          `;
  }
}}

    ${_ref4 => {
  let {
    shape
  } = _ref4;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
            border-radius: 2em;
          `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
            border-radius: 0.5em;
          `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
            border-radius: 0em;
          `;
  }
}}
  }
  ::-webkit-progress-value {
    background-color: var(--kwikui-color-primary);
    color: var(--kwikui-color-primary);

    ${_ref5 => {
  let {
    appearance
  } = _ref5;
  switch (appearance) {
    case _ProgressLine.IKwikUIProgressLineAppearance.PRIMARY:
      return (0, _styledComponents.css)`
            background-color: var(--kwikui-color-primary);
            color: var(--kwikui-color-primary);
          `;
    case _ProgressLine.IKwikUIProgressLineAppearance.SECONDARY:
      return (0, _styledComponents.css)`
            background-color: var(--kwikui-color-secondary);
            color: var(--kwikui-color-primary);
          `;
    case _ProgressLine.IKwikUIProgressLineAppearance.OUTLINED:
      return (0, _styledComponents.css)`
            background-color: var(--kwikui-color-primary);
            color: var(--kwikui-color-primary);
          `;
  }
}}

    ${_ref6 => {
  let {
    shape
  } = _ref6;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
            border-radius: 2em;
          `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
            border-radius: 0.5em;
          `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
            border-radius: 0em;
          `;
  }
}}
  }

  /* Firefox */
  ::-moz-progress-bar {
    border-radius: 5px;
    background-color: var(--kwikui-color-primary);
    border: none;

    ${_ref7 => {
  let {
    shape
  } = _ref7;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
            border-radius: 2em;
          `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
            border-radius: 0.5em;
          `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
            border-radius: 0em;
          `;
  }
}}/*
    & > div {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    } */
  }
`;