3dae99ac27
The item id exists as data attribute or as element.id postfix on multiple elements in an article. The basic idea is to traverse the DOM tree - starting from the event firing element - in reverse order till an article element is found. This article element is passed to the JavaScript functions. These JavaScript functions are getting the elements which they want to manipulate starting from the article utilizing the JavaScript querySelector function. The bootstrap themes had a conflicting and unused class style definied, which is removed by now.
185 lines
2.8 KiB
SCSS
Executable File
185 lines
2.8 KiB
SCSS
Executable File
article {
|
|
&[data-item-bookmark="1"] {
|
|
.bookmark-icon:before {
|
|
content: $icon-bookmarked;
|
|
}
|
|
}
|
|
|
|
&[data-item-bookmark="0"] {
|
|
.bookmark-icon:before {
|
|
content: $icon-not-bookmarked;
|
|
}
|
|
}
|
|
}
|
|
|
|
.items {
|
|
article {
|
|
|
|
@include box-shadow(0 3px 0 darken($theme-background-highlight, 10%));
|
|
background-color: $theme-background-light;
|
|
margin-bottom: 15px;
|
|
padding: 10px 20px;
|
|
|
|
&[data-item-status="read"] {
|
|
&[data-item-page="feed-items"] {
|
|
background-color: rgba(lighten(black,60%), .7);
|
|
}
|
|
|
|
.read-icon:before {
|
|
content: $icon-read;
|
|
}
|
|
}
|
|
|
|
&[data-item-bookmark="1"] {
|
|
.item-menu {
|
|
a {
|
|
&.bookmark {
|
|
&:before {
|
|
content: "\f088";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-item-bookmark="0"] {
|
|
.item-menu {
|
|
a {
|
|
&.bookmark {
|
|
&:before {
|
|
content: "\f087";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
|
|
a {
|
|
@extend %title;
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.feed-last-checked {
|
|
font-size: .8em;
|
|
}
|
|
}
|
|
.preview {
|
|
@extend %paragraph;
|
|
display: block;
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
|
|
.item-menu {
|
|
font-size: $ui-font-text-small;
|
|
margin-top: 5px;
|
|
|
|
li {
|
|
@include inline-block;
|
|
|
|
&:before {
|
|
content: " / ";
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
&:first-child {
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
a {
|
|
color: darken($theme-background-highlight, 5%);
|
|
text-decoration: none;
|
|
|
|
&:before {
|
|
margin-right: 2px;
|
|
@extend %awesome;
|
|
}
|
|
|
|
&:first-child {
|
|
&:before {
|
|
content: "\f0b0";
|
|
}
|
|
}
|
|
&.original {
|
|
&:before {
|
|
content: "\f08e";
|
|
}
|
|
}
|
|
&[href*="action=confirm-remove-feed"] {
|
|
&:before {
|
|
content: "\f014";
|
|
}
|
|
}
|
|
&[href*="action=edit-feed"] {
|
|
&:before {
|
|
content: "\f044";
|
|
}
|
|
}
|
|
&[href*="action=refresh-feed"] {
|
|
&:before {
|
|
content: "\f021";
|
|
}
|
|
}
|
|
|
|
&[href*="action=mark-item-removed"] {
|
|
&:before {
|
|
content: "\f014";
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
&.mark {
|
|
&:before {
|
|
content: "\f058";
|
|
}
|
|
}
|
|
&[href*="action=disable-grabber-feed"] {
|
|
&:before {
|
|
content: "\f057";
|
|
}
|
|
}
|
|
&[href*="action=enable-grabber-feed"] {
|
|
&:before {
|
|
content: "\f058";
|
|
}
|
|
}
|
|
&[href*="action=enable-feed"] {
|
|
&:before {
|
|
content: "\f05d";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#bottom-menu {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
#items-paging {
|
|
display: block;
|
|
@include pie-clearfix;
|
|
|
|
a {
|
|
@include flat-box($theme-background-highlight, $button-background-grey, 5px);
|
|
padding: {
|
|
left: 10px;
|
|
right: 10px;
|
|
}
|
|
text-decoration: none;
|
|
}
|
|
|
|
#previous-page {
|
|
float: left;
|
|
}
|
|
#next-page {
|
|
float: right;
|
|
}
|
|
} |