Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-reviews   php

Repository URL to install this package:

Version: 2.1.0 

/ modules / interface-builder / assets / scss / controls / _slider.scss


.cx-slider-wrap{
	display: flex;
	flex-wrap: wrap;

	.cx-slider-input{
		flex: 0 1 10%;
		min-width: 100px;
		max-width: 200px;
	}

	.cx-slider-holder{
		flex: 0 1 90%;
		min-width: 200px;
		max-width: 300px;
		margin-right: 10px;
			input[type=range] {
				-webkit-appearance: none;
				width: 100%;
				margin: 10px 0;
			}
			input[type=range]:focus {
				outline: none;
			}
			input[type=range]::-webkit-slider-runnable-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: #a4afb7;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-webkit-slider-thumb {
				box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
				height: 16px;
				width: 16px;
				margin-top: -6px;
				border-radius: 15px;
				background: white;
				cursor: pointer;
				-webkit-appearance: none;
				transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
			}
			input[type=range]:focus::-webkit-slider-runnable-track {
				background: #a4afb7;
			}
			input[type=range]::-moz-range-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: #a4afb7;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-moz-range-thumb {
				box-shadow: none;
				border: none;
				height: 16px;
				width: 16px;
				border-radius: 15px;
				background: #a4afb7;
				cursor: pointer;
			}
			input[type=range]::-ms-track {
				width: 100%;
				height: 10px;
				cursor: pointer;
				background: $grey_color_3;
				border-color: transparent;
				color: transparent;
			}
			input[type=range]::-ms-fill-lower {
				background: $grey_color_3;
				border: none;
				border-radius: 50px;
				box-shadow: none;
			}
			input[type=range]::-ms-fill-upper {
				background: $green_color;
				border: none;
				border-radius: 50px;
				box-shadow: none;
			}
			input[type=range]::-ms-thumb {
				box-shadow: none;
				border: none;
				height: 10px;
				width: 10px;
				border-radius: 15px;
				background: #495159;
				cursor: pointer;
			}
			input[type=range]:focus::-ms-fill-lower {
				background: $grey_color_3;
			}
			input[type=range]:focus::-ms-fill-upper {
				background: $green_color;
			}
	}
	.cx-input{
		margin: 0;
		width: 100%;
	}
}