From d99c9e24be7937d9577721b0ba12777bfd0991d8 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 31 Jan 2012 17:26:56 -0800 Subject: Added skin for html buttons. --- _scss/compass_app_log.txt | 1 + _scss/imports/scss/_Base.scss | 18 ++++++++++++++++-- css/ninja.css | 6 ++++-- 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); } -- cgit v1.2.3