adds colors to menu, without inversion

Former-commit-id: d75b5d22e0
Former-commit-id: 6b270a8dc2

build/minified/collections/message.min.css

@@ -1 +1 @@
-.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:1em 0}.ui.message p:first-child{margin-top:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#75C9E9;background-color:#E9F9FF;color:#1D6582}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#EEFFE9;color:#119000;border-color:#2FCB05}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#AF9801}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#B06C6C}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2px}
+.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:1em 0}.ui.message :first-child{margin-top:0}.ui.message :last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#75C9E9;background-color:#E9F9FF;color:#1D6582}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#EEFFE9;color:#119000;border-color:#2FCB05}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#AF9801}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#B06C6C}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2px}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-a7e474c128bb27e8311776824353f60fcaa73ac7
+92835bf7befedceca4f6ad8d2d074a0dad5769c4

build/uncompressed/collections/menu.css

@@ -46,7 +46,7 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   vertical-align: middle;
-  line-height: 1.2em;
+  line-height: 1.25em;
   min-height: 1.25em;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -412,7 +412,33 @@
   background-color: #3B3B3B;
 }
 /*--------------
-     Colors
+    Colors
+---------------*/
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
+}
+/*--- Inverted Colors  ---*/
+.ui.green.menu .item.active {
+  border-color: #A1CF64;
+}
+.ui.red.menu .item.active {
+  border-color: #EF4D6D;
+}
+.ui.blue.menu .item.active {
+  border-color: #6ECFF5;
+}
+.ui.purple.menu .item.active {
+  border-color: #564F8A;
+}
+.ui.orange.menu .item.active {
+  border-color: #F05940;
+}
+.ui.teal.menu .item.active {
+  border-color: #00B5AD;
+}
+/*--------------
+ Inverted Colors
 ---------------*/
 /*--- Light Colors  ---*/
 .ui.grey.menu {

build/uncompressed/collections/message.css

@@ -38,9 +38,12 @@
   opacity: 0.85;
   margin: 1em 0em;
 }
-.ui.message p:first-child {
+.ui.message :first-child {
   margin-top: 0em;
 }
+.ui.message :last-child {
+  margin-bottom: 0em;
+}
 /* block with child list */
 .ui.message ul.list {
   opacity: 0.85;

build/uncompressed/elements/button.css

@@ -417,9 +417,9 @@
 /*--------------
 Containing Icon
 ---------------*/
-.ui.button i {
+.ui.button i.icon {
   line-height: 1;
-  margin-right: 0.2em;
+  margin-right: 0.5em;
 }
 /* left arrow icons */
 .ui.button i.icon.left,

node/src/documents/collections/menu.html

@@ -95,7 +95,7 @@ type   : 'UI Collection'
 
   <div class="example">
     <h4>Header Item</h4>
-    <p>A menu may have a header item to help label sections of a menu. This can also be a <a href="elements/header.html">ui header</a>.</p>
+    <p>A menu may have a header item to help label sections of a menu. This can also be a <a href="/elements/header.html">ui header</a>.</p>
     <div class="ui vertical menu">
       <div class="header item">
         Dogs
@@ -106,7 +106,7 @@ type   : 'UI Collection'
       <div class="item">
         Cockerspaniel
       </div>
-      <div class="ui red header item">
+      <div class="ui black inverted header item">
         <i class="icon users"></i>
         Users
       </div>
@@ -261,6 +261,118 @@ type   : 'UI Collection'
       </div>
     </div>
   </div>
+  <div class="example">
+    <h4>Colors</h4>
+    <p>Additional colors can be specified.</p>
+    <div class="ui grey compact menu">
+      <a class="item">
+        Grey 1
+      </a>
+      <a class="item">
+        Grey 2
+      </a>
+    </div>
+    <div class="ui green inverted compact menu">
+      <a class="item">
+        Green 1
+      </a>
+      <a class="item">
+        Green 2
+      </a>
+    </div>
+    <div class="ui red inverted compact menu">
+      <a class="item">
+        Red 1
+      </a>
+      <a class="item">
+        Red 2
+      </a>
+    </div>
+    <div class="ui blue inverted compact menu">
+      <a class="item">
+        Blue 1
+      </a>
+      <a class="item">
+        Blue 2
+      </a>
+    </div>
+    <br><br>
+    <div class="ui purple inverted compact menu">
+      <a class="item">
+        Purple 1
+      </a>
+      <a class="item">
+        Purple 2
+      </a>
+    </div>
+    <div class="ui orange inverted compact menu">
+      <a class="item">
+        Orange 1
+      </a>
+      <a class="item">
+        Orange 2
+      </a>
+    </div>
+    <div class="ui teal inverted compact menu">
+      <a class="item">
+        Teal 1
+      </a>
+      <a class="item">
+        Teal 2
+      </a>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui green compact menu">
+      <a class="item">
+        Green 1
+      </a>
+      <a class="active item">
+        Green 2
+      </a>
+    </div>
+    <div class="ui red compact menu">
+      <a class="item">
+        Red 1
+      </a>
+      <a class="active item">
+        Red 2
+      </a>
+    </div>
+    <div class="ui blue compact menu">
+      <a class="item">
+        Blue 1
+      </a>
+      <a class="active item">
+        Blue 2
+      </a>
+    </div>
+    <br><br>
+    <div class="ui purple compact menu">
+      <a class="item">
+        Purple 1
+      </a>
+      <a class="active item">
+        Purple 2
+      </a>
+    </div>
+    <div class="ui orange compact menu">
+      <a class="item">
+        Orange 1
+      </a>
+      <a class="active item">
+        Orange 2
+      </a>
+    </div>
+    <div class="ui teal compact menu">
+      <a class="item">
+        Teal 1
+      </a>
+      <a class="active item">
+        Teal 2
+      </a>
+    </div>
+  </div>
   
   <div class="example">
     <h4>Simple</h4>

node/src/documents/index.html

@@ -11,9 +11,9 @@ type   : 'Semantic'
     <h2><strike>HTML</strike> UI is the language of the web.</h2>
     <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
     
-    <div class="ui two fluid black buttons">
-      <a href="#" class="ui button"><i class="icon cloud"></i> Download</a>
-      <a href="#" class="ui button"><i class="icon terminal"></i> Customize</a>
+    <div class="ui large black compact menu">
+      <a href="download.html" class="item"><i class="icon cloud"></i> Download</a>
+      <a href="#" class="item"><i class="icon terminal"></i> Try it out</a>
     </div>
     
   </div>
@@ -24,23 +24,23 @@ type   : 'Semantic'
     <div class="column"> 
       <h1 class="ui icon header">
         <i class="icon users"></i> 
-        Learn HTML
+        Newbie Friendly
       </h1>
-      <p>Semantic code is designed to be human readable, so front end code can be understood by anyone.</p>
+      <p>Code written in semantic is designed to be human readable, so front end code can be understood by anyone.</p>
     </div>
     <div class="column">
       <h1 class="ui icon header">
         <i class="icon easel"></i> 
-        Swap Designs
+        Exchange UI
       </h1>
-      <p>Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
+      <p>Semantic defines an exchange format for UI, so swapping out interface designs doesn't mean rewriting your site's codebase.</p>
     </div>
     <div class="column">
       <h1 class="ui icon header">
         <i class="icon terminal"></i> 
-        Build Smarter
+        Developer
       </h1>
-      <p>Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.</p>
+      <p>Semantic UI Modules all come with debugging and performance tools to help make sure they perform lightning fast.</p>
     </div>
   </div>
 </div>

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

@@ -46,7 +46,7 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   vertical-align: middle;
-  line-height: 1.2em;
+  line-height: 1.25em;
   min-height: 1.25em;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -412,7 +412,33 @@
   background-color: #3B3B3B;
 }
 /*--------------
-     Colors
+    Colors
+---------------*/
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
+}
+/*--- Inverted Colors  ---*/
+.ui.green.menu .item.active {
+  border-color: #A1CF64;
+}
+.ui.red.menu .item.active {
+  border-color: #EF4D6D;
+}
+.ui.blue.menu .item.active {
+  border-color: #6ECFF5;
+}
+.ui.purple.menu .item.active {
+  border-color: #564F8A;
+}
+.ui.orange.menu .item.active {
+  border-color: #F05940;
+}
+.ui.teal.menu .item.active {
+  border-color: #00B5AD;
+}
+/*--------------
+ Inverted Colors
 ---------------*/
 /*--- Light Colors  ---*/
 .ui.grey.menu {

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

@@ -38,9 +38,12 @@
   opacity: 0.85;
   margin: 1em 0em;
 }
-.ui.message p:first-child {
+.ui.message :first-child {
   margin-top: 0em;
 }
+.ui.message :last-child {
+  margin-bottom: 0em;
+}
 /* block with child list */
 .ui.message ul.list {
   opacity: 0.85;

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

@@ -417,9 +417,9 @@
 /*--------------
 Containing Icon
 ---------------*/
-.ui.button i {
+.ui.button i.icon {
   line-height: 1;
-  margin-right: 0.2em;
+  margin-right: 0.5em;
 }
 /* left arrow icons */
 .ui.button i.icon.left,

node/src/files/stylesheets/semantic.css

@@ -658,9 +658,15 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   opacity: 1;
 }
 
+#example .highlighted.example {
+  min-height: 280px;
+}
 #example .highlighted.example .grid,
 #example .ui.type.items .image .grid {
+  -webkit-animation: grid 5s ease-in-out infinite;
+  -moz-animation: grid 5s ease-in-out infinite;
   background-color: #F6F6F6;
+  margin: 0em auto;
 }
 #example .highlighted.example .grid .row,
 #example .ui.type.items .image .grid .row {
@@ -677,6 +683,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 #example .highlighted.example .grid .segment,
 #example .ui.type.items .image .grid .segment {
   min-height: 50px;
+  text-align: center;
   -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
   -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
   box-shadow: 0px 0px 0px 1px #DDDDDD;
@@ -685,6 +692,51 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   border-radius: 0px;
 }
 
+@-webkit-keyframes grid {
+  0% {
+    width: 100%;
+  }
+  40% {
+    width: 70%;
+  }
+  60% {
+    width: 70%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes grid {
+  0% {
+    width: 100%;
+  }
+  40% {
+    width: 70%;
+  }
+  60% {
+    width: 70%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes grid {
+  0% {
+    width: 100%;
+  }
+  40% {
+    width: 70%;
+  }
+  60% {
+    width: 70%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+
+
 #example .ui.type.items > .item > .image {
   padding: 1em;
   vertical-align: middle;

src/collections/menu.less

@@ -58,7 +58,7 @@
 
   vertical-align: middle;
 
-  line-height: 1.2em;
+  line-height: 1.25em;
   min-height: 1.25em;
 
   -webkit-box-sizing: border-box;
@@ -565,7 +565,36 @@
 }
 
 /*--------------
-     Colors
+    Colors
+---------------*/
+
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
+}
+
+/*--- Inverted Colors  ---*/
+.ui.green.menu .item.active {
+  border-color: #A1CF64;
+}
+.ui.red.menu .item.active {
+  border-color: #EF4D6D;
+}
+.ui.blue.menu .item.active {
+  border-color: #6ECFF5;
+}
+.ui.purple.menu .item.active {
+  border-color: #564F8A;
+}
+.ui.orange.menu .item.active {
+  border-color: #F05940;
+}
+.ui.teal.menu .item.active {
+  border-color: #00B5AD;
+}
+
+/*--------------
+ Inverted Colors
 ---------------*/
 
 /*--- Light Colors  ---*/

src/collections/message.less

@@ -47,9 +47,12 @@
   opacity: 0.85;
   margin: 1em 0em;
 }
-.ui.message p:first-child {
+.ui.message :first-child {
   margin-top: 0em;
 }
+.ui.message :last-child {
+  margin-bottom: 0em;
+}
 
 /* block with child list */
 .ui.message ul.list {

src/elements/button.less

@@ -508,9 +508,9 @@
 Containing Icon
 ---------------*/
 
-.ui.button i {
+.ui.button i.icon {
   line-height: 1;
-  margin-right: 0.2em;
+  margin-right: 0.5em;
 }
 
 /* left arrow icons */