Making WordPress.org


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

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin-card/style.scss

    r3844 r3847  
    1212    }
    1313
    14     .entry-thumbnail {
    15         display: none;
    16         max-width: 128px;
    17     }
    18 
    1914    .entry {
    2015        display: inline-block;
    2116        margin: auto;
    2217        vertical-align: top;
    23     }
    2418
    25     @media screen and ( min-width: 21em ) {
    26         .entry-thumbnail {
    27             display: inline-block;
    28             margin: 0 4% 0 0;
    29             vertical-align: top;
    30 
    31             a {
    32                 display: block;
    33             }
     19        @media screen and ( min-width: 21em ) {
     20            width: calc(96% - 128px);
    3421        }
    35 
    36         .entry {
    37              width: calc(96% - 128px);
    38          }
    3922    }
    4023
    4124    .entry-title {
    42         @include font-size( ms-unitless( ms(0) ) );
     25        font-size: ms( 0 );
    4326        line-height: 1.3;
    4427        margin: 0 0 8px;
     
    4932    }
    5033
    51     .plugin-rating {
    52         line-height: 1;
    53         margin: 0 10px 8px 0;
    54 
    55         .wporg-ratings {
    56             display: inline-block;
    57             margin-right: 5px;
    58         }
    59 
    60         [class*='dashicons-star-'] {
    61             color: #ffb900;
    62         }
    63 
    64         .rating-count {
    65             color: #999;
    66             @include font-size( ms-unitless( ms(-2) ) );
    67             top: -1px;
    68         }
    69     }
    70 
    7134    .entry-excerpt {
    72         @include font-size( ms-unitless( ms(-2) ) );
     35        font-size: ms( -2 );
    7336
    7437        p {
     
    7740    }
    7841}
    79 
    80 // Flip the half star for rating.
    81 .rtl .dashicons-star-half {
    82     transform: rotateY(180deg);
    83 }
Note: See TracChangeset for help on using the changeset viewer.