UNPKG

@netdata/netdata-ui

Version:

netdata UI kit

87 lines 3.5 kB
var _excluded = ["background", "height", "onClick", "round", "size"], _excluded2 = ["round", "hollow", "flavour", "borderColor", "onClick", "padding", "size", "tiny", "position", "zIndex", "justifyContent", "alignItems", "background", "semi"]; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } import styled from "styled-components"; import Flex from "../templates/flex"; import getPillBackground from "./mixins/background"; import { getPillColor } from "./mixins/colors"; import getPillPadding from "./mixins/padding"; export var MasterCardContainer = styled(Flex).attrs(function (_ref) { var background = _ref.background, height = _ref.height, onClick = _ref.onClick, _ref$round = _ref.round, round = _ref$round === void 0 ? 999 : _ref$round, size = _ref.size, props = _objectWithoutPropertiesLoose(_ref, _excluded); return _extends({ background: background }, onClick && { cursor: "pointer" }, { position: "relative", round: round, size: size }, props); }).withConfig({ displayName: "styled__MasterCardContainer", componentId: "sc-1pihee3-0" })(["-webkit-user-select:", ";-ms-user-select:", ";user-select:", ";*{cursor:", ";}"], function (_ref2) { var noUserSelection = _ref2.noUserSelection; return noUserSelection ? "none" : "auto"; }, function (_ref3) { var noUserSelection = _ref3.noUserSelection; return noUserSelection ? "none" : "auto"; }, function (_ref4) { var noUserSelection = _ref4.noUserSelection; return noUserSelection ? "none" : "auto"; }, function (_ref5) { var onClick = _ref5.onClick; return onClick ? "pointer" : "inherit"; }); export var PillContainer = styled(Flex).attrs(function (_ref6) { var _ref6$round = _ref6.round, round = _ref6$round === void 0 ? true : _ref6$round, hollow = _ref6.hollow, flavour = _ref6.flavour, borderColor = _ref6.borderColor, onClick = _ref6.onClick, padding = _ref6.padding, size = _ref6.size, tiny = _ref6.tiny, position = _ref6.position, zIndex = _ref6.zIndex, _ref6$justifyContent = _ref6.justifyContent, justifyContent = _ref6$justifyContent === void 0 ? "center" : _ref6$justifyContent, _ref6$alignItems = _ref6.alignItems, alignItems = _ref6$alignItems === void 0 ? "center" : _ref6$alignItems, background = _ref6.background, semi = _ref6.semi, rest = _objectWithoutPropertiesLoose(_ref6, _excluded2); return _extends({ padding: getPillPadding(padding, size, tiny), round: round === false ? 1 : round === true ? 7.5 : round, border: { side: "all", color: borderColor || getPillColor(semi ? "hollow" : "border", flavour), size: "1px" } }, onClick && { cursor: "pointer" }, { justifyContent: justifyContent, alignItems: alignItems, position: position, zIndex: zIndex, background: getPillBackground({ background: background, flavour: flavour, hollow: hollow, semi: semi }) }, rest); }).withConfig({ displayName: "styled__PillContainer", componentId: "sc-1pihee3-1" })([""]);