summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources/shared
diff options
context:
space:
mode:
Diffstat (limited to 'chrome/browser/resources/shared')
-rw-r--r--chrome/browser/resources/shared/css/checkbox.css138
-rw-r--r--chrome/browser/resources/shared/css/chrome_shared2.css38
-rw-r--r--chrome/browser/resources/shared/css/widgets.css (renamed from chrome/browser/resources/shared/css/button.css)213
-rw-r--r--chrome/browser/resources/shared/images/check.pngbin293 -> 283 bytes
-rw-r--r--chrome/browser/resources/shared/images/checkmark.pngbin209 -> 0 bytes
-rw-r--r--chrome/browser/resources/shared/js/cr/ui/menu_button.js4
-rw-r--r--chrome/browser/resources/shared/js/cr/ui/menu_item.js4
7 files changed, 164 insertions, 233 deletions
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
Binary files differ
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
Binary files differ
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');
},
generated by cgit v1.1 at 2025-11-29 18:37:45 +0000