@netdata/netdata-ui/dist/es6/components/input/styled.js

netdata UI kit

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); }
import styled, { css } from "styled-components";
import { Icon } from "../icon";
import Flex from "../templates/flex";
import { TextSmall } from "../typography";
import { getColor, getValidatedControlColor } from "../../theme/utils";
var disabledCursorSupport = css(["cursor:", ";pointer-events:", ";"], function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? "not-allowed" : "";
}, function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? "none" : "auto";
});
export var Input = styled(Flex).attrs(function (props) {
  return _extends({
    round: 0.5,
    as: "input",
    background: "inputBg",
    backgroundOpacity: props.disabled ? 0.4 : 1,
    width: "100%",
    border: props.error ? "error" : "inputBorder",
    _hover: {
      border: props.error ? "errorText" : "inputBorderHover"
    },
    _focus: {
      border: props.error ? "error" : "inputBorder"
    },
    padding: [0.5, 1],
    height: 6
  }, props);
}).withConfig({
  displayName: "styled__Input",
  componentId: "sc-1iygz87-0"
})(["font-size:12px;color:", ";", " ", " ", " &::placeholder{font-size:12px;color:", ";opacity:", ";font-weight:normal;", "}", ";"], function (_ref3) {
  var disabled = _ref3.disabled,
    hasValue = _ref3.hasValue;
  return hasValue ? getColor("text") : disabled ? getColor("placeholder") : getColor("textLite");
}, function (_ref4) {
  var hasIconLeft = _ref4.hasIconLeft;
  return hasIconLeft && "padding-left: 24px;";
}, function (_ref5) {
  var hasIconRight = _ref5.hasIconRight,
    hasIndicator = _ref5.hasIndicator;
  return (hasIconRight || hasIndicator) && "padding-right: " + (hasIconRight && hasIndicator ? 48 : 24) + "px;";
}, function (_ref6) {
  var textAlign = _ref6.textAlign;
  return textAlign ? "text-align: " + textAlign + ";" : "";
}, getColor("placeholder"), function (_ref7) {
  var disabled = _ref7.disabled;
  return disabled ? 0.4 : 1;
}, function (_ref8) {
  var placeholderProps = _ref8.placeholderProps;
  return placeholderProps || null;
}, disabledCursorSupport);
export var StyledLabel = styled.label.withConfig({
  displayName: "styled__StyledLabel",
  componentId: "sc-1iygz87-1"
})(["width:100%;display:block;", ";"], disabledCursorSupport);
export var LabelText = styled(Flex).attrs(function (props) {
  return _extends({
    as: TextSmall,
    strong: true,
    alignItems: "center",
    flex: false,
    width: "100%"
  }, props);
}).withConfig({
  displayName: "styled__LabelText",
  componentId: "sc-1iygz87-2"
})([""]);
export var StyledIcon = styled(Icon).withConfig({
  displayName: "styled__StyledIcon",
  componentId: "sc-1iygz87-3"
})(["flex-grow:0;flex-shrink:0;"]);
export var ErrorIcon = styled(StyledIcon).withConfig({
  displayName: "styled__ErrorIcon",
  componentId: "sc-1iygz87-4"
})(["fill:", ";"], getColor("error"));
export var SuccessIcon = styled(StyledIcon).withConfig({
  displayName: "styled__SuccessIcon",
  componentId: "sc-1iygz87-5"
})(["fill:", ";"], getColor("success"));
export var IconContainer = styled(Flex).withConfig({
  displayName: "styled__IconContainer",
  componentId: "sc-1iygz87-6"
})([""]);
export var MetaContainer = styled(Flex).withConfig({
  displayName: "styled__MetaContainer",
  componentId: "sc-1iygz87-7"
})(["flex-flow:row nowrap;"]);
export var MetaInfo = styled.span.withConfig({
  displayName: "styled__MetaInfo",
  componentId: "sc-1iygz87-8"
})(["font-size:12px;line-height:16px;overflow:hidden;flex-grow:0;flex-shrink:0;color:", ";"], getColor("placeholder"));
export var FieldInfo = styled(MetaInfo).withConfig({
  displayName: "styled__FieldInfo",
  componentId: "sc-1iygz87-9"
})(["color:", ";flex-shrink:1;"], getValidatedControlColor("text"));