UNPKG

fui-fancyui

Version:
34 lines (31 loc) 1.15 kB
import { styled as i } from "styled-components"; import { calcInputPadding as o } from "./utils/calcInputPadding.js"; import { getTextColor as n } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js"; import { globalElementSizes as r } from "../../../design/theme/globalSizes.js"; const p = ({ $hasLabel: e = !1, $isTextArea: t = !1 }) => t ? "" : e ? r.md : r.sm, m = i.div` position: relative; width: 100%; display: flex; align-items: center; height: ${({ $hasLabel: e, $isTextArea: t }) => p({ $hasLabel: e, $isTextArea: t })}; `, c = i.div` color: ${({ theme: e }) => n({ theme: e, $themeType: "secondary", $textLayer: 4 })}; border-radius: 3px; outline: none; width: 100%; background-color: transparent; box-sizing: border-box; /* Added to include padding in the width */ input:not([type='range']), select, textarea { ${({ $isActive: e, $isLabelProvided: t }) => o({ $isLabelProvided: t })} } input[type='range'] { margin-top: ${({ $isLabelProvided: e }) => e ? "30px" : "12px"}; margin-bottom: 12px; } `; export { c as InputWrapper, m as Wrapper };