fui-fancyui
Version:
FancyUI Libary
51 lines (47 loc) • 1.94 kB
JavaScript
import { css as n, styled as c } from "styled-components";
import h from "../RawInput/RawInput.js";
import { getBackgroundColor as i } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import m from "../../../design/designFunctions/simpleColorTransition/simpleTransition.js";
import p from "../../../design/designFunctions/getOpositMainThemeType/getOpositMainThemeType.js";
import d from "../../../design/designFunctions/getSimpleColorThemeType/getSimpleColorThemeType.js";
const x = c(h)`
color: ${({ $isActive: e, $themeType: t = "secondary", $layer: o, theme: r }) => e ? i({ theme: r, $themeType: t, $layer: o }) : "transparent"};
height: 18px;
transition: color 0.3s ease-in;
font-family: inherit;
box-sizing: content-box;
/* This renders a Placerholder in Text when its needed */
${({ placeholder: e, $themeType: t = "secondary", $layer: o = 4, value: r, theme: a, $align: s, $isActive: l }) => {
if (e && !r)
return n`
&:not(:focus):before {
content: ${l ? "" : "attr(placeholder)"};
width: 100%;
text-align: ${s};
color: ${i({
theme: a,
$themeType: p(d(t)),
$layer: o
})};
position: absolute;
transition: all 0.25s ease-in-out;
pointer-events: none;
}
`;
}}
/* This renders the calendar Icon with the color theme */
&::-webkit-calendar-picker-indicator {
${m}
${({ theme: e, $themeType: t = "secondary", $layer: o = 0 }) => n`
background-image: ${`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${i(
{ theme: e, $themeType: t, $layer: o }
).replace(
"#",
"%23"
)}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>')`};
`};
}
`;
export {
x as StyledDatePicker
};