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

Braineet design system

import styled, { css } from 'styled-components';
import { fluid } from '../../utils';
import Box from '../box';
import Icon from '../icon';
export var DefaultInputStyles = css(["background-color:", ";border:2px solid ", ";color:", ";", " &::placeholder{color:", ";}&:not([disabled]):hover{background-color:", ";}"], function (p) {
  return p.theme.colors.background.light.grey;
}, function (p) {
  return p.theme.utils.lighten('black', 0.1);
}, function (p) {
  return p.theme.colors.black;
}, function (props) {
  return props.iconBefore ? css(["padding:", " ", " ", " ", ";"], fluid(8), fluid(8), fluid(8), fluid(32)) : css(["padding:", "};"], fluid(8));
}, function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.utils.lighten('black', 0.1);
});
export var FocusedInputStyles = css(["", ""], function (props) {
  return props.isInvalid ? "&:focus:not(:disabled, :read-only)  {\n                background-color: " + props.theme.colors.white + ";\n            }" : '';
});
export var FilledInputStyles = css(["&:not(:placeholder-shown){&:valid:not(:focus),&:invalid:not(:focus){background-color:", ";}}"], function (p) {
  return p.theme.colors.white;
});
export var InvalidInputStyles = css(["", ""], function (props) {
  return props.isInvalid ? "\n            border: 2px solid " + props.theme.colors.error + ";\n            padding: " + fluid(9) + " " + fluid(45) + " " + fluid(10) + " " + fluid(16) + ";\n            background-color: " + props.theme.colors.white + ";\n        " : '';
});
export var DisabledInputStyles = css(["&:disabled{cursor:not-allowed;opacity:0.24;}"]);
export var StyledBox = styled(Box).withConfig({
  displayName: "styles__StyledBox",
  componentId: "sc-186f60w-0"
})(["position:relative;width:100%;", ";"], function (p) {
  return p.inputBoxStyle;
});
export var StyledInput = styled.input.withConfig({
  displayName: "styles__StyledInput",
  componentId: "sc-186f60w-1"
})(["display:block;width:100%;outline:none;box-sizing:border-box;border-radius:", ";height:", ";&:read-only{cursor:default;}", " ", " ", " ", " ", " ", " ", ""], function (props) {
  return props.theme.borderRadius.md;
}, function (p) {
  return fluid(p.$height);
}, DefaultInputStyles, FocusedInputStyles, FilledInputStyles, InvalidInputStyles, DisabledInputStyles, function (p) {
  return p.theme.helpers.getTextStyle('md');
}, function (p) {
  return p.inputStyle;
});
export var StyledIcon = styled(Icon).withConfig({
  displayName: "styles__StyledIcon",
  componentId: "sc-186f60w-2"
})(["position:absolute;right:", ";top:", ";"], function (props) {
  return props.theme.spaces.md;
}, function (props) {
  return props.theme.spaces.md;
});
export var StyledIconBefore = styled(Icon).withConfig({
  displayName: "styles__StyledIconBefore",
  componentId: "sc-186f60w-3"
})(["position:absolute;pointer-events:none;left:", ";top:", ";z-index:", ";"], function (props) {
  return props.theme.spaces.md;
}, function (props) {
  return props.theme.spaces.md;
}, function (p) {
  return p.theme.zIndex.front;
});