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 (3 years 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;
-        }
-}