From b690f5b2bed06ce932b5da0a10ea6761145a6515 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Mon, 29 Apr 2013 16:41:35 -0400
Subject: [PATCH] labels: finishing up work on labels

Former-commit-id: c41bded07319cdbc5158e73d54ee84ed7b7c2500
Former-commit-id: 80d92c3b7a707a13a7106eef74bcf52b0ed37039
---
 docs/label.html         | 193 ++++++++++++++++++++++------------
 src/ui/flat/button.css  |   4 +-
 src/ui/flat/grid.css    |   6 --
 src/ui/flat/label.css   | 228 +++++++++++++++++++++++++++++++++++-----
 src/ui/flat/segment.css |  13 ++-
 5 files changed, 337 insertions(+), 107 deletions(-)

diff --git a/docs/label.html b/docs/label.html
index 87ab0564b..7ece66491 100755
--- a/docs/label.html
+++ b/docs/label.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/grid.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
@@ -164,90 +165,144 @@
   <h2>Standard</h2>
   <div class="example">
     <h4>Label</h4>
+    <p>A basic label</p>
     <div class="ui label">
       Fun
     </div>
-    <div class="ui label">
-      Happy
+  </div>
+  
+  <div class="example">
+    <h4>Linkable Label</h4>
+    <p>If an a tag is used, a label will be formatted as a link</p>
+    <a class="ui label">
+      Fun
+    </a>
+  </div>
+  
+  <div class="example">
+    <h4>Attached Label</h4>
+    <p>A label attached to a content segment</p>
+    <div class="ui two elements">
+      <div class="element">
+        <div class="ui segment">
+          <div class="ui black attached label">New Users</div>
+          <div class="ui fluid form">
+            <div class="two fields">
+              <div class="field">
+                <label>E-mail</label>
+                <input type="text">
+              </div>
+              <div class="field">
+                <label>Username</label>
+                <input type="password">
+              </div>
+            </div>
+            <div class="field">
+              <label>Password</label>
+              <input type="password">
+            </div>
+            <div class="ui blue button">Sign up</div>
+          </div>
+        </div>
+      </div>
+      <div class="element">
+        <div class="ui segment">
+          <div class="ui black attached label">Existing Users</div>
+          <div class="ui fluid form">
+            <div class="field">
+              <label>E-mail</label>
+              <input type="text">
+            </div>
+            <div class="field">
+              <label>Password</label>
+              <input type="password">
+            </div>
+            <div class="ui button">Log in</div>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
+
+  <div class="example">
+    <h4>Label with detail</h4>
+    <p>A tag can optionally display a detail</p>
     <div class="ui label">
-      Smart
+      Fun
+      <div class="detail">New</div>
     </div>
     <div class="ui label">
-      Witty
+      Red
+      <div class="detail">22</div>
     </div>
   </div>
 
   <div class="example">
-    <h4>Numeric tag</h4>
-    <p>A tag can dispaly a count</p>
-    <div class="ui labels">
-      <div class="ui label">
-        Fun
-        <div class="count">22</div>
-      </div>
-      <div class="ui label">
-        Happy
-        <div class="count">44</div>
-      </div>
-      <div class="ui label">
-        Smart
-        <div class="count">52</div>
-      </div>
-      <a class="ui label">
-        Witty
-        <i class="icon close"></i>
-      </a>
+    <h4>Removable label</h4>
+    <p>A tag can also be removable</p>
+    <div class="ui label">
+      Witty
+      <i class="icon close"></i>
     </div>
   </div>
   
 
   <h2>States</h2>
+  <p>Labels only have a single ui state</p>
   
   <h2>Variations</h2>
   <div class="example">
     <h4>Colors</h4>
-    <p>A tag can have different colors</p>
-    <div class="ui green label">
+    <p>A label can have different colors</p>
+    <a class="ui black label">
+      First
+    </a>
+    <a class="ui green label">
       Fun
-    </div>
-    <div class="ui red label">
+    </a>
+    <a class="ui red label">
       Happy
-    </div>
-    <div class="ui blue label">
+    </a>
+    <a class="ui blue label">
       Smart
-    </div>
-    <div class="ui yellow label">
+    </a>
+    <a class="ui purple label">
+      Insane
+    </a>
+    <a class="ui yellow label">
       Witty
-    </div>
-    <div class="ui pink label">
+    </a>
+    <a class="ui pink label">
       Exciting
-    </div>
+    </a>
   </div>
   
   <div class="example">
-    <h4>Skeumorphic</h4>
-    <p>A tag can look like a real tag</p>
-    <div class="ui tag labels">
-      <div class="ui label">
-        Fun
-      </div>
-      <div class="ui label">
-        Happy
-      </div>
-      <div class="ui label">
-        Smart
-      </div>
-      <div class="ui label">
-        Witty
-      </div>
-    </div>
+    <h4>Tag</h4>
+    <p>A label can look like a tag</p>
+    <a class="ui tag label">
+      First
+    </a>
   </div>
 
   <div class="example">
     <h4>Size</h4>
-    <p>A tag can be small or large</p>
-    <div class="ui small labels">
+    <p>A label can be small or large</p>
+    <div class="ui small label">
+      Fun
+    </div>
+    <br><br>
+    <div class="ui large label">
+      Fun
+    </div>
+  </div>
+  
+  <h2>Groups</h2>
+  
+  <div class="example">
+    <h4>Label Groups</h4>
+    <p>Groups can share variations together</p>
+    <div class="ui large labels">
       <div class="ui label">
         Fun
       </div>
@@ -262,29 +317,29 @@
       </div>
     </div>
     <br><br>
-    <div class="ui large labels">
-      <div class="ui label">
-        Fun
-      </div>
-      <div class="ui label">
+    <div class="ui tag labels">
+      <a class="ui green label">
+        Fun <i class="icon close"></i>
+      </a>
+      <a class="ui red label">
         Happy
-      </div>
-      <div class="ui label">
+        <div class="detail">22</div>
+      </a>
+      <a class="ui blue label">
         Smart
-      </div>
-      <div class="ui label">
+      </a>
+      <a class="ui purple label">
+        Insane
+      </a>
+      <a class="ui yellow label">
         Witty
-      </div>
+      </a>
+      <a class="ui label">
+        Exciting
+      </a>
     </div>
   </div>
   
-  <h2>Groups</h2>
-  
-  <div class="example">
-    <h4>Label Groups</h4>
-    <p>Label can exist side by side to show relation</p>
-  </div>
-  
 </div>
 </body>
 
diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css
index bd5985bfb..b3611d781 100755
--- a/src/ui/flat/button.css
+++ b/src/ui/flat/button.css
@@ -342,10 +342,10 @@ Green / Positive
   -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
   box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
 }
-}
+
 
 /*---------------
-Red / Negative
+  Red / Negative
 ----------------*/
 
 .ui.button.red,
diff --git a/src/ui/flat/grid.css b/src/ui/flat/grid.css
index cd9c3b761..ae68cc0ae 100755
--- a/src/ui/flat/grid.css
+++ b/src/ui/flat/grid.css
@@ -17,12 +17,6 @@
 
   vertical-align: top;
 }
-.ui.elements > .element:first-child,
-.ui.element:first-child {
-  border-left: none;
-  box-shadow: none;
-}
-
 .ui.elements .element:first-child {
   padding-left: 0% !important;
 }
diff --git a/src/ui/flat/label.css b/src/ui/flat/label.css
index 62ee0b275..654b0a342 100755
--- a/src/ui/flat/label.css
+++ b/src/ui/flat/label.css
@@ -3,19 +3,14 @@
 *******************************/
 
 .ui.label {
-  cursor: default;
   display: inline-block;
   vertical-align: middle;
 
-  background-color: #EEEEEE;
-  color: #777777;
-
   padding: 0.33em 0.8em;
 
   font-weight: bold;
   text-transform: uppercase;
 
-
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -36,20 +31,23 @@
     background 0.1s linear
   ;
 }
+a.ui.label {
+  cursor: pointer;
+}
 .ui.label.disabled {
   opacity: 0.5;
 }
 
-.ui.label .count {
+.ui.label .detail {
   display: inline-block;
+  font-size: 0.9em;
   margin-left: 0.5em;
-  color: #AAAAAA;
+  opacity: 0.8;
 }
 .ui.label .icon.close {
   cursor: pointer;
   margin-left: 0.5em;
   opacity: 0.7;
-  color: #333333;
 }
 
 /*******************************
@@ -57,17 +55,9 @@
 *******************************/
 
 /* Hover */
-a.ui.label:hover {
-  cursor: pointer;
-  background-color: #E0E0E0;
-}
-a.ui.label:hover .close {
+.ui.label .icon.close:hover {
   opacity: 1;
 }
-a.ui.tag.labels .label:hover:before {
-  background-color: #262626;
-}
-
 
 
 /*******************************
@@ -78,24 +68,24 @@ a.ui.tag.labels .label:hover:before {
 .ui.tag.label {
   margin-left: 1em;
   position: relative;
-  padding: 0.33em 1.3em;
+  padding: 0.33em 1.3em 0.33em 1.4em;
 
   -webkit-border-radius: 0px 3px 3px 0px;
   -moz-border-radius: 0px 3px 3px 0px;
   border-radius: 0px 3px 3px 0px;
 }
-.ui.tag.labels .label:before {
+.ui.tag.labels .label:before,
+.ui.tag.label:before {
     position: absolute;
-    top: 0.33em;
+    top: 0.3em;
     left: 0.3em;
     content: '';
 
     margin-left: -1em;
-    background-color: #EEEEEE;
     background-image: none;
 
-    width: 1.45em;
-    height: 1.45em;
+    width: 1.5em;
+    height: 1.5em;
 
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
@@ -118,13 +108,15 @@ a.ui.tag.labels .label:hover:before {
     ;
 }
 
-.ui.tag.labels .label:after {    
+
+.ui.tag.labels .label:after,
+.ui.tag.label:after {
   position: absolute;
-  content: "";
+  content: '';
   top: 50%;
   left: -0.25em;
 
-  margin-top: -0.33em;
+  margin-top: -0.3em;
   background-color: #FFFFFF;
   width: 0.55em;
   height: 0.55em;
@@ -139,44 +131,224 @@ a.ui.tag.labels .label:hover:before {
 }
 
 /*******************************
-             Types
+             Attached
 *******************************/
 
+.ui.attached.label {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+
+  padding: 0.5em 1em;
+
+  background-color: #FAFAFA;
+  color: #999999;
+
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 5px 0px 5px 0px;
+  -moz-border-radius: 5px 0px 5px 0px;
+  border-radius: 5px 0px 5px 0px;
+}
+
+
+
+/*******************************
+             Colors
+*******************************/
+
+/*--- Standard ---*/
+
+.ui.labels .label,
+.ui.label {
+  background-color: #EEEEEE;
+  color: #777777;
+}
+.ui.tag.labels .label:before,
+.ui.tag.labels .label:before,
+.ui.tag.label:before {
+  background-color: #EEEEEE;
+  color: #555555;
+}
+/* Hover */
+a.ui.labels .label:hover,
+a.ui.label:hover {
+  background-color: #E0E0E0;
+}
+.ui.tag.labels a.label:hover:before,
+.ui.tag.labels a.label:hover:before,
+a.ui.tag.label:hover:before {
+  background-color: #E0E0E0;
+}
+
+
+/*--- Black ---*/
 .ui.black.labels .label,
 .ui.black.label {
   background-color: #5F5F5F;
   color: #FFFFFF;
 }
+.ui.tag.labels .black.label:before,
+.ui.black.tag.labels .label:before,
+.ui.black.tag.label:before {
+  background-color: #5F5F5F;
+}
+/* Hover */
+a.ui.black.labels .label:hover,
+a.ui.black.label:hover {
+  background-color: #888888;
+}
+.ui.tag.labels a.black.label:hover:before,
+.ui.black.tag.labels a.label:hover:before,
+a.ui.black.tag.label:hover:before {
+  background-color: #888888;
+}
+
+/*--- Green ---*/
 .ui.green.labels .label,
 .ui.green.label {
   background-color: #3EBC47;
   color: #FFFFFF;
 }
+.ui.tag.labels .green.label:before,
+.ui.green.tag.labels .label:before,
+.ui.green.tag.label:before {
+  background-color: #3EBC47;
+}
+
+/* Hover */
+a.ui.green.labels .label:hover,
+a.ui.green.label:hover {
+  background-color: #5ADB63;
+}
+.ui.tag.labels a.green.label:hover:before,
+.ui.green.tag.labels a.label:hover:before,
+a.ui.green.tag.label:hover:before {
+  background-color: #5ADB63;
+}
+
+
+/*--- Red ---*/
 .ui.red.labels .label,
 .ui.red.label {
-  background-color: #BC3eEE;
+  background-color: #EE3E3E;
+  color: #FFFFFF;
+}
+.ui.tag.labels .red.label:before,
+.ui.red.tag.labels .label:before,
+.ui.red.tag.label:before {
+  background-color: #EE3E3E;
+}
+
+/* Hover */
+a.ui.red.labels .label:hover,
+a.ui.red.label:hover{
+  background-color: #FB5656;
   color: #FFFFFF;
 }
+.ui.tag.labels a.red.label:hover:before,
+.ui.red.tag.labels a.label:hover:before,
+a.ui.red.tag.label:hover:before {
+  background-color: #FB5656;
+}
+
+
+/*--- Blue ---*/
 .ui.blue.labels .label,
 .ui.blue.label {
   background-color: #009FDA;
   color: #FFFFFF;
 }
+.ui.tag.labels .blue.label:before,
+.ui.blue.tag.labels .label:before,
+.ui.blue.tag.label:before {
+  background-color: #009FDA;
+}
+
+/* Hover */
+a.ui.blue.labels .label:hover,
+a.ui.blue.label:hover {
+  background-color: #1AB8F3;
+  color: #FFFFFF;
+}
+.ui.tag.labels a.blue.label:hover:before,
+.ui.blue.tag.labels a.label:hover:before,
+a.ui.blue.tag.label:hover:before {
+  background-color: #1AB8F3;
+}
+
+/*--- Purple ---*/
 .ui.purple.labels .label,
 .ui.purple.label {
   background-color: #512598;
   color: #FFFFFF;
 }
+.ui.tag.labels .purple.label:before,
+.ui.purple.tag.labels .label:before,
+.ui.purple.tag.label:before {
+  background-color: #512598;
+}
+
+/* Hover */
+a.ui.purple.labels .label:hover,
+a.ui.purple.label:hover {
+  background-color: #6126C0;
+  color: #FFFFFF;
+}
+.ui.tag.labels a.purple.label:hover:before,
+.ui.purple.tag.labels a.label:hover:before,
+a.ui.purple.tag.label:hover:before {
+  background-color: #6126C0;
+}
+
+/*--- Yellow ---*/
 .ui.yellow.labels .label,
 .ui.yellow.label {
   background-color: #D8C62E;
   color: #FFFFFF;
 }
+.ui.tag.labels .yellow.label:before,
+.ui.yellow.tag.labels .label:before,
+.ui.yellow.tag.label:before {
+  background-color: #D8C62E;
+}
+
+/* Hover */
+a.ui.yellow.labels .label:hover,
+a.ui.yellow.label:hover {
+  background-color: #E3D13D;
+  color: #FFFFFF;
+}
+.ui.tag.labels a.yellow.label:hover:before,
+.ui.yellow.tag.labels a.label:hover:before,
+a.ui.yellow.tag.label:hover:before {
+  background-color: #E3D13D;
+}
+
+
+/*--- Pink ---*/
 .ui.pink.labels .label,
 .ui.pink.label {
   background-color: #EC008C;
   color: #FFFFFF;
 }
+.ui.tag.labels .pink.label:before,
+.ui.pink.tag.labels .label:before,
+.ui.pink.tag.label:before {
+  background-color: #EC008C;
+}
+/* Hover */
+a.ui.pink.labels .label:hover,
+a.ui.pink.label:hover {
+  background-color: #FD159F;
+  color: #FFFFFF;
+}
+.ui.tag.labels a.pink.label:hover:before,
+.ui.pink.tag.labels a.label:hover:before,
+a.ui.pink.tag.label:hover:before {
+  background-color: #FD159F;
+}
 
 
 /*******************************
diff --git a/src/ui/flat/segment.css b/src/ui/flat/segment.css
index 95115c977..f7152764b 100755
--- a/src/ui/flat/segment.css
+++ b/src/ui/flat/segment.css
@@ -3,6 +3,7 @@
 *******************************/
 
 .ui.segment {
+  position: relative;
   background-color: #FFFFFF;
 
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@@ -19,8 +20,17 @@
   overflow: hidden;
 }
 
+/* Label at the top of a segment */
+.ui.segment .label:first-child + * {
+  margin-top: 2em;
+}
+
+/* Compatability with Grid */
+.ui.fitted.elements .ui.segment.element:first-child {
+  border-radius: 5px 0px 0px 5px;
+}
+
 .ui.segment.attached {
-  position: relative;
   top: -1px;
   bottom: -1px;
   
@@ -28,7 +38,6 @@
   -webkit-border-radius: 0px;
   border-radius: 0px;
 
-  /* avoid rgba multiplying */
   -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
   -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
   box-shadow: 0px 0px 0px 1px #DDDDDD;