diff --git a/cms/static/sass/elements/_pagination.scss b/cms/static/sass/elements/_pagination.scss index 379d8785e3..902f7c410a 100644 --- a/cms/static/sass/elements/_pagination.scss +++ b/cms/static/sass/elements/_pagination.scss @@ -19,11 +19,13 @@ .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; padding: ($baseline/4) ($baseline*0.75); &.previous { diff --git a/lms/static/sass/_developer.scss b/lms/static/sass/_developer.scss index 7b5448dacf..c7b347be08 100644 --- a/lms/static/sass/_developer.scss +++ b/lms/static/sass/_developer.scss @@ -67,7 +67,7 @@ .payment-button { float: right; @include margin-left( ($baseline/2) ); - + &.is-selected { background: $m-green-s1 !important; } @@ -79,4 +79,145 @@ .global-new, #global-navigation { display: none; } + + // 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; + } + } + } + } }