Added skin for html buttons.

3 files changed, 21 insertions, 4 deletions

diff --git a/_scss/compass_app_log.txt b/_scss/compass_app_log.txt
index 00a7f071..463846ba 100644
--- a/_scss/compass_app_log.txt
+++ b/_scss/compass_app_log.txt
@@ -106,3 +106,4 @@
 2012-01-27 16:12:29 overwrite ../css/ninja.css
 2012-01-27 16:13:46 overwrite ../css/ninja.css
 2012-01-27 16:14:02 overwrite ../css/ninja.css
+2012-01-31 17:22:02 overwrite ../css/ninja.css
diff --git a/_scss/imports/scss/_Base.scss b/_scss/imports/scss/_Base.scss
index 75ccc07d..77faa8f3 100644
--- a/_scss/imports/scss/_Base.scss
+++ b/_scss/imports/scss/_Base.scss
@@ -48,8 +48,7 @@ input.nj-skinned,
 textarea.nj-skinned, 
 button.nj-skinned,
 select.nj-skinned,
-select.nj-skinned option,
-button.nj-skinned {
+select.nj-skinned option {
         -webkit-appearance: none;
         outline: none;
 }
@@ -122,6 +121,21 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after {
 button.nj-skinned {
         font-size: 9px;
     cursor: pointer;
+        display: block;
+        border: 0px;
+        margin: 0px;
+        padding: 4px;
+        border: 1px $color-input-border solid;
+        background-color: $color-menu-bg;
+        background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
+        border-radius: 4px;
+        color: $color-menu-text;
+        text-transform: uppercase;
+        cursor: pointer;
+        text-shadow: 1px 1px 1px $color-app-shadow
+}
+button.nj-skinned:hover {
+        background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); 
 }
 
 // Radio buttons 
diff --git a/css/ninja.css b/css/ninja.css
index 9126c1d3..bf71955f 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -16,7 +16,7 @@
 
 .layout-table .flexor div:last-child { float: right; }
 
-input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option, button.nj-skinned { -webkit-appearance: none; outline: none; }
+input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option { -webkit-appearance: none; outline: none; }
 
 input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, textarea.nj-skinned, select.nj-skinned, select.nj-skinned option { border: 1px solid #313131; color: white; background-color: #444444; font-size: 12px; font-family: 'Droid Sans', sans-serif; }
 
@@ -34,7 +34,9 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button { -webkit-appearan
 
 input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; }
 
-button.nj-skinned { font-size: 9px; cursor: pointer; }
+button.nj-skinned { font-size: 9px; cursor: pointer; display: block; border: 0px; margin: 0px; padding: 4px; border: 1px #313131 solid; background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border-radius: 4px; color: white; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
+
+button.nj-skinned:hover { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); }
 
 input[type="radio"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 2px solid #282828; width: 12px; height: 12px; overflow: hidden; border-radius: 10px; font-size: 16px; line-height: 7px; text-indent: -7px; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); }