modo-mobile
Version:
A mobile UI toolkit, based on React
75 lines (74 loc) • 1.54 kB
CSS
.m-stepper {
height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.m-stepper.m-stepper-disabled .m-stepper-button {
opacity: 0.4;
}
.m-stepper.m-stepper-disabled input {
opacity: 0.4;
}
.m-stepper-button {
position: relative;
width: 20px;
height: 20px;
border-radius: 2px;
}
.m-stepper-button::after {
content: '';
position: absolute;
width: 10px;
height: 2px;
top: 50%;
left: 50%;
background: rgba(0, 0, 0, 0.65);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 2px;
}
.m-stepper-button.m-stepper-button-add::before {
content: '';
position: absolute;
width: 2px;
height: 10px;
top: 50%;
left: 50%;
background: rgba(0, 0, 0, 0.65);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 2px;
}
.m-stepper-button-disabled {
opacity: 0.4;
}
.m-stepper-number {
width: 44px;
height: 20px;
font-size: 0;
position: relative;
background-color: #f8f8f8;
border-radius: 2px;
margin: 0 3px;
padding: 0 3px;
}
.m-stepper-number input {
width: 100%;
height: 20px;
border: none;
outline: none;
font-size: 14px;
line-height: 10px;
background-color: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
color: rgba(0, 0, 0, 0.65);
padding: 0;
margin: 0;
display: inline-block;
}