feat(clay-css): Range added tooltip and fix styles in IE11

liferay · Aug 21, 2019 · a9e6137 · a9e6137
1 parent 142700f
commit a9e6137
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 72 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_range.scss b/packages/clay-css/src/scss/atlas/variables/_range.scss
@@ -7,10 +7,12 @@ $clay-range-input-group-text: map-merge((
 
 $clay-range-input: () !default;
 $clay-range-input: map-merge((
-	form-control-color: $gray-500,
+	color: $gray-500,
 	thumb-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
 	track-bg: $gray-200,
+	tooltip-padding: 0.5rem 0.75rem,
+	tooltip-top-position-top: -57px,
 	hover-thumb-bg: $primary-l3,
-	focus-thumb-box-shadow: $btn-focus-box-shadow,
+	focus-thumb-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem $white,
 	disabled-thumb-bg: $gray-100,
 ), $clay-range-input);
diff --git a/packages/clay-css/src/scss/components/_range.scss b/packages/clay-css/src/scss/components/_range.scss
@@ -1,4 +1,6 @@
 .clay-range {
+	padding-bottom: 0.1px;
+
 	.input-group {
 		@include clay-container($clay-range-input-group);
 	}

diff --git a/packages/clay-css/src/scss/components/_tooltip.scss b/packages/clay-css/src/scss/components/_tooltip.scss
@@ -2,6 +2,12 @@
 	@include box-shadow($tooltip-box-shadow);
 }
 
+.tooltip-arrow {
+	background-color: $tooltip-bg;
+	position: absolute;
+	transform: rotate(45deg);
+}
+
 // Tooltip Positions
 
 .clay-tooltip-bottom,
@@ -64,6 +70,13 @@
 			bottom: 0;
 		}
 	}
+
+	.tooltip-arrow {
+		border-bottom-color: transparent;
+		border-right-color: transparent;
+		left: 50%;
+		top: 0;
+	}
 }
 
 // Left
@@ -84,6 +97,13 @@
 			left: 0;
 		}
 	}
+
+	.tooltip-arrow {
+		border-bottom-color: transparent;
+		border-left-color: transparent;
+		right: 0;
+		top: 50%;
+	}
 }
 
 // Right
@@ -104,6 +124,13 @@
 			right: 0;
 		}
 	}
+
+	.tooltip-arrow {
+		border-right-color: transparent;
+		border-top-color: transparent;
+		left: 0;
+		top: 50%;
+	}
 }
 
 // Top
@@ -122,4 +149,11 @@
 			top: 0;
 		}
 	}
+
+	.tooltip-arrow {
+		border-left-color: transparent;
+		border-top-color: transparent;
+		bottom: 0;
+		left: 50%;
+	}
 }