From 5fee0949ac2000d3dd4899f069d3ef97755fece4 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Mon, 15 Oct 2012 21:25:25 +0000 Subject: [PATCH] Revise and combine button selectors. * Simplifies button selectors. Maintains backwards compatibility for several classes and makes creating new button styles considerably easier. * Adds buttons documentation. * Raw input submit/reset/button types now use default browser styles (instead of half-styled borders that did not look like buttons). * Moves basic button color standardization to the beginning of wp-admin. see #21598, #22197. git-svn-id: http://core.svn.wordpress.org/trunk@22239 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/colors-classic.css | 60 ----------------- wp-admin/css/colors-fresh.css | 55 --------------- wp-admin/css/wp-admin.css | 52 +++++++++++++-- wp-includes/css/buttons.css | 115 ++++++++++++-------------------- 4 files changed, 91 insertions(+), 191 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index 0db069f214..260b9e143c 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -20,66 +20,6 @@ TABLE OF CONTENTS: 1.0 - Left to Right Styles ------------------------------------------------------------------------------*/ -html, -.wp-dialog { - background-color: #fff; -} - -* html input, -* html .widget { - border-color: #dfdfdf; -} - -textarea, -input[type="text"], -input[type="password"], -input[type="file"], -input[type="button"], -input[type="submit"], -input[type="reset"], -input[type="email"], -input[type="number"], -input[type="search"], -input[type="tel"], -input[type="url"], -select { - border-color: #dfdfdf; - background-color: #fff; - color: #333; -} - -select { - color: #000; -} - -textarea:focus, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="file"]:focus, -input[type="button"]:focus, -input[type="submit"].focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -select:focus { - border-color: #a1a1a1; - -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1); - box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -} - -kbd, -code { - background: #eaeaea; -} - -input[readonly] { - background-color: #eee; -} - .find-box-search { border-color: #dfdfdf; background-color: #f1f1f1; diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 8aa05ff32f..8005dea6b0 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -20,61 +20,6 @@ TABLE OF CONTENTS: 1.0 - Left to Right Styles ------------------------------------------------------------------------------*/ -html, -.wp-dialog { - background-color: #fff; -} - -textarea, -input[type="text"], -input[type="password"], -input[type="file"], -input[type="button"], -input[type="submit"], -input[type="reset"], -input[type="email"], -input[type="number"], -input[type="search"], -input[type="tel"], -input[type="url"], -select { - border-color: #dfdfdf; - background-color: #fff; - color: #333; -} - -select { - color: #000; -} - -textarea:focus, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="file"]:focus, -input[type="button"]:focus, -input[type="submit"].focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -select:focus { - border-color: #a1a1a1; - -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1); - box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -} - -kbd, -code { - background: #eaeaea; -} - -input[readonly] { - background-color: #eee; -} - .find-box-search { border-color: #dfdfdf; background-color: #f1f1f1; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index c7a3c8370c..04b7913907 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -471,9 +471,6 @@ textarea, input[type="text"], input[type="password"], input[type="file"], -input[type="button"], -input[type="submit"], -input[type="reset"], input[type="email"], input[type="number"], input[type="search"], @@ -663,6 +660,53 @@ div.error p { padding-right: 0; } +html, +.wp-dialog { + background-color: #fff; +} + +textarea, +input[type="text"], +input[type="password"], +input[type="file"], +input[type="email"], +input[type="number"], +input[type="search"], +input[type="tel"], +input[type="url"], +select { + border-color: #dfdfdf; + background-color: #fff; + color: #333; +} + +select { + color: #000; +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="file"]:focus, +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +select:focus { + border-color: #a1a1a1; + -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1); + box-shadow: 1px 1px 2px rgba(0,0,0,0.1); +} + +kbd, +code { + background: #eaeaea; +} + +input[readonly] { + background-color: #eee; +} /*------------------------------------------------------------------------------ 1.0 - Text Styles @@ -2191,7 +2235,7 @@ html.wp-toolbar { background-position: 100% 17%; } -.welcome-button { +.welcome-panel .welcome-button { margin: -9px 0 3px; padding: 1em 3em; font: normal 15px/1 sans-serif; diff --git a/wp-includes/css/buttons.css b/wp-includes/css/buttons.css index 9ec72509c0..ffcfefb44d 100644 --- a/wp-includes/css/buttons.css +++ b/wp-includes/css/buttons.css @@ -2,6 +2,23 @@ WordPress-style Buttons +======================= +Create a button by adding the `.button` class to an element. For backwards +compatibility, we support several other classes (such as `.button-secondary`), +but these will *not* work with the stackable classes described below. + +Button Styles +------------- +To display a primary button style, add the `.button-primary` class to a button. + +Button Sizes +------------ +Adjust a button's size by adding the `.button-large` or `.button-small` class. + +Button States +------------- +Lock the state of a button by adding the name of the pseudoclass as +an actual class (e.g. `.hover` for `:hover`). TABLE OF CONTENTS: @@ -16,13 +33,9 @@ TABLE OF CONTENTS: 1.0 - Button Layouts ---------------------------------------------------------------------------- */ -.submit input, .button, -input.button, .button-primary, -input.button-primary, -.button-secondary, -input.button-secondary { +.button-secondary { display: inline-block; text-decoration: none; font-size: 12px; @@ -49,7 +62,7 @@ input.button-secondary { padding: 0.15em 0.75em 0.17em; } -a.button:active { +.button:active { outline: none; } @@ -58,10 +71,7 @@ a.button:active { ---------------------------------------------------------------------------- */ .button, -.button-secondary, -.submit input, -input[type=button], -input[type=submit] { +.button-secondary { background: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); @@ -75,24 +85,15 @@ input[type=submit] { .button.hover, .button:hover, -.button-secondary.hover, .button-secondary:hover, -.submit input:hover, -input[type=button]:hover, -input[type=submit]:hover, .button.focus, .button:focus, -.button-secondary.focus, -.button-secondary:focus, -.submit input.focus, -.submit input:focus, -input[type=button].focus, -input[type=button]:focus, -input[type=submit]:focus { +.button-secondary:focus { background: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); background-image: -webkit-linear-gradient(top, #fff, #f3f3f3); background-image: -moz-linear-gradient(top, #fff, #f3f3f3); + background-image: -ms-linear-gradient(top, #fff, #f3f3f3); background-image: -o-linear-gradient(top, #fff, #f3f3f3); background-image: linear-gradient(to bottom, #fff, #f3f3f3); border-color: #999; @@ -101,29 +102,21 @@ input[type=submit]:focus { .button.focus, .button:focus, -.button-secondary.focus, -.button-secondary:focus, -.submit input.focus, -.submit input:focus, -input[type=button].focus, -input[type=button]:focus, -input[type=submit]:focus { +.button-secondary:focus { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .button.active, +.button.active:hover, +.button.active:focus, .button:active, -.button-secondary.active, -.button-secondary:active, -.submit input:active, -input[type=button].active, -input[type=button]:active, -input[type=submit]:active { +.button-secondary:active { background: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe)); background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe); background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe); + background-image: -ms-linear-gradient(top, #f4f4f4, #fefefe); background-image: -o-linear-gradient(top, #f4f4f4, #fefefe); background-image: linear-gradient(to bottom, #f4f4f4, #fefefe); border-color: #999; @@ -133,17 +126,17 @@ input[type=submit]:active { box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); } -.button-disabled, .button[disabled], .button:disabled, .button-secondary[disabled], .button-secondary:disabled, -a.button.disabled { +.button-disabled { color: #aaa !important; border-color: #ddd !important; background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important; background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important; background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important; + background-image: -ms-linear-gradient(top, #f9f9f9, #f4f4f4) !important; background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important; background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important; -webkit-box-shadow: none !important; @@ -155,15 +148,12 @@ a.button.disabled { 3.0 - Primary Button Style ---------------------------------------------------------------------------- */ -input.button-primary, -input[type=submit].button-primary, -input[type=button].button-primary, -button.button-primary, -a.button-primary { +.button-primary { background-color: #21759b; background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); background-image: -moz-linear-gradient(top, #2a95c5, #21759b); + background-image: -ms-linear-gradient(top, #2a95c5, #21759b); background-image: -o-linear-gradient(top, #2a95c5, #21759b); background-image: linear-gradient(to bottom, #2a95c5, #21759b); border-color: #21759b; @@ -175,18 +165,10 @@ a.button-primary { text-shadow: 0 1px 0 rgba(0,0,0,0.1); } -input.button-primary.hover, -input.button-primary:hover, -input[type=submit].button-primary:hover, -input[type=button].button-primary:hover, -button.button-primary:hover, -a.button-primary:hover, -input.button-primary.focus, -input.button-primary:focus, -input[type=submit].button-primary:focus, -input[type=button].button-primary:focus, -button.button-primary:focus, -a.button-primary:focus { +.button-primary.hover, +.button-primary:hover, +.button-primary.focus, +.button-primary:focus { background-color: #278ab7; background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); @@ -201,23 +183,17 @@ a.button-primary:focus { text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } -input.button-primary.focus, -input.button-primary:focus, -input[type=submit].button-primary:focus, -input[type=button].button-primary:focus, -button.button-primary:focus, -a.button-primary:focus { +.button-primary.focus, +.button-primary:focus { border-color: #0e3950; -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); } -input.button-primary.active, -input[type=submit].button-primary:active, -input[type=button].button-primary:active, -input.button-primary:active, -button.button-primary:active, -a.button-primary:active { +.button-primary.active, +.button-primary.active:hover, +.button-primary.active:focus, +.button-primary:active { background: #1b607f; background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7)); background-image: -webkit-linear-gradient(top, #21759b, #278ab7); @@ -232,9 +208,9 @@ a.button-primary:active { text-shadow: 0 1px 0 rgba(0,0,0,0.1); } -.button-primary-disabled, .button-primary[disabled], -.button-primary:disabled { +.button-primary:disabled, +.button-primary-disabled { color: #94cde7 !important; background: #298cba !important; border-color: #1b607f !important; @@ -242,8 +218,3 @@ a.button-primary:active { box-shadow: none !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; } - -.button-primary-disabled:hover, -.button-primary[disabled]:hover { - text-shadow: none; -}