Merge pull request #145 from MITx/kf-sidebar-buttons

Added fix for the sidebar buttons in the courseware

lms/static/sass/courseware/_sidebar.scss

@@ -52,14 +52,14 @@ section.course-index {
       padding: 1em 1.5em;
 
       li {
-        background: transparent;
-        border: 1px solid transparent;
-        @include border-radius(4px);
         margin-bottom: lh(.5);
-        position: relative;
-        padding: 5px 36px 5px 10px;
 
         a {
+          border: 1px solid transparent;
+          background: transparent;
+          @include border-radius(4px);
+          position: relative;
+          padding: 5px 36px 5px 10px;
           text-decoration: none;
           display: block;
           color: #666;
@@ -74,67 +74,70 @@ section.course-index {
               display: block;
             }
           }
-        }
-
-        &:after {
-          background: transparent;
-          border-top: 1px solid rgb(180,180,180);
-          border-right: 1px solid rgb(180,180,180);
-          content: "";
-          display: block;
-          height: 12px;
-          margin-top: -6px;
-          opacity: 0;
-          position: absolute;
-          top: 50%;
-          right: 30px;
-          @include transform(rotate(45deg));
-          width: 12px;
-        }
-
-        &:hover {
-          @include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4)));
-          border-color: rgb(200,200,200);
 
           &:after {
-            opacity: 1;
-            right: 15px;
-            @include transition(all, 0.2s, linear);
+            background: transparent;
+            border-top: 1px solid rgb(180,180,180);
+            border-right: 1px solid rgb(180,180,180);
+            content: "";
+            display: block;
+            height: 12px;
+            margin-top: -6px;
+            opacity: 0;
+            position: absolute;
+            top: 50%;
+            right: 30px;
+            @include transform(rotate(45deg));
+            width: 12px;
           }
 
-          > a p {
-            color: #333;
+          &:hover {
+            @include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4)));
+            border-color: rgb(200,200,200);
+
+            &:after {
+              opacity: 1;
+              right: 15px;
+              @include transition(all, 0.2s, linear);
+            }
+
+            > a p {
+              color: #333;
+            }
           }
-        }
 
-        &:active {
-          @include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1));
-          top: 1px;
+          &:active {
+            @include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1));
 
-          &:after {
-            opacity: 1;
-            right: 15px;
+            &:after {
+              opacity: 1;
+              right: 15px;
+            }
           }
         }
 
         &.active {
-          background: rgb(240,240,240);
-          @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
-          border-color: rgb(200,200,200);
           font-weight: bold;
 
-          > a p {
-            color: #333;
+          > a {
+            background: rgb(240,240,240);
+            @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
+            border-color: rgb(200,200,200);
+
+            &:after {
+              opacity: 1;
+              right: 15px;
+            }
+
+            p {
+              color: #333;
+            }
           }
 
           span.subtitle {
             font-weight: normal;
           }
 
-          &:after {
-            opacity: 1;
-            right: 15px;
-          }
         }
       }
     }