Changeset 10272 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss

Timestamp:

09/16/2020 10:07:05 PM (5 years ago)

Author:

coreymckrill

Message:

WordPress.org Learn: Sync with GitHub

​https://github.com/WordPress/learn/compare/41d65294a2e67cf35a5b799d179f2e6f53b58b48...fb8968a2cbd50fc4c1a8764586731e903577d3f3

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss

@@ -7 +7 @@
     display: flex;
     align-items: center;
-
 
     > input {
@@ -29 +28 @@
 }
 
-.site-header.home .search-form,
-.page-content .search-form {
-    display: flex;
-    justify-content: space-between;
+.search-form {
+    &--is-inline {
+        .search-form {
+            display: flex;
+            justify-content: space-between;
 
-    background: #fff;
-    max-width: $gutter-default * 24;
+            background: #fff;
 
-    > label {
-        flex: 1;
-    }
+            > label {
+                flex: 1;
+            }
 
-    input {
+            input {
 
-        padding: 0.5rem;
-        background: transparent;
-        border: none;
-        box-shadow: none;
-        width: 100%;
-        font-size: 14px;
+                padding: 0.5rem;
+                background: transparent;
+                border: none;
+                box-shadow: none;
+                width: 100%;
+                font-size: 14px;
 
-        @media only screen and (min-width: $breakpoint-tablet) {
-            font-size: 16px;
+                @media only screen and (min-width: $breakpoint-tablet) {
+                    font-size: 16px;
+                }
+            }
+
+            button {
+                background: transparent;
+                margin-bottom: 0;
+                border: 0;
+                box-shadow: none;
+                height: inherit;
+                text-shadow: none;
+                color: #32373c;
+
+                &:focus {
+                    -webkit-box-shadow: 0 0 2px 1px $color__wp-blue;
+                    box-shadow: 0 0 2px 1px $color__wp-blue;
+                }
+            }
         }
     }
 
-    button {
-        background: transparent;
-        margin-bottom: 0;
-        border: 0;
-        box-shadow: none;
-        height: inherit;
-        text-shadow: none;
-        color: #32373c;
+    &--is-centered {
+        .search-form {
+            margin: 0 auto;
+        }
+    }
 
-        &:focus {
-            -webkit-box-shadow: 0 0 2px 1px $color__wp-blue;
-            box-shadow: 0 0 2px 1px $color__wp-blue;
+    &--is-constrained {
+        .search-form {
+            max-width: $gutter-default * 24;
+        }
+    }
+
+    &--is-muted {
+        .search-form {
+            input,
+            button {
+                background: #f8f9f9;
+                color: #7e8993;
+            }
+            border-color: #d7dade !important;
+
+        }
+    }
+
+    &--has-medium-text {
+        .search-form {
+            input {
+                font-size: 14px;
+            }
+        }
+    }
+
+    &--has-border {
+        .search-form {
+            border: 1px solid $color-gray-200;
         }
     }
 }
-
-.site-header.home .search-form {
-    margin: 0 auto;
-}
-
-.page-content .search-form {
-    border: 1px solid $color-gray-200;
-}