@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
55 lines • 1.93 kB
CSS
.dnb-forms-field-number {
--number-control-separator-color: var(
--number-control-separator-color--default
);
--number-control-separator-color--default: var(
--token-color-background-action-hover-subtle
);
--number-control-separator-color--error: var(
--token-color-component-button-background-action-destructive-hover-subtle
);
--number-control-separator-color--disabled: var(
--token-color-background-action-disabled
);
--number-control-button-border-width--focus: var(--focus-ring-width);
}
.dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
--button-height--small: 2.5rem;
--button-width--small: 2.5rem;
}
.dnb-forms-field-number__contents--has-controls .dnb-input {
position: relative;
}
.dnb-forms-field-number__contents--has-controls .dnb-input::before, .dnb-forms-field-number__contents--has-controls .dnb-input::after {
content: "";
position: absolute;
top: 0.25rem;
bottom: 0.25rem;
border-left: 1px solid var(--number-control-separator-color);
z-index: 1;
}
.dnb-forms-field-number__contents--has-controls .dnb-input::before {
left: -1px;
}
.dnb-forms-field-number__contents--has-controls .dnb-input::after {
right: -1px;
}
.dnb-forms-field-number__contents--has-controls .dnb-input__border--root {
--input-border-radius--default: var(--input-border-radius--active);
}
.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active ~ .dnb-input::before {
z-index: -1;
}
.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active {
z-index: 1;
}
.dnb-forms-field-number__contents.dnb-input__status--error {
--number-control-separator-color: var(
--number-control-separator-color--error
);
}
.dnb-forms-field-number__contents.dnb-input--disabled {
--number-control-separator-color: var(
--number-control-separator-color--disabled
);
}