commerce-on-lightning-components/force-app/main/default/lwc/commonNumberInput/commonNumberInput.scoped.css at release · syedshehrozhussain/commerce-on-lightning-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
:host {
    --ref-c-common-number-input-width: var(--dxp-c-number-input-width, 5.5rem);
    --ref-c-common-number-input-height: var(--dxp-c-number-input-height, 2.5rem);
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
}
input,
button {
    border: none;
}
label {
    white-space: nowrap;
}
span {
    border: var(--dxp-s-form-element-width-border, 1px) solid var(--dxp-g-neutral-1);
    border-radius: var(--ref-c-common-number-input-border-radius, 0);
}
span.error {
    border: var(--dxp-s-form-element-width-border, 1px) solid var(--dxp-g-destructive);
}
.number-input__input {
    width: var(--ref-c-common-number-input-width);
    height: calc(var(--ref-c-common-number-input-height) - 2 * var(--dxp-s-form-element-width-border, 1px));
    outline: 0;
    text-align: center;
}
.number-input__decrement-button {
    border-right: var(--dxp-s-form-element-width-border, 1px) solid var(--dxp-g-neutral-1);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
.number-input__increment-button {
    border-left: var(--dxp-s-form-element-width-border, 1px) solid var(--dxp-g-neutral-1);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}
.number-input__button-icon {
    --sds-c-icon-color-foreground-default: var(--dxp-g-root-contrast);
}
.number-input__increment-button:focus,
.number-input__decrement-button:focus,
.number-input__input:focus {
    --slds-c-input-shadow: 0 0 3px var(--dxp-g-neutral-1);
}
button[disabled] .number-input__button-icon {
    --sds-c-icon-color-foreground-default: var(--dxp-g-neutral);
}
.hidden-input {
    display: none;
}