Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Slider & Rangeslider: margin adjustments

  • Loading branch information...
commit 391fa98f258fcef5ea6888419d3c40ed96293f2b 1 parent a067c40
Jasper de Groot jaspermdegroot authored
28 css/structure/jquery.mobile.forms.rangeslider.css
View
@@ -13,6 +13,9 @@
.ui-rangeslider label.ui-slider {
margin-bottom: 0;
}
+.ui-field-contain .ui-rangeslider label.ui-slider {
+ margin-bottom: .4em;
+}
/* 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;
@@ -33,11 +36,10 @@
.ui-rangeslider.ui-mini .ui-rangeslider-sliders {
margin: .25em 75px .25em 75px;
}
-.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input {
- margin-top: 0;
-}
+.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 {
@@ -77,11 +79,13 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:
margin-right: 8px;
}
.ui-rangeslider label.ui-slider,
+ .ui-field-contain .ui-rangeslider label.ui-slider,
.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: 0;
}
.ui-rangeslider .ui-rangeslider-dash {
margin: 0 2px 0 5px;
@@ -89,13 +93,13 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:
font-size: 14px;
line-height: 1.4;
}
- .ui-rangeslider .ui-rangeslider-sliders {
- margin-left: 15px;
- margin-right: 15px;
+ .ui-rangeslider .ui-rangeslider-sliders,
+ .ui-field-contain .ui-rangeslider .ui-rangeslider-sliders {
+ margin: 1em 15px 0 15px;
}
- .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- margin-left: 8px;
- margin-right: 8px;
+ .ui-rangeslider.ui-mini .ui-rangeslider-sliders,
+ .ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
+ margin: 1em 8px 0 8px;
}
}
@@ -113,12 +117,10 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders {
float: left;
width: 78%;
- margin-left: -89px;
- margin-right: -89px;
+ margin: 0 -89px 0 -89px;
}
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
- margin-left: -75px;
- margin-right: -75px;
+ margin: 0 -75px 0 -75px;
}
.ui-field-contain .ui-rangeslider .ui-slider-track {
right: 89px;
20 css/structure/jquery.mobile.forms.slider.css
View
@@ -19,6 +19,9 @@ label.ui-slider {
.ui-slider label.ui-slider {
margin-bottom: 0;
}
+.ui-field-contain .ui-slider label.ui-slider {
+ margin-bottom: .4em;
+}
/* High level of specificity to override Textinput CSS. Input always mini sized.
Margin-top/bottom: .5em * 16px/14px to make it equal to ui-slider-contain margin */
input.ui-input-text.ui-slider-input {
@@ -51,11 +54,10 @@ input.ui-input-text.ui-slider-input {
margin: .25em 0;
}
.ui-field-contain input.ui-slider-input,
-.ui-field-contain .ui-slider.ui-mini input.ui-slider-input {
- margin-top: 0;
-}
+.ui-field-contain .ui-slider.ui-mini input.ui-slider-input,
.ui-field-contain .ui-slider-contain,
.ui-field-contain .ui-slider.ui-mini .ui-slider-contain {
+ margin-top: 0;
margin-bottom: 0;
}
/* Margin-left: 59px for the input width incl. padding and border, 30px slider handle width incl. border is actual margin. */
@@ -191,9 +193,16 @@ div.ui-slider-switch {
margin-right: 8px;
}
.ui-slider label.ui-slider,
+ .ui-field-contain .ui-slider label.ui-slider,
.ui-slider input.ui-slider-input {
float: none;
display: inline-block;
+ margin-bottom: 0;
+ }
+ .ui-slider-contain,
+ .ui-field-contain .ui-slider-contain,
+ .ui-field-contain .ui-slider.ui-mini .ui-slider-contain {
+ margin-top: 1em;
}
.ui-slider .ui-slider-track {
margin-left: 15px;
@@ -228,11 +237,10 @@ div.ui-slider-switch {
.ui-field-contain .ui-slider-contain {
float: left;
width: 78%;
- margin-left: -104px;
- margin-right: 0;
+ margin: 0 0 0 -104px;
}
.ui-field-contain .ui-slider.ui-mini .ui-slider-contain {
- margin-left: -83px;
+ margin: 0 0 0 -83px;
}
.ui-field-contain .ui-slider .ui-slider-track {
right: 89px;
Please sign in to comment.
Something went wrong with that request. Please try again.