adjusted styles for bookmarking

lms/static/sass/base/_extends.scss

@@ -101,6 +101,24 @@
   }
 }
 
+// light button reset
+%ui-clear-button  {
+  background: none;
+  border-radius: ($baseline/4);
+  box-shadow: none;
+  text-shadow: none;
+
+  &:hover {
+    background-image: none;
+    box-shadow: none;
+  }
+
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+}
+
 // removes list styling/spacing when using uls, ols for navigation and less content-centric cases
 %ui-no-list {
   list-style: none;

lms/static/sass/course/courseware/_courseware.scss

@@ -97,11 +97,11 @@ html.video-fullscreen {
 }
 
 // TO-DO should this be content wrapper?
-div.course-wrapper {
+.course-wrapper {
   position: relative;
 
-  section.course-content,
+  .course-content,
-  section.courseware-results-wrapper {
+  .courseware-results-wrapper {
     @extend .content;
     padding: ($baseline*2) 3%; // percent allows for smaller padding on mobile
     line-height: 1.6;
@@ -405,7 +405,10 @@ div.course-wrapper {
     }
 
     .sequence .path {
-      margin-bottom: ($baseline/2);
+      @extend %t-copy-sub1;
+      margin-top: -($baseline);
+      margin-bottom: $baseline;
+      color: $gray;
     }
 
     div#seq_content {
@@ -655,11 +658,4 @@ section.self-assessment {
   }
 }
 
-.courseware-results-wrapper {
-  display: none;
 
-  &.is-shown {
-    display: table-cell;
-  }
-
-}

lms/static/sass/elements/_pagination.scss

@@ -54,16 +54,7 @@
   }
 
   .nav-label {
-    /* This wasn't working for me, so I directly copied the rule
+    @extend %text-sr;
-    @extend %cont-text-sr; */
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
   }
 
   .pagination-form,
@@ -105,16 +96,7 @@
 
     .page-number-label,
     .submit-pagination-form {
-      /* This wasn't working for me, so I directly copied the rule
+      @extend %text-sr;
-      @extend %cont-text-sr; */
-      border: 0;
-      clip: rect(0 0 0 0);
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-      width: 1px;
     }
 
     .page-number-input {
@@ -142,3 +124,21 @@
     }
   }
 }
+
+// styles for search/pagination metadata and sorting
+.listing-tools {
+  @extend %t-copy-sub1;
+  color: $gray-d1;
+
+  label { // override
+    color: inherit;
+    font-size: inherit;
+    cursor: auto;
+  }
+
+  .listing-sort-select {
+    @extend %t-copy-sub1;
+    @extend %t-regular;
+    border: 0;
+  }
+}

lms/static/sass/views/_bookmarks.scss

@@ -15,36 +15,23 @@
   width: flex-grid(5);
   vertical-align: top;
 
-  button {
-    &.is-active {
-      background-color: $white;
-      &:before {
-        content: "\f02e";
-        font-family: FontAwesome;
-      }
-    }
-
-    &.is-inactive {
-      background: none;
-      &:before {
-          content: "\f097";
-          font-family: FontAwesome;
-      }
-    }
-  }
-
   .bookmarks-list-button {
-    background: none;
+    @extend %ui-clear-button;
-    border-radius: ($baseline/4);
-    padding: ($baseline/2);
-    width: 100%;
 
-    &:hover {
+    // set styles
-      background: none;
+    @extend %btn-pl-default-base;
+    @include font-size(13);
+    width: 100%;
+    padding: ($baseline/4) ($baseline/2);
+
+    &:before {
+      content: "\f02e";
+      font-family: FontAwesome;
     }
 
-    &:focus, &:active {
+    &.is-active {
-      box-shadow: none;
+      background-color: lighten($action-primary-bg,10%);
+      color: $white;
     }
   }
 }
@@ -52,7 +39,10 @@
 
 // Rules for Bookmarks Results Header
 .bookmarks-results-header {
-  margin: 0;
+  @extend %t-title4;
+  letter-spacing: 0;
+  text-transform: none;
+  margin-bottom: ($baseline/2);
 }
 
 // Rules for Bookmarks Results
@@ -60,15 +50,21 @@
   padding-top: ($baseline/2);
 
   .bookmarks-results-list-item {
-    @include padding(($baseline/4), $baseline, ($baseline/2), $baseline);
+    @include padding(0, $baseline, ($baseline/4), $baseline);
     display: block;
-    border: 1px solid $gray;
+    border: 1px solid $gray-l4;
-    border-radius: ($baseline/4);
     margin-bottom: $baseline;
 
     &:hover {
       border-color: $m-blue;
-      color: $m-blue;
+
+      .list-item-breadcrumbtrail {
+        color: $blue;
+      }
+    }
+
+    .icon {
+      @extend %t-icon6;
     }
   }
 
@@ -78,11 +74,12 @@
   }
 
   .list-item-date {
-    @extend %t-title7;
+    @extend %t-copy-sub2;
+    margin-top: ($baseline/4);
     color: $gray;
   }
 
-  a.bookmarks-results-list-item:before {
+  .bookmarks-results-list-item:before {
     content: "\f02e";
     position: relative;
     top: -7px;
@@ -95,17 +92,21 @@
   }
 
   .list-item-left-section {
-    @include float(left);
+    display: inline-block;
+    vertical-align: middle;
     width: 90%;
-
-    .list-item-breadcrumbtrail, .list-item-date {
-      @extend %t-ultralight;
-    }
   }
 
   .list-item-right-section {
-    @include float(right);
+    display: inline-block;
-    margin-top: 7px;
+    vertical-align: middle;
+
+    .fa-arrow-right {
+
+      @include rtl {
+        @include transform(rotate(180deg));
+      }
+    }
   }
 }
 
@@ -129,61 +130,45 @@
 
 
 // Rules for bookmark icon shown on each sequence nav item
-i.bookmarked {
+.course-content {
-  top: -3px;
+
-  position: absolute;
+   .bookmark-icon.bookmarked {
-  left: ($baseline/4);
+    top: -3px;
-}
+    position: absolute;
+    left: ($baseline/4);
+  }
 
 
-// Rules for bookmark button's different styles
+  // Rules for bookmark button's different styles
-.bookmark-button-wrapper {
+  .bookmark-button-wrapper {
-  text-align: right;
+    text-align: right;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-}
+  }
 
-@mixin base-style($border-color, $content-color) {
+  .bookmark-button {
-  background: none;
+    @extend %ui-clear-button;
-  border: 1px solid $border-color;
+    @extend %btn-pl-default-base;
-  border-radius: ($baseline/4);
+    @include font-size(13);
-  color: $content-color;
+    padding: ($baseline/4) ($baseline/2);
 
-  &:focus, &:active {
+    &:before {
-    box-shadow: none;
+      content: "\f02e";
+      font-family: FontAwesome;
+    }
+
+    &.is-active {
+      background-color: lighten($action-primary-bg,10%);
+      color: $white;
+    }
+
+    &.bookmarked {
+      background-color: lighten($action-primary-bg,10%);
+      color: $white;
+
+      &:before {
+        content: "\f097";
+        font-family: FontAwesome;
+      }
+    }
   }
 }
-
-@mixin icon-style($content, $color) {
-  &:before {
-    content: $content;
-    font-family: FontAwesome;
-    color: $color;
-  }
-}
-
-@mixin hover-style($border-color, $content-color, $icon-content) {
-  &:hover {
-    background: none;
-    border: 1px solid $border-color;
-    color: $content-color;
-    @include icon-style($icon-content, $content-color);
-  }
-}
-
-.bookmark-button.bookmarked {
-  @include base-style($m-blue, $m-blue);
-  @include icon-style("\f02e", $m-blue);
-  @include hover-style($light-gray, $black, "\f097");
-}
-
-.bookmark-button:not(.bookmarked) {
-  @include base-style($light-gray, $black);
-  @include icon-style("\f097", $black);
-  @include hover-style($m-blue, $m-blue, "\f02e");
-}
-
-.paging-header {
-  .search-tools {
-    margin: 0;
-  }
-}

lms/static/sass/views/_teams.scss

@@ -177,21 +177,7 @@
   }
 
   .listing-tools {
-    @extend %t-copy-sub1;
     margin: ($baseline/10) $baseline;
-    color: $gray-d1;
-
-    label { // override
-      color: inherit;
-      font-size: inherit;
-      cursor: auto;
-    }
-
-    .listing-sort-select {
-      @extend %t-copy-sub1;
-      @extend %t-regular;
-      border: 0;
-    }
   }
 
   // reset general ul styles