Making WordPress.org


Ignore:
Timestamp:
08/23/2016 05:22:16 PM (8 years ago)
Author:
obenland
Message:

Plugin Directory: Add focus styles to search button.

Also consolidates search form stiles in its own module.

See #1841.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_header.scss

    r3734 r3843  
    100100    }
    101101
    102     .search-form {
    103         display: inline-block;
    104         font-size: 0;
    105         width: 100%;
    106 
    107         .search-field {
    108             border: 0;
    109             border-radius: 2px;
    110             @include font-size( ms-unitless( ms(0) ) );
    111             padding: 5px 10px;
    112             position: relative;
    113             width: 100%;
    114         }
    115 
    116         .search-field + .button-search {
    117             border-left: none;
    118             border-radius: 0 2px 2px 0;
    119             @include font-size( ms-unitless( ms(0) ) );
    120             display: none;
    121             vertical-align: bottom;
    122 
    123             &:active {
    124                 background: #006799;
    125                 border-right: 1px solid #006799;
    126                 box-shadow: none;
    127             }
    128 
    129             .dashicons {
    130                 @include font-size( ms-unitless( ms(0) ) );
    131             }
    132         }
    133 
    134         @media screen and ( min-width: $ms-breakpoint ) {
    135             .search-field {
    136                 border-radius: 2px 0 0 2px;
    137                 @include font-size( ms-unitless( ms(-4) ) );
    138                 width: 126px;
    139                 width: 7rem;
    140             }
    141 
    142             .search-field + .button-search {
    143                 display: inline-block;
    144                 margin-bottom: 0;
    145             }
    146         }
    147 
    148         @media screen and ( min-width: 60em ) {
    149             .search-field {
    150                 width: 160px;
    151                 width: 10rem;
    152             }
    153         }
    154     }
    155 
    156102    &.home {
    157103        padding: ms(4) ms(1);
     
    164110            margin: 2rem 0 1rem;
    165111        }
    166 
    167         .search-form {
    168             margin-bottom: 32px;
    169             margin-bottom: 2rem;
    170             max-width: 100%;
    171             position: relative;
    172             width: initial;
    173 
    174             .search-field {
    175                 border: none;
    176                 border-radius: 0;
    177                 box-shadow: none;
    178                 display: block;
    179                 @include font-size( ms-unitless( ms(0) ) );
    180                 margin: 0 auto;
    181                 max-width: 100%;
    182                 padding: 8px;
    183                 padding: 0.5rem;
    184                 width: ms(28);
    185             }
    186 
    187             .button-search {
    188                 background: transparent;
    189                 border: none;
    190                 box-shadow: none;
    191                 color: $color__text-input;
    192                 display: block;
    193                 height: 45px;
    194                 padding: 8px 16px;
    195                 padding: 0.5rem 1rem;
    196                 position: absolute;
    197                 right: 0;
    198                 text-shadow: none;
    199                 top: 0;
    200 
    201                 &:active {
    202                     background: transparent;
    203                     border: none;
    204                     transform: none;
    205                 }
    206             }
    207         }
    208112    }
    209113}
Note: See TracChangeset for help on using the changeset viewer.