@bizhermit/react-sdk/styles/input-style.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(n,t,e,r){void 0===r&&(r=e);var s=Object.getOwnPropertyDescriptor(t,e);s&&!("get"in s?!t.__esModule:s.writable||s.configurable)||(s={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(n,r,s)}:function(n,t,e,r){void 0===r&&(r=e),n[r]=t[e]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(n,t){Object.defineProperty(n,"default",{enumerable:!0,value:t})}:function(n,t){n.default=t}),__importStar=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var e in n)"default"!==e&&Object.prototype.hasOwnProperty.call(n,e)&&__createBinding(t,n,e);return __setModuleDefault(t,n),t},__importDefault=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.inputCn=void 0;const react_1=__importDefault(require("react")),button_1=require("../elements/button"),icon_1=require("../elements/icon"),css_var_1=__importStar(require("./css-var")),jsx_style_1=__importDefault(require("./jsx-style"));exports.inputCn="bh-ipt";const InputStyle=react_1.default.createElement(jsx_style_1.default,{id:exports.inputCn,depsDesign:!0},(({design:n})=>`\n.${exports.inputCn} {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: stretch;\n  align-items: flex-end;\n  flex: none;\n  overflow: visible;\n  width: 160px;\n${(0,css_var_1.switchDesign)(n,{_:`\n  padding: 0px;\n  height: ${css_var_1.default.size};\n  min-height: ${css_var_1.default.size};\n  min-width: ${css_var_1.default.size};\n`,c:`\n  padding: ${css_var_1.default.pdy} ${css_var_1.default.pdx};\n  height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n  min-width: calc(${css_var_1.default.size} + ${css_var_1.default.pdx} * 2);\n`})}\n}\n.${exports.inputCn}[placeholder] {\n${(0,css_var_1.switchDesign)(n,{_:`\n  padding-top: ${css_var_1.default.phsize};\n  height: calc(${css_var_1.default.size} + ${css_var_1.default.phsize});\n`,c:`\n  padding-top: calc(${css_var_1.default.pdy} + ${css_var_1.default.phsize});\n  height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2 + ${css_var_1.default.phsize});\n`})}\n}\n.${exports.inputCn}[data-t="f"]::before {\n  ${css_var_1.CssPV.ba}\n  transition: border-bottom 0.1s;\n  z-index: 0;\n${(0,css_var_1.switchDesign)(n,{_:`\n  bottom: ${css_var_1.default.pdy};\n  left: ${css_var_1.default.pdx};\n  width: calc(100% - ${css_var_1.default.pdx} * 2);\n`,fm:`\n  bottom: ${css_var_1.default.pdy};\n  left: ${css_var_1.default.pdx};\n  width: calc(100% - ${css_var_1.default.pdx} * 2);\n  height: calc(100% - ${css_var_1.default.pdy} * 2);\n`,neumorphism:`\n  bottom: ${css_var_1.default.pdy};\n  left: ${css_var_1.default.pdx};\n  width: calc(100% - ${css_var_1.default.pdx} * 2);\n  height: calc(100% - ${css_var_1.default.pdy} * 2);\n  border-radius: ${css_var_1.default.bdr};\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n`})}\n}\n.${exports.inputCn}[placeholder][data-t="f"]::before {\n${(0,css_var_1.switchDesign)(n,{_:`height: calc(100% - ${css_var_1.default.phsize});`,c:`height: calc(100% - ${css_var_1.default.pdy} * 2 - ${css_var_1.default.phsize});`})}\n}\n.${exports.inputCn}[placeholder]::after {\n  ${css_var_1.CssPV.ba}\n  top: calc(${css_var_1.default.pdy} + ${css_var_1.default.phsize} + 5px);\n  left: calc(${css_var_1.default.pdx} + 5px);\n  content: attr(placeholder);\n  background: transparent;\n  opacity: 0.4;\n  z-index: 0;\n  white-space: nowrap;\n  transition: left 0.3s, top 0.3s, font-size 0.3s, padding 0.3s, opacity 0.3s;\n}\n.${exports.inputCn}[placeholder]:not([data-v])::after {\n  visibility: hidden;\n}\n.${exports.inputCn}[placeholder]:focus-within::after,\n.${exports.inputCn}[placeholder][data-v="true"]::after,\n.${exports.inputCn}[placeholder][data-m="d"]::after,\n.${exports.inputCn}[placeholder][data-m="r"]::after,\n.${exports.inputCn}[placeholder]:not([data-v])::after {\n  top: 0px;\n  left: ${css_var_1.default.pdx};\n  font-size: 1.2rem;\n  opacity: 1;\n  visibility: visible;\n}\n.${exports.inputCn} input,\n.${exports.inputCn} textarea {\n  box-sizing: border-box;\n  border: none;\n  background: transparent;\n  color: inherit;\n  padding: 2px 5px 0px 5px;\n  height: 100%;\n  max-width: 100%;\n  min-width: 0px;\n  font-size: inherit;\n  outline: none;\n  z-index: 1;\n  resize: none;\n}\n.${exports.inputCn} textarea {\n  padding-top: 8px;\n  padding-bottom: 3px;\n}\n.${exports.inputCn} input[data-align="center"],\n.${exports.inputCn} textarea[data-align="center"] {\n  text-align: center;\n}\n.${exports.inputCn} input[data-align="right"],\n.${exports.inputCn} textarea[data-align="right"] {\n  text-align: right;\n}\n${(0,css_var_1.signalIterator)(((n,t,e)=>`\n.${exports.inputCn}${e}::after {\n  color: ${t.fc};\n}`)).join("")}\n${(0,css_var_1.switchDesign)(n,{fm:`\n.${exports.inputCn}_fld {\n  border-radius: ${css_var_1.default.bdr};\n}\n${(0,css_var_1.signalIterator)(((n,t,e)=>`\n.${exports.inputCn}${e}[data-t="f"]::before {\n  border-bottom: 1px solid ${t.ipt.bdc};\n}\n.${exports.inputCn}${e} .${exports.inputCn}_fld {\n  color: ${t.ipt.fc};\n}\n.${exports.inputCn}${e}[data-t="f"]::before {\n  background: ${t.ipt.bgc};\n}\n.${exports.inputCn}${e} > .${exports.inputCn}-resize_x,\n.${exports.inputCn}${e} > .${exports.inputCn}-resize_y,\n.${exports.inputCn}${e} > .${exports.inputCn}-resize_xy {\n  border-color: ${t.ipt.bdc};\n}`)).join("")}\n.${exports.inputCn}[data-v][data-m="e"]:focus-within::before {\n  border-bottom-width: 3px;\n  border-bottom-style: double;\n}`,neumorphism:`\n.${exports.inputCn}[data-m="r"]::before {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}`})}\n.${exports.inputCn}[data-m="d"]::before {\n  display: none;\n}\n.${exports.inputCn}[data-t="f"][data-m="r"]::before {\n  background: transparent;\n}\n.${exports.inputCn} > .${button_1.buttonCn} {\n  margin: 0px calc(${css_var_1.default.pdy} * -1) calc(${css_var_1.default.pdx} * -1);\n  z-index: 10;\n}\n.${exports.inputCn} > .${button_1.buttonCn}:not(:last-child) > .${button_1.buttonCn}-body {\n  border-radius: 0px;\n}\n.${exports.inputCn} > .${button_1.buttonCn}:last-child > .${button_1.buttonCn}-body {\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n.${exports.inputCn}_btn {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  height: ${css_var_1.default.size};\n  width: ${css_var_1.default.size};\n  overflow: visible;\n  cursor: pointer;\n  padding-top: 2px;\n  z-index: 3;\n${(0,css_var_1.switchDesign)(n,{fm:"border: 1px solid transparent;",flat:"transition: background 0.1s, border-color 0.1s;",material:"transition: background 0.1s, box-shadow 0.1s, top 0.1s, border-color 0.1s;",neumorphism:`\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n  background: ${css_var_1.default.bgc};\n  transition: background 0.1s, box-shadow 0.1s, margin-top 0.1s, margin-bottom 0.1s;\n`})}\n}\n.${exports.inputCn}_btn[data-border] {\n  border-color: ${css_var_1.default.default.ipt.bdc};\n${(0,css_var_1.switchDesign)(n,{material:`box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.c};`})}\n}\n.${exports.inputCn}_btn[data-disabled="true"] {\n  cursor: not-allowed !important;\n  opacity: 0.3 !important;\n}\n.${exports.inputCn}_btn + .${exports.inputCn}_btn {\n  border-left: none;\n}\n.${exports.inputCn}_btn:last-child {\n  border-radius: 0 ${css_var_1.default.bdr} ${css_var_1.default.bdr} 0;\n}\n${(0,css_var_1.switchDesign)(n,{fm:`\n${(0,css_var_1.signalIterator)(((t,e,r)=>`\n.${exports.inputCn}${r} .${exports.inputCn}_btn {\n  color: ${e.fc};\n}\n.${exports.inputCn}${r} .${exports.inputCn}_btn[data-border] {\n  background: ${e.ipt.bgc};\n  border-color: ${e.ipt.bdc};\n}\n.${exports.inputCn}${r} .${exports.inputCn}_btn > .${icon_1.iconCn} {\n  --bh-icon-fc: ${e.fc};\n  --bh-icon-bc: ${e.ipt.bgc};\n}\n.${exports.inputCn}${r} .${exports.inputCn}_btn:hover {\n  background: ${e.btn.hvr.bgc};\n  border-color: ${e.btn.hvr.bdc};\n  color: ${e.btn.hvr.fc};\n}\n.${exports.inputCn}${r} .${exports.inputCn}_btn:hover > .${icon_1.iconCn} {\n  --bh-icon-fc: ${e.btn.hvr.fc};\n  --bh-icon-bc: ${e.btn.hvr.bgc};\n}\n${(0,css_var_1.switchDesign)(n,{flat:`\n.${exports.inputCn}${r} .${exports.inputCn}_btn:hover:active {\n  background: ${e.btn.act.bgc};\n  border-color: ${e.btn.act.bdc};\n  color: ${e.btn.act.fc};\n}\n.${exports.inputCn}${r} .${exports.inputCn}_btn:hover:active > .${icon_1.iconCn} {\n  --bh-icon-fc: ${e.btn.act.fc};\n  --bh-icon-bc: ${e.btn.act.bgc};\n}\n`})}\n`)).join("")}`,material:`\n.${exports.inputCn}_btn:hover {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n  box-shadow: 0px 4px 4px -2px ${css_var_1.default.sdw.c};\n}\n.${exports.inputCn}_btn:hover:active {\n  margin-top: 1px;\n  margin-bottom: -1px;\n  box-shadow: none;\n}`,neumorphism:`\n.${exports.inputCn}_btn:hover {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${exports.inputCn}_btn:hover:active {\n  top: 1px;\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n}\n.${exports.inputCn} .${button_1.buttonCn}-body,\n.${exports.inputCn} .${button_1.buttonCn}:hover > .${button_1.buttonCn}-body {\n  background: ${css_var_1.default.bgc} !important;\n}\n${(0,css_var_1.signalIterator)(((n,t,e)=>`\n.${exports.inputCn}${e} .${exports.inputCn}_btn {\n  color: ${t.fc};\n  background: ${t.ipt.bgc};\n}\n.${exports.inputCn}${e} .${exports.inputCn}_btn > .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.fc};\n  --bh-icon-bc: ${t.ipt.bgc};\n}`)).join("")}`})}\n.${exports.inputCn}-hidden {\n  height: 0px !important;\n  width: 0px !important;\n  opacity: 0 !important;\n  visibility: hidden !important;\n  user-select: none !important;\n  padding: unset !important;\n  margin: unset !important;\n  z-index: -1;\n}\n`));exports.default=InputStyle;