fix: style Submit a request link as standalone

zendesk · Mar 1, 2022 · 8fea59a · 8fea59a
1 parent e0c1144
commit 8fea59a
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 61 deletions.
diff --git a/style.css b/style.css
@@ -1713,6 +1713,19 @@ ul {
   vertical-align: middle;
 }
 
+.article-body a {
+  color: $link_color;
+  text-decoration: underline;
+}
+
+.article-body a:visited {
+  color: $visited_link_color;
+}
+
+.article-body a:hover, .article-body a:active, .article-body a:focus {
+  color: $hover_link_color;
+}
+
 .article-body img {
   height: auto;
   max-width: 100%;
@@ -1746,19 +1759,6 @@ ul {
   list-style-type: disc;
 }
 
-.article-body a {
-  color: $link_color;
-  text-decoration: underline;
-}
-
-.article-body a:visited {
-  color: $visited_link_color;
-}
-
-.article-body a:hover, .article-body a:active, .article-body a:focus {
-  color: $hover_link_color;
-}
-
 .article-body code {
   background: darken($background_color, 3%);
   border: 1px solid #ddd;
@@ -1878,6 +1878,19 @@ ul {
   text-align: center;
 }
 
+.article-more-questions a {
+  color: $link_color;
+  text-decoration: underline;
+}
+
+.article-more-questions a:visited {
+  color: $visited_link_color;
+}
+
+.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
+  color: $hover_link_color;
+}
+
 .article-return-to-top {
   border-top: 1px solid #ddd;
 }
@@ -2176,6 +2189,19 @@ ul {
   overflow-x: auto;
 }
 
+.comment-body a {
+  color: $link_color;
+  text-decoration: underline;
+}
+
+.comment-body a:visited {
+  color: $visited_link_color;
+}
+
+.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
+  color: $hover_link_color;
+}
+
 .comment-body img {
   height: auto;
   max-width: 100%;
@@ -2209,19 +2235,6 @@ ul {
   list-style-type: disc;
 }
 
-.comment-body a {
-  color: $link_color;
-  text-decoration: underline;
-}
-
-.comment-body a:visited {
-  color: $visited_link_color;
-}
-
-.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
-  color: $hover_link_color;
-}
-
 .comment-body code {
   background: darken($background_color, 3%);
   border: 1px solid #ddd;
@@ -2764,6 +2777,19 @@ ul {
   margin-right: 10px;
 }
 
+.post-body a {
+  color: $link_color;
+  text-decoration: underline;
+}
+
+.post-body a:visited {
+  color: $visited_link_color;
+}
+
+.post-body a:hover, .post-body a:active, .post-body a:focus {
+  color: $hover_link_color;
+}
+
 .post-body img {
   height: auto;
   max-width: 100%;
@@ -2797,19 +2823,6 @@ ul {
   list-style-type: disc;
 }
 
-.post-body a {
-  color: $link_color;
-  text-decoration: underline;
-}
-
-.post-body a:visited {
-  color: $visited_link_color;
-}
-
-.post-body a:hover, .post-body a:active, .post-body a:focus {
-  color: $hover_link_color;
-}
-
 .post-body code {
   background: darken($background_color, 3%);
   border: 1px solid #ddd;

diff --git a/styles/_article.scss b/styles/_article.scss
@@ -59,7 +59,9 @@
   }
 
   [role="button"] {
-    @include tablet { width: auto; }
+    @include tablet {
+      width: auto;
+    }
     flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
     width: 100%;
   }
@@ -75,7 +77,9 @@
 
   &-body {
     @include content-body;
-    > p:last-child { margin-bottom: 0; }
+    > p:last-child {
+      margin-bottom: 0;
+    }
   }
 
   &-content {
@@ -136,13 +140,16 @@
       overflow-wrap: break-word;
       margin-right: 0;
 
-      &:last-child { padding: 0; }
+      &:last-child {
+        padding: 0;
+      }
 
-      @include tablet { padding-right: 20px; }
+      @include tablet {
+        padding-right: 20px;
+      }
     }
   }
 
-
   &-votes {
     border-top: 1px solid $border-color;
     padding: 30px 0;
@@ -158,10 +165,13 @@
   &-more-questions {
     margin: 10px 0 20px;
     text-align: center;
+    @include standalone-link;
   }
 
   &-return-to-top {
-    @include desktop { display: none; }
+    @include desktop {
+      display: none;
+    }
 
     border-top: 1px solid $border-color;
 
@@ -206,7 +216,7 @@
 .recent-articles,
 .related-articles {
   &-title {
-    @extend .comment-heading
+    @extend .comment-heading;
   }
 
   li {

diff --git a/styles/_mixins.scss b/styles/_mixins.scss
@@ -47,7 +47,26 @@
   box-shadow: 0 0 0 3px $brand_color;
 }
 
+@mixin standalone-link {
+  a {
+    color: $link_color;
+    text-decoration: underline;
+
+    &:visited {
+      color: $visited_link_color;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $hover_link_color;
+    }
+  }
+}
+
 @mixin content-body {
+  @include standalone-link;
+
   img {
     height: auto;
     max-width: 100%;
@@ -81,21 +100,6 @@
     list-style-type: disc;
   }
 
-  a {
-    color: $link_color;
-    text-decoration: underline;
-
-    &:visited {
-      color: $visited_link_color;
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $hover_link_color;
-    }
-  }
-
   code {
     background: $primary-shade;
     border: 1px solid $border-color;