github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 11:53:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #3262 from awesomerobot/master

Browse Source 
adding a new "bullet" category style
This commit is contained in:
Régis Hanol 2015-03-09 17:50:29 +01:00
commit fb59653235
2 changed files with 69 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
app/assets/stylesheets/common/components/badges.css.scss
View File

@ -22,18 +22,18 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
&.bar { //general bar category style &.bar { //bar category style
line-height: 1.25; line-height: 1.25;
span.badge-category { span.badge-category {
color: $primary !important; color: $primary !important;
padding: 3px; padding: 3px;
vertical-align: text-top; vertical-align: text-top;
margin-top: -3px; //vertical alignment fix margin-top: -3px; //vertical alignment fix
display: inline-block; display: inline-block;
.extra-info-wrapper & { .extra-info-wrapper & {
color: $header-primary !important; color: $header-primary !important;
} }
} }
.badge-category-parent-bg, .badge-category-bg { .badge-category-parent-bg, .badge-category-bg {
@ -43,11 +43,53 @@
&:before { &:before {
content: "\a0"; content: "\a0";
} }
} }
} }
&.box { //general box category style (apply custom widths to the wrapper, not the children)
&.bullet { //bullet category style
line-height: 1.25;
span.badge-category {
color: $primary !important;
vertical-align: text-top;
margin-top: -1px; //vertical alignment fix
margin-left: 4px;
display: inline-block;
#search-dropdown & {
margin-top: 0;
}
.extra-info-wrapper & {
color: $header-primary !important;
}
}
.badge-category-parent-bg, .badge-category-bg {
display: inline-block;
width: 10px;
height: 10px;
&:before {
content: "\a0";
}
}
span {
&.badge-category-parent-bg { //subcategory style
width: 5px;
& + .badge-category-bg {
width: 5px;
}
}
}
}
&.box { //box category style (apply custom widths to the wrapper, not the children)
line-height: 1.5; line-height: 1.5;
margin-top: 5px; margin-top: 5px;
@ -60,7 +102,7 @@
height: 100%; height: 100%;
} }
&.badge-category-parent-bg { //3 sibling spans &.badge-category-parent-bg { //subcategory style
width: calc(100% - 5px); width: calc(100% - 5px);
& + .badge-category-bg { & + .badge-category-bg {
left: 5px; left: 5px;
@ -75,21 +117,18 @@
position: relative; position: relative;
padding: 0 5px; padding: 0 5px;
margin-top: 2px; margin-top: 2px;
} }
} }
} }
span.badge-category { span.badge-category {
max-width: 150px; max-width: 150px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.d-dropdown & { .d-dropdown & {
max-width: 100px; max-width: 100px;
}
}
} }
} }
@ -114,12 +153,16 @@
} }
} }
} }
li.bar>.badge-category:not(.home):first-child { li.bar>.badge-category:not(.home):first-child {
border-left: 5px solid; border-left: 5px solid;
} }
li.bar>.badge-category { li.bar>.badge-category {
background: dark-light-diff($primary, $secondary, 95%, -65%) !important; background: dark-light-diff($primary, $secondary, 95%, -65%) !important;
color: $primary !important;} color: $primary !important;
}
} }
.category-dropdown-menu { .category-dropdown-menu {
@ -139,6 +182,12 @@
max-width: 100px; max-width: 100px;
} }
} }
&.bullet {
margin: 5px;
.badge-category {
max-width: 100px;
}
}
&.box { &.box {
margin-top: 0; margin-top: 0;
width: 100%; width: 100%;

2
app/models/category_style_setting.rb
View File

@ -4,7 +4,7 @@ require_dependency 'enum_site_setting'
class CategoryStyleSetting < EnumSiteSetting class CategoryStyleSetting < EnumSiteSetting
VALUES = ["bar", "box"] VALUES = ["bar", "box", "bullet"]
def self.valid_value?(val) def self.valid_value?(val)
VALUES.include?(val) VALUES.include?(val)