2013-02-05 14:16:51 -05:00
|
|
|
// --------------------------------------------------
|
|
|
|
// Badges
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
// Base
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
%badge {
|
|
|
|
display: inline-block;
|
2014-03-15 12:01:17 -04:00
|
|
|
font-weight: normal;
|
2013-02-05 14:16:51 -05:00
|
|
|
white-space: nowrap;
|
2016-08-07 21:02:46 -04:00
|
|
|
@include border-radius-all(10px);
|
2013-02-05 14:16:51 -05:00
|
|
|
}
|
|
|
|
|
2015-03-04 22:15:21 -05:00
|
|
|
// Category badges
|
2013-02-05 14:16:51 -05:00
|
|
|
// --------------------------------------------------
|
|
|
|
|
2015-03-04 22:15:21 -05:00
|
|
|
.badge-wrapper {
|
2018-01-12 17:27:38 -05:00
|
|
|
font-size: $font-down-1;
|
2013-07-22 03:11:34 -04:00
|
|
|
font-weight: bold;
|
2013-07-26 10:11:00 -04:00
|
|
|
white-space: nowrap;
|
2015-01-28 22:53:02 -05:00
|
|
|
position: relative;
|
2018-02-26 16:32:56 -05:00
|
|
|
display: inline-flex;
|
2018-02-26 14:20:32 -05:00
|
|
|
align-items: baseline;
|
2018-02-02 19:03:25 -05:00
|
|
|
|
2018-01-11 07:05:29 -05:00
|
|
|
.badge-category {
|
2018-02-26 14:20:32 -05:00
|
|
|
display: inline-flex;
|
2018-02-26 16:59:10 -05:00
|
|
|
align-items: baseline;
|
2018-02-26 14:20:32 -05:00
|
|
|
.category-name {
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
2018-01-11 07:05:29 -05:00
|
|
|
.d-icon {
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
}
|
2015-01-29 01:34:05 -05:00
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
// ----- Bullet
|
2017-08-04 14:12:21 -04:00
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
&.bullet {
|
2018-01-22 17:14:40 -05:00
|
|
|
margin-right: 12px;
|
2015-03-09 12:25:27 -04:00
|
|
|
span.badge-category {
|
2017-07-28 15:21:18 -04:00
|
|
|
color: $primary;
|
2015-09-09 16:20:04 -04:00
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
2015-03-09 12:25:27 -04:00
|
|
|
.extra-info-wrapper & {
|
2017-07-28 15:21:18 -04:00
|
|
|
color: $header-primary;
|
2015-03-09 12:25:27 -04:00
|
|
|
}
|
2016-01-18 04:08:24 -05:00
|
|
|
}
|
2015-03-09 12:25:27 -04:00
|
|
|
.badge-category-parent-bg, .badge-category-bg {
|
2018-02-02 19:03:25 -05:00
|
|
|
width: 9px;
|
|
|
|
height: 9px;
|
2016-01-18 04:08:24 -05:00
|
|
|
margin-right: 5px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
2018-02-02 19:03:25 -05:00
|
|
|
.badge-category-parent-bg { // Subcategories
|
|
|
|
width: 5px;
|
|
|
|
margin-right: 0;
|
|
|
|
+.badge-category-bg {
|
2016-01-18 04:08:24 -05:00
|
|
|
width: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-03-09 12:25:27 -04:00
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
// ----- Box
|
2015-03-09 12:25:27 -04:00
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
&.box {
|
2015-04-14 15:54:17 -04:00
|
|
|
margin-right: 5px;
|
2018-02-02 21:29:51 -05:00
|
|
|
padding: 2px 4px 2px 4px;
|
2018-02-02 19:03:25 -05:00
|
|
|
display: inline-flex;
|
2015-01-28 22:53:02 -05:00
|
|
|
span {
|
2015-09-09 14:46:40 -04:00
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
2015-03-04 22:15:21 -05:00
|
|
|
&.badge-category-bg, &.badge-category-parent-bg {
|
|
|
|
position: absolute;
|
2018-01-17 11:54:51 -05:00
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
2015-03-04 22:15:21 -05:00
|
|
|
}
|
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
&.badge-category-parent-bg { // Subcategories
|
2015-03-04 22:15:21 -05:00
|
|
|
width: calc(100% - 5px);
|
|
|
|
& + .badge-category-bg {
|
|
|
|
left: 5px;
|
|
|
|
width: calc(100% - 5px);
|
|
|
|
& + .badge-category {
|
|
|
|
margin-left: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.badge-category {
|
|
|
|
position: relative;
|
2018-02-02 19:03:25 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
+ .topic-header-extra {
|
2018-02-02 21:29:51 -05:00
|
|
|
padding: 2px 4px 2px 4px;
|
2018-02-02 19:03:25 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// ----- Bar
|
|
|
|
|
|
|
|
&.bar {
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
|
|
span.badge-category {
|
|
|
|
color: $primary;
|
2018-02-26 14:20:32 -05:00
|
|
|
padding: 1px 3px;
|
2018-02-02 19:03:25 -05:00
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
.extra-info-wrapper & {
|
|
|
|
color: $header-primary;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.badge-category-parent-bg, .badge-category-bg { // Subcategories
|
|
|
|
display: inline-block;
|
|
|
|
padding: 0 1px;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: "\a0";
|
2015-03-04 22:15:21 -05:00
|
|
|
}
|
2015-02-06 00:20:55 -05:00
|
|
|
}
|
|
|
|
}
|
2015-01-30 01:57:46 -05:00
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
// ----- No category style
|
|
|
|
|
|
|
|
&.none {
|
|
|
|
color: $primary;
|
|
|
|
margin-right: 5px;
|
2016-02-10 03:34:43 -05:00
|
|
|
}
|
2018-02-02 19:03:25 -05:00
|
|
|
|
2016-02-10 03:27:03 -05:00
|
|
|
}
|
|
|
|
|
2018-02-02 19:03:25 -05:00
|
|
|
|
2015-03-04 22:15:21 -05:00
|
|
|
// Category badge dropdown
|
|
|
|
// --------------------------------------------------
|
2015-01-28 22:53:02 -05:00
|
|
|
|
2015-03-04 22:15:21 -05:00
|
|
|
.list-controls {
|
2017-09-08 14:47:39 -04:00
|
|
|
.category-breadcrumb {
|
2018-01-24 05:48:20 -05:00
|
|
|
a.badge-category {
|
2015-03-04 22:15:21 -05:00
|
|
|
display: inline-block;
|
2018-01-12 17:27:38 -05:00
|
|
|
padding: 6px 8px;
|
|
|
|
line-height: $line-height-medium;
|
2015-03-04 22:15:21 -05:00
|
|
|
}
|
2015-01-29 01:48:55 -05:00
|
|
|
}
|
|
|
|
}
|
2015-01-28 22:53:02 -05:00
|
|
|
|
2013-02-05 14:16:51 -05:00
|
|
|
// Notification badge
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
.badge-notification {
|
|
|
|
@extend %badge;
|
2018-01-12 17:27:38 -05:00
|
|
|
padding: 3px 5px;
|
2018-01-24 05:48:20 -05:00
|
|
|
min-width: 8px;
|
2014-09-04 00:02:29 -04:00
|
|
|
vertical-align: middle;
|
2014-07-25 23:06:14 -04:00
|
|
|
color: $secondary;
|
2018-01-12 17:27:38 -05:00
|
|
|
font-size: $font-down-2;
|
|
|
|
line-height: $line-height-small;
|
2013-08-02 15:41:02 -04:00
|
|
|
text-align: center;
|
2017-10-10 16:07:46 -04:00
|
|
|
background-color: dark-light-choose($primary-low-mid, $secondary-low);
|
2013-02-05 14:16:51 -05:00
|
|
|
&[href] {
|
2015-08-21 14:19:02 -04:00
|
|
|
color: $secondary;
|
2013-02-05 14:16:51 -05:00
|
|
|
}
|
|
|
|
|
2016-05-13 04:47:40 -04:00
|
|
|
&:hover {
|
|
|
|
color: $secondary;
|
|
|
|
}
|
|
|
|
|
2014-09-03 03:11:19 -04:00
|
|
|
// New posts
|
2013-02-05 14:16:51 -05:00
|
|
|
|
2014-09-03 03:11:19 -04:00
|
|
|
&.new-posts, &.unread-posts {
|
2017-10-10 16:07:46 -04:00
|
|
|
background-color: dark-light-choose($tertiary-medium, $tertiary);
|
2015-08-21 14:19:02 -04:00
|
|
|
color: dark-light-choose($secondary, $secondary);
|
2015-08-18 15:28:58 -04:00
|
|
|
font-weight: dark-light-choose(normal, bold);
|
2013-02-05 14:16:51 -05:00
|
|
|
}
|
|
|
|
|
2014-09-03 12:22:18 -04:00
|
|
|
&.new-topic {
|
|
|
|
background-color: transparent;
|
2017-10-10 16:07:46 -04:00
|
|
|
color: $tertiary-high;
|
2014-09-03 12:22:18 -04:00
|
|
|
font-weight: normal;
|
2018-01-12 17:27:38 -05:00
|
|
|
font-size: $font-down-1;
|
2014-09-03 12:22:18 -04:00
|
|
|
}
|
2014-03-11 17:26:25 -04:00
|
|
|
|
2014-09-03 16:33:56 -04:00
|
|
|
&.new-topic::before {
|
2014-09-03 21:07:15 -04:00
|
|
|
content: "●";
|
|
|
|
margin-right: 2px;
|
2014-09-03 16:33:56 -04:00
|
|
|
}
|
|
|
|
|
2013-02-05 14:16:51 -05:00
|
|
|
// Click count
|
|
|
|
|
|
|
|
&.clicks {
|
|
|
|
font-weight: normal;
|
2017-06-11 22:20:14 -04:00
|
|
|
background-color: $primary-low;
|
2014-03-08 00:55:02 -05:00
|
|
|
top: -1px;
|
2017-06-11 22:20:14 -04:00
|
|
|
color: $primary-medium;
|
2013-11-17 22:32:58 -05:00
|
|
|
position: relative;
|
2014-07-25 12:22:55 -04:00
|
|
|
border: none;
|
2013-02-05 14:16:51 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Posts badge
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
.badge-posts {
|
2014-03-15 12:01:17 -04:00
|
|
|
font-weight: normal;
|
2018-01-12 17:27:38 -05:00
|
|
|
font-size: $font-0;
|
|
|
|
line-height: $line-height-small;
|
2013-02-05 14:16:51 -05:00
|
|
|
&[href] {
|
2017-10-10 16:07:46 -04:00
|
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
2013-02-05 14:16:51 -05:00
|
|
|
}
|
2013-05-17 16:09:52 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
// Group badge
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
.badge-group {
|
|
|
|
@extend %badge;
|
2018-02-20 12:18:20 -05:00
|
|
|
padding: 2px 5px;
|
2014-05-06 01:50:51 -04:00
|
|
|
color: $primary;
|
2017-06-11 22:20:14 -04:00
|
|
|
background-color: $primary-low;
|
|
|
|
border-color: $primary-low;
|
2018-01-12 17:27:38 -05:00
|
|
|
font-size: $font-down-1;
|
2013-05-17 16:09:52 -04:00
|
|
|
}
|