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

Timestamp:

07/19/2016 07:42:02 PM (10 years ago)

Author:

obenland

Message:

Plugin Directory: Proof of concept React components.

This is pretty much the culmination of me playing around with React for a week,
learning along the way. It's a best of from tutorials, Human Made's
Feelingrestful Theme, and various other inspirations I got along the way.

I'm committing this not with the intention of cementing a way to build a JS
client for the Plugin Directory but much rather open this approach up for tips
and feedback on how to proceed. I'd like to find out if React is even working
for our needs, learn how to get the most out of it for our purposes, and learn
how best to implement it for this project.

To see the React client in action and make changes to it, uncomment the
wp_enqueue_script() line in functions.php that enqueues the client JS file.
Then run npm install and grunt watch from the command line in the theme's
root directory. Please see README.md for further details.

See #1719.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_header.scss (modified) (3 diffs)

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

@@ -102 +102 @@
         .search-form {
                 display: inline-block;
+                font-size: 0;
                 width: 100%;
 
@@ -116 +117 @@
                         border-left: none;
                         border-radius: 0 2px 2px 0;
+                        @include font-size( ms-unitless( ms(0) ) );
                         display: none;
-                        margin-left: -6px;
                         vertical-align: bottom;
 
@@ -176 +177 @@
                                 box-shadow: none;
                                 display: block;
-                                font-size: inherit;
+                                @include font-size( ms-unitless( ms(0) ) );
                                 margin: 0 auto;
                                 max-width: 100%;