automated_uniapp/uni_modules/cool-ui/static/css/input-number.scss

94 lines
1.5 KiB
SCSS
Raw Normal View History

2025-01-09 16:16:11 +08:00
.cl-input-number {
display: inline-flex;
align-items: center;
height: $cl-input-number-size;
line-height: 1;
&__plus,
&__minus {
display: inline-flex;
align-items: center;
justify-content: center;
height: $cl-input-number-size;
width: $cl-input-number-size;
border-radius: $cl-input-number-size;
background-color: #f1f7ff;
text {
font-size: 28rpx;
font-weight: bold;
}
&:active {
opacity: 0.8;
}
}
&__plus {
background-color: $cl-color-primary;
color: #fff;
}
&__value {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 28rpx;
text-align: center;
color: $cl-color-primary;
position: relative;
margin: 0 20rpx;
input {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: inherit;
background-color: #fff;
}
.unit {
font-size: 20rpx;
position: relative;
z-index: 9;
&:nth-child(1) {
opacity: 0;
}
}
.num {
margin: 0 20rpx;
visibility: hidden;
}
}
&.is-disabled {
.cl-input-number__plus,
.cl-input-number__minus {
background-color: $cl-color-disabled-bg;
color: $cl-color-disabled;
}
.cl-input-number__value {
color: $cl-color-disabled;
}
}
&.disabled-plus {
.cl-input-number__plus {
background-color: $cl-color-disabled-bg;
color: $cl-color-disabled;
}
}
&.disabled-minus {
.cl-input-number__minus {
background-color: $cl-color-disabled-bg;
color: $cl-color-disabled;
}
}
}