fixes #250 adds orange segment and label

server/documents/collections/menu.html.eco

@@ -32,7 +32,7 @@ type        : 'UI Collection'
       </a>
       <a class="item">
         <i class="mail icon"></i> Messages
-      </a>
+      </a>1
       <div class="right menu">
         <div class="borderless vertically fitted item">
           <div class="ui icon input">
@@ -875,10 +875,7 @@ type        : 'UI Collection'
       </a>
       <a class="item">
         <i class="mail icon"></i> Messages
-      </a>
-      <a class="item">
-        <i class="user icon"></i> Friends
-      </a>
+      </a>1
       <div class="right menu">
         <div class="borderless vertically fitted item">
           <div class="ui icon input">
@@ -894,24 +891,37 @@ type        : 'UI Collection'
             <a class="item">Spanish</a>
           </div>
         </div>
+        <div class="item">
+            <div class="ui teal button">Sign Up</div>
+        </div>
       </div>
     </div>
   </div>
   <div class="another example">
     <div class="ui small menu">
       <a class="active item">
-        Inbox
-      </a>
-      <a class="item">
-        Spam
+        <i class="home icon"></i> Home
       </a>
       <a class="item">
-        Updates
-      </a>
-      <div class="item">
-        <div class="ui icon input">
-          <input type="text" placeholder="Search mail...">
-          <i class="search icon"></i>
+        <i class="mail icon"></i> Messages
+      </a>1
+      <div class="right menu">
+        <div class="borderless vertically fitted item">
+          <div class="ui icon input">
+            <input type="text" placeholder="Search...">
+            <i class="search link icon"></i>
+          </div>
+        </div>
+        <div class="ui dropdown item">
+          Language <i class="dropdown icon"></i>
+          <div class="menu">
+            <a class="item">English</a>
+            <a class="item">Russian</a>
+            <a class="item">Spanish</a>
+          </div>
+        </div>
+        <div class="item">
+            <div class="ui teal button">Sign Up</div>
         </div>
       </div>
     </div>

server/documents/elements/label.html.eco

@@ -180,6 +180,9 @@ type        : 'UI Element'
     <a class="ui blue label">
       Smart
     </a>
+    <a class="ui orange label">
+      Radical
+    </a>
     <a class="ui purple label">
       Insane
     </a>

server/documents/elements/segment.html.eco

@@ -96,14 +96,17 @@ type        : 'UI Element'
     <p>A segment can be colored</p>
     <div class="ui blue segment">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-      <div class="ui green segment">
+      <div class="ui orange segment">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-        <div class="ui red segment">
+        <div class="ui green segment">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-          <div class="ui purple segment">
+          <div class="ui red segment">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-            <div class="ui teal segment">
+            <div class="ui purple segment">
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+              <div class="ui teal segment">
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+              </div>
             </div>
           </div>
         </div>
@@ -115,6 +118,9 @@ type        : 'UI Element'
     <div class="ui blue inverted segment">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
     </div>
+    <div class="ui orange inverted segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
     <div class="ui green inverted segment">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
     </div>

src/elements/label.less

@@ -637,6 +637,39 @@ a.ui.purple.label:hover:before {
   background-color: transparent !important;
 }
 
+/*--- Orange ---*/
+.ui.orange.labels .label,
+.ui.orange.label {
+  background-color: #F05940 !important;
+  border-color: #F05940 !important;
+  color: #FFFFFF !important;
+}
+.ui.labels .orange.label:before,
+.ui.orange.labels .label:before,
+.ui.orange.label:before {
+  background-color: #F05940 !important;
+}
+/* Hover */
+a.ui.orange.labels .label:hover,
+.ui.orange.labels a.label:hover,
+a.ui.orange.label:hover {
+  background-color: #FF4121 !important;
+  border-color: #FF4121 !important;
+  color: #FFFFFF !important;
+}
+.ui.labels a.orange.label:hover:before,
+.ui.orange.labels a.label:hover:before,
+a.ui.orange.label:hover:before {
+  background-color: #FF4121 !important;
+}
+/* Corner */
+.ui.orange.corner.label,
+.ui.orange.corner.label:hover {
+  background-color: transparent !important;
+}
+
+
+
 
 /*--- Pink ---*/
 .ui.teal.labels .label,

src/elements/segment.less

@@ -303,6 +303,9 @@
 .ui.red.segment {
   border-top: 0.2em solid #D95C5C;
 }
+.ui.orange.segment {
+  border-top: 0.2em solid #F05940;
+}
 .ui.purple.segment {
   border-top: 0.2em solid #564F8A;
 }
@@ -330,6 +333,10 @@
   background-color: #D95C5C !important;
   color: #FFFFFF !important;
 }
+.ui.inverted.orange.segment {
+  background-color: #F05940 !important;
+  color: #FFFFFF !important;
+}
 .ui.inverted.purple.segment {
   background-color: #564F8A !important;
   color: #FFFFFF !important;