Skip to content

E
edx-platform
Commit 0b9da334 by Frances Botsford
Options

adjusted styles for bookmarking

parent 27dcb811
Showing with 117 additions and 133 deletions
lms/static/sass/base/_extends.scss
...@@ -101,6 +101,24 @@ ...@@ -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 // removes list styling/spacing when using uls, ols for navigation and less content-centric cases
%ui-no-list { %ui-no-list {
list-style: none; list-style: none;
......
lms/static/sass/course/courseware/_courseware.scss
...@@ -97,11 +97,11 @@ html.video-fullscreen { ...@@ -97,11 +97,11 @@ html.video-fullscreen {
} }
// TO-DO should this be content wrapper? // TO-DO should this be content wrapper?
div.course-wrapper { .course-wrapper {
position: relative; position: relative;
section.course-content, .course-content,
section.courseware-results-wrapper { .courseware-results-wrapper {
@extend .content; @extend .content;
padding: ($baseline*2) 3%; // percent allows for smaller padding on mobile padding: ($baseline*2) 3%; // percent allows for smaller padding on mobile
line-height: 1.6; line-height: 1.6;
...@@ -405,7 +405,10 @@ div.course-wrapper { ...@@ -405,7 +405,10 @@ div.course-wrapper {
} }
.sequence .path { .sequence .path {
margin-bottom: ($baseline/2); @extend %t-copy-sub1;
margin-top: -($baseline);
margin-bottom: $baseline;
color: $gray;
} }
div#seq_content { div#seq_content {
...@@ -655,11 +658,4 @@ section.self-assessment { ...@@ -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 @@ ...@@ -54,16 +54,7 @@
} }
.nav-label { .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, .pagination-form,
...@@ -105,16 +96,7 @@ ...@@ -105,16 +96,7 @@
.page-number-label, .page-number-label,
.submit-pagination-form { .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 { .page-number-input {
...@@ -142,3 +124,21 @@ ...@@ -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 @@ ...@@ -15,36 +15,23 @@
width: flex-grid(5); width: flex-grid(5);
vertical-align: top; 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 { .bookmarks-list-button {
background: none; @extend %ui-clear-button;
border-radius: ($baseline/4);
padding: ($baseline/2); // set styles
@extend %btn-pl-default-base;
@include font-size(13);
width: 100%; width: 100%;
padding: ($baseline/4) ($baseline/2);
&:hover { &:before {
background: none; 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 @@ ...@@ -52,7 +39,10 @@
// Rules for Bookmarks Results Header // Rules for Bookmarks Results Header
.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 // Rules for Bookmarks Results
...@@ -60,15 +50,21 @@ ...@@ -60,15 +50,21 @@
padding-top: ($baseline/2); padding-top: ($baseline/2);
.bookmarks-results-list-item { .bookmarks-results-list-item {
@include padding(($baseline/4), $baseline, ($baseline/2), $baseline); @include padding(0, $baseline, ($baseline/4), $baseline);
display: block; display: block;
border: 1px solid $gray; border: 1px solid $gray-l4;
border-radius: ($baseline/4);
margin-bottom: $baseline; margin-bottom: $baseline;
&:hover { &:hover {
border-color: $m-blue; border-color: $m-blue;
color: $m-blue;
.list-item-breadcrumbtrail {
color: $blue;
}
}
.icon {
@extend %t-icon6;
} }
} }
...@@ -78,11 +74,12 @@ ...@@ -78,11 +74,12 @@
} }
.list-item-date { .list-item-date {
@extend %t-title7; @extend %t-copy-sub2;
margin-top: ($baseline/4);
color: $gray; color: $gray;
} }
a.bookmarks-results-list-item:before { .bookmarks-results-list-item:before {
content: "\f02e"; content: "\f02e";
position: relative; position: relative;
top: -7px; top: -7px;
...@@ -95,17 +92,21 @@ ...@@ -95,17 +92,21 @@
} }
.list-item-left-section { .list-item-left-section {
@include float(left); display: inline-block;
vertical-align: middle;
width: 90%; width: 90%;
.list-item-breadcrumbtrail, .list-item-date {
@extend %t-ultralight;
}
} }
.list-item-right-section { .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 @@ ...@@ -129,61 +130,45 @@
// Rules for bookmark icon shown on each sequence nav item // Rules for bookmark icon shown on each sequence nav item
i.bookmarked { .course-content {
top: -3px;
position: absolute;
left: ($baseline/4);
}
// Rules for bookmark button's different styles .bookmark-icon.bookmarked {
.bookmark-button-wrapper { top: -3px;
text-align: right; position: absolute;
margin-bottom: 10px; left: ($baseline/4);
} }
@mixin base-style($border-color, $content-color) {
background: none;
border: 1px solid $border-color;
border-radius: ($baseline/4);
color: $content-color;
&:focus, &:active { // Rules for bookmark button's different styles
box-shadow: none; .bookmark-button-wrapper {
text-align: right;
margin-bottom: 10px;
} }
}
@mixin icon-style($content, $color) { .bookmark-button {
&:before { @extend %ui-clear-button;
content: $content; @extend %btn-pl-default-base;
font-family: FontAwesome; @include font-size(13);
color: $color; padding: ($baseline/4) ($baseline/2);
}
}
@mixin hover-style($border-color, $content-color, $icon-content) { &:before {
&:hover { content: "\f02e";
background: none; font-family: FontAwesome;
border: 1px solid $border-color; }
color: $content-color;
@include icon-style($icon-content, $content-color);
}
}
.bookmark-button.bookmarked { &.is-active {
@include base-style($m-blue, $m-blue); background-color: lighten($action-primary-bg,10%);
@include icon-style("\f02e", $m-blue); color: $white;
@include hover-style($light-gray, $black, "\f097"); }
}
.bookmark-button:not(.bookmarked) { &.bookmarked {
@include base-style($light-gray, $black); background-color: lighten($action-primary-bg,10%);
@include icon-style("\f097", $black); color: $white;
@include hover-style($m-blue, $m-blue, "\f02e");
}
.paging-header { &:before {
.search-tools { content: "\f097";
margin: 0; font-family: FontAwesome;
}
}
} }
} }
\ No newline at end of file
lms/static/sass/views/_teams.scss
...@@ -177,21 +177,7 @@ ...@@ -177,21 +177,7 @@
} }
.listing-tools { .listing-tools {
@extend %t-copy-sub1;
margin: ($baseline/10) $baseline; 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 // reset general ul styles
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment