WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
08/23/2016 10:35:28 PM (9 years ago)
Author:
obenland
Message:

Plugin Directory: Restructuring Sass and React client.

Merges Sass files into the React component structure. This allows styles to be
bundled with their React components. In an ideal world that would extend to
their PHP fallback templates as well, but it remains to be seen how feasible
that is.
Also introduces Sass Globbing and Pixrem pre-processing to automatically import
Sass files and add pixel fallbacks for rem values.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client
Files:
1 edited
2 moved

Legend:

Unmodified
Added
Removed

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

    r3695 r3847  
    11@import "../variables-site/variables-site";
    2 
    3 .main-navigation {
    4     background: $color__wp-blue;
    5     clear: both;
    6     left: 0;
    7     position: absolute;
    8     top: 60px;
    9     width: 100%;
    10 
    11     ul {
    12         display: none;
    13         list-style: none;
    14         margin: 0;
    15         padding-left: 0;
    16 
    17         ul {
    18             box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    19             float: left;
    20             left: -999em;
    21             position: absolute;
    22             top: 1.5em;
    23             z-index: 99999;
    24 
    25             ul {
    26                 left: -999em;
    27                 top: 0;
    28             }
    29 
    30             li {
    31                 &:hover > ul,
    32                 &.focus > ul {
    33                     left: 100%;
    34                 }
    35             }
    36 
    37             a {
    38                 width: 200px;
    39             }
    40 
    41             :hover > a,
    42             .focus > a {
    43             }
    44 
    45             a:hover,
    46             a.focus {
    47             }
    48         }
    49 
    50         li:hover > ul,
    51         li.focus > ul {
    52             left: auto;
    53         }
    54     }
    55    
    56     li {
    57         border-top: 1px solid rgba( 255, 255, 255, 0.2 );
    58         padding: 16px;
    59         padding: 1rem;
    60 
    61         &:hover > a,
    62         &.focus > a {
    63         }
    64     }
    65    
    66     a {
    67         color: rgba( 255, 255, 255, 0.8 );
    68         display: block;
    69         @include font-size( ms-unitless( ms(-2) ) );
    70         text-decoration: none;
    71 
    72         &:hover,
    73         &.active {
    74             color: #fff;
    75         }
    76 
    77         @media screen and (min-width: $ms-breakpoint) {
    78             &.active {
    79                 border-bottom: 1px solid;
    80             }
    81         }
    82     }
    83 
    84     .current_page_item > a,
    85     .current-menu-item > a,
    86     .current_page_ancestor > a,
    87     .current-menu-ancestor > a {
    88     }
    89 }
    90 
    91 /* Small menu. */
    92 .main-navigation.toggled ul {
    93     display: block;
    94 }
    95 
    96 .menu-toggle {
    97     background: transparent;
    98     border: none;
    99     color: #fff;
    100     @include font-size( ms-unitless( ms(4) ) );
    101     height: 56px;
    102     height: 3.5rem;
    103     overflow: hidden;
    104     position: absolute;
    105     right: 16px;
    106     right: 1rem;
    107     top: -58px;
    108     width: 56px;
    109     width: 3.5rem;
    110     -webkit-appearance: none;
    111 
    112     .toggled &:before {
    113         content: "\f343";
    114     }
    115 }
    116 
    117 @media screen and ( min-width: $ms-breakpoint ) {
    118     .menu-toggle {
    119         display: none;
    120     }
    121     .main-navigation {
    122         float: right;
    123         position: initial;
    124         width: initial;
    125 
    126         &.toggled {
    127             padding: 1px 0;
    128         }
    129 
    130         ul {
    131             display: inline-block;
    132             font-size: 0;
    133 
    134             li {
    135                 border: 0;
    136                 display: inline-block;
    137                 @include font-size( ms-unitless( ms(0) ) );
    138                 margin-right: 16px;
    139                 margin-right: 1rem;
    140                 padding: 0;
    141 
    142                 &:last-of-type {
    143                     margin-right: 0;
    144                 }
    145             }
    146         }
    147     }
    148 }
    1492
    1503.comment-navigation,
Note: See TracChangeset for help on using the changeset viewer.