dh-c
Version:
The front-end development engineers jimberton gulp react component
72 lines (69 loc) • 1.96 kB
CSS
/* --- s: sass extend method -- */
.inputNumberIcon, .dh-input-number-handler-up-inner, .dh-input-number-handler-down-inner {
font-family: "iconfont" ;
display: inline-block;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
line-height: 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; }
.inputNumber .dh-input-number-input, .dh-input-number .dh-input-number-input {
width: 100%;
text-align: left;
outline: 0;
-moz-appearance: textfield;
-webkit-transition: all .3s linear;
transition: all .3s linear;
color: #999;
border: 0; }
/* --- e: sass extend method -- */
.dh-input-number {
position: relative;
padding: 4px 0;
width: 100%;
cursor: text;
color: #999;
background-color: transparent;
background-image: none;
-webkit-transition: all .3s;
transition: all .3s;
margin: 0;
font-size: 14px;
display: inline-block;
border-bottom: 1px solid #49c77d; }
.dh-input-number-handler-wrap {
width: initial;
height: 100%;
background: transparent;
position: absolute;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity .24s linear .1s;
transition: opacity .24s linear .1s; }
.dh-input-number-handler-wrap:hover {
opacity: 1; }
.dh-input-number-handler {
cursor: pointer;
text-align: center;
line-height: 0;
height: 50%;
overflow: hidden;
position: relative;
-webkit-transition: all .1s linear;
transition: all .1s linear;
display: block;
width: 100%;
color: #ccc;
font-weight: 700; }
.dh-input-number-handler-up {
transform: rotate(180deg); }
.dh-input-number-handler-up-inner:before {
content: "\e609"; }
.dh-input-number-handler-down-inner:before {
content: "\e609"; }
.dh-input-number-handler-up:hover, .dh-input-number-handler-down:hover {
font-size: 14px;
color: #999; }