Permalink
Browse files

Rangeslider: CSS refactor - part2.

  • Loading branch information...
1 parent 28aa85d commit 96bf6fc56c740f9d0705558a64b83b46ba56fb23 @jaspermdegroot jaspermdegroot committed Dec 25, 2012
Showing with 71 additions and 86 deletions.
  1. +70 −85 css/structure/jquery.mobile.forms.rangeslider.css
  2. +1 −1 js/widgets/forms/rangeslider.js
View
155 css/structure/jquery.mobile.forms.rangeslider.css
@@ -1,5 +1,6 @@
.ui-rangeslider {
zoom: 1;
+ margin: 0;
}
.ui-rangeslider:before,
.ui-rangeslider:after {
@@ -9,79 +10,61 @@
.ui-rangeslider:after {
clear: both;
}
-.ui-rangeslider label.ui-slider {
- margin-bottom: .5em;
+/* Margin-top/bottom: .25em * 16px/14px to make it equal to ui-rangeslider-sliders margin (input font-size is 14px) */
+.ui-rangeslider.ui-mini input.ui-slider-input {
+ margin: .28571em 0;
}
-.ui-rangeslider.ui-mini label.ui-slider {
- margin-bottom: .25em;
-}
-/* High level of specificity to override textinput and slider CSS. */
-.ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last {
+.ui-rangeslider input.ui-slider-input.ui-rangeslider-last {
float: right;
}
.ui-rangeslider .ui-rangeslider-dash {
display: none;
}
.ui-rangeslider .ui-rangeslider-sliders {
position: relative;
- top: 7px;
- height: 32px;
overflow: visible;
- margin: 0 88px .5em 88px;
+ height: 32px;
+ margin: .5em 89px .5em 89px;
+ font-size: 14px;
}
.ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- top: 9px;
- margin: 0 74px .25em 74px;
+ margin: .25em 75px .25em 75px;
}
-.ui-rangeslider .ui-rangeslider-sliders .ui-slider-app {
+.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
+.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
+.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
position: absolute;
- top: 0;
+ top: 7px;
right: 0;
left: 0;
- margin: 0 0 8px 0;
+ margin: 0;
+ font-size: 1em;
}
-.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-app {
- margin-bottom: 9px;
+.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track {
+ top: 9px;
}
-.ui-rangeslider .ui-rangeslider-sliders .ui-slider-app.ui-disabled {
+.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track.ui-disabled {
opacity: 1;
z-index: auto;
}
-.ui-rangeslider .ui-rangeslider-sliders .ui-slider-app:first-child {
+.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
background-color: transparent;
background: none;
border: none;
height: 0;
}
+
/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
-html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-app:first-child {
+html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
height: 15px;
}
-html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-app:first-child {
+html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
height: 12px;
}
-.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first {
- display: block;
- float: left;
-}
-.ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last {
- display: block;
- margin-left: 0;
-}
-.ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders,
-.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- width: auto;
- float: none;
- margin: 0 88px;
-}
-.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- margin: 0 74px;
-}
-.ui-field-contain.ui-hide-label .ui-rangeslider .ui-slider-app,
-.ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-slider-app {
- right: 0;
- left: 0;
-}
@media all and (max-width: 27.9375em){
.ui-rangeslider label.ui-slider {
@@ -91,71 +74,73 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-app:fi
margin-right: 8px;
}
.ui-rangeslider label.ui-slider,
- .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first,
- .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last,
- .ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first,
- .ui-field-contain.ui-hide-label .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last,
+ .ui-rangeslider input.ui-slider-input.ui-rangeslider-first,
+ .ui-rangeslider input.ui-slider-input.ui-rangeslider-last,
.ui-rangeslider .ui-rangeslider-dash {
float: none;
display: inline-block;
- margin-bottom: 1em;
+ margin-bottom: .8em;
}
.ui-rangeslider .ui-rangeslider-dash {
padding: .4em;
font-size: 14px;
line-height: 1.4;
}
- .ui-rangeslider .ui-rangeslider-sliders,
- .ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders {
- margin: 0 15px .5em 15px;
+ .ui-rangeslider .ui-rangeslider-sliders {
+ margin-left: 15px;
+ margin-right: 15px;
}
- .ui-rangeslider.ui-mini .ui-rangeslider-sliders,
- .ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- margin: 0 8px .25em 8px;
+ .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
+ margin-left: 8px;
+ margin-right: 8px;
}
}
@media all and (min-width: 28em){
- .ui-field-contain .ui-rangeslider {
- vertical-align: middle;
- font-size: 0;
- }
- .ui-field-contain .ui-rangeslider input.ui-input-text.ui-slider-input {
- position: relative;
- z-index: 1;
- }
- .ui-field-contain .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-first {
- display: inline-block;
- float: left;
+ .ui-field-contain .ui-rangeslider label.ui-slider {
+ float:left;
}
- .ui-field-contain .ui-rangeslider input.ui-input-text.ui-slider-input.ui-rangeslider-last {
- display: inline-block;
- margin-left: 30px;
- float:right;
+ .ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input.ui-rangeslider-first {
+ margin-right: 16px;
}
- .ui-field-contain .ui-rangeslider.ui-mini input.ui-input-text.ui-slider-input.ui-rangeslider-last {
- margin-left: 16px;
- }
- .ui-field-contain .ui-rangeslider label {
- float:left;
+ .ui-field-contain .ui-rangeslider input.ui-slider-input.ui-rangeslider-last,
+ .ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input.ui-rangeslider-last {
+ margin-right: 0;
}
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders {
float: left;
width: 78%;
- margin-left: -58px;
- margin-right: -100px;
+ margin-left: -89px;
+ margin-right: -89px;
}
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- margin-left: -58px;
- margin-right: -80px;
+ margin-left: -75px;
+ margin-right: -75px;
+ }
+ .ui-field-contain .ui-rangeslider .ui-slider-track {
+ right: 89px;
+ left: 89px;
+ }
+ .ui-field-contain .ui-rangeslider.ui-mini .ui-slider-track {
+ right: 75px;
+ left: 75px;
+ }
+ .ui-field-contain.ui-hide-label .ui-rangeslider input.ui-slider-input.ui-rangeslider-first,
+ .ui-field-contain.ui-hide-label .ui-rangeslider input.ui-slider-input.ui-rangeslider-last {
+ margin: 0;
}
- .ui-field-contain .ui-rangeslider .ui-slider-app {
- right: 88px;
- left: 88px;
- font-size: 16px;
+ .ui-field-contain.ui-hide-label .ui-rangeslider .ui-rangeslider-sliders,
+ .ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
+ width: auto;
+ float: none;
+ margin: 0 89px;
+ }
+ .ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
+ margin: 0 75px;
}
- .ui-field-contain .ui-rangeslider.ui-mini .ui-slider-app {
- right: 74px;
- left: 74px;
+ .ui-field-contain.ui-hide-label .ui-rangeslider .ui-slider-track,
+ .ui-field-contain.ui-hide-label .ui-rangeslider.ui-mini .ui-slider-track {
+ right: 0;
+ left: 0;
}
}
View
2 js/widgets/forms/rangeslider.js
@@ -101,7 +101,7 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
_slidebeforestart: function( event ) {
this.sliderTarget = false;
//if the track is the target remember this and the original value
- if ( $( event.originalEvent.target ).hasClass( "ui-slider-app" ) ) {
+ if ( $( event.originalEvent.target ).hasClass( "ui-slider-track" ) ) {
this.sliderTarget = true;
this.targetVal = $( event.target ).val();
}

0 comments on commit 96bf6fc

Please sign in to comment.