react-base-guide/lib/components/input/styled/Field.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const get_border_color_1 = __importDefault(require("../../../utils/get-border-color"));
const Field = styled_components_1.default.input `
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 28px 0 16px;
  border-width: 0;
  border-radius: ${p => p.theme.radius.element};
  appearance: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  
  font-size: 14px;
  transition: border 0.3s;
  color: ${p => p.theme.palette.text.primary};
  
  &::placeholder {
    color: ${p => p.theme.palette.text.placeholder};
  }

  &:-webkit-autofill {
    -webkit-background-clip: text;
  }
  
  -moz-appearance: textfield;
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  & + fieldset {
    border: 1px solid ${p => (0, get_border_color_1.default)(p)};
  }
  
  &:hover {
    & + fieldset {
      border: 1px solid ${p => (0, get_border_color_1.default)(Object.assign(Object.assign({}, p), { hover: true }))};
    }
  }
  
  &:focus {
    & + fieldset {
      border: 1px solid ${p => (0, get_border_color_1.default)(Object.assign(Object.assign({}, p), { focus: true }))};
      + label {
        color: ${p => (0, get_border_color_1.default)(Object.assign(Object.assign({}, p), { focus: true }))};
      }
    }
  }

  &:disabled {
    background: ${p => p.theme.palette.element.disabled};
    border-color: ${p => p.theme.palette.element.disabled};
    color: ${p => p.theme.palette.text.disabled};
    pointer-events: none;
  }
`;
exports.default = Field;
//# sourceMappingURL=Field.js.map