react-base-guide/lib/components/label/LabelRoot.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 add_custom_style_1 = require("../../utils/add-custom-style");
const LabelRoot = styled_components_1.default.div `
  position: relative;
  box-sizing: border-box;
  min-height: ${p => p.$variant === "standard" ? "0px" : "38px"};
  height: ${p => p.$variant === "standard" ? "auto" : "38px"};
  ${p => { var _a, _b, _c; return (0, add_custom_style_1.addCustomStyle)(Object.assign(Object.assign({}, p.$styled), { height: ((_a = p.$styled) === null || _a === void 0 ? void 0 : _a.height) ? (+((_c = (_b = p.$styled) === null || _b === void 0 ? void 0 : _b.height) === null || _c === void 0 ? void 0 : _c.replace("px", "")) - 6) + "px" : undefined }), "inline-block"); }}

  input, textarea, button {
    &::placeholder {
      color: ${p => p.$label && p.$variant !== "standard" ? "transparent" : undefined};
    }
    
    & + 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 }))};
        }
      }
    }
  }
`;
exports.default = LabelRoot;
//# sourceMappingURL=LabelRoot.js.map