Skip to content

Commit 96bf6fc

Browse files
jaspermdegrootjaspermdegroot
committed
Rangeslider: CSS refactor - part2.
1 parent 28aa85d commit 96bf6fc

File tree

2 files changed

+71
-86
lines changed

2 files changed

+71
-86
lines changed

‎css/structure/jquery.mobile.forms.rangeslider.css

Lines changed: 70 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.ui-rangeslider {
22
zoom: 1;
3+
margin: 0;
34
}
45
.ui-rangeslider:before,
56
.ui-rangeslider:after {
@@ -9,79 +10,61 @@
910
.ui-rangeslider:after {
1011
clear: both;
1112
}
12-
.ui-rangeslider label.ui-slider {
13-
margin-bottom: .5em;
13+
/* Margin-top/bottom: .25em * 16px/14px to make it equal to ui-rangeslider-sliders margin (input font-size is 14px) */
14+
.ui-rangeslider.ui-mini input.ui-slider-input {
15+
margin: .28571em 0;
1416
}
15-
.ui-rangeslider.ui-mini label.ui-slider {
16-
margin-bottom: .25em;
17-
}
18-
/* High level of specificity to override textinput and slider CSS. */
19-
.ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last {
17+
.ui-rangeslider input.ui-slider-input.ui-rangeslider-last {
2018
float: right;
2119
}
2220
.ui-rangeslider .ui-rangeslider-dash {
2321
display: none;
2422
}
2523
.ui-rangeslider .ui-rangeslider-sliders {
2624
position: relative;
27-
top: 7px;
28-
height: 32px;
2925
overflow: visible;
30-
margin: 0 88px .5em 88px;
26+
height: 32px;
27+
margin: .5em 89px .5em 89px;
28+
font-size: 14px;
3129
}
3230
.ui-rangeslider.ui-mini .ui-rangeslider-sliders {
33-
top: 9px;
34-
margin: 0 74px .25em 74px;
31+
margin: .25em 75px .25em 75px;
3532
}
36-
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-app {
33+
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
34+
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
35+
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
36+
margin-top: 0;
37+
margin-bottom: 0;
38+
}
39+
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
3740
position: absolute;
38-
top: 0;
41+
top: 7px;
3942
right: 0;
4043
left: 0;
41-
margin: 0 0 8px 0;
44+
margin: 0;
45+
font-size: 1em;
4246
}
43-
.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-app {
44-
margin-bottom: 9px;
47+
.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track {
48+
top: 9px;
4549
}
46-
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-app.ui-disabled {
50+
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track.ui-disabled {
4751
opacity: 1;
4852
z-index: auto;
4953
}
50-
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-app:first-child {
54+
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
5155
background-color: transparent;
5256
background: none;
5357
border: none;
5458
height: 0;
5559
}
60+
5661
/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
57-
html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-app:first-child {
62+
html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
5863
height: 15px;
5964
}
60-
html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-app:first-child {
65+
html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
6166
height: 12px;
6267
}
63-
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first {
64-
display: block;
65-
float: left;
66-
}
67-
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last {
68-
display: block;
69-
margin-left: 0;
70-
}
71-
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders,
72-
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
73-
width: auto;
74-
float: none;
75-
margin: 0 88px;
76-
}
77-
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
78-
margin: 0 74px;
79-
}
80-
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-slider-app,
81-
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-slider-app {
82-
right: 0;
83-
left: 0;
84-
}
8568

8669
@media all and (max-width: 27.9375em){
8770
.ui-rangeslider label.ui-slider {
@@ -91,71 +74,73 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-app:fi
9174
margin-right: 8px;
9275
}
9376
.ui-rangeslider label.ui-slider,
94-
.ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first,
95-
.ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last,
96-
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first,
97-
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last,
77+
.ui-rangeslider input.ui-slider-input.ui-rangeslider-first,
78+
.ui-rangeslider input.ui-slider-input.ui-rangeslider-last,
9879
.ui-rangeslider .ui-rangeslider-dash {
9980
float: none;
10081
display: inline-block;
101-
margin-bottom: 1em;
82+
margin-bottom: .8em;
10283
}
10384
.ui-rangeslider .ui-rangeslider-dash {
10485
padding: .4em;
10586
font-size: 14px;
10687
line-height: 1.4;
10788
}
108-
.ui-rangeslider .ui-rangeslider-sliders,
109-
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders {
110-
margin: 0 15px .5em 15px;
89+
.ui-rangeslider .ui-rangeslider-sliders {
90+
margin-left: 15px;
91+
margin-right: 15px;
11192
}
112-
.ui-rangeslider.ui-mini .ui-rangeslider-sliders,
113-
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
114-
margin: 0 8px .25em 8px;
93+
.ui-rangeslider.ui-mini .ui-rangeslider-sliders {
94+
margin-left: 8px;
95+
margin-right: 8px;
11596
}
11697
}
11798

11899
@media all and (min-width: 28em){
119-
.ui-field-contain .ui-rangeslider {
120-
vertical-align: middle;
121-
font-size: 0;
122-
}
123-
.ui-field-contain .ui-rangeslider input.ui-input-text.ui-slider-input {
124-
position: relative;
125-
z-index: 1;
126-
}
127-
.ui-field-contain .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first {
128-
display: inline-block;
129-
float: left;
100+
.ui-field-contain .ui-rangeslider label.ui-slider {
101+
float:left;
130102
}
131-
.ui-field-contain .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last {
132-
display: inline-block;
133-
margin-left: 30px;
134-
float:right;
103+
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input.ui-rangeslider-first {
104+
margin-right: 16px;
135105
}
136-
.ui-field-contain .ui-rangeslider.ui-mini input.ui-input-text.ui-slider-input.ui-rangeslider-last {
137-
margin-left: 16px;
138-
}
139-
.ui-field-contain .ui-rangeslider label {
140-
float:left;
106+
.ui-field-contain .ui-rangeslider input.ui-slider-input.ui-rangeslider-last,
107+
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input.ui-rangeslider-last {
108+
margin-right: 0;
141109
}
142110
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders {
143111
float: left;
144112
width: 78%;
145-
margin-left: -58px;
146-
margin-right: -100px;
113+
margin-left: -89px;
114+
margin-right: -89px;
147115
}
148116
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
149-
margin-left: -58px;
150-
margin-right: -80px;
117+
margin-left: -75px;
118+
margin-right: -75px;
119+
}
120+
.ui-field-contain .ui-rangeslider .ui-slider-track {
121+
right: 89px;
122+
left: 89px;
123+
}
124+
.ui-field-contain .ui-rangeslider.ui-mini .ui-slider-track {
125+
right: 75px;
126+
left: 75px;
127+
}
128+
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-slider-input.ui-rangeslider-first,
129+
.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-slider-input.ui-rangeslider-last {
130+
margin: 0;
151131
}
152-
.ui-field-contain .ui-rangeslider .ui-slider-app {
153-
right: 88px;
154-
left: 88px;
155-
font-size: 16px;
132+
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders,
133+
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
134+
width: auto;
135+
float: none;
136+
margin: 0 89px;
137+
}
138+
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
139+
margin: 0 75px;
156140
}
157-
.ui-field-contain .ui-rangeslider.ui-mini .ui-slider-app {
158-
right: 74px;
159-
left: 74px;
141+
.ui-field-contain.ui-hide-label .ui-rangeslider .ui-slider-track,
142+
.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-slider-track {
143+
right: 0;
144+
left: 0;
160145
}
161146
}

‎js/widgets/forms/rangeslider.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
101101
_slidebeforestart: function( event ) {
102102
this.sliderTarget = false;
103103
//if the track is the target remember this and the original value
104-
if ( $( event.originalEvent.target ).hasClass( "ui-slider-app" ) ) {
104+
if ( $( event.originalEvent.target ).hasClass( "ui-slider-track" ) ) {
105105
this.sliderTarget = true;
106106
this.targetVal = $( event.target ).val();
107107
}

0 commit comments

Comments
 (0)