Skip to content

GitLab

T
tangled
Commit bfc3c399 authored by estade@chromium.org's avatar estade@chromium.org
Browse files
Options

css hack n' slash, continued: New styles for buttons and selects. 

I am moving all widget styles into button.css. I will later rename it widget.css. This way, the rules that are common can be shared.

The next step will be to update/merge checkbox.css into button.css.

BUG=103688,115404
TEST=visual


Review URL: http://codereview.chromium.org/9579001

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@124845 0039d316-1c4b-4281-b951-d872f2087c98
parent bcd40056
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 134 deletions
chrome/browser/resources/chromeos/login/login.html
View file @ bfc3c399
......@@ -5,7 +5,6 @@
<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/select.css">
<link rel="stylesheet" href="chrome://resources/css/spinner.css">
<link rel="stylesheet" href="bubble.css">
<link rel="stylesheet" href="header_bar.css">
......
chrome/browser/resources/chromeos/login/oobe.html
View file @ bfc3c399
......@@ -5,7 +5,6 @@
<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/select.css">
<link rel="stylesheet" href="chrome://resources/css/spinner.css">
<link rel="stylesheet" href="chrome://resources/css/throbber.css">
<link rel="stylesheet" href="bubble.css">
......
chrome/browser/resources/chromeos/proxy_settings.html
View file @ bfc3c399
......@@ -3,9 +3,8 @@
<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/list.css">
<link rel="stylesheet" href="chrome://resources/css/select.css">
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="chrome://resources/css/list.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">
......
chrome/browser/resources/feedback.html
View file @ bfc3c399
......@@ -6,7 +6,6 @@
<!-- 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/select.css">
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="feedback.css">
......
chrome/browser/resources/options/options.html
View file @ bfc3c399
......@@ -11,7 +11,6 @@
<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/select.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">
......
chrome/browser/resources/options2/browser_options.css
View file @ bfc3c399
......@@ -2,10 +2,6 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
#manage-default-search-engines {
-webkit-margin-start: 4px;
}
#default-browser-state {
margin-top: 6px;
}
......@@ -250,11 +246,6 @@ html[dir=rtl] #pointer-sensitivity-more {
min-width: 100px;
}
#fontSettingsCustomizeFontsButton,
#privacyClearDataButton {
margin-left: 10px;
}
#timezone-value {
display: inline-block;
vertical-align: baseline;
......
chrome/browser/resources/options2/options.html
View file @ bfc3c399
......@@ -6,7 +6,6 @@
<link rel="icon" href="chrome://theme/IDR_SETTINGS_FAVICON">
<link rel="stylesheet" href="chrome://resources/css/list.css">
<link rel="stylesheet" href="chrome://resources/css/overlay.css">
<link rel="stylesheet" href="chrome://resources/css/select.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">
......
chrome/browser/resources/options2/options_page.css
View file @ bfc3c399
......@@ -52,10 +52,6 @@ div.disabled {
margin-top: 0.45em;
}
button:first-child {
-webkit-margin-start: 0;
}
/* TEXT */
input[type='password'],
input[type='text'],
......
chrome/browser/resources/print_preview/print_preview.css
View file @ bfc3c399
......@@ -32,7 +32,7 @@ header {
}
#print-header {
-webkit-padding-end: 16px;
-webkit-padding-end: 14px;
padding-bottom: 10px;
padding-top: 10px;
}
......@@ -125,11 +125,11 @@ button.loading {
cursor: progress;
}
button.default {
#print-preview button.default {
font-weight: bold;
}
button.default:not(:focus):not(:disabled) {
#print-preview button.default:not(:focus):not(:disabled) {
border-color: #808080;
}
......@@ -246,7 +246,7 @@ label {
#copies {
position: relative;
width: 1.5em;
width: 2.75em;
}
#copies.invalid {
......@@ -261,7 +261,7 @@ label {
font-weight: 600;
min-width: 0;
position: relative;
width: 25px;
width: 2em;
}
#increment:focus,
......@@ -360,6 +360,7 @@ html[dir='rtl'] #decrement {
#messages {
color: #404040;
font-size: 1.1em;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
......@@ -381,9 +382,7 @@ html[dir='rtl'] #decrement {
}
.message-with-dots span span {
-webkit-animation-duration: 1800ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: dancing-dots-jump;
-webkit-animation: dancing-dots-jump 1800ms infinite;
padding: 1px;
position: relative;
}
......@@ -411,7 +410,8 @@ html:not([toolkit=views]) .button-strip {
-webkit-box-direction: reverse;
}
.button-strip button {
#print-preview .button-strip button {
-webkit-margin-start: 4px;
display: block;
}
......
chrome/browser/resources/print_preview/print_preview.html
View file @ bfc3c399
......@@ -10,7 +10,6 @@
<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/select.css">
<link rel="stylesheet" href="../shared/css/throbber.css">
<script src="chrome://resources/js/cr.js"></script>
......
chrome/browser/resources/print_preview/print_preview_dummy.html
View file @ bfc3c399
......@@ -10,7 +10,6 @@
<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/select.css">
<link rel="stylesheet" href="../shared/css/throbber.css">
<script src="chrome://resources/js/cr.js"></script>
......
chrome/browser/resources/shared/css/button.css
View file @ bfc3c399
......@@ -3,76 +3,152 @@
* found in the LICENSE file.
*/
/* 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) {
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
input[type='submit']:not(.custom-appearance):not(.link-button),
select {
-webkit-user-select: none;
background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
border: 1px solid #aaa;
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;
/* Input elements have -webkit-small-control which can override the body font.
* Resolve this by using 'inherit'. */
font-family: inherit;
font-size: inherit;
margin-bottom: 0;
margin-top: 0;
font: inherit;
height: 2em;
margin: 0 1px 0 0;
min-width: 4em;
padding: 3px 12px;
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) {
-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)));
}
button:not(.custom-appearance):not(.link-button):hover,
input[type='button']:not(.custom-appearance):not(.link-button):hover,
input[type='submit']:not(.custom-appearance):not(.link-button):hover {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
border-color: #999;
color: #222;
select {
-webkit-appearance: none;
-webkit-padding-end: 20px;
-webkit-padding-start: 6px;
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)));
background-position: right center;
background-repeat: no-repeat;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
button:not(.custom-appearance):not(.link-button):active,
input[type='button']:not(.custom-appearance):not(.link-button):active,
input[type='submit']:not(.custom-appearance):not(.link-button):active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
color: #333;
html[dir='rtl'] select {
background-position: center left;
}
button[disabled]:not(.custom-appearance):not(.link-button),
input[type='button'][disabled]:not(.custom-appearance):not(.link-button),
input[type='submit'][disabled]:not(.custom-appearance):not(.link-button),
button[disabled]:not(.custom-appearance):not(.link-button):hover,
input[type='button'][disabled]:not(.custom-appearance):not(.link-button):hover,
input[type='submit'][disabled]:not(.custom-appearance):not(.link-button):hover {
-webkit-box-shadow: none;
background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
border-color: #aaa;
color: #888;
/* 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 {
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)));
}
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)));
}
/* TODO(estade): remove this. It's duplicated in chrome_shared2.css */
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 {
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 {
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)));
}
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 {
box-shadow: none;
text-shadow: none;
}
/* Disabled *******************************************************************/
button:not(.custom-appearance):not(.link-button):disabled,
input[type='button']:not(.custom-appearance):not(.link-button):disabled,
input[type='submit']:not(.custom-appearance):not(.link-button):disabled,
select:disabled {
border-color: rgba(0, 0, 0, 0.2);
color: #999;
}
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)));
}
/* Focus **********************************************************************/
button:not(.custom-appearance):not(.link-button):focus,
input[type='submit']:not(.custom-appearance):not(.link-button):focus,
input[type='text']:not(.custom-appearance):not(.link-button):focus,
select:not(.custom-appearance):not(.link-button):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;
input[type='submit']:not(.custom-appearance):focus,
input[type='text']:not(.custom-appearance):focus,
select:focus {
-webkit-transition: border-color 200ms;
/* We use border color because it follows the border radius (unlike outline).
* This is particularly noticeable on mac. */
border-color: rgb(64, 128, 250);
border-color: rgb(77, 144, 254);
outline: none;
}
/* Search boxes use an outline because it follows the contours of the box. */
input[type='search']:not(.custom-appearance):not(.link-button):focus {
outline-color: rgb(64, 128, 250);
input[type='search']:not(.custom-appearance):focus {
outline-color: rgb(77, 144, 254);
}
/* Link buttons ***************************************************************/
.link-button {
-webkit-box-shadow: none;
background: transparent none;
......
chrome/browser/resources/shared/css/checkbox.css
View file @ bfc3c399
......@@ -112,7 +112,6 @@ input[type='radio']:active:checked::before {
display: block;
}
/* TODO(estade): remove this. It's duplicated in chrome_shared2.css */
input[type='checkbox']:not(.custom-appearance):focus,
input[type='radio']:not(.custom-appearance):focus {
-webkit-box-shadow: inset 0 1px 2px white,
......
chrome/browser/resources/shared/css/chrome_shared.css
View file @ bfc3c399
......@@ -135,8 +135,10 @@ input[type='url'],
input:not([type]) {
-webkit-border-radius: 2px;
border: 1px solid #aaa;
font-size: inherit;
padding: 3px;
box-sizing: border-box;
font: inherit;
height: 2em;
padding: 4px;
}
input[type='text']:disabled {
......
chrome/browser/resources/shared/css/chrome_shared2.css
View file @ bfc3c399
......@@ -86,7 +86,7 @@ input:not([type]) {
border: 1px solid #bfbfbf;
border-radius: 2px;
font: inherit;
font-size: inherit;
height: 2em;
margin: 0;
padding: 3px;
}
......
chrome/browser/resources/shared/css/select.css deleted 100644 → 0
View file @ bcd40056
/* 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.
*/
select {
-webkit-appearance: button;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 8px;
-webkit-user-select: none;
background-image: url("../images/select.png"),
-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #aaa;
color: #555;
font: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
html[dir='rtl'] select {
background-position: center left;
}
select:disabled {
color: graytext;
background-image: url("../images/disabled_select.png"),
-webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
}
select:enabled:hover {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-image: url("../images/select.png"),
-webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
color: #333;
}
select:enabled:active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
background-image: url("../images/select.png"),
-webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
color: #444;
}
chrome/browser/resources/shared_resources.grd
View file @ bfc3c399
......@@ -30,8 +30,6 @@ without changes to the corresponding grd file. -->
file="shared/css/chrome_shared2.css" type="BINDATA" />
<include name="IDR_SHARED_CSS_OVERLAY"
file="shared/css/overlay.css" type="BINDATA" />
<include name="IDR_SHARED_CSS_SELECT"
file="shared/css/select.css" type="BINDATA" />
<include name="IDR_SHARED_CSS_SPINNER"
file="shared/css/spinner.css" type="BINDATA" />
<include name="IDR_SHARED_CSS_TABLE"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment