fixes to menu dropdowns, fixes to icons, added new circular variation to icons

build/uncompressed/collections/menu.css

@@ -229,7 +229,7 @@
 .ui.menu .item > a > .label {
   font-size: 0.9em;
   line-height: 1.33;
-  margin: 0em 0em -0.3em 0.3em;
+  margin: -0.3em 0em -0.3em 0.3em;
   padding: 0.2em 0.6em;
   vertical-align: baseline;
   text-transform: none;
@@ -380,6 +380,7 @@
   width: auto;
   top: 0%;
   left: 100%;
+  margin: 0em;
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;

build/uncompressed/elements/icons.css

@@ -591,10 +591,18 @@ i.icon.disabled {
 /*******************************
            Variations
 *******************************/
-i.emphasized.icon {
-  opacity: 1;
+/*-------------------
+      Circular 
+--------------------*/
+i.circular.icon {
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  border-radius: 500px;
   padding: 0.5em;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+i.circular.inverted.icon {
+  border: none;
 }
 /*-------------------
       Inverted 
@@ -665,13 +673,25 @@ i.icon {
 }
 i.large.icon {
   font-size: 1.5em;
+  margin-right: 0.5em;
   vertical-align: middle;
 }
 i.huge.icon {
   font-size: 2em;
+  margin-right: 0.75em;
   vertical-align: middle;
 }
 i.massive.icon {
   font-size: 4em;
+  margin-right: 1em;
+  vertical-align: middle;
+}
+/*-------------------
+      Emphasized 
+--------------------*/
+i.emphasized.icon {
+  opacity: 1;
+  padding: 0.5em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   vertical-align: middle;
 }

node/src/documents/collections/menu.html

@@ -70,7 +70,8 @@ type   : 'UI Collection'
         <div class="menu">
           <a class="active item">
             Messages 
-            <div class="ui teal label">2 new</div>
+            <i class="icon mail"></i>
+            <div class="ui red label">25</div>
           </a>
           <div class="item">
             Friends 
@@ -85,15 +86,15 @@ type   : 'UI Collection'
             Followers
             <i class="icon bookmark"></i>
           </a>
-        </div>
-      </div>
-      <div class="dropdown item">
-        Actions 
-        <i class="icon right triangle"></i>
-        <div class="menu">
-          <div class="item">Search</div>
-          <div class="item">Add</div>
-          <div class="item">Remove</div>
+          <div class="dropdown item">
+            Edit 
+            <i class="icon right triangle"></i>
+            <div class="menu">
+              <div class="item">Search</div>
+              <div class="item">Add</div>
+              <div class="item">Remove</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

node/src/documents/elements/icon.html

@@ -233,10 +233,19 @@ type   : 'UI Element'
     <br>
     <i class="massive users icon"></i> Users
   </div>
+  
+  <div class="example">
+    <h4 class="ui header">Circular</h4>
+    <p>An icon can be formatted to show emphasis</p>
+    <i class="circular users icon"></i> 
+    <br>
+    <i class="circular inverted users icon"></i>
+  </div>
+  
 
   <div class="example">
     <h4 class="ui header">Emphasized</h4>
-    <p>An icon can be formatted to show emphasis</p>
+    <p>An icon can be formatted to appear circular</p>
     <i class="emphasized users icon"></i>
   </div>
   

node/src/files/components/semantic/collections/menu.css

@@ -229,7 +229,7 @@
 .ui.menu .item > a > .label {
   font-size: 0.9em;
   line-height: 1.33;
-  margin: 0em 0em -0.3em 0.3em;
+  margin: -0.3em 0em -0.3em 0.3em;
   padding: 0.2em 0.6em;
   vertical-align: baseline;
   text-transform: none;
@@ -380,6 +380,7 @@
   width: auto;
   top: 0%;
   left: 100%;
+  margin: 0em;
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;

node/src/files/components/semantic/elements/icons.css

@@ -591,10 +591,18 @@ i.icon.disabled {
 /*******************************
            Variations
 *******************************/
-i.emphasized.icon {
-  opacity: 1;
+/*-------------------
+      Circular 
+--------------------*/
+i.circular.icon {
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  border-radius: 500px;
   padding: 0.5em;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+i.circular.inverted.icon {
+  border: none;
 }
 /*-------------------
       Inverted 
@@ -665,13 +673,25 @@ i.icon {
 }
 i.large.icon {
   font-size: 1.5em;
+  margin-right: 0.5em;
   vertical-align: middle;
 }
 i.huge.icon {
   font-size: 2em;
+  margin-right: 0.75em;
   vertical-align: middle;
 }
 i.massive.icon {
   font-size: 4em;
+  margin-right: 1em;
+  vertical-align: middle;
+}
+/*-------------------
+      Emphasized 
+--------------------*/
+i.emphasized.icon {
+  opacity: 1;
+  padding: 0.5em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   vertical-align: middle;
 }

src/collections/menu.less

@@ -313,7 +313,7 @@
 .ui.menu .item > a > .label {
   font-size: 0.9em;
   line-height: 1.33;
-  margin: 0em 0em -0.3em 0.3em;
+  margin: -0.3em 0em -0.3em 0.3em;
   padding: 0.2em 0.6em;
   vertical-align: baseline;
   text-transform: none;
@@ -515,6 +515,7 @@
   width: auto;
   top: 0%;
   left: 100%;
+  margin: 0em;
 
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;

src/elements/icons.less

@@ -243,12 +243,23 @@ i.icon.disabled {
            Variations
 *******************************/
 
-i.emphasized.icon {
-  opacity: 1;
+
+/*-------------------
+      Circular 
+--------------------*/
+
+i.circular.icon {
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  border-radius: 500px;
+
   padding: 0.5em;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-}
 
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+i.circular.inverted.icon {
+  border: none;
+}
 
 /*-------------------
       Inverted 
@@ -327,13 +338,28 @@ i.icon {
 }
 i.large.icon {
   font-size: 1.5em;
+  margin-right: 0.5em;
   vertical-align: middle;
 }
 i.huge.icon {
   font-size: 2em;
+  margin-right: 0.75em;
   vertical-align: middle;
 }
 i.massive.icon {
   font-size: 4em;
+  margin-right: 1em;
   vertical-align: middle;
 }
+
+/*-------------------
+      Emphasized 
+--------------------*/
+
+i.emphasized.icon {
+  opacity: 1;
+  padding: 0.5em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+}
+