@catho/quantum/Stepper/style.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Wrapper = exports.TextWrapper = exports.RadialProgressOverlay = exports.RadialProgressBar = exports.NextStep = exports.CurrentText = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _shared = require("../shared");
var _shared2 = require("../Grid/sub-components/shared");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
var MOBILE_CIRCLE_SIZE = 64;
var DESKTOP_CIRCLE_SIZE = 72;
var DESKTOP_OVERLAY_WIDTH = 60;
var DESKTOP_OVERLAY_HEIGHT = 40;
var MOBILE_OVERLAY_WIDTH = 52;
var MOBILE_OVERLAY_HEIGHT = 34;
var mediaQueries = (0, _shared2.query)(_shared.BREAKPOINTS);
var desktopBreakpoint = mediaQueries.medium;
var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
  displayName: "style__Wrapper",
  componentId: "sc-coqzbh-0"
})(["display:flex;align-items:center;min-width:300px;", " .progress{background-image:", ";}"], desktopBreakpoint(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-width: auto;\n  "]))), function (_ref) {
  var _ref$degrees = _ref.degrees,
    reference = _ref$degrees[0],
    position = _ref$degrees[1],
    Colors = _ref.theme.colors,
    skin = _ref.skin;
  return "\n    ".concat(reference > 0 ? "linear-gradient(".concat(reference, "deg, ").concat(Colors.neutral[300], " 50%, transparent 50%), \n      linear-gradient(").concat(position, "deg, ").concat(Colors.neutral[300], " 50%, ").concat(Colors[skin][500], " 50%)") : "linear-gradient(".concat(reference, "deg, ").concat(Colors[skin][500], " 50%, transparent 50%), \n      linear-gradient(").concat(position, "deg, ").concat(Colors[skin][500], " 50%, ").concat(Colors.neutral[300], " 50%)"));
});
var RadialProgressBar = exports.RadialProgressBar = _styledComponents["default"].div.withConfig({
  displayName: "style__RadialProgressBar",
  componentId: "sc-coqzbh-1"
})(["border-radius:50%;display:flex;flex:none;font-weight:700;width:", "px;height:", "px;", " ", ""], MOBILE_CIRCLE_SIZE, MOBILE_CIRCLE_SIZE, function (_ref2) {
  var baseFontSize = _ref2.theme.baseFontSize;
  return "\n    font-size: ".concat(baseFontSize * 0.75, "px; \n  ");
}, desktopBreakpoint(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n\n    ", "\n  "])), DESKTOP_CIRCLE_SIZE, DESKTOP_CIRCLE_SIZE, function (_ref3) {
  var baseFontSize = _ref3.theme.baseFontSize;
  return "\n    font-size: ".concat(baseFontSize * 0.875, "px; \n    ");
}));
var RadialProgressOverlay = exports.RadialProgressOverlay = _styledComponents["default"].div.withConfig({
  displayName: "style__RadialProgressOverlay",
  componentId: "sc-coqzbh-2"
})(["", " box-sizing:content-box;border-radius:50%;margin:auto;text-align:center;", " ", " width:", "px;height:", "px;", ";"], function (_ref4) {
  var neutral = _ref4.theme.colors.neutral;
  return "\n    background: ".concat(neutral[0], ";\n  ");
}, function (_ref5) {
  var medium = _ref5.theme.spacing.medium;
  return "\n  padding-top: ".concat(medium, "px;\n");
}, desktopBreakpoint(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n"])), function (_ref6) {
  var medium = _ref6.theme.spacing.medium;
  return "\n    padding-top: ".concat(medium * 1.125, "px;\n  ");
}), MOBILE_OVERLAY_WIDTH, MOBILE_OVERLAY_HEIGHT, desktopBreakpoint(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), DESKTOP_OVERLAY_WIDTH, DESKTOP_OVERLAY_HEIGHT));
var TextWrapper = exports.TextWrapper = _styledComponents["default"].div.withConfig({
  displayName: "style__TextWrapper",
  componentId: "sc-coqzbh-3"
})(["", " width:210px;", " display:inline-block;strong,small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], function (_ref7) {
  var medium = _ref7.theme.spacing.medium;
  return "\n      margin-left: ".concat(medium, "px;\n  ");
}, desktopBreakpoint(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 300px;\n  "]))));
var CurrentText = exports.CurrentText = _styledComponents["default"].strong.withConfig({
  displayName: "style__CurrentText",
  componentId: "sc-coqzbh-4"
})(["display:block;height:26px;", ";", ""], function (_ref8) {
  var baseFontSize = _ref8.theme.baseFontSize;
  return "\n    font-size: ".concat(baseFontSize * 1.25, "px;\n  ");
}, desktopBreakpoint(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", ";\n    height: 36px;\n  "])), function (_ref9) {
  var baseFontSize = _ref9.theme.baseFontSize;
  return "\n      font-size: ".concat(baseFontSize * 1.75, "px;\n    ");
}));
var NextStep = exports.NextStep = _styledComponents["default"].small.withConfig({
  displayName: "style__NextStep",
  componentId: "sc-coqzbh-5"
})(["display:block;", ";", ""], function (_ref10) {
  var baseFontSize = _ref10.theme.baseFontSize;
  return "\n    font-size: ".concat(baseFontSize * 0.875, "px;\n  ");
}, desktopBreakpoint(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    ", ";\n  "])), function (_ref11) {
  var baseFontSize = _ref11.theme.baseFontSize;
  return "\n      font-size: ".concat(baseFontSize, "px;\n  ");
}));