Auto merge of emberjs#1179 - kpfefferle:toc-hover-wrapping, r=acorncom

homu · homu · commit ea381f2c3666 · 2016-01-20T20:33:17.000-08:00
Prevent text wrapping on TOC hover animation Resolves emberjs#1174 Old behavior: ![old](https://cloud.githubusercontent.com/assets/250934/12441153/1332bc4a-bf12-11e5-937b-5253f3d7b023.gif) New behavior: ![new](https://cloud.githubusercontent.com/assets/250934/12441158/1aa9e5a2-bf12-11e5-84bf-43c68ae0f86b.gif)
diff --git a/source/stylesheets/components/_sidebar.scss b/source/stylesheets/components/_sidebar.scss
@@ -111,7 +111,7 @@ ol.toc-level-1 {
 
   li {
     border-left: 3px solid transparent;
-    transition: border-width $duration;
+    transition: border-width $duration, margin-right $duration;
 
     &.selected,
     &:hover {
@@ -120,6 +120,7 @@ ol.toc-level-1 {
 
     &:hover {
       border-left-width: 6px;
+      margin-right: -3px;
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -111,7 +111,7 @@ ol.toc-level-1 {`
`111`	`111`
`112`	`112`	`li {`
`113`	`113`	`border-left: 3px solid transparent;`
`114`		`- transition: border-width $duration;`
	`114`	`+ transition: border-width $duration, margin-right $duration;`
`115`	`115`
`116`	`116`	`&.selected,`
`117`	`117`	`&:hover {`
`@@ -120,6 +120,7 @@ ol.toc-level-1 {`
`120`	`120`
`121`	`121`	`&:hover {`
`122`	`122`	`border-left-width: 6px;`
	`123`	`+ margin-right: -3px;`
`123`	`124`	`}`
`124`	`125`	`}`
`125`	`126`