WordPress.org
Get WordPress

Make WordPress Core

Changeset 22239


Ignore:
Timestamp:
10/15/2012 09:25:25 PM (12 years ago)
Author:
koopersmith
Message:

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.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/colors-classic.css

    r22236 r22239  
    2020  1.0 - Left to Right Styles
    2121------------------------------------------------------------------------------*/
    22 
    23 html,
    24 .wp-dialog {
    25     background-color: #fff;
    26 }
    27 
    28 * html input,
    29 * html .widget {
    30     border-color: #dfdfdf;
    31 }
    32 
    33 textarea,
    34 input[type="text"],
    35 input[type="password"],
    36 input[type="file"],
    37 input[type="button"],
    38 input[type="submit"],
    39 input[type="reset"],
    40 input[type="email"],
    41 input[type="number"],
    42 input[type="search"],
    43 input[type="tel"],
    44 input[type="url"],
    45 select {
    46     border-color: #dfdfdf;
    47     background-color: #fff;
    48     color: #333;
    49 }
    50 
    51 select {
    52     color: #000;
    53 }
    54 
    55 textarea:focus,
    56 input[type="text"]:focus,
    57 input[type="password"]:focus,
    58 input[type="file"]:focus,
    59 input[type="button"]:focus,
    60 input[type="submit"].focus,
    61 input[type="submit"]:focus,
    62 input[type="reset"]:focus,
    63 input[type="email"]:focus,
    64 input[type="number"]:focus,
    65 input[type="search"]:focus,
    66 input[type="tel"]:focus,
    67 input[type="url"]:focus,
    68 select:focus {
    69     border-color: #a1a1a1;
    70     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    71     box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    72 }
    73 
    74 kbd,
    75 code {
    76     background: #eaeaea;
    77 }
    78 
    79 input[readonly] {
    80     background-color: #eee;
    81 }
    8222
    8323.find-box-search {

  • trunk/wp-admin/css/colors-fresh.css

    r22236 r22239  
    2020  1.0 - Left to Right Styles
    2121------------------------------------------------------------------------------*/
    22 
    23 html,
    24 .wp-dialog {
    25     background-color: #fff;
    26 }
    27 
    28 textarea,
    29 input[type="text"],
    30 input[type="password"],
    31 input[type="file"],
    32 input[type="button"],
    33 input[type="submit"],
    34 input[type="reset"],
    35 input[type="email"],
    36 input[type="number"],
    37 input[type="search"],
    38 input[type="tel"],
    39 input[type="url"],
    40 select {
    41     border-color: #dfdfdf;
    42     background-color: #fff;
    43     color: #333;
    44 }
    45 
    46 select {
    47     color: #000;
    48 }
    49 
    50 textarea:focus,
    51 input[type="text"]:focus,
    52 input[type="password"]:focus,
    53 input[type="file"]:focus,
    54 input[type="button"]:focus,
    55 input[type="submit"].focus,
    56 input[type="submit"]:focus,
    57 input[type="reset"]:focus,
    58 input[type="email"]:focus,
    59 input[type="number"]:focus,
    60 input[type="search"]:focus,
    61 input[type="tel"]:focus,
    62 input[type="url"]:focus,
    63 select:focus {
    64     border-color: #a1a1a1;
    65     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    66     box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    67 }
    68 
    69 kbd,
    70 code {
    71     background: #eaeaea;
    72 }
    73 
    74 input[readonly] {
    75     background-color: #eee;
    76 }
    7722
    7823.find-box-search {

  • trunk/wp-admin/css/wp-admin.css

    r22237 r22239  
    472472input[type="password"],
    473473input[type="file"],
    474 input[type="button"],
    475 input[type="submit"],
    476 input[type="reset"],
    477474input[type="email"],
    478475input[type="number"],
    … …  
    664661}
    665662
     663html,
     664.wp-dialog {
     665    background-color: #fff;
     666}
     667
     668textarea,
     669input[type="text"],
     670input[type="password"],
     671input[type="file"],
     672input[type="email"],
     673input[type="number"],
     674input[type="search"],
     675input[type="tel"],
     676input[type="url"],
     677select {
     678    border-color: #dfdfdf;
     679    background-color: #fff;
     680    color: #333;
     681}
     682
     683select {
     684    color: #000;
     685}
     686
     687textarea:focus,
     688input[type="text"]:focus,
     689input[type="password"]:focus,
     690input[type="file"]:focus,
     691input[type="email"]:focus,
     692input[type="number"]:focus,
     693input[type="search"]:focus,
     694input[type="tel"]:focus,
     695input[type="url"]:focus,
     696select:focus {
     697    border-color: #a1a1a1;
     698    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     699    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     700}
     701
     702kbd,
     703code {
     704    background: #eaeaea;
     705}
     706
     707input[readonly] {
     708    background-color: #eee;
     709}
    666710
    667711/*------------------------------------------------------------------------------
    … …  
    21922236}
    21932237
    2194 .welcome-button {
     2238.welcome-panel .welcome-button {
    21952239    margin: -9px 0 3px;
    21962240    padding: 1em 3em;

  • trunk/wp-includes/css/buttons.css

    r22236 r22239  
    33
    44WordPress-style Buttons
     5=======================
     6Create a button by adding the `.button` class to an element. For backwards
     7compatibility, we support several other classes (such as `.button-secondary`),
     8but these will *not* work with the stackable classes described below.
     9
     10Button Styles
     11-------------
     12To display a primary button style, add the `.button-primary` class to a button.
     13
     14Button Sizes
     15------------
     16Adjust a button's size by adding the `.button-large` or `.button-small` class.
     17
     18Button States
     19-------------
     20Lock the state of a button by adding the name of the pseudoclass as
     21an actual class (e.g. `.hover` for `:hover`).
    522
    623
    … …  
    1734---------------------------------------------------------------------------- */
    1835
    19 .submit input,
    2036.button,
    21 input.button,
    2237.button-primary,
    23 input.button-primary,
    24 .button-secondary,
    25 input.button-secondary {
     38.button-secondary {
    2639    display: inline-block;
    2740    text-decoration: none;
    … …  
    5063}
    5164
    52 a.button:active {
     65.button:active {
    5366    outline: none;
    5467}
    … …  
    5972
    6073.button,
    61 .button-secondary,
    62 .submit input,
    63 input[type=button],
    64 input[type=submit] {
     74.button-secondary {
    6575    background: #f3f3f3;
    6676    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
    … …  
    7686.button.hover,
    7787.button:hover,
    78 .button-secondary.hover,
    7988.button-secondary:hover,
    80 .submit input:hover,
    81 input[type=button]:hover,
    82 input[type=submit]:hover,
    8389.button.focus,
    8490.button:focus,
    85 .button-secondary.focus,
    86 .button-secondary:focus,
    87 .submit input.focus,
    88 .submit input:focus,
    89 input[type=button].focus,
    90 input[type=button]:focus,
    91 input[type=submit]:focus {
     91.button-secondary:focus {
    9292    background: #f3f3f3;
    9393    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
    9494    background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
    9595    background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
     96    background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
    9697    background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
    9798    background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
    … …  
    102103.button.focus,
    103104.button:focus,
    104 .button-secondary.focus,
    105 .button-secondary:focus,
    106 .submit input.focus,
    107 .submit input:focus,
    108 input[type=button].focus,
    109 input[type=button]:focus,
    110 input[type=submit]:focus {
     105.button-secondary:focus {
    111106    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    112107    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    … …  
    114109
    115110.button.active,
     111.button.active:hover,
     112.button.active:focus,
    116113.button:active,
    117 .button-secondary.active,
    118 .button-secondary:active,
    119 .submit input:active,
    120 input[type=button].active,
    121 input[type=button]:active,
    122 input[type=submit]:active {
     114.button-secondary:active {
    123115    background: #eee;
    124116    background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
    125117    background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
    126118    background-image:    -moz-linear-gradient(top, #f4f4f4, #fefefe);
     119    background-image:     -ms-linear-gradient(top, #f4f4f4, #fefefe);
    127120    background-image:      -o-linear-gradient(top, #f4f4f4, #fefefe);
    128121    background-image:   linear-gradient(to bottom, #f4f4f4, #fefefe);
    … …  
    134127}
    135128
    136 .button-disabled,
    137129.button[disabled],
    138130.button:disabled,
    139131.button-secondary[disabled],
    140132.button-secondary:disabled,
    141 a.button.disabled {
     133.button-disabled {
    142134    color: #aaa !important;
    143135    border-color: #ddd !important;
    … …  
    145137    background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
    146138    background-image:    -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
     139    background-image:     -ms-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
    147140    background-image:      -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
    148141    background-image:   linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important;
    … …  
    156149---------------------------------------------------------------------------- */
    157150
    158 input.button-primary,
    159 input[type=submit].button-primary,
    160 input[type=button].button-primary,
    161 button.button-primary,
    162 a.button-primary {
     151.button-primary {
    163152    background-color: #21759b;
    164153    background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
    165154    background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
    166155    background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
     156    background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
    167157    background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
    168158    background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
    … …  
    176166}
    177167
    178 input.button-primary.hover,
    179 input.button-primary:hover,
    180 input[type=submit].button-primary:hover,
    181 input[type=button].button-primary:hover,
    182 button.button-primary:hover,
    183 a.button-primary:hover,
    184 input.button-primary.focus,
    185 input.button-primary:focus,
    186 input[type=submit].button-primary:focus,
    187 input[type=button].button-primary:focus,
    188 button.button-primary:focus,
    189 a.button-primary:focus {
     168.button-primary.hover,
     169.button-primary:hover,
     170.button-primary.focus,
     171.button-primary:focus {
    190172    background-color: #278ab7;
    191173    background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
    … …  
    202184}
    203185
    204 input.button-primary.focus,
    205 input.button-primary:focus,
    206 input[type=submit].button-primary:focus,
    207 input[type=button].button-primary:focus,
    208 button.button-primary:focus,
    209 a.button-primary:focus {
     186.button-primary.focus,
     187.button-primary:focus {
    210188    border-color: #0e3950;
    211189    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
    … …  
    213191}
    214192
    215 input.button-primary.active,
    216 input[type=submit].button-primary:active,
    217 input[type=button].button-primary:active,
    218 input.button-primary:active,
    219 button.button-primary:active,
    220 a.button-primary:active {
     193.button-primary.active,
     194.button-primary.active:hover,
     195.button-primary.active:focus,
     196.button-primary:active {
    221197    background: #1b607f;
    222198    background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
    … …  
    233209}
    234210
    235 .button-primary-disabled,
    236211.button-primary[disabled],
    237 .button-primary:disabled {
     212.button-primary:disabled,
     213.button-primary-disabled {
    238214    color: #94cde7 !important;
    239215    background: #298cba !important;
    … …  
    243219    text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
    244220}
    245 
    246 .button-primary-disabled:hover,
    247 .button-primary[disabled]:hover {
    248     text-shadow: none;
    249 }
Note: See TracChangeset for help on using the changeset viewer.