WordPress.org
Get WordPress

Making WordPress.org

Changeset 3251


Ignore:
Timestamp:
05/25/2016 04:36:25 PM (8 years ago)
Author:
obenland
Message:

Plugin Directory: Complete navigation styles, including for desktop.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r3230 r3251  
    690690  background: #008ec2;
    691691  border-color: #006799;
     692  box-shadow: 0 1px 0 #006799;
    692693  color: #fff;
    693694}
    … …  
    937938.main-navigation {
    938939  clear: both;
    939   float: right;
    940   padding: 8px 0;
     940}
     941
     942.main-navigation.toggled {
     943  padding: 16px 0 0;
     944  padding: 1rem 0 0;
    941945}
    942946
    … …  
    977981
    978982.main-navigation li {
    979   float: left;
    980   position: relative;
     983  border-top: 1px solid rgba(255, 255, 255, 0.2);
     984  padding: 16px;
     985  padding: 1rem;
    981986}
    982987
    … …  
    9981003
    9991004/* Small menu. */
    1000 .menu-toggle,
    10011005.main-navigation.toggled ul {
    10021006  display: block;
     1007}
     1008
     1009.menu-toggle {
     1010  color: #fff;
     1011  font-size: 25px;
     1012  font-size: 1.5625rem;
     1013  height: 56px;
     1014  height: 3.5rem;
     1015  overflow: hidden;
     1016  width: 56px;
     1017  width: 3.5rem;
     1018  position: absolute;
     1019  top: 2px;
     1020  right: 1rem;
     1021}
     1022
     1023.toggled .menu-toggle:before {
     1024  content: "\f343";
    10031025}
    10041026
    … …  
    10071029    display: none;
    10081030  }
     1031  .main-navigation {
     1032    float: right;
     1033  }
     1034  .main-navigation.toggled {
     1035    padding: 1px 0;
     1036  }
    10091037  .main-navigation ul {
    1010     display: block;
     1038    display: inline-block;
     1039  }
     1040  .main-navigation ul li {
     1041    border: 0;
     1042    display: inline-block;
     1043    margin-right: 31.5px;
     1044    margin-right: 1.5rem;
     1045    padding: 0;
     1046  }
     1047  .main-navigation ul li:last-of-type {
     1048    margin-right: 0;
    10111049  }
    10121050}
    … …  
    13011339
    13021340.site-header {
     1341  background: #0073aa;
    13031342  padding: 1rem 0;
    1304   background: #0073aa;
     1343  position: relative;
    13051344}
    13061345
    … …  
    13411380
    13421381.site-header .search-form {
    1343   margin-bottom: 2rem;
     1382  display: inline-block;
    13441383}
    13451384
    13461385.site-header .search-form .search-field {
    13471386  -webkit-appearance: none;
    1348   border: none;
    1349   display: block;
    1350   margin: 0 auto;
    1351   max-width: 100%;
    1352   padding: 0.5rem;
    1353   width: 22.7373675443rem;
    1354 }
    1355 
    1356 .site-header .search-form .search-submit {
     1387  border: 0;
     1388  border-radius: 2px;
     1389  font-size: 16px;
     1390  font-size: 1rem;
     1391  padding: 5px 10px;
     1392  position: relative;
     1393  width: 10rem;
     1394}
     1395
     1396.site-header .search-form .search-field + .button-search {
    13571397  display: none;
     1398  border-radius: 0 2px 2px 0;
     1399  height: 32px;
     1400  margin-left: -6px;
     1401  position: relative;
     1402  top: 2px;
     1403  border-left: none;
     1404}
     1405
     1406.site-header .search-form .search-field + .button-search:active {
     1407  top: 0;
     1408  border-right: 1px solid #006799;
     1409  box-shadow: none;
     1410  background: #006799;
     1411}
     1412
     1413.site-header .search-form .search-field + .button-search .dashicons {
     1414  font-size: 16px;
     1415  font-size: 1rem;
     1416}
     1417
     1418@media (min-width: 67rem) {
     1419  .site-header .search-form .search-field {
     1420    border-radius: 2px 0 0 2px;
     1421    font-size: 10.24px;
     1422    font-size: 0.64rem;
     1423  }
     1424  .site-header .search-form .search-field + .button-search {
     1425    display: inline-block;
     1426  }
    13581427}
    13591428
    … …  
    13701439  margin: 2rem 0 1rem;
    13711440  text-align: center;
     1441}
     1442
     1443.home .site-header .search-form,
     1444.search .site-header .search-form {
     1445  display: inherit;
     1446  margin-bottom: 2rem;
     1447}
     1448
     1449.home .site-header .search-form .search-field,
     1450.search .site-header .search-form .search-field {
     1451  border: none;
     1452  border-radius: 0;
     1453  display: block;
     1454  font-size: inherit;
     1455  margin: 0 auto;
     1456  max-width: 100%;
     1457  padding: 0.5rem;
     1458  width: 22.7373675443rem;
     1459}
     1460
     1461.home .site-header .search-form .button-search,
     1462.search .site-header .search-form .button-search {
     1463  display: none;
    13721464}
    13731465

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/header.php

    r3193 r3251  
    3535            <?php else : ?>
    3636                <nav id="site-navigation" class="main-navigation" role="navigation">
    37                     <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
    38                     <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
     37                    <button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg-plugins' ); ?>"></button>
     38                    <div id="primary-menu" class="menu">
     39                        <ul>
     40                            <li class="page_item"><a href="<?php echo esc_url( home_url( 'browse/favorites' ) ); ?>"><?php esc_html_e( 'Favorites', 'wporg-plugins' ); ?></a></li>
     41                            <li class="page_item"><a href="<?php echo esc_url( home_url( 'browse/beta' ) ); ?>"><?php esc_html_e( 'Beta testing', 'wporg-plugins' ); ?></a></li>
     42                            <li class="page_item"><a href="<?php echo esc_url( home_url( 'about' ) ); ?>"><?php esc_html_e( 'Developers', 'wporg-plugins' ); ?></a></li>
     43                            <li><?php get_search_form(); ?></li>
     44                        </ul>
     45                    </div>
    3946                </nav><!-- #site-navigation -->
    4047            <?php endif; ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_buttons.scss

    r3193 r3251  
    226226        background: #008ec2;
    227227        border-color: #006799;
     228        box-shadow: 0 1px 0 #006799;
    228229        color: #fff;
    229230    }

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/navigation/_menus.scss

    r3193 r3251  
     1@import "../variables-site/variables-site";
     2
    13.main-navigation {
    24    clear: both;
    3     float: right;
    4     padding: 8px 0;
     5
     6    &.toggled {
     7        padding: 16px 0 0;
     8        padding: 1rem 0 0;
     9    }
    510
    611    ul {
    … …  
    5055   
    5156    li {
    52         float: left;
    53         position: relative;
     57        border-top: 1px solid rgba( 255, 255, 255, 0.2 );
     58        padding: 16px;
     59        padding: 1rem;
    5460
    5561        &:hover > a,
    … …  
    8288
    8389/* Small menu. */
    84 .menu-toggle,
    8590.main-navigation.toggled ul {
    8691    display: block;
     92}
     93
     94.menu-toggle {
     95    color: #fff;
     96    @include font-size( ms-unitless( ms(4) ) );
     97    height: 56px;
     98    height: 3.5rem;
     99    overflow: hidden;
     100    width: 56px;
     101    width: 3.5rem;
     102    position: absolute;
     103    top: 2px;
     104    right: 1rem;
     105
     106    .toggled &:before {
     107        content: "\f343";
     108    }
    87109}
    88110
    … …  
    91113        display: none;
    92114    }
    93     .main-navigation ul {
    94         display: block;
     115    .main-navigation {
     116        float: right;
     117
     118        &.toggled {
     119            padding: 1px 0;
     120        }
     121
     122        ul {
     123            display: inline-block;
     124
     125            li {
     126                border: 0;
     127                display: inline-block;
     128                margin-right: 31.5px;
     129                margin-right: 1.5rem;
     130                padding: 0;
     131
     132                &:last-of-type {
     133                    margin-right: 0;
     134                }
     135            }
     136        }
    95137    }
    96138}

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

    r3229 r3251  
    6464
    6565.site-header {
     66    background: $color__wp-blue;
    6667    padding: 1rem 0;
    67     background: $color__wp-blue;
     68    position: relative;
    6869
    6970    .site-branding {
    … …  
    100101
    101102    .search-form {
    102         margin-bottom: 2rem;
     103        display: inline-block;
    103104
    104105        .search-field {
    105106            -webkit-appearance: none;
    106             border: none;
    107             display: block;
    108             margin: 0 auto;
    109             max-width: 100%;
    110             padding: 0.5rem;
    111             width: ms(28);
     107            border: 0;
     108            border-radius: 2px;
     109            @include font-size( ms-unitless( ms(0) ) );
     110            padding: 5px 10px;
     111            position: relative;
     112            width: 10rem;
    112113        }
    113114
    114         .search-submit {
     115        .search-field + .button-search {
    115116            display: none;
     117            border-radius: 0 2px 2px 0;
     118            height: 32px;
     119            margin-left: -6px;
     120            position: relative;
     121            top: 2px;
     122            border-left: none;
     123
     124            &:active {
     125                top: 0;
     126                border-right: 1px solid #006799;
     127                box-shadow: none;
     128                background: #006799;
     129            }
     130
     131            .dashicons {
     132                @include font-size( ms-unitless( ms(0) ) );
     133            }
     134        }
     135
     136        @media ( min-width: 67rem ) {
     137            .search-field {
     138                border-radius: 2px 0 0 2px;
     139                @include font-size( ms-unitless( ms(-4) ) );
     140            }
     141
     142            .search-field + .button-search {
     143                display: inline-block;
     144            }
    116145        }
    117146    }
    … …  
    127156            text-align: center;
    128157        }
     158
     159        .search-form {
     160            display: inherit;
     161            margin-bottom: 2rem;
     162
     163            .search-field {
     164                border: none;
     165                border-radius: 0;
     166                display: block;
     167                font-size: inherit;
     168                margin: 0 auto;
     169                max-width: 100%;
     170                padding: 0.5rem;
     171                width: ms(28);
     172            }
     173
     174            .button-search {
     175                display: none;
     176            }
     177        }
    129178    }
    130179}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/searchform.php

    r3193 r3251  
    66        <span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg-plugins' ); ?></span>
    77        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search plugins&hellip;', 'placeholder', 'wporg-plugins' ); ?>" value="<?php the_search_query(); ?>" name="s" />
     8        <button class="button button-primary button-search"><i class="dashicons dashicons-search"></i></button>
    89    </label>
    910</form>
Note: See TracChangeset for help on using the changeset viewer.