Skip to content

Commit 96d654d

Browse files
RyanThompsonRyanThompson
committed
Spinner styles
1 parent cf6054b commit 96d654d

File tree

2 files changed

+184
-0
lines changed

2 files changed

+184
-0
lines changed

‎resources/less/mixins.less‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Spinner variants
2+
3+
.spinner-variant(@up-btn-height; @down-btn-height; @line-height) {
4+
& + .ui-spinner-button {
5+
height: @up-btn-height;
6+
line-height: @line-height;
7+
}
8+
& + .ui-spinner-button + .ui-spinner-button {
9+
height: @down-btn-height;
10+
line-height: @line-height;
11+
}
12+
}

‎resources/less/spinner.less‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
@import "mixins";
2+
3+
//
4+
// Spinner
5+
// --------------------------------------------------
6+
7+
// Spinner Wrapper
8+
.ui-spinner {
9+
width: 100%;
10+
overflow: hidden;
11+
position: relative;
12+
padding: 0 37px 0 0;
13+
display: inline-block;
14+
vertical-align: middle;
15+
16+
@media (max-width: 768px) {
17+
display: block;
18+
}
19+
20+
.ui-button-text {
21+
display: block;
22+
}
23+
24+
// Focus State
25+
&.focus {
26+
.ui-spinner-input {
27+
color: @brand-primary;
28+
border-color: @brand-primary;
29+
}
30+
.ui-spinner-button {
31+
background-color: @brand-primary;
32+
33+
&:hover {
34+
background-color: mix(@brand-primary, black, 85%);
35+
}
36+
}
37+
.ui-spinner-up {
38+
border-bottom-color: mix(@brand-primary, black, 85%);
39+
}
40+
}
41+
}
42+
43+
// Spinner Input
44+
.ui-spinner-input {
45+
width: 100%;
46+
border-radius: @input-border-radius 0 0 @input-border-radius;
47+
text-align: left;
48+
padding: 6px 12px;
49+
border-right-width: 0 !important;
50+
font-weight: normal;
51+
font-size: 15px;
52+
line-height: 1.467;
53+
&::-moz-placeholder {
54+
color: desaturate(lighten(#999999, 22%), 16%); // Firefox
55+
opacity: 1;
56+
}
57+
// See https://github.com/twbs/bootstrap/pull/11526
58+
&:-ms-input-placeholder {
59+
color: #999999;
60+
}
61+
// Internet Explorer 10+
62+
&::-webkit-input-placeholder {
63+
color: #999999;
64+
}
65+
// Safari and Chrome
66+
67+
@media (max-width: 768px) {
68+
width: 100%;
69+
}
70+
71+
// Spinner sizing
72+
&.input-hg {
73+
.spinner-variant(28px; 25px; 25px);
74+
}
75+
&.input-lg {
76+
.spinner-variant(24px; 21px; 21px);
77+
}
78+
&.input-sm {
79+
font-size: 18px;
80+
line-height: 1;
81+
82+
.spinner-variant(19px; 17px; 1);
83+
}
84+
}
85+
86+
// Prepend spinner
87+
.input-group-addon + .ui-spinner {
88+
.ui-spinner-input {
89+
border-bottom-left-radius: 0;
90+
border-top-left-radius: 0;
91+
}
92+
}
93+
94+
// Spinner Buttons
95+
.ui-spinner-button {
96+
display: block;
97+
font-size: .5em;
98+
line-height: 19px;
99+
height: 22px;
100+
margin: 0;
101+
overflow: hidden;
102+
padding: 0;
103+
position: absolute;
104+
right: 0;
105+
text-align: center;
106+
width: 37px;
107+
cursor: pointer;
108+
color: #ffffff;
109+
text-decoration: none;
110+
background-color: #bdc3c7;
111+
outline: none;
112+
113+
&:hover {
114+
background-color: mix(#bdc3c7, white, 70%);
115+
color: mix(@brand-primary, white, 10%);
116+
}
117+
118+
// Icon
119+
.ui-icon {
120+
font-size: 0;
121+
122+
&:before {
123+
content: "\f0d8";
124+
font-family: "FontAwesome";
125+
font-size: 16px;
126+
line-height: 19px;
127+
-webkit-font-smoothing: antialiased;
128+
-moz-osx-font-smoothing: grayscale;
129+
}
130+
}
131+
}
132+
133+
.ui-spinner-up {
134+
border-bottom: 2px solid mix(#bdc3c7, white, 70%);
135+
top: 0;
136+
border-radius: 0 @input-border-radius 0 0;
137+
}
138+
139+
.ui-spinner-down {
140+
bottom: 0;
141+
height: 20px;
142+
border-radius: 0 0 @input-border-radius 0;
143+
144+
.ui-icon:before {
145+
content: "\f0d7";
146+
font-family: "FontAwesome";
147+
}
148+
}
149+
150+
.has-danger {
151+
.ui-spinner-button {
152+
background: @brand-danger;
153+
}
154+
}
155+
156+
.has-success {
157+
.ui-spinner-button {
158+
background: @brand-success;
159+
}
160+
}
161+
162+
.has-info {
163+
.ui-spinner-button {
164+
background: @brand-info;
165+
}
166+
}
167+
168+
.has-warning {
169+
.ui-spinner-button {
170+
background: @brand-warning;
171+
}
172+
}

0 commit comments

Comments
 (0)