@synergy-design-system/components
Version:
284 lines (227 loc) • 8.25 kB
JavaScript
// src/components/input/input.custom.styles.ts
import { css } from "lit";
var input_custom_styles_default = css`
/**
* Fixes overflowing of the syn-input in flex and grid containers with fix width (https://github.com/synergy-design-system/synergy-design-system/issues/761)
*/
.input__control {
width: 100%;
}
/** #429: Use token for opacity */
.input--standard.input--disabled,
.input--readonly.input--disabled {
opacity: var(--syn-input-disabled-opacity);
}
/**
* Min-width size adjusted for each size so 2 full digits are shown for type number
*/
:host([size="small"][type="number"]:not([no-spin-buttons])) {
min-width: calc(var(--syn-input-font-size-small)*8.3);
}
:host([size="medium"][type="number"]:not([no-spin-buttons])) {
min-width: calc(var(--syn-input-font-size-medium)*9.4);
}
:host([size="large"][type="number"]:not([no-spin-buttons])) {
min-width: calc(var(--syn-input-font-size-large)*10);
}
/**
* Clearable + Password Toggle
*/
.input__clear {
color: var(--syn-input-icon-icon-clearable-color);
}
.input--small .input__clear,
.input--small .input__password-toggle {
font-size: var(--syn-font-size-medium);
padding-left: var(--syn-spacing-x-small);
padding-right: var(--syn-spacing-small);
width: auto;
}
.input--medium .input__clear,
.input--medium .input__password-toggle {
font-size: var(--syn-font-size-x-large);
padding-left: var(--syn-spacing-small);
padding-right: var(--syn-spacing-medium);
width: auto;
}
.input--large .input__clear,
.input--large .input__password-toggle {
font-size: var(--syn-font-size-2x-large);
padding-left: var(--syn-spacing-medium);
padding-right: var(--syn-spacing-large);
width: auto;
}
/* Prefix / Suffix color */
.input__prefix ::slotted(*),
.input__suffix ::slotted(*) {
color: var(--syn-input-icon-color);
}
/* PADDINGS */
.input--small .input__control {
padding: var(--syn-spacing-3x-small) var(--syn-input-spacing-small);
}
.input--medium .input__control {
padding: var(--syn-spacing-x-small) var(--syn-input-spacing-medium);
}
.input--large .input__control {
padding: var(--syn-input-spacing-small) var(--syn-input-spacing-large);
}
.input--small .input__prefix ::slotted(*) {
margin-inline: var(--syn-input-spacing-small) var(--syn-spacing-x-small);
}
.input--medium .input__prefix ::slotted(*) {
margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-small);
}
.input--large .input__prefix ::slotted(*) {
margin-inline: var(--syn-input-spacing-large) var(--syn-input-spacing-medium);
}
.input--small .input__suffix ::slotted(*) {
margin-inline: var(--syn-spacing-x-small) var(--syn-input-spacing-small);
}
.input--medium .input__suffix ::slotted(*) {
margin-inline: var(--syn-input-spacing-small) var(--syn-input-spacing-medium);
}
.input--large .input__suffix ::slotted(*) {
margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-large);
}
.input__clear + .input__suffix ::slotted(*),
.input__password-toggle + .input__suffix ::slotted(*) {
margin-inline-start: 0;
}
.input--small .input__clear + .input__password-toggle {
padding-left: var(--syn-spacing-2x-small);
}
.input--medium .input__clear + .input__password-toggle {
padding-left: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));
}
.input--large .input__clear + .input__password-toggle {
padding-left: var(--syn-spacing-x-small);
}
.input--small .input__clear:has(+ .input__password-toggle) {
padding-right: var(--syn-spacing-2x-small);
}
.input--medium .input__clear:has(+ .input__password-toggle) {
padding-right: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));
}
.input--large .input__clear:has(+ .input__password-toggle) {
padding-right: var(--syn-spacing-x-small);
}
.form-control--has-suffix .input--large .input__clear:has(+ .input__suffix),
.form-control--has-suffix .input--large .input__password-toggle:has(+ .input__suffix) {
padding-right: var(--syn-spacing-medium);
}
.form-control--has-suffix .input--small .input__clear:has(+ .input__suffix),
.form-control--has-suffix .input--small .input__password-toggle:has(+ .input__suffix) {
padding-right: var(--syn-spacing-x-small);
}
.form-control--has-suffix .input--medium .input__clear:has(+ .input__suffix),
.form-control--has-suffix .input--medium .input__password-toggle:has(+ .input__suffix) {
padding-right: var(--syn-spacing-small);
}
/* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817 */
.form-control--has-prefix .input__control {
padding-left: 0;
}
/* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817 */
.form-control--has-suffix .input__control,
.input:has(.input__clear) .input__control,
.input:has(.input__password-toggle) .input__control {
padding-right: 0;
}
:host([type='number']) .input--large:not(.input--no-spin-buttons) .input__clear,
:host([type='number']) .input--large:not(.input--no-spin-buttons) .input__password-toggle {
padding-right: var(--syn-spacing-medium);
}
/* ICONS SIZE */
.input--small .input__prefix ::slotted(syn-icon),
.input--small .input__suffix ::slotted(syn-icon) {
font-size: var(--syn-font-size-medium);
}
.input--medium .input__prefix ::slotted(syn-icon),
.input--medium .input__suffix ::slotted(syn-icon) {
font-size: var(--syn-font-size-x-large);
}
.input--large .input__prefix ::slotted(syn-icon),
.input--large .input__suffix ::slotted(syn-icon) {
font-size: var(--syn-font-size-2x-large);
}
:host([data-user-invalid]) .input--standard {
border-color: var(--syn-input-border-color-focus-error);
}
:host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {
border-color: var(--syn-input-border-color-focus-error);
box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
}
.input--standard.input--disabled .input__suffix,
.input--standard.input--disabled .input__prefix {
cursor: not-allowed;
}
/**
* Number stepper
*/
.input__number-stepper {
align-items: center;
display: flex;
}
.input--small .input__number-stepper {
margin-left: var(--syn-spacing-2x-small);
}
.input--medium .input__number-stepper {
margin-right: var(--syn-spacing-2x-small);
}
.input--large .input__number-stepper {
margin-right: var(--syn-spacing-x-small);
}
/**
* Number stepper buttons
*/
.input__number-stepper-button {
align-items: center;
background: none;
border: none;
color: var(--syn-interactive-emphasis-color);
cursor: pointer;
display: flex;
padding: var(--syn-spacing-x-small);
transition: var(--syn-transition-x-fast) color;
}
.input--small .input__number-stepper-button {
font-size: var(--syn-font-size-medium);
}
.input--medium .input__number-stepper-button {
font-size: var(--syn-font-size-x-large);
}
.input--large .input__number-stepper-button {
font-size: var(--syn-font-size-2x-large);
}
.input__number-stepper-button:hover:not([disabled]) {
color: var(--syn-interactive-emphasis-color-hover);
}
.input__number-stepper-button:active:not([disabled]) {
color: var(--syn-interactive-emphasis-color-active);
}
.input__number-stepper-button[disabled] {
color: var(--syn-color-neutral-400);
cursor: not-allowed;
opacity: var(--syn-input-disabled-opacity);
}
/**
* Number stepper divider
*/
.input--small .input__number-divider {
height: var(--syn-font-size-medium);
margin: 0;
}
.input--medium .input__number-divider {
height: var(--syn-font-size-x-large);
margin: 0 var(--syn-spacing-2x-small);
}
.input--large .input__number-divider {
height: var(--syn-font-size-2x-large);
margin: 0 var(--syn-spacing-x-small);
}
`;
export {
input_custom_styles_default
};
//# sourceMappingURL=chunk.6P2XCD2Q.js.map