Viewing File: /home/ubuntu/route-and-root-frontend-base/node_modules/react-numeric-input/src/style.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;
}
}
Back to Directory
File Manager