css hack n' slash, continued: New styles for checkboxes and radios.

BUG=103688,115404 TEST=visual Review URL: https://chromiumcodereview.appspot.com/9609023 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@125688 0039d316-1c4b-4281-b951-d872f2087c98
author: estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2012-03-08 21:36:28 +0000
committer: estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2012-03-08 21:36:28 +0000
commit: 651b20afb59bda189c7db10e11dd998a4d7e8350 (patch)
tree: b2c199731e61e4f7cb4c270fb430dba4ab8b3b06 /chrome/browser/resources
parent: b1755b2a0939e39ca871dcb39c7441efb2da0207 (diff)
download: chromium_src-651b20afb59bda189c7db10e11dd998a4d7e8350.zip
chromium_src-651b20afb59bda189c7db10e11dd998a4d7e8350.tar.gz
chromium_src-651b20afb59bda189c7db10e11dd998a4d7e8350.tar.bz2
29 files changed, 191 insertions, 275 deletions
diff --git a/chrome/browser/resources/bookmark_manager/bookmark_all_tabs.html b/chrome/browser/resources/bookmark_manager/bookmark_all_tabs.html
index 8f32994..3d1ab30 100644
--- a/chrome/browser/resources/bookmark_manager/bookmark_all_tabs.html
+++ b/chrome/browser/resources/bookmark_manager/bookmark_all_tabs.html
@@ -19,9 +19,9 @@ found in the LICENSE file.
                           'self'">
 <title i18n-content="title"></title>
 
-<link rel="stylesheet" href="../shared/css/tree.css">
-<link rel="stylesheet" href="../shared/css/button.css">
 <link rel="stylesheet" href="../shared/css/chrome_shared.css">
+<link rel="stylesheet" href="../shared/css/tree.css">
+<link rel="stylesheet" href="../shared/css/widgets.css">
 <link rel="stylesheet" href="css/bookmark_all_tabs.css">
 
 <script src="chrome://resources/css/tree.css.js"></script>
diff --git a/chrome/browser/resources/chromeos/choose_mobile_network.html b/chrome/browser/resources/chromeos/choose_mobile_network.html
index a3ab890..c89a442 100644
--- a/chrome/browser/resources/chromeos/choose_mobile_network.html
+++ b/chrome/browser/resources/chromeos/choose_mobile_network.html
@@ -2,7 +2,7 @@
 <html i18n-values="dir:textdirection">
 <head>
 <title i18n-content="title"></title>
-<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="mobile_dialogs.css">
 <link rel="stylesheet" href="choose_mobile_network.css">
 <script src="chrome://resources/js/cr.js"></script>
diff --git a/chrome/browser/resources/chromeos/login/login.html b/chrome/browser/resources/chromeos/login/login.html
index a228f0c..1cb04b7 100644
--- a/chrome/browser/resources/chromeos/login/login.html
+++ b/chrome/browser/resources/chromeos/login/login.html
@@ -2,10 +2,10 @@
 <html i18n-values="dir:textdirection">
 <head>
 <title i18n-content="title"></title>
-<link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/dialogs.css"></link>
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="bubble.css">
 <link rel="stylesheet" href="header_bar.css">
 <link rel="stylesheet" href="network_dropdown.css">
diff --git a/chrome/browser/resources/chromeos/login/oobe.html b/chrome/browser/resources/chromeos/login/oobe.html
index e4829e5..8149211 100644
--- a/chrome/browser/resources/chromeos/login/oobe.html
+++ b/chrome/browser/resources/chromeos/login/oobe.html
@@ -2,11 +2,11 @@
 <html i18n-values="dir:textdirection">
 <head>
 <title i18n-content="title"></title>
-<link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/dialogs.css"></link>
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="bubble.css">
 <link rel="stylesheet" href="header_bar.css">
 <link rel="stylesheet" href="network_dropdown.css">
diff --git a/chrome/browser/resources/chromeos/proxy_settings.html b/chrome/browser/resources/chromeos/proxy_settings.html
index 35cbe8d..5fa7e2b 100644
--- a/chrome/browser/resources/chromeos/proxy_settings.html
+++ b/chrome/browser/resources/chromeos/proxy_settings.html
@@ -1,10 +1,9 @@
 <!DOCTYPE HTML>
 <html i18n-values="dir:textdirection">
 <head>
-<link rel="stylesheet" href="chrome://resources/css/button.css">
-<link rel="stylesheet" href="chrome://resources/css/checkbox.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="../options/options_page.css">
 <link rel="stylesheet" href="../options/chromeos/internet_options_page.css">
 <link rel="stylesheet" href="../options/chromeos/proxy.css">
diff --git a/chrome/browser/resources/chromeos/sim_unlock.html b/chrome/browser/resources/chromeos/sim_unlock.html
index 19528dc..aa53ce6 100644
--- a/chrome/browser/resources/chromeos/sim_unlock.html
+++ b/chrome/browser/resources/chromeos/sim_unlock.html
@@ -2,7 +2,7 @@
 <html i18n-values="dir:textdirection">
 <head>
 <title i18n-content="title"></title>
-<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="mobile_dialogs.css">
 <link rel="stylesheet" href="sim_unlock.css">
 <script src="chrome://resources/js/cr.js"></script>
diff --git a/chrome/browser/resources/downloads.html b/chrome/browser/resources/downloads.html
index 86fd12a..fcfd7ca 100644
--- a/chrome/browser/resources/downloads.html
+++ b/chrome/browser/resources/downloads.html
@@ -5,8 +5,8 @@
 <title i18n-content="title"></title>
 <link rel="icon" href="../../app/theme/downloads_favicon.png">
 <link rel="stylesheet" href="old_webui.css">
-<link rel="stylesheet" href="shared/css/button.css">
 <link rel="stylesheet" href="shared/css/chrome_shared.css">
+<link rel="stylesheet" href="shared/css/widgets.css">
 <style>
 
 #downloads-summary {
diff --git a/chrome/browser/resources/feedback.html b/chrome/browser/resources/feedback.html
index ea61fb0..7290e98 100644
--- a/chrome/browser/resources/feedback.html
+++ b/chrome/browser/resources/feedback.html
@@ -4,9 +4,8 @@
 <meta charset="utf-8"/>
 <title i18n-content="page-title"></title>
 <!-- We want to keep our style in sync with the options page. -->
-<link rel="stylesheet" href="chrome://resources/css/button.css">
-<link rel="stylesheet" href="chrome://resources/css/checkbox.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="feedback.css">
 
 <script src="chrome://resources/js/local_strings.js"></script>
diff --git a/chrome/browser/resources/gpu_internals/gpu_internals.html b/chrome/browser/resources/gpu_internals/gpu_internals.html
index c41ee972..bb5d919 100644
--- a/chrome/browser/resources/gpu_internals/gpu_internals.html
+++ b/chrome/browser/resources/gpu_internals/gpu_internals.html
@@ -38,7 +38,7 @@ tabbox tabpanels {
 </style>
 <link rel="stylesheet" href="info_view.css">
 <link rel="stylesheet" href="chrome://resources/css/tabs.css">
-<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>
 <script src="chrome://resources/js/cr/ui.js"></script>
diff --git a/chrome/browser/resources/help/help.html b/chrome/browser/resources/help/help.html
index c2306b1..fb6b5c9 100644
--- a/chrome/browser/resources/help/help.html
+++ b/chrome/browser/resources/help/help.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <title i18n-content="helpTitle"></title>
-  <link rel="stylesheet" href="../shared/css/button.css">
   <link rel="stylesheet" href="../shared/css/chrome_shared2.css">
   <link rel="stylesheet" href="../shared/css/overlay.css">
   <link rel="stylesheet" href="../uber/uber_shared.css">
diff --git a/chrome/browser/resources/history/history.css b/chrome/browser/resources/history/history.css
index 7002f64..6b46dff 100644
--- a/chrome/browser/resources/history/history.css
+++ b/chrome/browser/resources/history/history.css
@@ -136,11 +136,7 @@ html[dir='rtl'] .entry .title {
 .entry input[type=checkbox] {
   -webkit-margin-end: 6px;
   -webkit-margin-start: 4px;
-  height: 14px;
-  line-height: 12px;
-  text-indent: -1px;
-  top: 2px;
-  width: 14px;
+  line-height: 1em;
 }
 
 /* Checkboxes are shown when checked or focused, or when the entry is hovered.
diff --git a/chrome/browser/resources/ntp4/new_tab.html b/chrome/browser/resources/ntp4/new_tab.html
index b2cbf40..11f97f4 100644
--- a/chrome/browser/resources/ntp4/new_tab.html
+++ b/chrome/browser/resources/ntp4/new_tab.html
@@ -21,11 +21,11 @@
 <!-- It's important that this be the first script loaded. -->
 <script src="logging.js"></script>
 
-<link rel="stylesheet" href="../shared/css/button.css">
 <link rel="stylesheet" href="../shared/css/bubble.css">
 <link rel="stylesheet" href="../shared/css/expandable_bubble.css">
 <link rel="stylesheet" href="../shared/css/menu.css">
 <link rel="stylesheet" href="../shared/css/trash.css">
+<link rel="stylesheet" href="../shared/css/widgets.css">
 <link rel="stylesheet" href="apps_page.css">
 <link rel="stylesheet" href="chrome://newtab/suggestions_page.css">
 <link rel="stylesheet" href="most_visited_page.css">
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index dd05fed..a740dca 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -7,13 +7,12 @@
 <title i18n-content="browserPageTabTitle"></title>
 
 <link rel="icon" href="../../../app/theme/settings_favicon.png">
-<link rel="stylesheet" href="chrome://resources/css/button.css">
-<link rel="stylesheet" href="chrome://resources/css/checkbox.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="chrome://resources/css/tree.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="options_page.css">
 <link rel="stylesheet" href="advanced_options.css">
 <link rel="stylesheet" href="alert_overlay.css">
diff --git a/chrome/browser/resources/policy.html b/chrome/browser/resources/policy.html
index b8ac33d..d9cd832 100644
--- a/chrome/browser/resources/policy.html
+++ b/chrome/browser/resources/policy.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <title i18n-content="policyTitle"></title>
-<link rel="stylesheet" href="chrome://resources/css/button.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <link rel="stylesheet" href="policy.css">
 <script src="chrome://policy/strings.js"></script>
 <script src="chrome://resources/js/cr.js"></script>
diff --git a/chrome/browser/resources/print_preview/print_preview.css b/chrome/browser/resources/print_preview/print_preview.css
index 02784ad..4450a3b 100644
--- a/chrome/browser/resources/print_preview/print_preview.css
+++ b/chrome/browser/resources/print_preview/print_preview.css
@@ -293,10 +293,7 @@ html[dir='rtl'] #decrement {
 #system-dialog-link {
   -webkit-margin-start: 16px;
   margin-top: 10px;
-  /* TODO: Remove !important when it is also removed from link-button in
-   * chrome/browser/resources/shared/css/button.css also removes it.
-   */
-  padding: 0 !important;
+  padding: 0;
 }
 
 /* PDF view */
diff --git a/chrome/browser/resources/print_preview/print_preview.html b/chrome/browser/resources/print_preview/print_preview.html
index db7f7d4..f8624d7 100644
--- a/chrome/browser/resources/print_preview/print_preview.html
+++ b/chrome/browser/resources/print_preview/print_preview.html
@@ -7,10 +7,9 @@
 
 <link rel="stylesheet" href="margins.css">
 <link rel="stylesheet" href="print_preview.css">
-<link rel="stylesheet" href="../shared/css/button.css">
-<link rel="stylesheet" href="../shared/css/checkbox.css">
 <link rel="stylesheet" href="../shared/css/chrome_shared.css">
 <link rel="stylesheet" href="../shared/css/throbber.css">
+<link rel="stylesheet" href="../shared/css/widgets.css">
 
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/event_tracker.js"></script>
diff --git a/chrome/browser/resources/print_preview/print_preview_dummy.html b/chrome/browser/resources/print_preview/print_preview_dummy.html
index c997337..40cee7b 100644
--- a/chrome/browser/resources/print_preview/print_preview_dummy.html
+++ b/chrome/browser/resources/print_preview/print_preview_dummy.html
@@ -7,10 +7,9 @@
 
 <link rel="stylesheet" href="margins.css">
 <link rel="stylesheet" href="print_preview.css">
-<link rel="stylesheet" href="../shared/css/button.css">
-<link rel="stylesheet" href="../shared/css/checkbox.css">
 <link rel="stylesheet" href="../shared/css/chrome_shared.css">
 <link rel="stylesheet" href="../shared/css/throbber.css">
+<link rel="stylesheet" href="../shared/css/widgets.css">
 
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/local_strings.js"></script>
diff --git a/chrome/browser/resources/shared/css/checkbox.css b/chrome/browser/resources/shared/css/checkbox.css
index 479fbee..276ff6f 100644
--- a/chrome/browser/resources/shared/css/checkbox.css
+++ b/chrome/browser/resources/shared/css/checkbox.css
@@ -2,142 +2,4 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-input[type='checkbox'],
-input[type='radio'] {
-  -webkit-box-shadow: inset 0 1px 2px white,
-                      0 1px 2px rgba(0, 0, 0, .2);
-  -webkit-appearance: none;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 3px;
-  background: -webkit-linear-gradient(#fafafa, #dcdcdc);
-  border: 1px solid #a0a0a0;
-  display: inline-block;
-  margin-bottom: 0;
-  margin-top: 0;
-  position: relative;
-}
 
-input[type='checkbox']:disabled,
-input[type='radio']:disabled {
-  opacity: .75;
-}
-
-input[type='checkbox'] {
-  border-radius: 3px;
-  height: 16px;
-  width: 16px;
-}
-
-input[type='checkbox']:not(:disabled):not(:active):hover,
-input[type='radio']:not(:disabled):not(:active):hover {
-  background: -webkit-linear-gradient(#fff, #e6e6e6);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-}
-
-input[type='checkbox']:not(:disabled):active {
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
-  border: 1px solid #808080;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-}
-
-input[type='checkbox']:checked::before {
-  -webkit-user-select: none;
-  color: #808080;
-  content: url('../images/checkmark.png');
-  font-size: 13px;  /* Explicitly set the font size so that the positioning
-                       of the checkmark is correct. */
-  height: 16px;
-  left: 2px;
-  position: absolute;
-}
-
-input[type='radio'] {
-  border-radius: 100%;
-  height: 15px;
-  width: 15px;
-}
-
-input[type='radio']:not(:disabled):active {
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
-  border: 1px solid #808080;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-}
-
-input[type='radio']:checked::before {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-  -webkit-margin-start: 4px;
-  background: #808080;
-  border-radius: 10px;
-  content: '';
-  display: inline-block;
-  font-size: 13px;
-  font-weight: 400;
-  height: 5px;
-  left: 0;
-  margin-top: 4px;
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  vertical-align: top;
-  width: 5px;
-}
-
-html[dir='rtl'] input[type='radio']:checked::before {
-  right: 0;
-}
-
-input[type='radio']:active:checked::before {
-  background: #606060;
-}
-
-/* .checkbox and .radio classes wrap labels. */
-
-.checkbox,
-.radio {
-  margin: 9px 0;
-}
-
-.checkbox label,
-.radio label {
-  /* Don't expand horizontally: http://crbug.com/112091 */
-  display: -webkit-inline-box;
-}
-
-.checkbox label input ~ span,
-.radio label input ~ span {
-  -webkit-margin-start: 0.4em;
-  /* Make sure long spans wrap at the same horizontal position they start. */
-  display: block;
-}
-
-input[type='checkbox']:not(.custom-appearance):focus,
-input[type='radio']:not(.custom-appearance):focus {
-  -webkit-box-shadow: inset 0 1px 2px white,
-      0 1px 2px rgba(0, 0, 0, .2),
-      0 0 1px #c0c0c0,
-      0 0 1px #c0c0c0,
-      0 0 1px #c0c0c0;
-  -webkit-transition: border-color 200ms;
-  border-color: rgb(64, 128, 250);
-  outline: none;
-}
-
-label > input[type=radio] ~ span,
-label > input[type=checkbox] ~ span,
-input[type=checkbox] ~ label {
-  color: #444;
-}
-
-label > input[type=checkbox]:disabled ~ span,
-label > input[type=radio]:disabled ~ span,
-input[type=checkbox]:disabled ~ label {
-  color: #888;
-}
-
-label:hover > input[type=checkbox]:not(:disabled) ~ span,
-label:hover > input[type=radio]:not(:disabled) ~ span,
-input[type=checkbox]:not(:disabled) ~ label:hover {
-  color: #222;
-}
diff --git a/chrome/browser/resources/shared/css/chrome_shared2.css b/chrome/browser/resources/shared/css/chrome_shared2.css
index 4dd51b8..0c8858e 100644
--- a/chrome/browser/resources/shared/css/chrome_shared2.css
+++ b/chrome/browser/resources/shared/css/chrome_shared2.css
@@ -6,8 +6,7 @@
  * chrome:// pages. This contrasts chrome_shared.css, which it is meant to
  * replace, but has CSS specific to options and options-like pages. */
 
-@import url("chrome://resources/css/button.css");
-@import url("chrome://resources/css/checkbox.css");
+@import url("chrome://resources/css/widgets.css");
 
 /* Prevent CSS from overriding the hidden property. */
 [hidden] {
@@ -66,41 +65,6 @@ a:active {
   color: rgb(5, 37, 119);
 }
 
-div.checkbox,
-div.radio {
-  margin: 0.45em 0;
-}
-
-input[type=radio] ~ span,
-input[type=checkbox] ~ span {
-  color: #444;
-}
-
-/* TEXT */
-/* TODO(estade): add more types here? */
-input[type='password'],
-input[type='search'],
-input[type='text'],
-input[type='url'],
-input:not([type]) {
-  border: 1px solid #bfbfbf;
-  border-radius: 2px;
-  font: inherit;
-  height: 2em;
-  margin: 0;
-  padding: 3px;
-}
-
-input[type='search'] {
-  /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
-   * of the default text in relatively spacious languages (i.e. German). */
-  min-width: 160px;
-}
-
-input[type='text']:disabled {
-  color: #888;
-}
-
 /*
  * Add padding to increase the touchable area of search box. Use original font
  * size to avoid the width of search box exceeding the width of navbar.
diff --git a/chrome/browser/resources/shared/css/button.css b/chrome/browser/resources/shared/css/widgets.css
index 31fb09c..8406a54 100644
--- a/chrome/browser/resources/shared/css/button.css
+++ b/chrome/browser/resources/shared/css/widgets.css
@@ -3,46 +3,54 @@
  * found in the LICENSE file.
  */
 
+/* This file defines styles for form controls. The order of rule blocks is
+ * important as there are some rules with equal specificity that rely on order
+ * as a tiebreaker. These are marked with OVERRIDE.
+ */
+
 /* Default state **************************************************************/
 
 button:not(.custom-appearance):not(.link-button),
 input[type='button']:not(.custom-appearance):not(.link-button),
 input[type='submit']:not(.custom-appearance):not(.link-button),
-select {
+select,
+input[type='checkbox'],
+input[type='radio'] {
+  -webkit-appearance: none;
   -webkit-user-select: none;
+  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.25);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
       inset 0 1px 2px rgba(255, 255, 255, 0.75);
   color: #444;
   font: inherit;
-  height: 2em;
   margin: 0 1px 0 0;
-  min-width: 4em;
   text-shadow: 0 1px 0 rgb(240, 240, 240);
 }
 
 button:not(.custom-appearance):not(.link-button),
 input[type='button']:not(.custom-appearance):not(.link-button),
+input[type='submit']:not(.custom-appearance):not(.link-button),
+select {
+  height: 2em;
+  min-width: 4em;
+}
+
+button:not(.custom-appearance):not(.link-button),
+input[type='button']:not(.custom-appearance):not(.link-button),
 input[type='submit']:not(.custom-appearance):not(.link-button) {
   -webkit-padding-end: 10px;
   -webkit-padding-start: 10px;
-  background-image:
-      -webkit-gradient(linear, left top, left bottom,
-                       color-stop(0, rgb(237, 237, 237)),
-                       color-stop(0.38, rgb(237, 237, 237)),
-                       color-stop(1, rgb(222, 222, 222)));
 }
 
 select {
   -webkit-appearance: none;
   -webkit-padding-end: 20px;
   -webkit-padding-start: 6px;
+  /* OVERRIDE */
   background-image: url('../images/select.png'),
-      -webkit-gradient(linear, left top, left bottom,
-                       color-stop(0, rgb(237, 237, 237)),
-                       color-stop(0.38, rgb(237, 237, 237)),
-                       color-stop(1, rgb(222, 222, 222)));
+      -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   background-position: right center;
   background-repeat: no-repeat;
   overflow: hidden;
@@ -55,62 +63,90 @@ html[dir='rtl'] select {
   background-position: center left;
 }
 
-/* Hover **********************************************************************/
+input[type='checkbox'] {
+  bottom: 2px;
+  height: 13px;
+  position: relative;
+  vertical-align: middle;
+  width: 13px;
+}
 
-button:not(.custom-appearance):not(.link-button):enabled:hover,
-input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover,
-input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover {
-  background-image: -webkit-gradient(linear, left top, left bottom,
-                                     color-stop(0, rgb(240, 240, 240)),
-                                     color-stop(0.38, rgb(240, 240, 240)),
-                                     color-stop(1, rgb(224, 224, 224)));
+input[type='radio'] {
+  /* OVERRIDE */
+  border-radius: 100%;
+  height: 15px;
+  position: relative;
+  width: 15px;
 }
 
-select:enabled:hover {
-  background-image: url('../images/select.png'),
-      -webkit-gradient(linear, left top, left bottom,
-                       color-stop(0, rgb(237, 237, 237)),
-                       color-stop(0.38, rgb(237, 237, 237)),
-                       color-stop(1, rgb(222, 222, 222)));
+/* Checked ********************************************************************/
+
+input[type='checkbox']:checked::before {
+  -webkit-user-select: none;
+  background-image: url('../images/check.png');
+  background-size: 100% 100%;
+  content: '';
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+html[dir='rtl'] input[type='checkbox']:checked::before {
+  -webkit-transform: scaleX(-1);
 }
 
+input[type='radio']:checked::before {
+  background-color: #666;
+  border-radius: 100%;
+  bottom: 25%;
+  content: '';
+  display: block;
+  left: 25%;
+  position: absolute;
+  right: 25%;
+  top: 25%;
+}
+
+/* Hover **********************************************************************/
+
 button:not(.custom-appearance):not(.link-button):enabled:hover,
 input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover,
 input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover,
-select:enabled:hover {
+select:enabled:hover,
+input[type='checkbox']:enabled:hover,
+input[type='radio']:enabled:hover {
+  background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
   border-color: rgba(0, 0, 0, 0.3);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
       inset 0 1px 2px rgba(255, 255, 255, 0.95);
   color: black;
 }
 
-/* Active *********************************************************************/
-
-button:not(.custom-appearance):not(.link-button):enabled:active,
-input[type='button']:not(.custom-appearance):not(.link-button):enabled:active,
-input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active {
-  background-image: -webkit-gradient(linear, left top, left bottom,
-                                     color-stop(0, rgb(231, 231, 231)),
-                                     color-stop(0.38, rgb(231, 231, 231)),
-                                     color-stop(1, rgb(215, 215, 215)));
-}
-
-select:enabled:active {
+select:enabled:hover {
+  /* OVERRIDE */
   background-image: url('../images/select.png'),
-      -webkit-gradient(linear, left top, left bottom,
-                       color-stop(0, rgb(231, 231, 231)),
-                       color-stop(0.38, rgb(231, 231, 231)),
-                       color-stop(1, rgb(215, 215, 215)));
+      -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 }
 
+/* Active *********************************************************************/
+
 button:not(.custom-appearance):not(.link-button):enabled:active,
 input[type='button']:not(.custom-appearance):not(.link-button):enabled:active,
 input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active,
-select:enabled:active {
+select:enabled:active,
+input[type='checkbox']:enabled:active,
+input[type='radio']:enabled:active {
+  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
   box-shadow: none;
   text-shadow: none;
 }
 
+select:enabled:active {
+  /* OVERRIDE */
+  background-image: url('../images/select.png'),
+      -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+}
+
 /* Disabled *******************************************************************/
 
 button:not(.custom-appearance):not(.link-button):disabled,
@@ -123,17 +159,22 @@ select:disabled {
 
 select:disabled {
   background-image: url('../images/disabled_select.png'),
-      -webkit-gradient(linear, left top, left bottom,
-                       color-stop(0, rgb(237, 237, 237)),
-                       color-stop(0.38, rgb(237, 237, 237)),
-                       color-stop(1, rgb(222, 222, 222)));
+      -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
+}
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled {
+  opacity: .75;
 }
 
 /* Focus **********************************************************************/
 
 button:not(.custom-appearance):not(.link-button):focus,
 input[type='submit']:not(.custom-appearance):focus,
-input[type='text']:not(.custom-appearance):focus,
+input[type='text']:focus,
+input[type='search']:focus {
+input[type='checkbox']:focus,
+input[type='radio']:focus,
 select:focus {
   -webkit-transition: border-color 200ms;
   /* We use border color because it follows the border radius (unlike outline).
@@ -142,11 +183,6 @@ select:focus {
   outline: none;
 }
 
-/* Search boxes use an outline because it follows the contours of the box. */
-input[type='search']:not(.custom-appearance):focus {
-  outline-color: rgb(77, 144, 254);
-}
-
 /* Link buttons ***************************************************************/
 
 .link-button {
@@ -176,3 +212,72 @@ input[type='search']:not(.custom-appearance):focus {
   cursor: default;
   text-decoration: none;
 }
+
+/* Checkbox/radio helpers ******************************************************
+ *
+ * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
+ * these classes with the markup structure:
+ *
+ *   <div class="checkbox">
+ *     <label>
+ *       <input type="checkbox"></input>
+ *       <span>
+ *     </label>
+ *   </div>
+ */
+
+.checkbox,
+.radio {
+  margin: 0.45em 0;
+}
+
+.checkbox label,
+.radio label {
+  color: #444;
+  /* Don't expand horizontally: <http://crbug.com/112091>. */
+  display: -webkit-inline-box;
+}
+
+.checkbox label input ~ span,
+.radio label input ~ span {
+  -webkit-margin-start: 0.4em;
+  /* Make sure long spans wrap at the same horizontal position they start. */
+  display: block;
+}
+
+.checkbox label:hover,
+.radio label:hover {
+  color: black;
+}
+
+label > input[type=checkbox]:disabled ~ span,
+label > input[type=radio]:disabled ~ span {
+  color: #999;
+}
+
+/* Text inputs ****************************************************************/
+/* TODO(estade): add more types here? */
+input[type='password'],
+input[type='search'],
+input[type='text'],
+input[type='url'],
+input:not([type]) {
+  border: 1px solid #bfbfbf;
+  border-radius: 2px;
+  box-sizing: border-box;
+  font: inherit;
+  height: 2em;
+  margin: 0;
+  padding: 3px;
+}
+
+input[type='search'] {
+  -webkit-appearance: textfield;
+  /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
+   * of the default text in relatively spacious languages (i.e. German). */
+  min-width: 160px;
+}
+
+input[type='text']:disabled {
+  color: #888;
+}
diff --git a/chrome/browser/resources/shared/images/check.png b/chrome/browser/resources/shared/images/check.png
index 771d5e7..68e7884 100644
--- a/chrome/browser/resources/shared/images/check.png
+++ b/chrome/browser/resources/shared/images/check.png
diff --git a/chrome/browser/resources/shared/images/checkmark.png b/chrome/browser/resources/shared/images/checkmark.png
deleted file mode 100644
index 00a394b..0000000
--- a/chrome/browser/resources/shared/images/checkmark.png
+++ /dev/null
diff --git a/chrome/browser/resources/shared/js/cr/ui/menu_button.js b/chrome/browser/resources/shared/js/cr/ui/menu_button.js
index 1690a266..d1c293a 100644
--- a/chrome/browser/resources/shared/js/cr/ui/menu_button.js
+++ b/chrome/browser/resources/shared/js/cr/ui/menu_button.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -24,7 +24,7 @@ cr.define('cr.ui', function() {
       this.addEventListener('mousedown', this);
       this.addEventListener('keydown', this);
 
-      // Adding the 'custom-appearance' class prevents button.css from changing
+      // Adding the 'custom-appearance' class prevents widgets.css from changing
       // the appearance of this element.
       this.classList.add('custom-appearance');
 
diff --git a/chrome/browser/resources/shared/js/cr/ui/menu_item.js b/chrome/browser/resources/shared/js/cr/ui/menu_item.js
index 4b0cf9e..6c5ac7a 100644
--- a/chrome/browser/resources/shared/js/cr/ui/menu_item.js
+++ b/chrome/browser/resources/shared/js/cr/ui/menu_item.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -36,7 +36,7 @@ cr.define('cr.ui', function() {
 
       this.addEventListener('mouseup', this.handleMouseUp_);
 
-      // Adding the 'custom-appearance' class prevents button.css from changing
+      // Adding the 'custom-appearance' class prevents widgets.css from changing
       // the appearance of this element.
       this.classList.add('custom-appearance');
     },
diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd
index 3c894ec..96d9f3d 100644
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -16,10 +16,6 @@ without changes to the corresponding grd file. -->
                file="shared/css/about_memory.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_ALERT_OVERLAY"
                file="shared/css/alert_overlay.css" type="BINDATA" />
-      <include name="IDR_SHARED_CSS_BUTTON"
-               file="shared/css/button.css" type="BINDATA" />
-      <include name="IDR_SHARED_CSS_CHECKBOX"
-               file="shared/css/checkbox.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_DIALOGS"
                file="shared/css/dialogs.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_LIST"
@@ -44,8 +40,10 @@ without changes to the corresponding grd file. -->
                file="shared/css/tree.css" type="BINDATA" />
       <include name="IDR_SHARED_CSS_TREE_JS"
                file="shared/css/tree.css.js" type="BINDATA" />
-      <include name="IDR_SHARED_IMAGES_CHECKMARK"
-               file="shared/images/checkmark.png" type="BINDATA" />
+      <include name="IDR_SHARED_CSS_WIDGETS"
+               file="shared/css/widgets.css" type="BINDATA" />
+      <include name="IDR_SHARED_IMAGES_CHECK"
+               file="shared/images/check.png" type="BINDATA" />
       <include name="IDR_SHARED_IMAGES_CHECKBOX_BLACK"
                file="shared/images/checkbox_black.png" type="BINDATA" />
       <include name="IDR_SHARED_IMAGES_CHECKBOX_WHITE"
diff --git a/chrome/browser/resources/sync_promo/sync_promo.html b/chrome/browser/resources/sync_promo/sync_promo.html
index 4bcdd52..c2d4dd9 100644
--- a/chrome/browser/resources/sync_promo/sync_promo.html
+++ b/chrome/browser/resources/sync_promo/sync_promo.html
@@ -12,8 +12,8 @@
 <script src="chrome://resources/js/cr/event_target.js"></script>
 <script src="../strings.js"></script>
 <script src="sync_promo.js"></script>
-<link rel="stylesheet" href="../shared/css/button.css">
 <link rel="stylesheet" href="../shared/css/throbber.css">
+<link rel="stylesheet" href="../shared/css/widgets.css">
 <link rel="stylesheet" href="../sync_setup_overlay.css">
 <link rel="stylesheet" href="sync_promo.css">
 </head>
diff --git a/chrome/browser/resources/task_manager/includes.js b/chrome/browser/resources/task_manager/includes.js
index 56646c8..f944f24 100644
--- a/chrome/browser/resources/task_manager/includes.js
+++ b/chrome/browser/resources/task_manager/includes.js
@@ -11,7 +11,7 @@ var css = [
   'list.css',
   'table.css',
   'menu.css',
-  'button.css',
+  'widgets.css',
 ];
 
 var script = [
diff --git a/chrome/browser/resources/tracing.html b/chrome/browser/resources/tracing.html
index cc9fc85..37ea384 100644
--- a/chrome/browser/resources/tracing.html
+++ b/chrome/browser/resources/tracing.html
@@ -43,8 +43,8 @@ body {
 <link rel="stylesheet" href="tracing/timeline_view.css">
 <link rel="stylesheet" href="tracing/timeline.css">
 <link rel="stylesheet" href="tracing/tracing_controller.css">
-<link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/tabs.css">
+<link rel="stylesheet" href="chrome://resources/css/widgets.css">
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>
 <script src="chrome://resources/js/cr/ui.js"></script>
diff --git a/chrome/browser/resources/uber/uber_shared.css b/chrome/browser/resources/uber/uber_shared.css
index baacce9..88e823e 100644
--- a/chrome/browser/resources/uber/uber_shared.css
+++ b/chrome/browser/resources/uber/uber_shared.css
@@ -52,9 +52,9 @@ body.uber-frame header > button {
   top: 21px;
 }
 
-body.uber-frame html[dir='rtl'] header > .search-field-container,
-body.uber-frame html[dir='rtl'] header > .header-extras,
-body.uber-frame html[dir='rtl'] header > button {
+html[dir='rtl'] body.uber-frame header > .search-field-container,
+html[dir='rtl'] body.uber-frame header > .header-extras,
+html[dir='rtl'] body.uber-frame header > button {
   left: 20px;
   right: auto;
 }
author	estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2012-03-08 21:36:28 +0000
committer	estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2012-03-08 21:36:28 +0000
commit	651b20afb59bda189c7db10e11dd998a4d7e8350 (patch)
tree	b2c199731e61e4f7cb4c270fb430dba4ab8b3b06 /chrome/browser/resources
parent	b1755b2a0939e39ca871dcb39c7441efb2da0207 (diff)
download	chromium_src-651b20afb59bda189c7db10e11dd998a4d7e8350.zip chromium_src-651b20afb59bda189c7db10e11dd998a4d7e8350.tar.gz chromium_src-651b20afb59bda189c7db10e11dd998a4d7e8350.tar.bz2