WordPress.org

Make WordPress Core

Ticket #27173: 27173.4.diff

File 27173.4.diff, 1.9 KB (added by celloexpressions, 7 years ago)

Use colorscheme's checkbox/radio mark color for border and shadow colors on focus, and add a slight animation.

  • wp-admin/css/colors/_admin.scss

     
    3030
    3131/* Forms */
    3232
     33textarea:focus,
     34input[type="checkbox"]:focus,
     35input[type="radio"]:focus,
     36input[type="text"]:focus,
     37input[type="password"]:focus,
     38input[type="email"]:focus,
     39input[type="number"]:focus,
     40input[type="search"]:focus,
     41input[type="tel"]:focus,
     42input[type="url"]:focus,
     43select:focus {
     44        border-color: $form-checked;
     45        -webkit-box-shadow: 0 0 2px rgba( $form-checked, 0.8 );
     46        box-shadow: 0 0 2px rgba( $form-checked, 0.8 );
     47}
     48
    3349input[type=checkbox]:checked:before {
    34     color: $form-checked;
     50        color: $form-checked;
    3551}
    3652
    3753input[type=radio]:checked:before {
    38     background: $form-checked;
     54        background: $form-checked;
    3955}
    4056
    4157.wp-core-ui input[type="reset"]:hover,
  • wp-admin/css/forms.css

     
    3535        box-sizing: border-box;
    3636        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    3737        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     38        -webkit-transition: .05s border-color ease-in-out;
     39        transition: .05s border-color ease-in-out;
    3840}
    3941
    4042input[type="radio"]:checked + label:before {
     
    214216        box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    215217        background-color: #fff;
    216218        color: #333;
     219        -webkit-transition: .05s border-color ease-in-out;
     220        transition: .05s border-color ease-in-out;
    217221}
    218222
    219223select[disabled] {
     
    235239input[type="checkbox"]:focus,
    236240input[type="radio"]:focus,
    237241select:focus {
    238         border-color: #999;
    239         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    240         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     242        border-color: #1e8cbe;
     243        -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
     244        box-shadow: 0 0 2px rgba(30,140,190,0.8);
    241245}
    242246
    243247input[readonly] {