iteration on text menus, label menus

Former-commit-id: 1d6db794df58afbba57ffdcab45ad99bf8bffed2
Former-commit-id: 8cd7d5d38f682ddc943b395134d10cd256c51a57

node/src/documents/collections/menu.html

@@ -161,11 +161,11 @@ type   : 'UI Collection'
     </div>
     <div class="ui vertical menu">
       <div class="dropdown item">
-        Dropdown <i class="icon right-dir"></i>
+        Categories <i class="icon right-dir"></i>
         <div class="menu">
-          <div class="item">Choice 1</div>
-          <div class="item">Choice 2</div>
-          <div class="item">Choice 3</div>
+          <a class="item">Electronics</a>
+          <a class="item">Automotive</a>
+          <a class="item">Home</a>
         </div>
       </div>
     </div>
@@ -174,11 +174,11 @@ type   : 'UI Collection'
     <h4>Menu</h4>
     <p>A menu may contain another menu group inside. This can be useful for formatting multiple menu items with the same qualities.</p>
     <div class="ui menu">
-      <div class="item">Left item 1</div>
-      <div class="item">Left item 2</div>
+      <a class="item">Browse</a>
+      <a class="item">Submit</a>
       <div class="right menu">
-        <div class="item">Right item 1</div>
-        <div class="item">Right item 2</div>
+        <a class="item">Sign Up</a>
+        <a class="item">Help</a>
       </div>
     </div>
   </div>
@@ -186,13 +186,14 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Nested Menu</h4>
     <p>A menu may contain another menu nested inside an item that acts as a grouped sub-menu. This is only available when using a vertical menu.</p>
-    <div class="ui vertical menu">
+    <div class="ui compact vertical menu">
+      <a class="item"><b>Friends</b></a>
       <div class="item">
-        <a>Grouped Section</a>
+        <a><b>Your Profile</b></a>
         <div class="menu">
-          <a class="item">Subsection 1</a>
-          <a class="item">Subsection 1</a>
-          <a class="item">Subsection 1</a>
+          <a class="item">Inbox</a>
+          <a class="item">Activity</a>
+          <a class="item">Groups</a>
         </div>
       </div>
     </div>
@@ -261,7 +262,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Basic</h4>
+    <h4>Simple</h4>
     <p>A menu may reduce its complexity to blend in with a page</p>
     <div class="ui basic menu">
       <a class="item">
@@ -275,16 +276,46 @@ type   : 'UI Collection'
       </a>
     </div>
   </div>
+  <div class="example">
+    <h4>Text</h4>
+    <p>A menu can display simple text links</p>
+    <div class="ui text menu">
+      <div class="header item">Showing:</div>
+      <a class="item">
+        Newest
+      </a>
+      <a class="active item">
+        Oldest
+      </a>
+      <a class="item">
+        First
+      </a>
+    </div>
+  </div>
+  <div class="example">
+    <div class="ui text vertical menu">
+      <div class="header item">Filter By</div>
+      <a class="item">
+        Close-by
+      </a>
+      <a class="active item">
+        Available Now
+      </a>
+      <a class="item">
+        No Tax
+      </a>
+    </div>
+  </div>
 
   <div class="example">
     <h4>Colors</h4>
     <p>Additional colors can be specified</p>
     <div class="ui grey compact menu">
       <a class="item">
-        Green 1
+        Grey 1
       </a>
       <a class="item">
-        Green 2
+        Grey 2
       </a>
     </div>
     <div class="ui green inverted compact menu">
@@ -403,9 +434,11 @@ type   : 'UI Collection'
 
   <div class="example">
     <h4>Fluid</h4>
-    <p>A menu may take the size of its container.</p>
-    <div class="ui fluid menu">
-      <div class="item">Choice</div>
+    <p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p>
+    <div class="ui fluid vertical menu">
+      <a class="item">Run</a>
+      <a class="item">Walk</a>
+      <a class="item">Bike</a>
     </div>
   </div>
   
@@ -413,14 +446,14 @@ type   : 'UI Collection'
     <h4>Evenly sized items</h4>
     <p>A menu may divide its items evenly</p>
     <div class="ui fluid three item menu">
-      <div class="item">Buy</div>
-      <div class="item">Sell</div>
-      <div class="item">Rent</div>
+      <a class="item">Buy</a>
+      <a class="item">Sell</a>
+      <a class="item">Rent</a>
     </div>
   </div>
 
   <div class="example">
-    <h4>Pointing (Horizontal)</h4>
+    <h4>Pointing</h4>
     <p>A menu can point to content below itself to show ownership</p>
     <div class="ui pointing menu">
       <div class="item">
@@ -441,9 +474,7 @@ type   : 'UI Collection'
       </div>
     </div>
   </div>
-
   <div class="example">
-    <h4>Pointing (Horizontal)</h4>
     <p>A vertical menu can point to content adjacent to itself to show ownership</p>
     <div class="ui pointing vertical menu">
       <div class="item">

node/src/documents/collections/message.html

@@ -99,7 +99,7 @@ type   : 'UI Collection'
         <div class="header">
           Have you heard about our mailing list?
         </div>
-        <p>Get all the best inventions in your e-mail every day. Sign up now</p>
+        Get all the best inventions in your e-mail every day. Sign up now!
       </div>
     </div>
   </div>
@@ -108,7 +108,7 @@ type   : 'UI Collection'
     <h4>Compact Block</h4>
     <p>A text block that only takes up the width of its content.</p>
     <div class="ui compact message">
-      <p>Get all the best inventions in your e-mail every day. Sign up now</p>
+      Get all the best inventions in your e-mail every day. Sign up now!
     </div>
   </div>
   
@@ -119,7 +119,7 @@ type   : 'UI Collection'
       <div class="header">
         Have you heard about our mailing list?
       </div>
-      <p>Get all the best inventions in your e-mail every day. Sign up now</p>
+      Get all the best inventions in your e-mail every day. Sign up now!
     </div>
     <form class="ui form attached fluid segment">
       <p>Let's go ahead and get you signed up.</p>
@@ -171,7 +171,7 @@ type   : 'UI Collection'
       <div class="header">
         You must register before you can do that!
       </div>
-      <p>Visit our registration page, then try again</p>
+      Visit our registration page, then try again
     </div>
   </div>
   

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

@@ -22,6 +22,7 @@
 .ui.form {
   position: relative;
   width: 35em;
+  max-width: 100%;
 }
 .ui.form :first-child {
   margin-top: 0em;

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

@@ -122,7 +122,7 @@
 }
 @media only screen and (min-width : 1500px) {
   .ui.responsive.grid {
-    padding: 0% 15%;
+    padding: 0% 13%;
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {
@@ -130,7 +130,7 @@
 }
 @media only screen and (min-width : 1750px) {
   .ui.responsive.grid {
-    padding: 0% 20%;
+    padding: 0% 18%;
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {
@@ -138,7 +138,7 @@
 }
 @media only screen and (min-width : 2000px) {
   .ui.responsive.grid {
-    padding: 0% 25%;
+    padding: 0% 20%;
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {

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

@@ -61,6 +61,11 @@
   line-height: 1.2em;
   min-height: 1.25em;
 
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
   -webkit-transition:
     opacity 0.1s linear,
     background 0.1s linear,
@@ -106,7 +111,11 @@
 }
 .ui.menu .item .item,
 .ui.menu .item .item > a {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(30, 30, 30, 0.8);
+}
+.ui.menu .item .item .item,
+.ui.menu .item .item .item > a {
+  color: rgba(30, 30, 30, 0.6);
 }
 .ui.menu .dropdown.item .menu .item,
 .ui.menu .dropdown.item .menu .item a {
@@ -301,6 +310,7 @@
 .ui.menu .item > .label,
 .ui.menu .item > a > .label {
   font-size: 0.9em;
+  line-height: 1.33;
   margin: -0.2em 0.6em;
   padding: 0.2em 0.6em;
   vertical-align: top;
@@ -606,6 +616,111 @@
   background-color: #00B5AD;
 }
 
+
+/*--------------
+    Text Menu
+---------------*/
+
+.ui.text.menu {
+  background-color: transparent;
+
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.text.menu .item {
+  opacity: 0.6;
+
+  margin: 0.35em 0.5em;
+  padding: 0em;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+
+  -webkit-transition:
+    opacity 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear
+  ;
+}
+.ui.text.menu .item:before {
+  display: none;
+}
+.ui.text.menu .header.item {
+  background-color: transparent;
+  margin: 0em 0.5em 0em 0em;
+  padding: 0.35em 0.5em;
+
+  opacity: 1;
+  color: rgba(50, 50, 50, 0.8);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+/*--- fluid text ---*/
+.ui.fluid.text.menu {
+  margin: 0em;
+}
+
+/*--- vertical text ---*/
+.ui.vertical.text.menu .item {
+  float: left;
+  clear: left;
+}
+.ui.vertical.text.menu .header.item {
+  margin: 0em 0em 0.5em 0em;
+  padding: 0.35em 0.5em;
+}
+
+/*--- hover ---*/
+.ui.text.menu .item.hover,
+.ui.text.menu .item:hover {
+  opacity: 1;
+  background-color: transparent;
+}
+
+/*--- active ---*/
+.ui.text.menu .active.item {
+  background-color: transparent;
+  padding: 0em;
+  border: none;
+  opacity: 1;
+  font-weight: bold;
+}
+
+/* disable variations */
+.ui.text.pointing.menu item.active:after {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.text.attached.menu {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+
 /*--------------
      Basic
 ---------------*/
@@ -615,11 +730,19 @@
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
 }
 .ui.basic.menu .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
 }
 .ui.basic.menu .item:before {
   display: none;
@@ -637,6 +760,7 @@
   box-shadow: none;
 }
 
+
 /*--------------
     Icon Only
 ---------------*/
@@ -691,10 +815,10 @@
   border-right: none;
 }
 .ui.vertical.menu > .item:first-child {
-  border-radius: 5px 5px 0px 0px;
+  border-radius: 0.325em 0.325em 0px 0px;
 }
 .ui.vertical.menu > .item:last-child {
-  border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 0.325em 0.325em;
 }
 
 /*--- Border ---*/
@@ -827,6 +951,9 @@
 .ui.compact.menu {
   display: inline-block;
 }
+.ui.vertical.compact.menu {
+  width: auto !important;
+}
 
 /*-------------------
         Fluid
@@ -1042,6 +1169,7 @@
 
 .ui.small.menu .item {
   font-size: 0.875rem;
+  min-height: 1.2em;
 }
 .ui.small.vertical.menu {
   width: 13rem;
@@ -1057,6 +1185,7 @@
 
 .ui.large.menu .item {
   font-size: 1.125rem;
+  min-height: 1.35em;
 }
 .ui.large.vertical.menu {
   width: 18rem;

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

@@ -45,7 +45,7 @@
 /* block with paragraphs */
 .ui.message p {
   opacity: 0.85;
-  margin: 1em 0em 0em;
+  margin: 1em 0em;
 }
 .ui.message p:first-child {
   margin-top: 0em;

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

@@ -123,22 +123,22 @@ h5.ui.header {
 --------------------*/
 
 .ui.blue.header {
-  color: #6ECFF5;
+  color: #6ECFF5 !important;
 }
 .ui.black.header {
-  color: #5C6166;
+  color: #5C6166 !important;
 }
 .ui.green.header {
-  color: #A1CF64;
+  color: #A1CF64 !important;
 }
 .ui.red.header {
-  color: #EF4D6D;
+  color: #EF4D6D !important;
 }
 .ui.purple.header {
-  color: #564F8A;
+  color: #564F8A !important;
 }
 .ui.teal.header {
-  color: #00B5AD;
+  color: #00B5AD !important;
 }
 
 /*-------------------
@@ -146,28 +146,28 @@ h5.ui.header {
 --------------------*/
 
 .ui.inverted.black.header {
-  background-color: #5C6166;
-  color: #FFFFFF;
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.blue.header {
-  background-color: #6ECFF5;
-  color: #FFFFFF;
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.green.header {
-  background-color: #A1CF64;
-  color: #FFFFFF;
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.red.header {
-  background-color: #EF4D6D;
-  color: #FFFFFF;
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.purple.header {
-  background-color: #564F8A;
-  color: #FFFFFF;
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.teal.header {
-  background-color: #00B5AD;
-  color: #FFFFFF;
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
 }
 
 /*-------------------
@@ -244,8 +244,3 @@ h5.ui.header {
   padding: 0em;
 }
 
-
-/*******************************
-            Groups
-*******************************/
-

node/src/files/components/semantic/src/ui.css

@@ -1,3 +0,0 @@
-.ui.red {
-  
-}

node/src/files/javascript/semantic.js

@@ -121,7 +121,7 @@ semantic.ready = function() {
             }
           })
         ;
-        code  = $.trim(code.replace(whiteSpace, '\n'));
+        // code  = $.trim(code.replace(whiteSpace, '\n'));
         $code = $('<div/>')
           .data('type', 'html')
           .addClass('code')
@@ -130,7 +130,7 @@ semantic.ready = function() {
         ;
         $.proxy(handler.initializeCode, $code)();
       }
-      if( $demo.first().is(':visible') || type == 'developer' && type != 'designer' ) {
+      if( ($demo.first().is(':visible') || type == 'developer') && type != 'designer' ) {
         $demo.hide();
         $annotated.fadeIn(500);
       }
@@ -168,7 +168,7 @@ semantic.ready = function() {
       // initialize 
       editor        = ace.edit($code[0]);
       editorSession = editor.getSession();
-      codeHeight    = editor.getSession().getScreenLength() * (editor.renderer.lineHeight)  + editor.renderer.scrollBar.getWidth() + padding;
+      codeHeight    = editor.session.getScreenLength() * (editor.renderer.lineHeight)  + editor.renderer.scrollBar.getWidth() + padding;
 
       editor.setTheme('ace/theme/github');
       editor.setShowPrintMargin(false);

node/src/files/stylesheets/semantic.css

@@ -169,23 +169,25 @@ h1 {
 }
 h1 {
   margin: 0px auto;
+  font-size: 38px;
 }
 h1:first-child {
   margin-top: 0px;
   padding-top: 0px;
 }
 h2 {
+  font-size: 28px;
   margin: 35px 0px 30px;
   padding-bottom: 10px;
   border-bottom: 1px solid #DDDDDD;
 }
 h3 {
-  font-size: 20px;
+  font-size: 24px;
   margin: 40px 0px 15px;
 }
 h4 {
   margin: 30px 0px 3px;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: bold;
   color: #555555;
 }
@@ -270,6 +272,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   min-width: 370px;
   z-index: 999;
 }
+#example .main.menu .count {
+  font-family: "Hevletica Neue", Arial, sans-serif;
+}
 
 /* lists */
 #example ol {
@@ -603,7 +608,23 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 }
 
 /* examples */
+
+#example h2 + .example,
+#example h3 + .example,
+#example h4 + .example {
+  margin-top: 0px;
+  padding-top: 0px;
+  border-top: none;
+}
+#example h2 + .example i.code,
+#example h3 + .example i.code,
+#example h4 + .example i.code {
+  top: 0px;
+}
 #example .example {
+  margin: 16px 0px;
+  padding: 16px 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
   clear: both;
   position: relative;
 }
@@ -613,7 +634,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 #example .example i.code {
   cursor: pointer;
   position: absolute;
-  top: 0px;
+  top: 50px;
   right: 0px;
   opacity: 0.2;
 

node/src/layouts/default.html.eco

@@ -24,7 +24,6 @@
 
   <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
 
-  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/ui.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/icons.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/button.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/header.css">
@@ -115,7 +114,7 @@
         <% end %>
       </div>
       <div class="section dropdown item">
-        <%= "#{pageNumber} of #{pageCount}" %>
+        <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
         <div class="menu">
           <% for element, index in pageCollection: %>
             <div class="<%= if element.id is @document.id then 'active ' %>item">

src/collections/form.css

@@ -22,6 +22,7 @@
 .ui.form {
   position: relative;
   width: 35em;
+  max-width: 100%;
 }
 .ui.form :first-child {
   margin-top: 0em;

src/collections/grid.css

@@ -122,7 +122,7 @@
 }
 @media only screen and (min-width : 1500px) {
   .ui.responsive.grid {
-    padding: 0% 15%;
+    padding: 0% 13%;
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {
@@ -130,7 +130,7 @@
 }
 @media only screen and (min-width : 1750px) {
   .ui.responsive.grid {
-    padding: 0% 20%;
+    padding: 0% 18%;
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {
@@ -138,7 +138,7 @@
 }
 @media only screen and (min-width : 2000px) {
   .ui.responsive.grid {
-    padding: 0% 25%;
+    padding: 0% 20%;
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {

src/collections/menu.css

@@ -61,6 +61,11 @@
   line-height: 1.2em;
   min-height: 1.25em;
 
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
   -webkit-transition:
     opacity 0.1s linear,
     background 0.1s linear,
@@ -106,7 +111,11 @@
 }
 .ui.menu .item .item,
 .ui.menu .item .item > a {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(30, 30, 30, 0.8);
+}
+.ui.menu .item .item .item,
+.ui.menu .item .item .item > a {
+  color: rgba(30, 30, 30, 0.6);
 }
 .ui.menu .dropdown.item .menu .item,
 .ui.menu .dropdown.item .menu .item a {
@@ -301,6 +310,7 @@
 .ui.menu .item > .label,
 .ui.menu .item > a > .label {
   font-size: 0.9em;
+  line-height: 1.33;
   margin: -0.2em 0.6em;
   padding: 0.2em 0.6em;
   vertical-align: top;
@@ -606,6 +616,111 @@
   background-color: #00B5AD;
 }
 
+
+/*--------------
+    Text Menu
+---------------*/
+
+.ui.text.menu {
+  background-color: transparent;
+
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.text.menu .item {
+  opacity: 0.6;
+
+  margin: 0.35em 0.5em;
+  padding: 0em;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+
+  -webkit-transition:
+    opacity 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear
+  ;
+}
+.ui.text.menu .item:before {
+  display: none;
+}
+.ui.text.menu .header.item {
+  background-color: transparent;
+  margin: 0em 0.5em 0em 0em;
+  padding: 0.35em 0.5em;
+
+  opacity: 1;
+  color: rgba(50, 50, 50, 0.8);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+/*--- fluid text ---*/
+.ui.fluid.text.menu {
+  margin: 0em;
+}
+
+/*--- vertical text ---*/
+.ui.vertical.text.menu .item {
+  float: left;
+  clear: left;
+}
+.ui.vertical.text.menu .header.item {
+  margin: 0em 0em 0.5em 0em;
+  padding: 0.35em 0.5em;
+}
+
+/*--- hover ---*/
+.ui.text.menu .item.hover,
+.ui.text.menu .item:hover {
+  opacity: 1;
+  background-color: transparent;
+}
+
+/*--- active ---*/
+.ui.text.menu .active.item {
+  background-color: transparent;
+  padding: 0em;
+  border: none;
+  opacity: 1;
+  font-weight: bold;
+}
+
+/* disable variations */
+.ui.text.pointing.menu item.active:after {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.text.attached.menu {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+
 /*--------------
      Basic
 ---------------*/
@@ -615,11 +730,19 @@
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
 }
 .ui.basic.menu .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
 }
 .ui.basic.menu .item:before {
   display: none;
@@ -637,6 +760,7 @@
   box-shadow: none;
 }
 
+
 /*--------------
     Icon Only
 ---------------*/
@@ -691,10 +815,10 @@
   border-right: none;
 }
 .ui.vertical.menu > .item:first-child {
-  border-radius: 5px 5px 0px 0px;
+  border-radius: 0.325em 0.325em 0px 0px;
 }
 .ui.vertical.menu > .item:last-child {
-  border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 0.325em 0.325em;
 }
 
 /*--- Border ---*/
@@ -827,6 +951,9 @@
 .ui.compact.menu {
   display: inline-block;
 }
+.ui.vertical.compact.menu {
+  width: auto !important;
+}
 
 /*-------------------
         Fluid
@@ -1042,6 +1169,7 @@
 
 .ui.small.menu .item {
   font-size: 0.875rem;
+  min-height: 1.2em;
 }
 .ui.small.vertical.menu {
   width: 13rem;
@@ -1057,6 +1185,7 @@
 
 .ui.large.menu .item {
   font-size: 1.125rem;
+  min-height: 1.35em;
 }
 .ui.large.vertical.menu {
   width: 18rem;

src/elements/header.css

@@ -123,22 +123,22 @@ h5.ui.header {
 --------------------*/
 
 .ui.blue.header {
-  color: #6ECFF5;
+  color: #6ECFF5 !important;
 }
 .ui.black.header {
-  color: #5C6166;
+  color: #5C6166 !important;
 }
 .ui.green.header {
-  color: #A1CF64;
+  color: #A1CF64 !important;
 }
 .ui.red.header {
-  color: #EF4D6D;
+  color: #EF4D6D !important;
 }
 .ui.purple.header {
-  color: #564F8A;
+  color: #564F8A !important;
 }
 .ui.teal.header {
-  color: #00B5AD;
+  color: #00B5AD !important;
 }
 
 /*-------------------
@@ -146,28 +146,28 @@ h5.ui.header {
 --------------------*/
 
 .ui.inverted.black.header {
-  background-color: #5C6166;
-  color: #FFFFFF;
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.blue.header {
-  background-color: #6ECFF5;
-  color: #FFFFFF;
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.green.header {
-  background-color: #A1CF64;
-  color: #FFFFFF;
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.red.header {
-  background-color: #EF4D6D;
-  color: #FFFFFF;
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.purple.header {
-  background-color: #564F8A;
-  color: #FFFFFF;
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
 }
 .ui.inverted.teal.header {
-  background-color: #00B5AD;
-  color: #FFFFFF;
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
 }
 
 /*-------------------
@@ -244,8 +244,3 @@ h5.ui.header {
   padding: 0em;
 }
 
-
-/*******************************
-            Groups
-*******************************/
-