md-rainbow/src/templates/mdRainbowContainer.html

Continuation of md-color-picker.

<div class="md-rainbow-container in" layout="column">
	<div class="md-rainbow-arrow" ng-style="{'border-bottom-color': color.toRgbString() }"></div>

	<div class="md-rainbow-preview md-rainbow-checkered-bg" ng-class="{'dark': !color.isDark() || color.getAlpha() < .45}" flex="1" layout="column">

		<div class="md-rainbow-result" ng-style="{'background': color.toRgbString()}" flex="100" layout="column" layout-fill layout-align="center center" ng-click="focusPreviewInput( $event )">
			<!--<span flex  layout="column" layout-align="center center">{{value}}</span>-->
			<div flex  layout="row" layout-align="center center">
				<input class="md-rainbow-preview-input" type="text" ng-model="value" ng-focus="previewFocus($event);" ng-blur="previewBlur()" ng-change="changeValue()" ng-keypress="previewKeyDown($event)" layout-fill />
			</div>
			<div class="md-rainbow-tabs" style="width: 100%">
				<md-tabs md-selected="type" md-stretch-tabs="always" md-no-bar md-no-ink md-no-pagination="true" >
					<md-tab ng-if="mdColorHex" label="Hex" ng-disabled="color.getAlpha() !== 1" md-ink-ripple="#ffffff"></md-tab>
					<md-tab ng-if="mdColorRgb" label="RGB"></md-tab>
					<md-tab ng-if="mdColorHsl" label="HSL"></md-tab>
					<!--<md-tab label="HSV"></md-tab>
					<md-tab label="VEC"></md-tab>-->
				</md-tabs>
			</div>
		</div>
	</div>

	<div class="md-rainbow-tabs md-rainbow-colors">
		<md-tabs md-stretch-tabs="always" md-align-tabs="bottom"  md-selected="whichPane" md-no-pagination>
			<md-tab ng-if="mdColorSpectrum">
				<md-tab-label>
					<md-icon md-svg-icon="gradient.svg"></md-icon>
				</md-tab-label>
				<md-tab-body>
					<div layout="row" layout-align="space-between" style="height: 255px">
						<div md-rainbow-spectrum></div>
						<div md-rainbow-hue ng-class="{'md-rainbow-wide': !mdColorAlphaChannel}"></div>
						<div md-rainbow-alpha class="md-rainbow-checkered-bg" ng-if="mdColorAlphaChannel"></div>
					</div>
				</md-tab-body>
			</md-tab>
			<md-tab ng-if="mdColorSliders">
				<md-tab-label>
					<md-icon md-svg-icon="tune.svg"></md-icon>
				</md-tab-label>
				<md-tab-body>
					<div layout="column" flex="100" layout-fill layout-align="space-between start center" class="md-rainbow-sliders">
						<div layout="row" layout-align="start center" layout-wrap flex layout-fill>
							<div flex="10" layout layout-align="center center">
								<span class="md-body-1">R</span>
							</div>
							<md-slider flex="65" min="0" max="255" ng-model="color._r" aria-label="red" class="red-slider"></md-slider>
							<span flex></span>
							<div flex="20" layout layout-align="center center">
								<input style="width: 100%;" min="0" max="255" type="number" ng-model="color._r" aria-label="red" aria-controls="red-slider">
							</div>
						</div>
						<div layout="row" layout-align="start center" layout-wrap flex layout-fill>
							<div flex="10" layout layout-align="center center">
								<span class="md-body-1">G</span>
							</div>
							<md-slider flex="65" min="0" max="255" ng-model="color._g" aria-label="green" class="green-slider"></md-slider>
							<span flex></span>
							<div flex="20" layout layout-align="center center">
								<input style="width: 100%;" min="0" max="255" type="number" ng-model="color._g" aria-label="green" aria-controls="green-slider">
							</div>
						</div>
						<div layout="row" layout-align="start center" layout-wrap flex layout-fill>
							<div flex="10" layout layout-align="center center">
								<span class="md-body-1">B</span>
							</div>
							<md-slider flex="65" min="0" max="255" ng-model="color._b" aria-label="blue" class="blue-slider"></md-slider>
							<span flex></span>
							<div flex="20" layout layout-align="center center" >
								<input style="width: 100%;" min="0" max="255" type="number" ng-model="color._b" aria-label="blue" aria-controls="blue-slider">
							</div>
						</div>
						<div layout="row" layout-align="start center" layout-wrap flex layout-fill ng-if="!mdColorAlphaChannel">
							<div flex="10" layout layout-align="center center">
								<span class="md-body-1">A</span>
							</div>
							<md-slider flex="65" min="0" max="1" step=".01" ng-model="color._a" aria-label="alpha" class="md-primary"></md-slider>
							<span flex></span>
							<div flex="20" layout layout-align="center center" >
								<input style="width: 100%;" min="0" max="1" step=".01" type="number" ng-model="color._a" aria-label="alpha" aria-controls="alpha-slider">
							</div>
						</div>
					</div>
				</md-tab-body>
			</md-tab>
			<md-tab ng-if="mdColorGenericPalette">
				<md-tab-label>
					<md-icon md-svg-icon="view_module.svg"></md-icon>
				</md-tab-label>
				<md-tab-body>
					<div layout="column" layout-align="space-between start center" flex class="md-rainbow-palette">

					</div>
				</md-tab-body>
			</md-tab>
			<md-tab  ng-if="mdColorMaterialPalette">
				<md-tab-label>
					<md-icon md-svg-icon="view_headline.svg"></md-icon>
				</md-tab-label>
				<md-tab-body>
					<div layout="column" layout-fill flex class="md-rainbow-material-palette">

					</div>
				</md-tab-body>
			</md-tab>
			<md-tab ng-if="mdColorHistory">
				<md-tab-label>
					<md-icon md-svg-icon="history.svg"></md-icon>
				</md-tab-label>
				<md-tab-body layout="row" layout-fill>
					<div layout="column" flex layout-align="space-between start" layout-wrap layout-fill class="md-rainbow-history">
						<div layout="row" flex="80" layout-align="space-between start start" layout-wrap  layout-fill>
							<div flex="10" ng-repeat="historyColor in history.get() track by $index">
								<div  ng-style="{'background': historyColor.toRgbString()}" ng-click="setPaletteColor($event)"></div>
							</div>
						</div>


						<md-button flex-end ng-click="history.reset()" class="md-mini" aria-label="Clear History">
							<md-icon md-svg-icon="clear_all.svg"></md-icon>
						</md-button>
					</div>
				</md-tab-body>
			</md-tab>
		</md-tabs>
	</div>

</div>