UX: update styling for related/suggested (#23231)

* UX: update styling for related/suggested This PR addresses state issues for icons of the Related & Suggested buttons, as well as well as fixes alignment issues for folding phones / tablets, wider mobile devices by moving styling to the desktop scss file; also replaces border with box-shadow.
discourse · Aug 24, 2023 · 0944666 · 0944666
1 parent d7538d7
commit 0944666
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 31 deletions.
diff --git a/app/assets/stylesheets/common/components/more-topics.scss b/app/assets/stylesheets/common/components/more-topics.scss
@@ -9,38 +9,23 @@
       .btn {
         color: var(--primary);
         background-color: transparent;
-        border-bottom: 2px solid transparent;
         padding: 0.5em 5px;
         &:hover {
-          border-bottom: 2px solid rgba(var(--tertiary-rgb), 0.5);
+          box-shadow: inset 0px -3px 0px 0px rgba(var(--tertiary-rgb), 0.5);
+          .d-icon {
+            color: var(--primary-high);
+          }
         }
         &.active {
-          border-bottom: 2px solid var(--tertiary);
+          box-shadow: inset 0px -3px 0px 0px var(--tertiary);
+          .d-icon {
+            color: var(--primary-high);
+          }
         }
       }
     }
   }
 
-  @media screen and (min-width: 550px) {
-    .nav {
-      position: absolute;
-      top: 0;
-      li {
-        margin-right: 0;
-        .btn {
-          font-size: var(--font-0);
-          line-height: var(--line-height-large);
-          padding: 1em 0.65em;
-        }
-      }
-    }
-    .more-topics__lists:not(.single-list) {
-      .topic-list-header .default {
-        visibility: hidden;
-      }
-    }
-  }
-
   .more-topics__lists {
     &:not(.single-list) {
       .more-topics__list-title {
@@ -92,11 +77,3 @@
     max-width: 150px;
   }
 }
-
-#main-outlet .regular {
-  @media screen and (min-width: 550px) {
-    .more-topics__container .nav li .btn {
-      padding: 0.75em 0.65em;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/desktop/components/_index.scss b/app/assets/stylesheets/desktop/components/_index.scss
@@ -1,3 +1,4 @@
+@import "more-topics";
 @import "user-card";
 @import "user-info";
 @import "user-stream-item";
diff --git a/app/assets/stylesheets/desktop/components/more-topics.scss b/app/assets/stylesheets/desktop/components/more-topics.scss
@@ -0,0 +1,27 @@
+.more-topics__container {
+  .nav {
+    position: absolute;
+    top: 2px;
+    li {
+      margin-right: 0;
+      .btn {
+        font-size: var(--font-0);
+        line-height: var(--line-height-large);
+        padding: 1em 0.65em;
+      }
+    }
+  }
+  .more-topics__lists:not(.single-list) {
+    .topic-list-header .default {
+      visibility: hidden;
+    }
+  }
+}
+
+#main-outlet .regular {
+  .more-topics__container .nav {
+    li .btn {
+      padding: 0.75em 0.65em;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/components/more-topics.scss b/app/assets/stylesheets/mobile/components/more-topics.scss
@@ -1,4 +1,8 @@
 .more-topics__container {
+  .nav {
+    margin-block: 0.5em 1em;
+  }
+
   .more-content-topics {
     padding: 15px 0 15px 0;