Merge pull request #10997 from edx/frances/lms-pagination-sass

Make pagination pattern sass globally available in LMS

lms/static/sass/_build-course.scss

@@ -11,6 +11,7 @@
 // base - elements
 @import 'elements/typography';
 @import 'elements/controls';
+@import 'elements/pagination';
 @import 'elements/navigation'; // all archetypes of navigation
 
 // course - base

lms/static/sass/_build-lms.scss

@@ -15,6 +15,7 @@
 // base - elements
 @import 'elements/typography';
 @import 'elements/controls';
+@import 'elements/pagination';
 @import 'elements/creative-commons';
 
 // shared - course

lms/static/sass/_developer.scss

@@ -89,149 +89,6 @@
 }
 
 // teams temporary
-.view-teams {
-
-  // Copied from _pagination.scss in cms
-  .pagination {
-    @include clearfix();
-    display: inline-block;
-    width: flex-grid(3, 12);
-
-    &.pagination-compact {
-      @include text-align(right);
-    }
-
-    &.pagination-full {
-      display: block;
-      width: flex-grid(4, 12);
-      margin: $baseline auto;
-    }
-
-    .nav-item {
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .nav-link {
-      @include transition(all $tmg-f2 ease-in-out 0s);
-      display: block;
-      border: 0;
-      background-image: none;
-      background-color: transparent;
-      padding: ($baseline/2) ($baseline*0.75);
-
-      &.previous {
-        margin-right: ($baseline/2);
-      }
-
-      &.next {
-        margin-left: ($baseline/2);
-      }
-
-      &:hover {
-        background-color: $blue;
-        border-radius: 3px;
-        color: $white;
-      }
-
-      &.is-disabled {
-        background-color: transparent;
-        color: $gray-l2;
-        pointer-events: none;
-      }
-    }
-
-    .nav-label {
-      /* This wasn't working for me, so I directly copied the rule
-      @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,
-    .current-page,
-    .page-divider,
-    .total-pages {
-      display: inline-block;
-    }
-
-    .current-page,
-    .page-number-input,
-    .total-pages {
-      @extend %t-copy-base;
-      @extend %t-strong;
-      width: ($baseline*2.5);
-      vertical-align: middle;
-      margin: 0 ($baseline*0.75);
-      padding: ($baseline/4);
-      text-align: center;
-      color: $gray;
-    }
-
-    .current-page {
-      @extend %ui-depth1;
-      position: absolute;
-      @include left(-($baseline/4));
-    }
-
-    .page-divider {
-      @extend %t-title4;
-      @extend %t-regular;
-      vertical-align: middle;
-      color: $gray-l2;
-    }
-
-    .pagination-form {
-      @extend %ui-depth2;
-      position: relative;
-
-      .page-number-label,
-      .submit-pagination-form {
-        /* This wasn't working for me, so I directly copied the rule
-        @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 {
-        @include transition(all $tmg-f2 ease-in-out 0s);
-        border: 1px solid transparent;
-        border-bottom: 1px dotted $gray-l2;
-        border-radius: 0;
-        box-shadow: none;
-        background: none;
-
-        &:hover {
-          background-color: $white;
-          opacity: 0.6;
-        }
-
-        &:focus {
-          // borrowing the base input focus styles to match overall app
-          @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-          opacity: 1.0;
-          box-shadow: 0 0 3px $shadow-d1 inset;
-          background-color: $white;
-          border: 1px solid transparent;
-          border-radius: 3px;
-        }
-      }
-    }
-  }
-}
 
 //efischer; scratch space for teams instructor tools
 .view-teams {

lms/static/sass/elements/_pagination.scss

+
+// TODO: replace with UX Pattern Library/UI Toolkit pattern
+// Copied from _pagination.scss in cms
+
+.pagination {
+  @include clearfix();
+  display: inline-block;
+  width: flex-grid(3, 12);
+
+  &.pagination-compact {
+    @include text-align(right);
+  }
+
+  &.pagination-full {
+    display: block;
+    width: flex-grid(4, 12);
+    margin: $baseline auto;
+  }
+
+  .nav-item {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .nav-link {
+    @include transition(all $tmg-f2 ease-in-out 0s);
+    display: block;
+    border: 0;
+    background-image: none;
+    background-color: transparent;
+    padding: ($baseline/2) ($baseline*0.75);
+
+    &.previous {
+      margin-right: ($baseline/2);
+    }
+
+    &.next {
+      margin-left: ($baseline/2);
+    }
+
+    &:hover {
+      background-color: $blue;
+      background-image: none;
+      border-radius: 3px;
+      color: $white;
+    }
+
+    &.is-disabled {
+      background-color: transparent;
+      color: $gray-l2;
+      pointer-events: none;
+    }
+  }
+
+  .nav-label {
+    /* This wasn't working for me, so I directly copied the rule
+    @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,
+  .current-page,
+  .page-divider,
+  .total-pages {
+    display: inline-block;
+  }
+
+  .current-page,
+  .page-number-input,
+  .total-pages {
+    @extend %t-copy-base;
+    @extend %t-strong;
+    width: ($baseline*2.5);
+    vertical-align: middle;
+    margin: 0 ($baseline*0.75);
+    padding: ($baseline/4);
+    text-align: center;
+    color: $gray;
+  }
+
+  .current-page {
+    @extend %ui-depth1;
+    position: absolute;
+    @include left(-($baseline/4));
+  }
+
+  .page-divider {
+    @extend %t-title4;
+    @extend %t-regular;
+    vertical-align: middle;
+    color: $gray-l2;
+  }
+
+  .pagination-form {
+    @extend %ui-depth2;
+    position: relative;
+
+    .page-number-label,
+    .submit-pagination-form {
+      /* This wasn't working for me, so I directly copied the rule
+      @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 {
+      @include transition(all $tmg-f2 ease-in-out 0s);
+      border: 1px solid transparent;
+      border-bottom: 1px dotted $gray-l2;
+      border-radius: 0;
+      box-shadow: none;
+      background: none;
+
+      &:hover {
+        background-color: $white;
+        opacity: 0.6;
+      }
+
+      &:focus {
+        // borrowing the base input focus styles to match overall app
+        @include linear-gradient($yellow-l4, tint($yellow-l4, 90%));
+        opacity: 1.0;
+        box-shadow: 0 0 3px $shadow-d1 inset;
+        background-color: $white;
+        border: 1px solid transparent;
+        border-radius: 3px;
+      }
+    }
+  }
+}