wmdeit_kaform/addons/number/kube.number.css

105 lines
3.6 KiB
CSS
Raw Normal View History

2020-02-20 13:45:47 +00:00
.input-number {
position: relative;
display: flex; }
.input-number input[type=number]::-webkit-inner-spin-button,
.input-number input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
.input-number input[type=number] {
-moz-appearance: textfield;
width: auto;
text-align: center; }
.input-number input {
border-radius: 0;
border-left: 1px solid transparent;
border-right: 1px solid transparent; }
.input-number .is-up,
.input-number .is-down {
width: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
cursor: pointer;
color: #111113;
font-size: 0.875em;
text-decoration: none;
text-align: center;
-webkit-user-select: none;
user-select: none;
border: 1px solid rgba(17, 17, 19, 0.1); }
.input-number .is-up:hover,
.input-number .is-down:hover {
background-color: rgba(17, 17, 19, 0.04); }
.input-number .is-up {
border-left-color: transparent;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin-left: -1px; }
.input-number .is-up:hover {
border-radius: 4px; }
.input-number .is-down {
border-right-color: transparent;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-right: -1px; }
.input-number .is-down:hover {
border-radius: 4px; }
.input-number .input-number-input input {
border-left: 1px solid rgba(17, 17, 19, 0.1);
border-right: 1px solid transparent; }
.input-number input:hover,
.input-number .input-number-input input:hover {
border: 1px solid rgba(17, 17, 19, 0.2); }
.input-number input:hover,
.input-number .input-number-input input:hover {
border: 1px solid rgba(17, 17, 19, 0.2); }
.input-number input:focus,
.input-number .input-number-input input:focus {
border: 1px solid rgba(21, 141, 247, 0.5); }
.input-number input.is-error,
.input-number .input-number-input input.is-error {
border: 1px solid rgba(238, 36, 85, 0.5); }
.input-number input.is-error:focus,
.input-number .input-number-input input.is-error:focus {
border-color: rgba(238, 36, 85, 0.75); }
.input-number input.is-success,
.input-number .input-number-input input.is-success {
border: 1px solid rgba(32, 188, 113, 0.5); }
.input-number input.is-success:focus,
.input-number .input-number-input input.is-success:focus {
border-color: rgba(32, 188, 113, 0.75); }
.input-number input.is-warning,
.input-number .input-number-input input.is-warning {
border: 1px solid rgba(255, 105, 81, 0.5); }
.input-number input.is-warning:focus,
.input-number .input-number-input input.is-warning:focus {
border-color: rgba(255, 105, 81, 0.75); }
.input-number .input-number-nav {
position: relative;
width: 24px;
margin-left: -1px; }
.input-number .input-number-nav .is-up,
.input-number .input-number-nav .is-down {
margin: 0;
position: absolute;
cursor: pointer;
width: 24px;
height: 50%;
line-height: 20px;
border: none; }
.input-number .input-number-nav .is-up {
border-top-left-radius: 0;
border-bottom-right-radius: 0;
top: 0;
right: 0;
border-top: 1px solid rgba(17, 17, 19, 0.1);
border-right: 1px solid rgba(17, 17, 19, 0.1); }
.input-number .input-number-nav .is-down {
border-top-right-radius: 0;
border-bottom-right-radius: 4px;
border-right: 1px solid rgba(17, 17, 19, 0.1);
border-bottom: 1px solid rgba(17, 17, 19, 0.1);
right: 0;
bottom: 0; }