Skip to content

Commit 7cdd8bd

Browse files
vsn4ikvsn4ik
committed
Update
1 parent d4a503e commit 7cdd8bd

File tree

7 files changed

+197
-121
lines changed

7 files changed

+197
-121
lines changed

‎docs/dist/input-spinner.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
/* bootstrap@4 */
2+
.input-group.spinner .input-group-text {
3+
flex-direction: column;
4+
justify-content: center;
5+
padding-top: 0;
6+
padding-bottom: 0;
7+
}
8+
.input-group.spinner .input-group-text .spin-up,
9+
.input-group.spinner .input-group-text .spin-down {
10+
display: flex;
11+
background: none;
12+
border: none;
13+
padding: 0;
14+
color: #999;
15+
}
16+
.input-group.spinner .input-group-text .spin-up:hover,
17+
.input-group.spinner .input-group-text .spin-down:hover,
18+
.input-group.spinner .input-group-text .spin-up:focus,
19+
.input-group.spinner .input-group-text .spin-down:focus {
20+
color: #555;
21+
}
22+
/* bootstrap@3 */
123
.spinner.input-group .input-group-addon .spin-up,
224
.spinner.input-group .input-group-addon .spin-down {
325
height: 10px;

‎docs/dist/input-spinner.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/input-spinner.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/example.html‎

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Example</title>
6+
<title>Input Spinner - Example</title>
77

8-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
9-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
1010
<link rel="stylesheet" href="dist/input-spinner.css">
1111

12-
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
13-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
12+
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
13+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.js"></script>
1414
<script src="dist/input-spinner.js"></script>
1515
<script>
1616
document.addEventListener('DOMContentLoaded', function() {
@@ -34,9 +34,12 @@ <h1>Examples</h1>
3434
<h2>Quantity:</h2>
3535
<div class="input-group spinner" data-trigger="spinner">
3636
<input type="text" class="form-control text-center" value="1" data-rule="quantity">
37-
<div class="input-group-addon">
38-
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></a>
39-
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></a>
37+
38+
<div class="input-group-append">
39+
<div class="input-group-text">
40+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
41+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
42+
</div>
4043
</div>
4144
</div>
4245
</div>
@@ -45,9 +48,12 @@ <h2>Quantity:</h2>
4548
<h2>Currency:</h2>
4649
<div class="input-group spinner" data-trigger="spinner">
4750
<input type="text" class="form-control text-center" value="1" data-rule="currency">
48-
<div class="input-group-addon">
49-
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></a>
50-
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></a>
51+
52+
<div class="input-group-append">
53+
<div class="input-group-text">
54+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
55+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
56+
</div>
5157
</div>
5258
</div>
5359
</div>
@@ -56,9 +62,12 @@ <h2>Currency:</h2>
5662
<h2>Percent:</h2>
5763
<div class="input-group spinner" data-trigger="spinner">
5864
<input type="text" class="form-control text-center" value="1" data-rule="percent">
59-
<div class="input-group-addon">
60-
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></a>
61-
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></a>
65+
66+
<div class="input-group-append">
67+
<div class="input-group-text">
68+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
69+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
70+
</div>
6271
</div>
6372
</div>
6473
</div>
@@ -67,9 +76,12 @@ <h2>Percent:</h2>
6776
<h2>Month:</h2>
6877
<div class="input-group spinner" data-trigger="spinner">
6978
<input type="text" class="form-control text-center" value="1" data-rule="month">
70-
<div class="input-group-addon">
71-
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></a>
72-
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></a>
79+
80+
<div class="input-group-append">
81+
<div class="input-group-text">
82+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
83+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
84+
</div>
7385
</div>
7486
</div>
7587
</div>
@@ -78,9 +90,12 @@ <h2>Month:</h2>
7890
<h2>Customize (even number less than 200):</h2>
7991
<div class="input-group spinner" data-trigger="spinner" id="customize-spinner">
8092
<input type="text" class="form-control text-center" value="0" data-max="200" data-min="0" data-step="2">
81-
<div class="input-group-addon">
82-
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></a>
83-
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></a>
93+
94+
<div class="input-group-append">
95+
<div class="input-group-text">
96+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
97+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
98+
</div>
8499
</div>
85100
</div>
86101
<p>Event handler: changed</p>
@@ -93,9 +108,12 @@ <h2>Customize (even number less than 200):</h2>
93108
<h2>Disabled input:</h2>
94109
<div class="input-group spinner" data-trigger="spinner">
95110
<input type="text" class="form-control text-center" value="100" disabled>
96-
<div class="input-group-addon">
97-
<a href="javascript:;" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></a>
98-
<a href="javascript:;" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></a>
111+
112+
<div class="input-group-append">
113+
<div class="input-group-text">
114+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
115+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
116+
</div>
99117
</div>
100118
</div>
101119
</div>
@@ -105,14 +123,11 @@ <h2>Control sizing:</h2>
105123
<div class="input-group input-group-sm spinner" data-trigger="spinner">
106124
<input type="text" class="form-control text-center" value="1">
107125

108-
<div class="input-group-addon">
109-
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></button>
110-
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></button>
111-
</div>
112-
113-
<div class="input-group-addon">
114-
<button type="button" class="spin-up" data-spin="up"><span class="glyphicon glyphicon-triangle-top"></span></button>
115-
<button type="button" class="spin-down" data-spin="down"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
126+
<div class="input-group-append">
127+
<div class="input-group-text">
128+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
129+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
130+
</div>
116131
</div>
117132
</div>
118133

@@ -121,20 +136,13 @@ <h2>Control sizing:</h2>
121136
<div class="input-group input-group-lg spinner" data-trigger="spinner">
122137
<input type="text" class="form-control text-center" value="1">
123138

124-
<div class="input-group-addon">
125-
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up"></i></button>
126-
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down"></i></button>
127-
</div>
128-
129-
<div class="input-group-addon">
130-
<button type="button" class="spin-up" data-spin="up"><span class="glyphicon glyphicon-triangle-top"></span></button>
131-
<button type="button" class="spin-down" data-spin="down"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
139+
<div class="input-group-append">
140+
<div class="input-group-text">
141+
<button type="button" class="spin-up" data-spin="up"><i class="fas fa-caret-up fa-sm"></i></button>
142+
<button type="button" class="spin-down" data-spin="down"><i class="fas fa-caret-down fa-sm"></i></button>
143+
</div>
132144
</div>
133145
</div>
134-
135-
<br>
136-
<div>First <code>.input-group-addon</code>: Font Awesome</div>
137-
<div>Second <code>.input-group-addon</code>: Glyphicon</div>
138146
</div>
139147
</div>
140148
</body>

0 commit comments

Comments
 (0)