@pantograph/styles 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data_table.css +1 -1
- package/dist/data_table.js +1 -1
- package/dist/data_table.umd.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/input.css +1 -1
- package/dist/input.js +1 -1
- package/dist/input.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-start-start-radius:var(--ptc-input-group-ss-radius, var(--ptc-input-roundness));border-start-end-radius:var(--ptc-input-group-se-radius, var(--ptc-input-roundness));border-end-start-radius:var(--ptc-input-group-es-radius, var(--ptc-input-roundness));border-end-end-radius:var(--ptc-input-group-ee-radius, var(--ptc-input-roundness));height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover),.pc_input:not(.pc_input--simple).pc_input--steps[data-disabled=true],.pc_input:not(.pc_input--simple).pc_input--steps[data-readonly]{padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit):not(.pc_input_group__item){width:100%}.pc_input .pc_input__input{outline:0}.pc_input .pc_input__input:disabled{cursor:not-allowed}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false]){--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=true]{--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=false]{--ptc-input-fg: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]){z-index:1}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered[data-readonly]{--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}
|
|
1
|
+
.pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input:not([data-disabled=true]) .pc_input__password_type{cursor:pointer}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-start-start-radius:var(--ptc-input-group-ss-radius, var(--ptc-input-roundness));border-start-end-radius:var(--ptc-input-group-se-radius, var(--ptc-input-roundness));border-end-start-radius:var(--ptc-input-group-es-radius, var(--ptc-input-roundness));border-end-end-radius:var(--ptc-input-group-ee-radius, var(--ptc-input-roundness));height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover),.pc_input:not(.pc_input--simple).pc_input--steps[data-disabled=true],.pc_input:not(.pc_input--simple).pc_input--steps[data-readonly]{padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit):not(.pc_input_group__item){width:100%}.pc_input .pc_input__input{outline:0}.pc_input .pc_input__input:disabled{cursor:not-allowed}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false]){--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=true]{--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=false]{--ptc-input-fg: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]){z-index:1}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered[data-readonly]{--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}
|
package/dist/input.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
|
|
2
|
-
const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-start-start-radius:var(--ptc-input-group-ss-radius, var(--ptc-input-roundness));border-start-end-radius:var(--ptc-input-group-se-radius, var(--ptc-input-roundness));border-end-start-radius:var(--ptc-input-group-es-radius, var(--ptc-input-roundness));border-end-end-radius:var(--ptc-input-group-ee-radius, var(--ptc-input-roundness));height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover),.pc_input:not(.pc_input--simple).pc_input--steps[data-disabled=true],.pc_input:not(.pc_input--simple).pc_input--steps[data-readonly]{padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit):not(.pc_input_group__item){width:100%}.pc_input .pc_input__input{outline:0}.pc_input .pc_input__input:disabled{cursor:not-allowed}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false]){--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=true]{--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=false]{--ptc-input-fg: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]){z-index:1}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered[data-readonly]{--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
|
|
2
|
+
const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input:not([data-disabled=true]) .pc_input__password_type{cursor:pointer}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-start-start-radius:var(--ptc-input-group-ss-radius, var(--ptc-input-roundness));border-start-end-radius:var(--ptc-input-group-se-radius, var(--ptc-input-roundness));border-end-start-radius:var(--ptc-input-group-es-radius, var(--ptc-input-roundness));border-end-end-radius:var(--ptc-input-group-ee-radius, var(--ptc-input-roundness));height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover),.pc_input:not(.pc_input--simple).pc_input--steps[data-disabled=true],.pc_input:not(.pc_input--simple).pc_input--steps[data-readonly]{padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit):not(.pc_input_group__item){width:100%}.pc_input .pc_input__input{outline:0}.pc_input .pc_input__input:disabled{cursor:not-allowed}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false]){--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=true]{--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=false]{--ptc-input-fg: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]){z-index:1}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered[data-readonly]{--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
|
|
3
3
|
const inputId = `${prefix}s-input`;
|
|
4
4
|
const addInputCss = () => addCssToHead(inputId, cssText);
|
|
5
5
|
const removeInputCss = () => removeCssFromHead(inputId);
|
package/dist/input.umd.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
|
|
4
|
-
const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-start-start-radius:var(--ptc-input-group-ss-radius, var(--ptc-input-roundness));border-start-end-radius:var(--ptc-input-group-se-radius, var(--ptc-input-roundness));border-end-start-radius:var(--ptc-input-group-es-radius, var(--ptc-input-roundness));border-end-end-radius:var(--ptc-input-group-ee-radius, var(--ptc-input-roundness));height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover),.pc_input:not(.pc_input--simple).pc_input--steps[data-disabled=true],.pc_input:not(.pc_input--simple).pc_input--steps[data-readonly]{padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit):not(.pc_input_group__item){width:100%}.pc_input .pc_input__input{outline:0}.pc_input .pc_input__input:disabled{cursor:not-allowed}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false]){--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=true]{--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=false]{--ptc-input-fg: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]){z-index:1}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered[data-readonly]{--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
|
|
4
|
+
const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input:not([data-disabled=true]) .pc_input__password_type{cursor:pointer}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-start-start-radius:var(--ptc-input-group-ss-radius, var(--ptc-input-roundness));border-start-end-radius:var(--ptc-input-group-se-radius, var(--ptc-input-roundness));border-end-start-radius:var(--ptc-input-group-es-radius, var(--ptc-input-roundness));border-end-end-radius:var(--ptc-input-group-ee-radius, var(--ptc-input-roundness));height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover),.pc_input:not(.pc_input--simple).pc_input--steps[data-disabled=true],.pc_input:not(.pc_input--simple).pc_input--steps[data-readonly]{padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit):not(.pc_input_group__item){width:100%}.pc_input .pc_input__input{outline:0}.pc_input .pc_input__input:disabled{cursor:not-allowed}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false]){--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=true]{--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-fg-color=false])[data-fill=false]{--ptc-input-fg: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]){z-index:1}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not([data-readonly]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered[data-readonly]{--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
|
|
5
5
|
const inputId = `${prefix}s-input`;
|
|
6
6
|
const addInputCss = () => addCssToHead(inputId, cssText);
|
|
7
7
|
const removeInputCss = () => removeCssFromHead(inputId);
|