Changeset 3847 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/page/style.scss

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:

• . (moved) (moved from sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/client)
• components/page/style.scss (copied) (copied from sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_page.scss) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/page/style.scss

@@ -1 @@
-@import "../../variables-site/variables-site";
-
 .page {
     .entry-header {
-        margin-top: 32px;
         margin-top: 2rem;
 
         .entry-title {
-            @include font-size(ms-unitless(ms(4)));
+            font-size: ms( 4 );
             font-weight: 400;
             margin: 0 auto;
@@ -13 +10 @@
 
             @media screen and ( min-width: $ms-breakpoint ) {
-                padding: 0 32px;
                 padding: 0 2rem;
             }
@@ -19 +15 @@
     }
 
-
     .entry-content {
         h2 {
-            @include font-size(ms-unitless(ms(4)));
+            font-size: ms( 4 );
             font-weight: 400;
         }
 
         h3 {
-            @include font-size(ms-unitless(ms(0)));
+            font-size: ms( 0 );
             font-weight: 600;
-            letter-spacing: 0.16px;
             letter-spacing: 0.01rem;
             text-transform: uppercase;
@@ -35 +29 @@
 
         section {
-            padding: 32px 0;
             padding: 2rem 0;
 
@@ -43 +36 @@
 
                 @media screen and ( min-width: $ms-breakpoint ) {
-                    padding: 0 32px;
                     padding: 0 2rem;
                 }