button changes, default now dark

build/uncompressed/elements/button.css

@@ -20,8 +20,8 @@
   min-height: 1em;
   outline: none;
   border: none;
-  background-color: #EDEDED;
-  color: #999999;
+  background-color: #999999;
+  color: #FFFFFF;
   padding: 0.8em 1.5em;
   font-size: 1rem;
   text-transform: uppercase;
@@ -29,7 +29,7 @@
   font-weight: bold;
   font-style: normal;
   text-align: center;
-  text-shadow: none;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
@@ -117,21 +117,21 @@
 .ui.buttons .active.button,
 .ui.active.button {
   opacity: 1 !important;
-  background-color: #E6E6E6;
+  background-color: #B0B0B0;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
   background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
   background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
   background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
-  -webkit-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
 }
 .ui.buttons .active.button,
 .ui.buttons .active.button a,
 .ui.active.button,
 .ui.active.button a {
-  color: #666666;
+  color: #FFFFFF;
 }
 /*--------------
       Hover
@@ -139,8 +139,7 @@
 .ui.button:hover,
 .ui.button.hover {
   opacity: 1 !important;
-  background-color: #DEDEDE;
-  color: #777777;
+  background-color: #A4A4A4;
 }
 .ui.button:hover .icon,
 .ui.button.hover .icon {
@@ -153,11 +152,10 @@
 .ui.button:active,
 .ui.button.pressed {
   opacity: 1 !important;
-  background-color: #D8D8D8;
-  color: #777777;
-  -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
+  background-color: #8C8C8C;
+  -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
 }
 /*--------------
      Error

node/src/documents/modules/dropdown.html

@@ -508,7 +508,7 @@ type   : 'UI Module'
 
   <table class="ui celled definition table segment">
     <thead>
-      <th>Setting</th>
+      <th class="four wide">Setting</th>
       <th>Context</th>
       <th>Description</th>
     </thead>
@@ -535,7 +535,6 @@ type   : 'UI Module'
 
   <div class="no example">
 
-  <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
   <h4 class="ui header">DOM Settings</h4>
   <p>DOM settings specify how this module should interface with the DOM</p>
   <table class="ui celled definition table segment">
@@ -592,10 +591,8 @@ type   : 'UI Module'
 
   </div>
 
-
   <div class="no example">
 
-  <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
   <h4 class="ui header">Debug Settings</h4>
   <p>Debug settings controls debug output to the console</p>
   <table class="ui celled definition table segment">

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

@@ -20,8 +20,8 @@
   min-height: 1em;
   outline: none;
   border: none;
-  background-color: #EDEDED;
-  color: #999999;
+  background-color: #999999;
+  color: #FFFFFF;
   padding: 0.8em 1.5em;
   font-size: 1rem;
   text-transform: uppercase;
@@ -29,7 +29,7 @@
   font-weight: bold;
   font-style: normal;
   text-align: center;
-  text-shadow: none;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
@@ -117,21 +117,21 @@
 .ui.buttons .active.button,
 .ui.active.button {
   opacity: 1 !important;
-  background-color: #E6E6E6;
+  background-color: #B0B0B0;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
   background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
   background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
   background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
-  -webkit-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset;
 }
 .ui.buttons .active.button,
 .ui.buttons .active.button a,
 .ui.active.button,
 .ui.active.button a {
-  color: #666666;
+  color: #FFFFFF;
 }
 /*--------------
       Hover
@@ -139,8 +139,7 @@
 .ui.button:hover,
 .ui.button.hover {
   opacity: 1 !important;
-  background-color: #DEDEDE;
-  color: #777777;
+  background-color: #A4A4A4;
 }
 .ui.button:hover .icon,
 .ui.button.hover .icon {
@@ -153,11 +152,10 @@
 .ui.button:active,
 .ui.button.pressed {
   opacity: 1 !important;
-  background-color: #D8D8D8;
-  color: #777777;
-  -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
+  background-color: #8C8C8C;
+  -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
 }
 /*--------------
      Error

src/elements/button.less

@@ -25,8 +25,8 @@
 
   outline: none;
   border: none;
-  background-color: #EDEDED;
-  color: #999999;
+  background-color: #999999;
+  color: #FFFFFF;
 
   padding: 0.8em 1.5em;
 
@@ -36,7 +36,8 @@
   font-weight: bold;
   font-style: normal;
   text-align: center;
-  text-shadow: none;
+
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
@@ -183,7 +184,7 @@
 .ui.buttons .active.button,
 .ui.active.button {
   opacity: 1 !important;
-  background-color: #E6E6E6;
+  background-color: #B0B0B0;
 
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
@@ -192,20 +193,20 @@
   background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
 
   -webkit-box-shadow:
-    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset
+    0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset
   ;
   -moz-box-shadow:
-    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset
+    0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset
   ;
   box-shadow:
-    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.1) inset
+    0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset
   ;
 }
 .ui.buttons .active.button,
 .ui.buttons .active.button a,
 .ui.active.button,
 .ui.active.button a {
-  color: #666666;
+  color: #FFFFFF;
 }
 
 /*--------------
@@ -215,8 +216,7 @@
 .ui.button:hover,
 .ui.button.hover {
   opacity: 1 !important;
-  background-color: #DEDEDE;
-  color: #777777;
+  background-color: #A4A4A4;
 }
 .ui.button:hover .icon,
 .ui.button.hover .icon {
@@ -231,11 +231,11 @@
 .ui.button:active,
 .ui.button.pressed {
   opacity: 1 !important;
-  background-color: #D8D8D8;
-  color: #777777;
-  -webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
+  background-color: #8C8C8C;
+
+  -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset;
 }