Skip to content

Commit c1325ba

Browse files
jevin98sleeprite
jevin98
authored and
sleeprite
committed
!472 fix(inputNumber): 自定义宽度，indicator显示异常
* fix(inputNumber): 自定义宽度，indicator显示异常
1 parent fe1dfae commit c1325ba

File tree

1 file changed

+152
-156
lines changed
  • packages/component/component/inputNumber

1 file changed

+152
-156
lines changed

‎packages/component/component/inputNumber/index.less

Lines changed: 152 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,152 @@
1-
@import "../button/index.less";
2-
@import "../input/index.less";
3-
4-
@border-color: #eee;
5-
@hover-border-color: var(--global-primary-color);
6-
7-
@input-number-lg: 44px;
8-
@input-number-lg-wdith: 200px;
9-
@input-number-lg-right: 22px;
10-
@input-number-md: 38px;
11-
@input-number-md-wdith: 160px;
12-
@input-number-md-right: 19px;
13-
@input-number-sm: 32px;
14-
@input-number-sm-wdith: 140px;
15-
@input-number-sm-right: 16px;
16-
@input-number-xs: 26px;
17-
@input-number-xs-wdith: 120px;
18-
@input-number-xs-right: 13px;
19-
20-
.set-size(@width, @size, @right-size) {
21-
& {
22-
height: @size;
23-
width: @width;
24-
25-
.layui-input-number-indicator {
26-
pointer-events: none;
27-
position: absolute;
28-
height: 100%;
29-
top: 0;
30-
line-height: @size;
31-
text-align: center;
32-
background-color: #fff;
33-
width: @width;
34-
overflow: hidden;
35-
}
36-
37-
.layui-input {
38-
height: @size;
39-
line-height: @size;
40-
padding: 0 @size;
41-
}
42-
43-
.layui-control-btn {
44-
width: @size;
45-
height: @size;
46-
line-height: @size;
47-
z-index: 1;
48-
}
49-
50-
&[position="right"] {
51-
.layui-input {
52-
padding: 0 @size 0 0;
53-
}
54-
55-
.layui-control-btn {
56-
height: @right-size;
57-
line-height: @right-size;
58-
}
59-
60-
.layui-input-number-indicator {
61-
left: 0;
62-
width: calc(@width - @right-size - calc(@size / 2));
63-
}
64-
65-
.layui-subtraction-btn {
66-
top: @right-size - 1;
67-
}
68-
}
69-
}
70-
}
71-
72-
.layui-input-number + .layui-input-number {
73-
margin-left: 10px;
74-
}
75-
76-
.layui-input-number {
77-
position: relative;
78-
display: inline-block;
79-
box-sizing: border-box;
80-
border: 1px solid @border-color;
81-
border-color: @border-color;
82-
border-radius: var(--global-border-radius);
83-
overflow: hidden;
84-
85-
.layui-input {
86-
border: 0;
87-
88-
input {
89-
text-align: center;
90-
padding-left: 0px;
91-
}
92-
}
93-
94-
.layui-control-btn {
95-
position: absolute;
96-
box-sizing: border-box;
97-
border: 0;
98-
border-color: @border-color;
99-
border-style: solid;
100-
border-radius: 0;
101-
padding: 0;
102-
text-align: center;
103-
top: 0;
104-
105-
&:hover {
106-
color: @hover-border-color;
107-
}
108-
109-
&.layui-subtraction-btn {
110-
border-right-width: 1px;
111-
}
112-
113-
&.layui-addition-btn {
114-
border-left-width: 1px;
115-
right: 0;
116-
}
117-
118-
.layui-icon {
119-
padding: 0px;
120-
}
121-
}
122-
123-
.layui-input input::-webkit-outer-spin-button,
124-
.layui-input input::-webkit-inner-spin-button {
125-
-webkit-appearance: none;
126-
}
127-
128-
.layui-input input[type="number"] {
129-
-moz-appearance: textfield;
130-
}
131-
132-
&[position="right"] {
133-
.layui-subtraction-btn {
134-
right: 0;
135-
border-right-width: 0px;
136-
border-left-width: 1px;
137-
}
138-
139-
.layui-addition-btn {
140-
border-bottom-width: 1px;
141-
}
142-
}
143-
144-
&[size="lg"] {
145-
.set-size(@input-number-lg-wdith, @input-number-lg, @input-number-lg-right);
146-
}
147-
&[size="md"] {
148-
.set-size(@input-number-md-wdith, @input-number-md, @input-number-md-right);
149-
}
150-
&[size="sm"] {
151-
.set-size(@input-number-sm-wdith, @input-number-sm, @input-number-sm-right);
152-
}
153-
&[size="xs"] {
154-
.set-size(@input-number-xs-wdith, @input-number-xs, @input-number-xs-right);
155-
}
156-
}
1+
@import "../button/index.less";
2+
@import "../input/index.less";
3+
4+
@border-color: #eee;
5+
@hover-border-color: var(--global-primary-color);
6+
7+
@input-number-lg: 44px;
8+
@input-number-lg-width: 200px;
9+
@input-number-lg-right: 22px;
10+
@input-number-md: 38px;
11+
@input-number-md-width: 160px;
12+
@input-number-md-right: 19px;
13+
@input-number-sm: 32px;
14+
@input-number-sm-width: 140px;
15+
@input-number-sm-right: 16px;
16+
@input-number-xs: 26px;
17+
@input-number-xs-width: 120px;
18+
@input-number-xs-right: 13px;
19+
20+
.set-size(@width, @size, @right-size) {
21+
& {
22+
height: @size;
23+
width: @width;
24+
25+
.layui-input-number-indicator {
26+
pointer-events: none;
27+
position: absolute;
28+
width: 100%;
29+
height: 100%;
30+
top: 0;
31+
line-height: @size;
32+
text-align: center;
33+
background-color: #fff;
34+
overflow: hidden;
35+
}
36+
37+
.layui-input {
38+
height: @size;
39+
line-height: @size;
40+
padding: 0 @size;
41+
}
42+
43+
.layui-control-btn {
44+
width: @size;
45+
height: @size;
46+
line-height: @size;
47+
z-index: 1;
48+
}
49+
50+
&[position="right"] {
51+
.layui-input,
52+
.layui-input-number-indicator {
53+
padding: 0 @size 0 0;
54+
}
55+
56+
.layui-control-btn {
57+
height: @right-size;
58+
line-height: @right-size;
59+
}
60+
61+
.layui-subtraction-btn {
62+
top: @right-size - 1;
63+
}
64+
}
65+
}
66+
}
67+
68+
.layui-input-number + .layui-input-number {
69+
margin-left: 10px;
70+
}
71+
72+
.layui-input-number {
73+
position: relative;
74+
display: inline-block;
75+
box-sizing: border-box;
76+
border: 1px solid @border-color;
77+
border-color: @border-color;
78+
border-radius: var(--global-border-radius);
79+
overflow: hidden;
80+
81+
.layui-input {
82+
border: 0;
83+
84+
input {
85+
text-align: center;
86+
padding-left: 0px;
87+
}
88+
}
89+
90+
.layui-control-btn {
91+
position: absolute;
92+
box-sizing: border-box;
93+
border: 0;
94+
border-color: @border-color;
95+
border-style: solid;
96+
border-radius: 0;
97+
padding: 0;
98+
text-align: center;
99+
top: 0;
100+
101+
&:hover {
102+
color: @hover-border-color;
103+
}
104+
105+
&.layui-subtraction-btn {
106+
border-right-width: 1px;
107+
}
108+
109+
&.layui-addition-btn {
110+
border-left-width: 1px;
111+
right: 0;
112+
}
113+
114+
.layui-icon {
115+
padding: 0px;
116+
}
117+
}
118+
119+
.layui-input input::-webkit-outer-spin-button,
120+
.layui-input input::-webkit-inner-spin-button {
121+
-webkit-appearance: none;
122+
}
123+
124+
.layui-input input[type="number"] {
125+
-moz-appearance: textfield;
126+
}
127+
128+
&[position="right"] {
129+
.layui-subtraction-btn {
130+
right: 0;
131+
border-right-width: 0px;
132+
border-left-width: 1px;
133+
}
134+
135+
.layui-addition-btn {
136+
border-bottom-width: 1px;
137+
}
138+
}
139+
140+
&[size="lg"] {
141+
.set-size(@input-number-lg-width, @input-number-lg, @input-number-lg-right);
142+
}
143+
&[size="md"] {
144+
.set-size(@input-number-md-width, @input-number-md, @input-number-md-right);
145+
}
146+
&[size="sm"] {
147+
.set-size(@input-number-sm-width, @input-number-sm, @input-number-sm-right);
148+
}
149+
&[size="xs"] {
150+
.set-size(@input-number-xs-width, @input-number-xs, @input-number-xs-right);
151+
}
152+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy