Changeset 12646 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

Timestamp:

06/12/2023 08:55:09 PM (15 months ago)

Author:

ryelle

Message:

Theme Directory: Add tabs to view "community" and "commercial" themes.

Fixes #7036.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

@@ -1431 +1431 @@
 
 .filter-links {
+    display: flex;
+    align-items: baseline;
+    margin: 0;
+    padding: 0;
+}
+
+.filter-links li {
+    display: block;
+    margin: 0;
+}
+
+.filter-links li > a {
     display: inline-block;
     margin: 0;
-    padding: 0;
-}
-
-.filter-links li {
-    display: inline-block;
-    margin: 0;
-}
-
-.filter-links li > a {
-    display: inline-block;
-    margin: 0 10px;
-    padding: 15px 0;
+    padding: 15px 10px;
     border-bottom: 4px solid #fff;
     color: #666;
@@ -1832 +1833 @@
     }
 
+    .wp-filter .filter-links {
+        display: block;
+
+        li {
+            display: inline-block;
+
+            &[style*="flex-grow"] {
+                display: block;
+            }
+
+            a.filter-tab {
+                padding-bottom: 10px;
+            }
+        }
+    }
+
     .wp-filter .search-form {
         float: none;
@@ -1901 +1918 @@
 }
 
+@media only screen and (max-width: 450px) {
+    .wp-filter {
+        padding: 0;
+    }
+
+    .wp-filter .filter-links {
+        padding: 10px 0;
+
+        li {
+            display: block;
+
+            &[style*="flex-grow"] {
+                display: none;
+            }
+
+            a.filter-tab {
+                padding: 0.5em;
+                margin-left: 10px;
+                border-bottom: none;
+                border-left: 4px solid transparent;
+
+                &.current {
+                    border-bottom: none;
+                    border-left-color: #666;
+                }
+            }
+
+            a.drawer-toggle {
+                margin-top: 0.5em;
+                margin-bottom: 0.5em;
+                border-bottom: none;
+            }
+        }
+    }
+}
+
 @media only screen and (max-width: 400px) {
     .theme-browser .theme {
@@ -1916 +1969 @@
         float: left;
         margin-left: 10px;
-    }
-
-    .wp-filter {
-        padding: 0 10px;
-    }
-
-    .wp-filter .filter-links {
-        padding: 0;
     }
 
@@ -1975 +2020 @@
     }
 }
-
-@media only screen and (max-width: 375px) {
-    .wp-filter .drawer-toggle {
-        float: right;
-        margin-top: 12px;
-        margin-right: 0;
-    }
-
-    .wp-filter .drawer-toggle:before {
-        margin-right: 0;
-    }
-}
-
-@media only screen and (max-width: 350px) {
-    .wp-filter .drawer-toggle .drawer-text {
-        display: none;
-    }
-}