166 lines
2.9 KiB
SCSS
166 lines
2.9 KiB
SCSS
$bookmark-icon: "\f097"; // .fa-bookmark-o
|
|
$bookmarked-icon: "\f02e"; // .fa-bookmark
|
|
|
|
// Rules for placing bookmarks and search button side by side
|
|
.wrapper-course-modes {
|
|
border-bottom: 1px solid $gray-l3;
|
|
padding: ($baseline/4);
|
|
|
|
> div {
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
|
|
// Rules for Bookmarks Button
|
|
.courseware-bookmarks-button {
|
|
width: flex-grid(5);
|
|
vertical-align: top;
|
|
|
|
.bookmarks-list-button {
|
|
@extend %ui-clear-button;
|
|
|
|
// set styles
|
|
@extend %btn-pl-default-base;
|
|
@include font-size(13);
|
|
width: 100%;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
|
|
&:before {
|
|
content: $bookmarked-icon;
|
|
font-family: FontAwesome;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: lighten($action-primary-bg,10%);
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Rules for Bookmarks Results Header
|
|
.bookmarks-results-header {
|
|
@extend %t-title4;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
// Rules for Bookmarks Results
|
|
.bookmarks-results-list {
|
|
padding-top: ($baseline/2);
|
|
|
|
.bookmarks-results-list-item {
|
|
@include padding(0, $baseline, ($baseline/4), $baseline);
|
|
display: block;
|
|
border: 1px solid $gray-l4;
|
|
margin-bottom: $baseline;
|
|
|
|
&:hover {
|
|
border-color: $m-blue;
|
|
|
|
.list-item-breadcrumbtrail {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
@extend %t-icon6;
|
|
}
|
|
}
|
|
|
|
.results-list-item-view {
|
|
@include float(right);
|
|
margin-top: $baseline;
|
|
}
|
|
|
|
.list-item-date {
|
|
@extend %t-copy-sub2;
|
|
margin-top: ($baseline/4);
|
|
color: $gray;
|
|
}
|
|
|
|
.bookmarks-results-list-item:before {
|
|
content: $bookmarked-icon;
|
|
position: relative;
|
|
top: -7px;
|
|
font-family: FontAwesome;
|
|
color: $m-blue;
|
|
}
|
|
|
|
.list-item-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-item-left-section {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 90%;
|
|
}
|
|
|
|
.list-item-right-section {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
.fa-arrow-right {
|
|
|
|
@include rtl {
|
|
@include transform(rotate(180deg));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Rules for empty bookmarks list
|
|
.bookmarks-empty {
|
|
margin-top: $baseline;
|
|
border: 1px solid $gray-l4;
|
|
padding: $baseline;
|
|
background-color: $gray-l6;
|
|
}
|
|
|
|
.bookmarks-empty-header {
|
|
@extend %t-title5;
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
.bookmarks-empty-detail {
|
|
@extend %t-copy-sub1;
|
|
}
|
|
|
|
|
|
// Rules for bookmark icon shown on each sequence nav item
|
|
.course-content {
|
|
|
|
.bookmark-icon.bookmarked {
|
|
@include right($baseline / 4);
|
|
top: -3px;
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
// Rules for bookmark button's different styles
|
|
.bookmark-button-wrapper {
|
|
margin-bottom: ($baseline * 1.5);
|
|
}
|
|
|
|
.bookmark-button {
|
|
|
|
&:before {
|
|
content: $bookmark-icon;
|
|
font-family: FontAwesome;
|
|
}
|
|
|
|
&.bookmarked {
|
|
&:before {
|
|
content: $bookmarked-icon;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|