analytics/webcontent/bi/js/dashboard-analytics/lib/@waca/dashboard-common/dist/stylesheets/slider.scss

/**
* IBM Confidential
* OCO Source Materials
* IBM Business Platform: Dashboard
* (C) Copyright IBM Corp. 2018, 2020
* The source code for this program is not published or otherwise divested of its trade secrets,
* irrespective of what has been deposited with the U.S. Copyright Office
**/

.slider-container {
	position: relative;
	padding: 38px 25px 45px 25px;
	>div.padding {
		display: block;
		position: relative;
		padding: 0px 0 10px 0;
	}
	.tooltipHandle {
		margin-top: 0px;
		padding: 0;
		z-index: 5;
		.tooltip-inner {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			padding: 0;
			margin-bottom: 10px;
			border-radius: 5px;
			width: 100%;
			>span {
				font-weight: $fw-light;
				padding-left: 5px;
				padding-right: 0;
				&[dir="rtl"] {
					padding-right: 5px;
					padding-left: 0;
				}
			}
			input {
				flex: 1 100%;
				outline: none;
				border: 0;
				padding: 3px;
				text-align: center;
				min-width: 10px; // FF34 sets a 'large' minimum width on inputs. Making it small so it doesn't bleed outside containers.
			}
		}
		.tooltip-arrow {
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			width: 0;
			height: 0;
			margin-top: -10px;
			border-bottom-width: 0;
			border-top-width: 5px;
			border-top-style: solid;
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
		}
	}
	.tooltipHandle.bottom {
		margin-top: 31px;
		.tooltip-inner {
			margin-top: 8px;
		}
		.tooltip-arrow {
			top: 0;
			margin-top: 3px;
			border-top-width: 0;
			border-bottom-width: 5px;
			border-bottom-style: solid;
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
		}
	}
	.slider {
		display: block;
		position: absolute;
		margin: 0;
		padding: 0;
	}
	.slider.slider-horizontal {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.slider.slider-horizontal .slider-track {
		height: 2px;
		width: 100%;
		left: -1px;
		&[dir="rtl"] {
			left: auto;
			right: -1px;
		}
	}
	.slider.slider-horizontal .slider-selection {
		height: 100%;
		top: 0;
		bottom: 0;
	}
	.slider.slider-horizontal .slider-handle {
		margin-left: -10px;
		margin-top: -13px;
		&[dir="rtl"] {
			margin-left: 0px;
			margin-right: -10px;
		}
	}
	.slider.slider-disabled .slider-handle {
		background: none;
		border: 0;
	}
	.slider.slider-disabled .slider-track {}
	.slider .tooltip-inner {
		white-space: nowrap;
	}
	.slider-track {
		position: absolute;
		cursor: pointer;
	}
	.slider-selection {
		cursor: pointer;
		position: absolute;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.slider-handle {
		position: absolute;
		width: 20px;
		height: 20px;
		filter: none;
		-webkit-box-shadow: inset 0 1px 0 $colorWhitealpha20, 0 1px 2px $colorBlackalpha15;
		box-shadow: inset 0 1px 0 $colorWhitealpha20, 0 1px 2px $colorBlackalpha15;
		outline: 1px dotted;
		@include theming(outline, interactive-01);
		@include user-select(none);
	}
	.slider.slider-disabled .slider-handle {
		filter: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.slider-handle.round {
		border-radius: 50%;
	}
	.slider-handle.triangle {
		background: transparent none;
	}
	.hint {
		display: block;
		position: relative;
		padding: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		.minvalue,
		.maxvalue {
			width: 50%;
			float: left;
			display: inline-block;
			font-style: normal;
			font-weight: $fw-light;
			font-size: $body-size-s;
			&[dir="rtl"] {
				float: right;
			}
		}
		.minvalue {
			text-align: left;
			&[dir="rtl"] {
				text-align: right;
			}
		}
		.maxvalue {
			text-align: right;
			&[dir="rtl"] {
				text-align: left;
			}
		}
		.minvalue span,
		.maxvalue span {
			@include theming(color, ui-04);
		}
		.minvalue span {
			text-align: left;
			&[dir="rtl"] {
				text-align: right;
			}
		}
		.maxvalue span {
			text-align: right;
			&[dir="rtl"] {
				text-align: left;
			}
		}
	}
}

.slider-container.disabled {
	opacity: 1;
	cursor: default;
	.slider.slider-disabled .slider-handle {
		@include theming(background-color, disabled-03);
		outline: none;
	}
}

.slider-container.minimized {
	padding: 0;
	>div.padding {
		border: 0;
		padding: 0;
	}
	.slider.slider-horizontal .slider-track {
		height: 4px;
	}
}

// Style: dual
.slider-container.dual {
	padding: 38px 25px 45px 25px;
	>div.padding {
		border: 0;
	}
	.slider {
		margin-top: 12px;
	}
	.tooltipHandle {
		margin-top: -25px;
		padding: 0;
		min-width: 25px;
		.tooltip-inner {
			border-radius: 3px; //border: 1px solid $swatchBlueDark;
			//border-bottom: 2px solid $swatchBlueDark;
			background: $blue40;
			margin-bottom: 0;
			font-size: $caption-size;
			input {
				background-color: transparent;
			}
			&.focus {
				@include theming(background, ui-01);
				border: 1px solid;
				@include theming(border-color, focus);
				@include theming(color, ui-05);
			}
			&.focus span {
				@include theming(color, focus);
			}
		}
		.tooltip-arrow {
			display: none;
			width: 0;
			min-width: 0;
			height: 0;
			min-height: 0;
			border: 0;
		}
	}
	.slider.slider-horizontal .slider-track {
		height: 4px;
	}
	.slider-track {
		@include theming(background-color, ui-03);
	}
	.slider-selection {
		@include theming(background-color, interactive-01);
	}
	.slider.slider-disabled .slider-selection {
		@include theming(background-color, disabled-03);
	}
	.slider-handle {
		top: 17px;
		width: 26px;
		height: 32px;
		filter: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		outline: none;
		z-index: 10;
		background-color: transparent;
		overflow: visible;
		&:active .angle {
			@include theming(border-right-color, interactive-01);
		}
		&:active .box {
			@include theming(background-color, focus);
		}
	}
	.slider-handle .angle {
		position: absolute;
		left: -3px;
		width: 13px;
		border: 0;
		border-top: 10px solid transparent;
		border-right: 13px solid;
		@include theming(border-right-color, ui-03);
		&[dir="rtl"] {
			left: auto;
			right: -3px;
			border-right: none;
			border-left: 13px solid;
			@include theming(border-left-color, ui-03);
		}
	}
	.slider-handle .box {
		position: absolute;
		left: -3px;
		top: 10px;
		width: 13px;
		height: 22px;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
		@include theming(background-color, ui-03);
		&[dir="rtl"] {
			left: auto;
			right: -3px;
		}
	}
	.slider-handle:last-of-type {
		&:active .angle {
			@include theming(border-left-color, interactive-01);
		}
		&:active .box {
			@include theming(background-color, interactive-01);
		}
		.angle {
			left: auto;
			right: 3px;
			border-right: 0;
			border-left: 13px solid;
			@include theming(border-left-color, ui-03);
			&[dir="rtl"] {
				right: auto;
				left: 3px;
				border-left: 0;
				border-right: 13px solid;
				@include theming(border-right-color, ui-03);
			}
		}
		.box {
			left: auto;
			right: 3px;
			&[dir="rtl"] {
				right: auto;
				left: 3px;
			}
		}
	}
	.slider.slider-disabled .slider-handle {
		filter: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.slider-handle.round {
		border-radius: 0;
	}
	.linePanel {
		display: block;
		height: 12px;
		min-height: 12px;
		z-index: 100;
		.lineSegment {
			display: block;
			position: absolute;
			height: 5px;
			padding: 0;
			margin: 0 0 0 0;
			.linkLine {
				display: inline-block;
				position: absolute;
				top: 0;
				width: 0;
				height: 7px;
				min-height: 7px;
				border-width: 0;
				border-bottom-width: 1px;
				border-style: solid;
				@include theming(border-color, link-01);
				padding: 0;
				margin: 0;
				vertical-align: top;
			}
			.linkLine.left {
				border-left-width: 1px;
				margin-left: -1px;
			}
			.linkLine.right {
				border-right-width: 1px;
				margin-left: -1px;
			}
			.linkLine.bottom {
				top: 6px;
				height: 10px;
				min-height: 10px;
			}
		}
		.lineSegment.bottom {
			height: 5px;
		}
	}
}

.dataColumnHeader .slider-handle {
	visibility: hidden;
}

.slider-container.dual.invert {
	.slider {
		.slider-track {
			@include theming(background-color, interactive-01);
		}
		.slider-selection {
			@include theming(background-color, ui-background);
		}
	}
}

// Style: modelling
.slider-container.modelling {
	.slider-track {
		background-color: transparent;
		cursor: default;
	}
	.slider-selection {
		@include theming(background-color, interactive-01);
		cursor: default;
	}
}

.slider-container.modelling.invert .slider {
	.slider-track {
		@include theming(background-color, ui-background);
	}
	.slider-selection {
		@include theming(background-color, ui-01);
	}
}

.slider-container.modelling.indeterminate {
	.slider {
		.slider-selection {
			border-top: 4px dashed;
			@include theming(border-color, interactive-01);
			background-color: transparent;
		}
	}
}

// Style: datastrip
.slider-container.datastrip {
	.slider-track {
		@include theming(background-color, ui-03);
		cursor: default;
	}
	.slider-selection {
		@include theming(background-color, interactive-01);
		cursor: default;
	}
}

.slider-container.datastrip.invert .slider {
	.slider-track {
		@include theming(background-color, interactive-01);
	}
	.slider-selection {
		@include theming(background-color, ui-background);
	}
}

.slider-container.datastrip.indeterminate {
	.slider {
		.slider-selection {
			border-top: 4px dashed;
			@include theming(background-color, ui-background);
			@include theming(border-color, interactive-01);
		}
	}
}

// Style: simple
.slider-container.simple {
	padding-top: 49px;
	>div.padding {
		border-left: 2px solid;
		@include theming(border-left-color, interactive-02);
		@include theming(border-right-color, interactive-02);
	}
	.tooltipHandle {
		top: 11px;
		margin-top: -47px;
		.tooltip-inner {
			@include theming(background-color, ui-background);
		}
		.tooltip-inner {
			>span {
				@include theming(color, interactive-01);
			}
			input {
				@include theming(border-color, interactive-02);
				@include theming(color, text-01);
				background-color: transparent;
				padding: 3px;
			}
		}
		.tooltip-arrow {
			@include theming(border-top-color, ui-03);
		}
	}
	.tooltipHandle.bottom {
		.tooltip-arrow {
			@include theming(border-bottom-color, ui-03);
		}
	}
	.slider {
		.slider-handle {
			@include theming(background-color, interactive-02);
		}
		.slider-track {
			left: 0px;
			height: 10px;
			&[dir="rtl"] {
				left: auto;
				right: 0px;
			}
			.dummy {
				left: 0px;
				width: 100%;
				height: 2px;
				@include theming(background-color, ui-background);
				margin-top: 4px;
				&[dir="rtl"] {
					left: auto;
					right: 0px;
				}
			}
		}
		.slider-horizontal {
			margin-top: 4px;
			.slider-handle {
				margin-top: -9px;
			}
		}
		.slider-handle {
			top: 4px;
		}
	}
}