feat(colors): add bg-glow-5 color

[#82074870] Signed-off-by: Nigel Pepper <npepper@pivotal.io>
pivotal-cf · Nov 11, 2014 · 7b2af14 · 7b2af14
1 parent 114fbc6
commit 7b2af14
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/pivotal-ui/components/colors.scss b/src/pivotal-ui/components/colors.scss
@@ -115,7 +115,7 @@ $tabs-active-bg-color: $gray-2;
       </div>
     </div>
   </div>
-  <div class="col-md-3">
+  <div class="col-md-2">
     <div class="chip">
       <div class="chip-color bg-neutral-8"></div>
       <div class="chip-color-name">
@@ -127,7 +127,7 @@ $tabs-active-bg-color: $gray-2;
       </div>
     </div>
   </div>
-  <div class="col-md-3">
+  <div class="col-md-2">
     <div class="chip">
       <div class="chip-color bg-neutral-9"></div>
       <div class="chip-color-name">
@@ -572,54 +572,60 @@ parent: color
 <div class="row">
 <div class="contrast-bar">
   <div class="row mvxl">
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-shadow-1"></div>
         <div class="chip-color-name">$shadow-1</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-shadow-2"></div>
         <div class="chip-color-name">$shadow-2</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-shadow-3"></div>
         <div class="chip-color-name">$shadow-3</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-shadow-4"></div>
         <div class="chip-color-name">$shadow-4</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-glow-1"></div>
         <div class="chip-color-name">$glow-1</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-glow-2"></div>
         <div class="chip-color-name">$glow-2</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-glow-3"></div>
         <div class="chip-color-name">$glow-3</div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <div class="chip">
         <div class="chip-color bg-glow-4"></div>
         <div class="chip-color-name">$glow-4</div>
       </div>
     </div>
+    <div class="col-md-2">
+      <div class="chip">
+        <div class="chip-color bg-glow-5"></div>
+        <div class="chip-color-name">$glow-5</div>
+      </div>
+    </div>
   </div>
 </div>
 </div>
@@ -644,6 +650,10 @@ parent: color
   background-color: $glow-4;
 }
 
+.bg-glow-5 {
+  background-color: $glow-5;
+}
+
 .bg-shadow-1{
   background-color: $shadow-1;
 }

diff --git a/src/pivotal-ui/components/variables.scss b/src/pivotal-ui/components/variables.scss
@@ -47,6 +47,7 @@ $glow-1 : rgba(255,255,255,0.1);
 $glow-2 : rgba(255,255,255,0.2);
 $glow-3 : rgba(255,255,255,0.4);
 $glow-4 : rgba(255,255,255,0.6);
+$glow-5 : rgba(255,255,255,1);
 
 // Blue
 // -------------------------