fixing lingering gutter width issues

discourse · Jul 23, 2014 · ef2a5de · ef2a5de
1 parent 6f749b9
commit ef2a5de
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 25 deletions.
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
@@ -701,28 +701,31 @@ blockquote > *:last-child {
 }
 
 .gutter {
-  float: left;
-  margin-top: 15px;
-  padding-left: 11px;
-  width: 341px;
+  margin-top: 13px;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 1;
 
   ul {margin: 0;}
   li {margin-bottom: 10px;}
   i {font-size: 12px;}
 
+  .reply-new, .track-link {
+    padding-left: 27px;
+    display: block;
+    overflow: hidden;
+    }
+
   .post-links {
     list-style-type: none;
-    padding-left: 19px;
     position: relative;
-    margin-left: 5px;
     line-height: 18px;
     word-wrap: break-word;
     a i {
-      position: absolute;
-      left: 0;
-      margin-right: 15px;
-      margin-bottom: 20px;
-      margin-top: 2px;
+      position: relative;
+      margin-right: 7px;
+      margin-top: -2px;
+      margin-left: -17px;
     }
     a.track-link {color: scale-color($primary, $lightness: 50%);}
     a.toggle-more {
@@ -741,6 +744,7 @@ $topic-avatar-width: 45px;
   width: $topic-body-width;
   float: left;
   position: relative;
+  z-index: 2;
   border-top: 1px solid scale-color-diff();
   padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
   &.highlighted {
@@ -752,6 +756,8 @@ $topic-avatar-width: 45px;
  padding-top: 16px;
  width: $topic-avatar-width;
  float: left;
+ position: relative;
+ z-index: 2;
 
  .wiki {
    margin-top: 14px;
@@ -981,7 +987,7 @@ a.attachment:before {
 .private_message .gutter:before, .deleted-topic .gutter:before, .read_restricted .gutter:before {
     display: block;
     position: absolute;
-    left: 10px;
+    left: 767px;
     color: scale-color-diff();
     font: 90px/1 FontAwesome;
     content: "\f05c";
@@ -1049,9 +1055,6 @@ and (max-width : 1140px) {
       width: 720px;
     }
   }
-  .gutter {
-    width: 200px;
-  }
   .post-cloak .reply-to-tab {
     right: 320px;
   }
@@ -1065,19 +1068,13 @@ and (max-width : 975px) {
       width: 650px;
     }
   }
-  .gutter {
-    width: 150px;
-  }
   .post-cloak .reply-to-tab {
     right: 300px;
   }
 }
 
 @media only screen
 and (max-width : 940px) {
-  .gutter {
-    width: 100px;
-  }
   .post-cloak .reply-to-tab {
     right: 250px;
   }

diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
@@ -69,17 +69,17 @@
 .private_message #topic-title .private-message-glyph { display: inline; }
 
 a.reply-new {
-  position: absolute;
-  margin-top: -2px;
+  margin-top: 3px;
   color: scale-color($primary, $lightness: 50%);
   i {
-    margin-right: 5px;
+    margin-right: 3px;
     background: $secondary;
     border: 1px solid scale-color-diff();
     padding: 1.5px 3px;
     border-radius: 20px;
     transition: linear 0.15s;
     -webkit-transition: linear 0.15s;
+    margin-left: -20px;
   }
 }
 
@@ -294,7 +294,7 @@ kbd
 
 @media only screen
 and (max-width : 940px) {
-  
+
   #topic-progress, #topic-progress-expanded {
     left: 295px;
     }