Merge pull request #3118 from stephaniehobson/bug-1137656-multiple-icons

Fix Bug 1137656: Overlapping icons in quick links

media/stylus/components/wiki/customcss.styl

@@ -1649,14 +1649,6 @@ dd.landingPageList {
     background: rgba-fallback(rgba(230,96,0,0.45));
     border-color: rgba-fallback(rgba(0,0,0,0.05));
 }
-/* sidebar quick links stuff */
-.quick-links .sidebar-icon {$selector-icon} {
-    top: 10px;
-    position: absolute;
-    left: 12px;
-    display: block;
-    opacity: 0.3;
-}
 /* new community box */
 .communitybox {
     background-color: #00539f;

media/stylus/components/wiki/quick-links.styl

@@ -1,83 +1,95 @@
-/* quick links */
+$see-also-outdent = 6px;
+
 .quick-links {
     set-smaller-font-size();
-    position: relative;
     margin-bottom: $grid-spacing;
+    position: relative;
 
     a {
         color: $text-color;
+        display: inline-block;
+        max-width: 100%;
+        overflow: hidden;
+        position: relative;
+        text-overflow: ellipsis;
 
         /* 404 link */
         &.new {
             color: #900;
         }
     }
 
-    .title {
-        margin-bottom: 0;
-        display: inline-block;
+    /* hides submenus by default */
+    ul ul {
+       display: none;
+
+        .no-js & {
+            display: block;
+        }
     }
 
     li {
-        position: relative;
         padding-top: $list-item-spacing;
+        position: relative;
     }
 
     li li {
-        bidi-style(padding-left, 20px, padding-right, 0);
+        bidi-style(padding-left, $grid-spacing * 2, padding-right, 0);
     }
 
-    ul ul { /* hides submenus by default */
+    /* don't allow empty paragraphs by CKEditor */
+    p:empty, div:empty {
         display: none;
+    }
 
-        .no-js & {
-            display: block;
+    .title {
+        display: inline-block;
+        margin-bottom: 0;
+        width: 100%;
+
+        &.see-also {
+            background: $light-background-color;
+            /* to left align the text in this box with the text above and below */
+            bidi-style(margin-left, ($see-also-outdent * -1), margin-right, 0);
+            bidi-value(padding, 4px $see-also-outdent 4px 0px, 4px 0px 4px $see-also-outdent);
+            text-indent: $see-also-outdent;
         }
     }
-}
 
-.quick-links li.toggleable a,
-.quick-links li.toggleable em,
-.quick-links .title,
-#quick-links-toggle {
-    bidi-style(padding-left, 20px, padding-right, 0);
-    color: $text-color;
-    display: inline-block;
-}
-
-.quick-links a, .quick-links .title {
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-}
+    .sidebar-icon {
+        bidi-value(margin-left, $grid-spacing * -1, 5px);
+        bidi-value(margin-right, 5px, $grid-spacing * -1);
+        opacity: 0.3;
 
-.see-also {
-    margin-left: -6px !important;
-    padding: 4px 4px 4px 6px !important;
-}
+        /* only the first sidebar-icon gets pulled into the gutter */
+        & + .sidebar-icon {
+            bidi-value(margin-left, 0, 5px);
+            bidi-value(margin-right, 5px, 0);
+        }
 
-.quick-links .see-also{
-    background: $light-background-color !important;
-    padding-left: 0;
-    margin-left: -22px;
-    display: inline-block !important;
-    padding: 4px 42px;
-    width: 100%;
-    vendorize(box-sizing, border-box);
+        {$selector-icon} {
+            set-font-size($base-font-size);
+            bidi-style(margin-left, 0, margin-right, 0);
+            bidi-style(margin-right, 0, margin-left, 0);
+            position: realtive;
+            top: 3px;
+            min-width: 15px;
+            vertical-align: top;
+        }
+    }
 }
 
+/* items which can be clicked on to toggle */
+#show-quick-links,
+#quick-links-toggle,
+.quick-links .toggleable > a {
+    display: inline-block;
+    bidi-style(padding-left, $grid-spacing, padding-right, 0);
 
-.quick-links {$selector-icon}, #quick-links-toggle {$selector-icon} {
-    bidi-style(left, -6px, right, auto);
-    set-font-size($base-font-size);
-    position: absolute;
-    top: 1px;
-
-    /* don't allow empty paragraphs by CKEditor */
-    p, div {
-        display: none;
+    {$selector-icon} {
+        set-font-size($base-font-size);
+        position: absolute;
+        top: 1px;
+        bidi-style(left, -6px, right, auto);
     }
-
-    reverse-link-decoration();
 }