Changeset 3847 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/search-form/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/search-form/style.scss (copied) (copied from sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_search.scss) (9 diffs)

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

@@ -1 @@
-@import "../variables-site/variables-site";
-
 .search-form {
     font-size: 0;
-    margin-bottom: 32px;
     margin-bottom: 2rem;
+
     max-width: 100%;
     position: relative;
@@ -13 +11 @@
         box-shadow: none;
         display: block;
-        @include font-size( ms-unitless( ms(0) ) );
+        font-size: ms( 0 );
         margin: 0 auto;
         max-width: 100%;
-        padding: 8px;
         padding: 0.5rem;
         width: ms(28);
@@ -24 +21 @@
         border-left: none;
         border-radius: 0 2px 2px 0;
-        @include font-size( ms-unitless( ms(0) ) );
+        font-size: ms( 0 );
         position: relative;
         right: auto;
@@ -36 +33 @@
 
         .dashicons {
-            @include font-size( ms-unitless( ms(0) ) );
+            font-size: ms( 0 );
         }
     }
@@ -54 +51 @@
             display: block;
             height: 45px;
-            padding: 8px 16px;
             padding: 0.5rem 1rem;
             position: absolute;
@@ -80 +76 @@
             border-radius: 2px;
             display: inline-block;
-            @include font-size( ms-unitless( ms(0) ) );
+            font-size: ms( 0 );
             padding: 5px 10px;
             position: relative;
@@ -89 +85 @@
             .search-field {
                 border-radius: 2px 0 0 2px;
-                @include font-size( ms-unitless( ms(-4) ) );
-                width: 126px;
+                font-size: ms( -4 );
                 width: 7rem;
             }
@@ -102 +97 @@
         @media screen and (min-width: 60em) {
             .search-field {
-                width: 160px;
                 width: 10rem;
             }
@@ -111 +105 @@
         border: 1px solid $color__border-input;
         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
-        padding: 8px;
         padding: 0.5rem;
         width: 100%;