fix css for vertical floats on sliders

simeydotme · Nov 22, 2013 · d8ad4da · d8ad4da
1 parent e7da19e
commit d8ad4da
Showing 1 changed file with 88 additions and 3 deletions.
diff --git a/src/css/jquery-ui-slider-pips.css b/src/css/jquery-ui-slider-pips.css
@@ -20,7 +20,7 @@
 	.ui-slider-pip:hover .ui-slider-label { color: black; font-weight: bold; }
 
 
-
+	/* vertical pips */
 
 	.ui-slider-vertical.ui-slider-pips { margin-bottom: 0; margin-right: 2em; }
 	.ui-slider-vertical.ui-slider-pips .ui-slider-pip { 
@@ -114,10 +114,95 @@
 		border: 5px solid rgba(255,255,255,0);
 		border-bottom-color: rgba(255,255,255,1);
 		top: -10px; 
-	  }
+	}
+
 	.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
 		border: 5px solid rgba(255,255,255,0);
 		border-bottom-color: #888;
 		top: -11px; 
-	  }
+	}
+
+
+
+	 /* vertical floats */
 
+	.ui-slider-vertical.ui-slider-float .ui-slider-tip,
+	.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
+
+		top: 50%; margin-top: -11px;width: 34px; 
+		margin-left: 0px; left: -70px;
+		color: #333;
+
+		-webkit-transition-duration: 200ms, 200ms, 0;
+		-webkit-transition-property: opacity, left, visibility;
+		-webkit-transition-delay: 0, 0, 200ms;
+		-moz-transition-duration: 200ms, 200ms, 0;
+		-moz-transition-property: opacity, left, visibility;
+		-moz-transition-delay: 0, 0, 200ms;
+		-ms-transition-duration: 200ms, 200ms, 0;
+		-ms-transition-property: opacity, left, visibility;
+		-ms-transition-delay: 0, 0, 200ms;
+		transition-duration: 200ms, 200ms, 0;
+		transition-property: opacity, left, visibility;
+		transition-delay: 0, 0, 200ms;
+
+	}
+
+
+
+	.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+	.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label { 
+
+		top: 50%; margin-top: -11px; left: -50px;
+
+		-webkit-transition-duration:200ms, 200ms, 0;
+		-webkit-transition-property: opacity, left, visibility;
+		-webkit-transition-delay:200ms, 200ms, 0;
+		-moz-transition-duration:200ms, 200ms, 0;
+		-moz-transition-property: opacity, left, visibility;
+		-moz-transition-delay:200ms, 200ms, 0;
+		-ms-transition-duration:200ms, 200ms, 0;
+		-ms-transition-property: opacity, left, visibility;
+		-ms-transition-delay:200ms, 200ms, 0;
+		transition-duration:200ms, 200ms, 0;
+		transition-property: opacity, left, visibility;
+		transition-delay:200ms, 200ms, 0;
+
+
+	}
+
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label { left: 47px; }
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label { left: 27px; }
+
+
+	.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+		border: 5px solid rgba(255,255,255,0);
+		border-left-color: rgba(255,255,255,1);
+		border-top-color: transparent;
+		position: absolute;
+		bottom: 50%; margin-bottom: -5px; right: -10px; margin-left: 0; 
+		top: auto; left: auto;
+	}
+	.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+		border: 5px solid rgba(255,255,255,0);
+		border-left-color: #888;
+		border-top-color: transparent;
+		position: absolute;
+		bottom: 50%; margin-bottom: -5px; right: -11px; margin-left: 0; 
+		top: auto; left: auto;
+	}
+
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+		border: 5px solid rgba(255,255,255,0);
+		border-right-color: rgba(255,255,255,1);
+		right: auto; left: -10px;
+	}
+
+	.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+		border: 5px solid rgba(255,255,255,0);
+		border-right-color: #888;
+		right: auto; left: -11px;
+	}