react-colorscales/src/lib/components/ColorscalePicker.css

A React component for picking colorscales based on Chroma.js

.colorscalePickerContainer {
	max-height: 550px;
	overflow-y: scroll;
    overflow-x: hidden;
	max-width: 700px;
	width: 400px;
    min-width: 300px;
	margin: 5px;
	background: rgba(242,245,250,0.9);
	border: 1px solid #C8D4E3;
    position: absolute;
    z-index: 99;
    resize: horizontal;
    font-family: Helvetica, sans-serif;
}

.colorscalePickerContainer::-webkit-scrollbar {
    width: 8px;
    background-color: #DFE8F3;
}

.colorscalePickerContainer::-webkit-scrollbar-thumb {
    background-color: #A2B1C6;
}

.colorscalePickerContainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
    background-color: #DFE8F3;
}

.textLabel {	
	color: rgb(80, 103, 132); 
	font-size: 12px;
	vertical-align: top;
    font-weight: 600;
    text-transform: uppercase;
}

.spaceRight { margin-right: 5px; }
.spaceRightZeroTop { margin-right: 5px; margin-top: 0 }
.spaceLeft { margin-left: 5px; }
.spaceTop { margin-top: 5px; }
.alignMiddle { vertical-align: middle; }
.alignTop { vertical-align: top; }
.zeroSpace { margin: 0; }
.noWrap { white-space: nowrap; }
.inlineBlock { display: inline-block; }

.colorscalePickerTopContainer {
	padding: 10px;
	min-height: 100px; 
	height: 80%;
}

.colorscalePickerBottomContainer {
	min-height: 100px;
	textAlign: center;
}

.colorscalePickerBottomContainer p {
	width: 80%;
	font-size: 13px;
	color: #506784;
	border: 1px solid #C8D4E3;
	margin: 20px auto;
    margin-top: 0;
	padding: 10px;
	border-radius: 2px;
	text-align: left;
	line-height: 1.4em;
}

.colorscaleControlPanel {
	display: block;
	padding: 20px;
	width: 80%;
	margin: 0 auto;
}

input[type=range] {
	width: 200px;
}

input[type=number] {
    vertical-align: top;
    margin-top: -4px;
    margin-right: 5px;
}

input[type=text] {
	text-align: center;
	font-size: 12px;
	width: 90%;
	margin-top: 5px;
	padding: 5px;
	border: 1px solid #DFE8F3;
}

.colorscaleControlsRow {
	margin-top: 20px;
}

.colorscaleControlsRow div {
	display: inline;
}

.colorscaleButton {
	text-transform: uppercase;
	border-radius: 0;
	padding: 8px 10px;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	margin: 2px;
	cursor: pointer;
	border-radius: 3px;
    display: inline-block;
    background-color: #C8D4E3;
}

.colorscaleButton:hover {
    background-color: #2a3f5f;
}

.rc-slider {
    width: 300px;
}

.rc-slider-tooltip {
    opacity: 1;
    z-index: 999;
    font-family: Helvetica, sans-serif;
}

.rc-slider-rail {
    background-color: #A2B1C6;
}