dap-design-system/dist/components/input/_styles/input.scss.js

Official design system for the DÁP (dap.gov.hu)

const d = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{display:block;width:100%;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.input{display:inline-flex;flex:1 1 auto;align-items:stretch;width:100%;vertical-align:middle}.input__container{display:flex;position:relative;flex:auto;align-items:center;width:auto}.input__control{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-block;width:100%;height:var(--dds-input-height);padding:0 var(--dds-input-padding);border:var(--dds-input-border);border-radius:var(--dds-input-border-radius);background:var(--dds-input-background);color:var(--dds-input-text-color);font-size:var(--dds-input-font-size)}.input__control:focus-visible{outline-style:solid}.input__control--xs{height:var(--dds-input-height-xs);padding:var(--dds-input-padding-xs);font-size:var(--dds-input-font-size-xs)}.input__control--sm{height:var(--dds-input-height-sm);padding:var(--dds-input-padding-sm);font-size:var(--dds-input-font-size-sm)}.input__control--lg{height:var(--dds-input-height-lg);padding:var(--dds-input-padding-lg);font-size:var(--dds-input-font-size-lg)}.input__control[disabled],.input__control--disabled{border:var(--dds-input-disabled-border);background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__control--has-addon-before{border-left:var(--dds-border-width-none);border-top-left-radius:var(--dds-radius-none);border-bottom-left-radius:var(--dds-radius-none)}.input__control--has-addon-after{border-right:var(--dds-border-width-none);border-top-right-radius:var(--dds-radius-none);border-bottom-right-radius:var(--dds-radius-none)}.input__control[readonly],.input__control--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__control--success{border:var(--dds-input-success-border)}.input__control--success.input__control--has-addon-before{border-left-width:0}.input__control--success.input__control--has-addon-after{border-right-width:0}.input__control--error{border:var(--dds-input-error-border)}.input__control--error.input__control--has-addon-before{border-left-width:0}.input__control--error.input__control--has-addon-after{border-right-width:0}.input__control--has-prefix{padding-left:var(--dds-spacing-1400)}.input__control--has-prefix:focus-visible{z-index:10}.input__control--has-postfix{padding-right:var(--dds-spacing-1400)}.input__control--has-postfix:focus-visible{z-index:10}.input__addon-before{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-before);border-width:var(--dds-input-addon-border-width-before);border-radius:var(--dds-input-border-radius) 0 0 var(--dds-input-border-radius);background:var(--dds-input-addon-background)}.input__addon-before--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-before--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-before--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-before--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-before--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-before--success{border:var(--dds-input-addon-success-border-before);border-width:var(--dds-input-addon-success-border-width-before);background:var(--dds-input-addon-success-background)}.input__addon-before--error{border:var(--dds-input-addon-error-border-before);border-width:var(--dds-input-addon-error-border-width-before);background:var(--dds-input-addon-error-background)}.input__addon-after{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-after);border-width:var(--dds-input-addon-border-width-after);border-radius:0 var(--dds-input-border-radius) var(--dds-input-border-radius) 0;background:var(--dds-input-addon-background)}.input__addon-after--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-after--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-after--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-after--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-after--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-after--success{border:var(--dds-input-addon-success-border-after);border-width:var(--dds-input-addon-success-border-width-after);background:var(--dds-input-addon-success-background)}.input__addon-after--error{border:var(--dds-input-addon-error-border-after);border-width:var(--dds-input-addon-error-border-width-after);background:var(--dds-input-addon-error-background)}.input__addon-prefix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);left:var(--dds-spacing-400);align-items:center}.input__addon-postfix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);right:var(--dds-spacing-400);align-items:center;gap:var(--dds-spacing-200)}';
export {
  d as default
};
//# sourceMappingURL=input.scss.js.map