WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
08/23/2016 10:35:28 PM (10 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.