vui-design/src/style/components/slider.less

A high quality UI Toolkit based on Vue.js

@vui-slider: ~"@{vui}-slider";

.@{vui-slider} {
	position:relative;
	display:block;
	box-sizing:border-box;
	color:@slider-font-color;
	font-size:@slider-font-size;
	line-height:@slider-line-height;
	touch-action:none;

	&-track {
		position:absolute;
		cursor:pointer;
		display:block;
		box-sizing:border-box;
		border-radius:@slider-track-border-radius;
		background-color:@slider-track-background-color;
		overflow:hidden;
		transition:background-color @transition-duration @transition-timing-function;

		&-bar {
			position:absolute;
			display:block;
			box-sizing:border-box;
			border-radius:@slider-track-bar-border-radius;
			background-color:@slider-track-bar-background-color;
			transition:background-color @transition-duration @transition-timing-function;
		}
	}

	&-steps {
		position:absolute;
		display:block;
		box-sizing:border-box;
		background-color:transparent;
		pointer-events:none;

		&-item {
			position:absolute;
			display:block;
			box-sizing:border-box;
			width:@slider-step-item-size;
			height:@slider-step-item-size;
			border:@slider-step-item-border-width solid @slider-step-item-border-color;
			border-radius:50%;
			background-color:@slider-step-item-background-color;

			&-active {
				border-color:@slider-step-item-active-border-color;
			}
		}
	}

	&-marks {
		position:absolute;
		display:block;
		box-sizing:border-box;
		background-color:transparent;
		pointer-events:none;

		&-item {
			position:absolute;
			cursor:pointer;
			display:block;
			box-sizing:border-box;
			color:@slider-mark-item-font-color;
			font-size:@slider-mark-item-font-size;
			text-align:center;
			pointer-events:auto;

			&-active {
				color:@slider-mark-item-active-font-color;
			}
		}
	}

	&-dragger-wrapper {
		position:absolute;
		z-index:1;
		cursor:pointer;
		display:block;
		box-sizing:border-box;
		border-radius:50%;

		.@{vui}-tooltip {
			display:block;
		}

		&-dragging {
			z-index:2;
		}
	}

	&-dragger {
		cursor:pointer;
		display:block;
		box-sizing:border-box;
		width:@slider-dragger-size;
		height:@slider-dragger-size;
		border:@slider-dragger-border-width solid @slider-dragger-border-color;
		border-radius:50%;
		background-color:@slider-dragger-background-color;
		box-shadow:none;
		appearance:none;
		outline:none;
		transition:all @transition-duration @transition-timing-function;

		&:hover {
			border-color:@slider-dragger-hover-border-color
		}

		&:focus {
			border-color:@slider-dragger-focus-border-color;
			box-shadow:@slider-dragger-focus-box-shadow;
		}
	}

	&-horizontal {
		height:@slider-size;
		margin:0 4px;
		padding:4px 0;
	}
	&-horizontal &-track {
		left:0;
		width:100%;
		height:4px;

		&-bar {
			top:0;
			bottom:0;
		}
	}
	&-horizontal &-steps {
		left:0;
		width:100%;
		height:4px;

		&-item {
			top:-2px;
			margin-left:-4px;
		}
	}
	&-horizontal &-marks {
		left:0;
		width:100%;
		height:4px;

		&-item {
			top:12px;
			transform:translateX(-50%);
		}
	}
	&-horizontal &-dragger-wrapper {
		margin-top:-4px;
		transform:translateX(-50%);
	}

	&-vertical {
		width:@slider-size;
		margin:4px 0;
		padding:0 4px;
	}
	&-vertical &-track {
		bottom:0;
		width:4px;
		height:100%;

		&-bar {
			left:0;
			right:0;
		}
	}
	&-vertical &-steps {
		bottom:0;
		width:4px;
		height:100%;

		&-item {
			left:-2px;
			margin-bottom:-4px;
		}
	}
	&-vertical &-marks {
		bottom:0;
		width:4px;
		height:100%;

		&-item {
			left:12px;
			transform:translateY(50%);
		}
	}
	&-vertical &-dragger-wrapper {
		margin-left:-4px;
		transform:translateY(50%);
	}

	&-disabled &-track {
		cursor:not-allowed;

		&-bar {
			background-color:@slider-track-bar-disabled-background-color;
		}
	}
	&-disabled &-steps {
		&-item {
			border-color:@slider-step-item-disabled-border-color;

			&-active {
				border-color:@slider-step-item-active-disabled-border-color;
			}
		}
	}
	&-disabled &-marks {
		&-item {
			cursor:not-allowed;
			color:@slider-mark-item-disabled-font-color;

			&-active {
				color:@slider-mark-item-active-disabled-font-color;
			}
		}
	}
	&-disabled &-dragger {
		cursor:not-allowed;
		border-color:@slider-dragger-disabled-border-color;

		&:hover {
			border-color:@slider-dragger-hover-disabled-border-color;
		}

		&:focus {
			border-color:@slider-dragger-focus-disabled-border-color;
			box-shadow:@slider-dragger-focus-disabled-box-shadow;
		}
	}
}