react-numeric-input
Version:
Number input component that can replace the native number input which is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for an
322 lines (284 loc) • 8.76 kB
text/less
// ============================================================================
// IMPORTANT!
// This file is not currently used for anything and will not work if you
// try to include it on the page
// ============================================================================
.numeric-input-wrap {
position: relative;
display : inline-block;
// input ------------------------------------------------------------------
.numeric-input-input {
padding-right: 3ex;
box-sizing : border-box;
&:not(.form-control) {
border : 1px solid #ccc;
border-radius : 2px;
padding-left : 4px;
display : block;
-webkit-appearance : none;
line-height : normal;
}
}
// arrows -----------------------------------------------------------------
.numeric-input-arrow-up, .numeric-input-arrow-down {
position : absolute;
top : 50%;
left : 50%;
width : 0;
height : 0;
border-style: solid;
margin : -0.3ex 0 0 -0.56ex;
}
.numeric-input-arrow-up {
border-width: 0 0.6ex 0.6ex 0.6ex;
border-color: transparent transparent rgba(0, 0, 0, 0.7);
}
.numeric-input-arrow-down {
border-width: 0.6ex 0.6ex 0 0.6ex;
border-color: rgba(0, 0, 0, 0.7) transparent transparent;
}
// buttons ----------------------------------------------------------------
.numeric-input-btn-up, .numeric-input-btn-down {
position : absolute;
right : 2;
width : 2.26ex;
border-color: rgba(0,0,0,.1);
border-style: solid;
text-align : center;
cursor : default;
transition : all 0.1s;
background : rgba(0,0,0,.1);
box-shadow : -1px -1px 3px rgba(0,0,0,.1) inset,
1px 1px 3px rgba(255,255,255,.7) inset;
&:hover {
background: rgba(0,0,0,.2);
}
&:active {
background: rgba(0,0,0,.3);
box-shadow: 0 1px 3px rgba(0,0,0,.2) inset,
-1px -1px 4px rgba(255,255,255,.5) inset;
}
&:disabled {
opacity : 0.5;
box-shadow: none;
cursor : not-allowed;
}
}
.numeric-input-btn-up {
top : 2px;
bottom : 50%;
border-radius: 2px 2px 0 0;
border-width : 1px 1px 0 1px;
}
.numeric-input-btn-down {
top : 50%;
bottom : 2px;
border-radius: 0 0 2px 2px;
border-width : 0 1px 1px 1px;
}
}
// OLD ========================================================================
.unselectable() {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.numeric-input-wrap {
position: relative;
display : inline-block;
.unselectable;
// The input ---------------------------------------------------------------
.numeric-input-input {
padding-right: 3ex;
box-sizing : border-box;
}
// The Up/Down buttons -----------------------------------------------------
.numeric-input-up,
.numeric-input-down {
position : absolute;
right : 2px;
width : 2.26ex;
background : rgba(0, 0, 0, 0.1);
box-shadow : 0 0 0 0.5px rgba(0, 0, 0, 0.2);
text-align : center;
cursor : default;
opacity : 0.75;
transition : all 0.2s;
// arrow triangles -----------------------------------------------------
&:before {
content : '';
width : 0;
height : 0;
border-style: solid;
position : absolute;
top : 50%;
left : 50%;
margin : -0.3ex 0 0 -0.6ex;
.unselectable;
}
}
// Up button ---------------------------------------------------------------
.numeric-input-up {
top : 2px;
bottom : 50%;
border-radius : 1px;
// margin-bottom : 1px;
&:after {
content : '';
position : absolute;
top : -1px;
right : -1px;
bottom : -1px;
left : -1px;
}
&:before {
border-width: 0 0.6ex 0.6ex 0.6ex;
border-color: transparent transparent #999;
border-color: transparent transparent rgba(0, 0, 0, 0.7);
}
}
// Down button -------------------------------------------------------------
.numeric-input-down {
bottom : 2px;
top : 50%;
border-radius : 1px;
// margin-top : 1px;
&:after {
content : '';
position : absolute;
top : -1px;
right : -1px;
bottom : -1px;
left : -1px;
}
&:before {
border-width: 0.6ex 0.6ex 0 0.6ex;
border-color: #999 transparent transparent;
border-color: rgba(0, 0, 0, 0.7) transparent transparent;
}
}
// Chnage some things on hover ---------------------------------------------
&:hover {
.numeric-input-up,
.numeric-input-down {
background : rgba(0, 0, 0, 0.1);
box-shadow : 0 0 0 0.5px rgba(0, 0, 0, 0.2);
opacity : 1;
}
}
.numeric-input-up,
.numeric-input-down {
&:hover {
background: rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}
&:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
}
&.disabled {
pointer-events: none;
}
&.std input {
border: 1px solid #ccc;
border-radius: 2px;
// box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.8) inset;
padding-left: 4px;
display: block;
-webkit-appearance: none;
line-height: normal;
}
// Bootstrap styling -------------------------------------------------------
&.bs-form-control {
.numeric-input-up {
right: 3px;
top: 3px;
border-radius: 1px 2px 1px 1px;
margin-bottom : 1px;
}
.numeric-input-down {
right: 3px;
bottom: 3px;
border-radius: 1px 1px 2px 1px;
margin-top : 1px;
}
}
}
// Mobile ------------------------------------------------------------------
.mobile {
.numeric-input-wrap {
input {
padding-left : 3.4ex;
padding-right: 3.4ex;
text-align : center;
border-radius: 2px;
}
.numeric-input-up, .numeric-input-down {
width : 3.3ex;
top : 1px;
bottom : 1px;
box-shadow: none;
margin : 0;
&:before, &:after {
content: '';
border : 0;
background: #000;
border-radius: 1px;
top: 50%;
left: 50%;
}
}
.numeric-input-up {
right : 1px;
border-radius: 0 1px 1px 0;
box-shadow : 1px 0 0 0 rgba(0, 0, 0, 0.1) inset;
&:before {
margin: -1px 0 0 -7px;
height: 2px;
width: 14px;
}
&:after {
margin: -7px 0 0 -1px;
height: 14px;
width: 2px;
}
}
.numeric-input-down {
left : 1px;
right: auto;
border-radius: 1px 0 0 1px;
box-shadow : -1px 0 0 0 rgba(0, 0, 0, 0.1) inset;
&:before {
margin: -1px 0 0 -7px;
height: 2px;
width: 14px;
}
&:after {
display: none;
}
}
&.bs-form-control {
input {
border-radius: 4px;
}
.numeric-input-up {
border-radius: 0 3px 3px 0;
}
.numeric-input-down {
border-radius: 3px 0 0 3px;
}
}
}
}
.disabled {
.numeric-input-wrap {
pointer-events: none;
}
.numeric-input-up, .numeric-input-down {
opacity : 0.3;
pointer-events: none;
box-shadow : none;
}
}