leaflet-handy-controls/src/leaflet-handy-controls.less

a leaflet extension containing a collection of useful controls

/* ************************************************************************** */
/* leaflet-handy-controls                                                     */
/* http://github.com/jefferey/leaflet-handy-controls                          */
/*                                                                            */
/* Author: Jeff Smith [ www.jeffereysmith.com ]                               */
/* License: MIT License                                                       */
/* ************************************************************************** */

@toggled-color: #3e84c1;
@track-color: #aaa;
@track-focus-color: #ccc;

.handy-toggle-button {
	background-color: #fff;
	color: #000;
	min-width: 26px;
	min-height: 26px;
	line-height: 18px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	padding: 4px;
	
	float: left;

	&.toggled-on {
		background-color: @toggled-color;
		color: #fff;
	}
}

.handy-slider-container {
	padding: 3px;
	border-radius: 4px;
	float: left;
	display: block;

	input[type=range]::-webkit-slider-runnable-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
		background: @track-color;
		border-radius: 1.3px;
		border: 0.2px solid #010101;
	}
	input[type=range]::-webkit-slider-thumb {
		box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
		border: 1px solid #000000;
		height: 18px;
		width: 12px;
		border-radius: 3px;
		background: #ffffff;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -6.2px;
	}
	input[type=range]:focus::-webkit-slider-runnable-track {
		background: @track-focus-color;
	}
	input[type=range]::-moz-range-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
		background: @track-color;
		border-radius: 1.3px;
		border: 0.2px solid #010101;
	}
	input[type=range]::-moz-range-thumb {
		box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
		border: 1px solid #000000;
		height: 18px;
		width: 12px;
		border-radius: 3px;
		background: #ffffff;
		cursor: pointer;
	}
	input[type=range]::-ms-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		background: transparent;
		border-color: transparent;
		color: transparent;
	}
	input[type=range]::-ms-fill-lower {
		background: @track-color;
		border: 0.2px solid #010101;
		border-radius: 2.6px;
		box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range]::-ms-fill-upper {
		background: @track-color;
		border: 0.2px solid #010101;
		border-radius: 2.6px;
		box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range]::-ms-thumb {
		box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
		border: 1px solid #000000;
		height: 18px;
		width: 12px;
		border-radius: 3px;
		background: #ffffff;
		cursor: pointer;
		height: 12px;
	}
	input[type=range]:focus::-ms-fill-lower {
		background: @track-focus-color;
	}
	input[type=range]:focus::-ms-fill-upper {
		background: @track-focus-color;
	}

	input[type=range]:focus {
		outline: none;
	}
}

.handy-group {
	.handy-slider-container {
		display: none;
		background-color: @toggled-color;
	}

	&:hover {
		.handy-toggle-button.toggled-on {
			border-radius: 4px 0px 0px 4px;

			& + .handy-slider-container {
				display: block;
				background-color: @toggled-color;
				border-radius: 0px 4px 4px 0px;
			}
		}
	}
}