Build out CMY controls for lighting

app/css/app.css

@@ -97,9 +97,20 @@ footer {
   left: -8px;
   font-size: 27px;
 }
+#kelvin-preview {
+  margin-top: 25px;
+  width: 350px;
+  height: 60px;
+  border: 1px solid #fff;
+  text-align: center;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  line-height: 60px;
+  color: #272b30;
+}
 #dial-c {
-  margin-top: 85px;
   margin-left: 15px;
+  margin-top: 85px;
 }
 #dial-c .dial-wedge,
 #dial-c .dial-marker {
@@ -110,8 +121,8 @@ footer {
   border-color: #00FFFF;
 }
 #dial-m {
-  margin-top: 85px;
   margin-left: 105px;
+  margin-top: 85px;
 }
 #dial-m .dial-wedge,
 #dial-m .dial-marker {
@@ -122,8 +133,8 @@ footer {
   border-color: #FF00FF;
 }
 #dial-y {
-  margin-top: 85px;
   margin-left: 195px;
+  margin-top: 85px;
 }
 #dial-y .dial-wedge,
 #dial-y .dial-marker {
@@ -133,6 +144,22 @@ footer {
   color: #FFFF00;
   border-color: #FFFF00;
 }
+#dial-k {
+  margin-left: 285px;
+  margin-top: 85px;
+}
+#dial-k .dial-wedge,
+#dial-k .dial-marker {
+  background: #000;
+}
+#dial-k input {
+  color: #000;
+  border-color: #000;
+}
+#dial-k input {
+  color: #fff;
+  border-color: #fff;
+}
 .dial-wrapper {
   position: absolute;
   width: 5.5em;
@@ -151,7 +178,7 @@ footer {
 .dial-wrapper input {
   margin-top: 6em;
   width: 4.5em;
-  margin-left: 1em;
+  margin-left: 0.5em;
   background: #272b30;
   border: 1px solid;
   text-align: center;
@@ -196,25 +223,19 @@ footer {
   transform: rotateZ(360deg);
   transform-origin: 50% 2.75em;
 }
-/*@keyframes rotate-bg-1 {
+#cmy-preview {
-  50%, 100% {
+  position: absolute;
-    transform: rotateZ(180deg);
+  margin-top: 220px;
+  margin-left: 15px;
+  width: 350px;
+  height: 60px;
+  border: 1px solid #fff;
+  text-align: center;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  line-height: 60px;
+  color: #272b30;
 }
-}
-@keyframes rotate-bg-2 {
-  0%, 50% {
-    transform: rotateZ(0);
-  }
-  100% {
-    transform: rotateZ(180deg);
-  }
-}
-@keyframes rotate-marker {
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-*/
 .mcopy-light {
   background: #000;
   width: 15px;

app/css/app.less

@@ -151,48 +151,55 @@ footer{
     }
 }
 
+#kelvin-preview {
+	margin-top: 25px;
+	width: 350px;
+    height: 60px;
+	border: 1px solid @COMMON;
+	text-align: center;
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	line-height: 60px;
+	color: @BG;
+}
+
 @dial_size : 5.5em;
 @dial_thickness : 0.5em;
 @dial_cyan : #00FFFF;
 @dial_magenta : #FF00FF;
 @dial_yellow : #FFFF00;
+@dial_black : #000;
 @dial_left : 15px;
 @dial_spacing : 90px;
 
-#dial-c {
+.dial-class (@color, @i) {
+	margin-left: @dial_left + (@dial_spacing * @i);
 	margin-top: 85px;
-	margin-left: @dial_left;
 	.dial-wedge,
 	.dial-marker{
-		background: @dial_cyan;
+		background: @color;
 	}
 	input{
-		color: @dial_cyan;
+		color: @color;
-		border-color: @dial_cyan;
+		border-color: @color;
 	}
 }
+
+#dial-c {
+	.dial-class(@dial_cyan, 0);
+
+}
 #dial-m {
-	margin-top: 85px;
+	.dial-class(@dial_magenta, 1);
-	margin-left: @dial_left + @dial_spacing;
-	.dial-wedge, 
-	.dial-marker{
-		background: @dial_magenta;
-	}
-	input{
-		color: @dial_magenta;
-		border-color: @dial_magenta;
-	}
 }
 #dial-y {
-	margin-top: 85px;
+	.dial-class(@dial_yellow, 2);
-	margin-left: @dial_left + (@dial_spacing * 2);
-	.dial-wedge, 
-	.dial-marker{
-		background: @dial_yellow;
 }
+#dial-k {
+	.dial-class(@dial_black, 3);
 	input{
-		color: @dial_yellow;
+		color: #fff;
-		border-color: @dial_yellow;
+		border-color: #fff;
 	}
 }
 
@@ -213,7 +220,7 @@ footer{
 	input{
 		margin-top: @dial_size + 0.5em;
 	    width: @dial_size - 1em;
-		margin-left: 1em;
+		margin-left: 0.5em;
 		background: @BG;
 		border: 1px solid;
 		text-align: center;
@@ -259,25 +266,19 @@ footer{
   transform: rotateZ(360deg);
   transform-origin: 50% @dial_size / 2;
 }
-/*@keyframes rotate-bg-1 {
+#cmy-preview {
-  50%, 100% {
+	position: absolute;
-    transform: rotateZ(180deg);
+    margin-top: 220px;
+    margin-left: 15px;
+	width: 350px;
+    height: 60px;
+	border: 1px solid @COMMON;
+	text-align: center;
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	line-height: 60px;
+	color: @BG;
 }
-}
-@keyframes rotate-bg-2 {
-  0%, 50% {
-    transform: rotateZ(0);
-  }
-  100% {
-    transform: rotateZ(180deg);
-  }
-}
-@keyframes rotate-marker {
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-*/
 
 .mcopy-light{
 	background: #000;

app/index.html

@@ -94,6 +94,10 @@
             <div id="kelvin-slider">
                 <div id="kelvin-scale"></div>
                 <div id="kelvin-pos"></div>
+
+                <div id="kelvin-preview">
+                  rgb(0, 0, 0)
+                </div>
             </div>
           </div>
           <div id="cmy-page" class="colors-page">
@@ -130,6 +134,21 @@
               <div class="dial-marker dial-end"></div>
               <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
             </div>
+            <div id="dial-k" class="dial-wrapper">
+              <div class="dial-container-bg"></div>
+              <div class="dial-container dial-container1">
+                <div class="dial-wedge"></div>
+              </div>
+              <div class="dial-container dial-container2">
+                <div class="dial-wedge"></div>
+              </div>
+              <div class="dial-marker dial-start"></div>
+              <div class="dial-marker dial-end"></div>
+              <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
+            </div>
+            <div id="cmy-preview">
+              rgb(0, 0, 0)
+            </div>
           </div>
           <div id="rgb-page" class="colors-page">
             <input id="rgb" value="rgb(0, 0, 0)" />