From 0b9da334e2c50676c2f2fd483e75862cf64ea3d3 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Thu, 17 Dec 2015 12:08:14 -0500 Subject: [PATCH] adjusted styles for bookmarking --- lms/static/sass/base/_extends.scss | 18 ++ .../sass/course/courseware/_courseware.scss | 18 +- lms/static/sass/elements/_pagination.scss | 40 ++--- lms/static/sass/views/_bookmarks.scss | 169 ++++++++---------- lms/static/sass/views/_teams.scss | 14 -- 5 files changed, 122 insertions(+), 137 deletions(-) diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index 5c0f70b645..9522d0dbda 100644 --- a/lms/static/sass/base/_extends.scss +++ b/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; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 39f2a357ee..a5ad961072 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/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, - section.courseware-results-wrapper { + .course-content, + .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; - } - -} diff --git a/lms/static/sass/elements/_pagination.scss b/lms/static/sass/elements/_pagination.scss index c7b35395c9..21d3fea81f 100644 --- a/lms/static/sass/elements/_pagination.scss +++ b/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 %cont-text-sr; */ - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + @extend %text-sr; } .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 %cont-text-sr; */ - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + @extend %text-sr; } .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; + } +} diff --git a/lms/static/sass/views/_bookmarks.scss b/lms/static/sass/views/_bookmarks.scss index a2361cd5a1..faae1eb529 100644 --- a/lms/static/sass/views/_bookmarks.scss +++ b/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; - border-radius: ($baseline/4); - padding: ($baseline/2); - width: 100%; + @extend %ui-clear-button; - &:hover { - background: none; + // set styles + @extend %btn-pl-default-base; + @include font-size(13); + width: 100%; + padding: ($baseline/4) ($baseline/2); + + &:before { + content: "\f02e"; + font-family: FontAwesome; } - &:focus, &:active { - box-shadow: none; + &.is-active { + 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-radius: ($baseline/4); + border: 1px solid $gray-l4; 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); - margin-top: 7px; + display: inline-block; + 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 { - top: -3px; - position: absolute; - left: ($baseline/4); -} +.course-content { + + .bookmark-icon.bookmarked { + top: -3px; + position: absolute; + left: ($baseline/4); + } -// Rules for bookmark button's different styles -.bookmark-button-wrapper { - text-align: right; - margin-bottom: 10px; -} + // Rules for bookmark button's different styles + .bookmark-button-wrapper { + text-align: right; + margin-bottom: 10px; + } -@mixin base-style($border-color, $content-color) { - background: none; - border: 1px solid $border-color; - border-radius: ($baseline/4); - color: $content-color; + .bookmark-button { + @extend %ui-clear-button; + @extend %btn-pl-default-base; + @include font-size(13); + padding: ($baseline/4) ($baseline/2); - &:focus, &:active { - box-shadow: none; + &:before { + 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; - } -} \ No newline at end of file diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index 66959895fa..0b77c33235 100644 --- a/lms/static/sass/views/_teams.scss +++ b/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