Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: aligns categories and tags in topic lists 

History:

https://meta.discourse.org/t/minor-visual-weirdness-on-topic-listing-category-and-tags/105268
This commit is contained in:
Joe 2018-12-31 14:38:33 +08:00 committed by GitHub
parent 55d745f03b
commit 6fb421312e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -133,10 +133,17 @@
.link-bottom-line { .link-bottom-line {
font-size: $font-down-1; font-size: $font-down-1;
a.badge-wrapper.box { display: flex;
align-items: center;
a.badge-wrapper.box,
a.discourse-tag.box {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.discourse-tag.simple:after,
.discourse-tag.box {
margin-right: 0.25em;
}
} }
.topic-featured-link { .topic-featured-link {

16
app/assets/stylesheets/common/base/tagging.scss
View File

@ -124,14 +124,9 @@ $tag-color: $primary-medium;
} }
.topic-list-item .discourse-tags { .topic-list-item .discourse-tags {
display: inline-block; display: inline-flex;
font-weight: normal; font-weight: normal;
font-size: $font-down-1; font-size: $font-down-1;
.discourse-tag.box {
position: relative;
top: 2px;
}
} }
.categories-list .topic-list-latest .discourse-tags { .categories-list .topic-list-latest .discourse-tags {
@ -153,15 +148,16 @@ $tag-color: $primary-medium;
} }
.discourse-tag.bullet { .discourse-tag.bullet {
margin-right: 0.25em; margin-right: 0.5em;
display: inline-flex;
align-items: center;
&:before { &:before {
background: $primary-low-mid; background: $primary-low-mid;
margin-right: 5px; margin-right: 5px;
position: relative; position: relative;
width: 8px; width: 9px;
height: 8px; height: 9px;
display: inline-block; display: inline-block;
vertical-align: middle;
content: ""; content: "";
} }
} }