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

Merge pull request #3251 from awesomerobot/master 

rebuilding the category badge css
This commit is contained in:
Jeff Atwood 2015-03-04 22:23:08 -08:00
parent ad30c9ed92 2ee201b67f
commit 36e02ed49b
11 changed files with 116 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,10 +99,6 @@
} }
} }
td.category a {
max-width:150px;
}
} }
@ -156,24 +152,6 @@
margin-left: 8px; margin-left: 8px;
} }
.badge-category {
padding: 4px 10px;
display: inline-block;
margin-bottom: 10px;
}
.category-dropdown-menu .badge-category {
width: 100%;
}
.category-dropdown-button {
font-size: 1.143em;
width: 10px;
text-align: center;
&:hover {
opacity: 0.8;
}
}
clear: both; clear: both;
} }
@ -223,10 +201,6 @@ ol.category-breadcrumb {
background-color: $secondary; background-color: $secondary;
z-index: 100; z-index: 100;
.cat {
margin-right: 20px;
}
a.badge-category, a.badge-category-parent { a.badge-category, a.badge-category-parent {
line-height: 19px; line-height: 19px;
overflow:hidden; overflow:hidden;

1
app/assets/stylesheets/common/base/combobox.scss
View File

@ -13,7 +13,6 @@
} }
.category-desc { .category-desc {
color: $primary; color: $primary;
margin: 6px 0 0 3px;
font-size: 0.857em; font-size: 0.857em;
line-height: 16px; line-height: 16px;
} }

9
app/assets/stylesheets/common/base/header.scss
View File

@ -233,11 +233,6 @@
@include unselectable; @include unselectable;
} }
.category-links li:not(.heading) a {
display: inline-block;
}
// Site map // Site map
&#site-map-dropdown { &#site-map-dropdown {
@ -296,12 +291,14 @@
.category { .category {
float: left; float: left;
background-color: transparent; background-color: transparent;
line-height: 20px; line-height: 1.25;
width: 45%; width: 45%;
margin: 5px 5px 0 5px; margin: 5px 5px 0 5px;
.badge-notification { .badge-notification {
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
background-color: transparent; background-color: transparent;
vertical-align: top;
padding: 5px 5px 2px 5px;
} }
} }

1
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -3,7 +3,6 @@
padding: 3px 8px; padding: 3px 8px;
color: $primary; color: $primary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
font-size: $base-font-size * 0.86;
line-height: 19px; line-height: 19px;
margin: 0; margin: 0;
display: inline-block; display: inline-block;

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

@ -12,162 +12,136 @@
@include border-radius-all(10px); @include border-radius-all(10px);
} }
// Category badge // Category badges
// -------------------------------------------------- // --------------------------------------------------
.badge-wrapper span { .badge-wrapper {
font-size: 0.857em; font-size: 0.857em;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
line-height: 1;
position: relative; position: relative;
}
.badge-wrapper { &.bar { //general bar category style
white-space: nowrap; line-height: 1.25;
position: relative; span.badge-category {
color: $primary !important;
padding: 3px;
vertical-align: text-top;
margin-top: -3px; //vertical alignment fix
}
.badge-category-parent-bg, .badge-category-bg {
display: inline-block; display: inline-block;
} padding: 1px;
.badge-category {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
.fa {
line-height: 0;
}
}
.badge-wrapper > .badge-category {
// ie9?
width: 100%;
padding: 5px 4px;
}
.d-header li.category .badge-wrapper {
max-width: calc(100% - 30px)
}
h3 .badge-category {
padding-left: 3px;
}
h3 .badge-wrapper {
padding-left: 4px;
}
header .title-wrapper {
.badge-category-bg, .badge-category {
vertical-align: middle;
}
.badge-category-bg {
padding-top:0;
padding-bottom:0;
}
}
.badge-category-parent-bg, .badge-category-bg {
padding: 5px 2px 4px 2px;
width: 2px;
.category-name {
display: none;
}
&:before { &:before {
content: "\a0"; content: "\a0";
} }
}
.d-dropdown .badge-category {
&.restricted {
span {
display: inline-block;
margin: 0;
} }
}}
h1 a.badge-category div {vertical-align: top;}
.category-breadcrumb li > .badge-category {
float: left;
&:not(.home):first-child {
.badge-category-bg {
display: none;
} }
}
}
&.box { //general box category style
.user-preferences .autocomplete .badge-wrapper .badge-category { margin: 5px 2px 0 0;
margin: 2px; line-height: 1.25;
font-weight: normal; i {line-height: 0;}
} .badge-category-bg, .badge-category-parent-bg {
.user-preferences .autocomplete .selected .badge-wrapper .badge-category {
font-weight: bold;
}
.ac-wrap {
.badge-wrapper span {
padding-top: 3px;
padding-bottom: 0;
height: 20px;
max-width: 200px;
}
}
// specific styles for badge categories
.bar .badge-category {
color: $primary !important;
}
header .title-wrapper .bar .badge-category {
color: $header-primary !important;
}
.category-breadcrumb li.bar > .badge-category {
background: dark-light-diff($primary, $secondary, 95%, -65%) !important;
line-height: 24px;
&:not(.home):first-child {
border-left-width: 5px;
border-left-style: solid;
}
}
.category-breadcrumb .box > a.badge-category {
margin-bottom: 0;
height: 24px;
// TODO clean this up
padding-top: 6px !important;
padding-bottom: 0 !important;
}
.category-dropdown-menu .cat .badge-wrapper.box {
width: 110%;
}
.badge-wrapper.box {
.badge-category-bg {
position: absolute; position: absolute;
padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: -3px;
}
.badge-category-parent-bg + .badge-category-bg { //nesting box categories
margin-left: 5px;
}
.badge-category-parent-bg + .badge-category-bg + .badge-category {
margin-left: 5px;
padding-right: 0;
}
span.badge-category {
position: relative;
padding: 0 5px;
}
}
span.badge-category {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
.d-dropdown & {
max-width: 100px;
} }
> .badge-category { }
}
// Category badge dropdown
// --------------------------------------------------
.list-controls {
.category-breadcrumb {
a.badge-category {
display: inline-block;
padding: 5px 12px;
line-height: 20px;
&.category-dropdown-button {
margin-left: -4px;
padding: 5px 0 5px 0;
width: 13px;
.fa-caret-down {
margin-left: -5px;
}
.fa-caret-right {
margin-left: -2px;
}
}
}
li.bar>.badge-category:not(.home):first-child {
border-left: 5px solid;
}
li.bar>.badge-category {
background: dark-light-diff($primary, $secondary, 95%, -65%) !important;
color: $primary !important;}
}
.category-dropdown-menu {
.badge-category {
&.home {
margin-left: 4px;
padding-left: 0;
}
}
.cat {
line-height: 0;
}
.badge-wrapper {
&.bar {
margin: 5px 0;
}
&.box {
width: 100%; width: 100%;
box-sizing: border-box; line-height: 0;
padding: 5px 6px 4px 6px; margin: 0;
span.badge-category {
padding: 15px 5px;
margin-top: -5px;
} }
}
}
}
} }
.title-wrapper .badge-wrapper.box .badge-category {
vertical-align: middle;
}
// Notification badge // Notification badge

1
app/assets/stylesheets/desktop/discourse.scss
View File

@ -90,7 +90,6 @@ body {
.topic-statuses { .topic-statuses {
float: left; float: left;
margin: 0 3px 0 0;
padding: 0; padding: 0;
.topic-status { .topic-status {
padding: 0 2px 0 0; padding: 0 2px 0 0;

4
app/assets/stylesheets/desktop/header.scss
View File

@ -40,10 +40,6 @@ and (max-width : 570px) {
// Categories // Categories
.category {
line-height: 20px;
}
.btn { .btn {
padding: 2px 8px; padding: 2px 8px;
margin-bottom: 2px; margin-bottom: 2px;

19
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -22,13 +22,6 @@
a.badge-category { a.badge-category {
padding: 3px 12px; padding: 3px 12px;
font-size: 1.143em; font-size: 1.143em;
&.category-dropdown-button {
height: 24px;
padding: 3px 9px 3px 0;
i { height: 20px; }
}
} }
} }
@ -95,10 +88,6 @@
} }
} }
.category {
padding: 0 20px 0 20px;
min-width: 80px;
}
.posters { .posters {
// we know there are up to 5 avatars of fixed size // we know there are up to 5 avatars of fixed size
// will be overridden by media width queries on narrow displays to 1 avatar's width // will be overridden by media width queries on narrow displays to 1 avatar's width
@ -250,11 +239,6 @@
top: -1px; top: -1px;
} }
} }
.category .badge-category {
display: inline-block;
margin-top: 1px;
}
} }
.topic-list-bottom { .topic-list-bottom {
@ -274,8 +258,7 @@
.category-dropdown-menu { .category-dropdown-menu {
max-height: 350px; max-height: 350px;
margin-top: 30px; min-width: 129px;
min-width: 152px;
} }
#bulk-select { #bulk-select {

16
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -558,22 +558,6 @@ video {
.topic-statuses { .topic-statuses {
margin-top: -2px; margin-top: -2px;
} }
.badge-wrapper {
margin: 0 0 0 2px;
padding: 0;
.badge-category {
color: $header_primary;
margin-right: 5px;
}
.badge-category-parent {
margin: 0;
padding: 0px 1px;
}
}
} }
/* override docked header CSS for topics with categories */ /* override docked header CSS for topics with categories */

1
app/assets/stylesheets/desktop/topic.scss
View File

@ -41,7 +41,6 @@
line-height: 1.2em; line-height: 1.2em;
overflow: hidden; overflow: hidden;
a {color: $primary;} a {color: $primary;}
margin-bottom: 5px;
} }

1
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -263,7 +263,6 @@ ol.category-breadcrumb {
.category-dropdown-menu { .category-dropdown-menu {
height: 200px; height: 200px;
margin-top: 31px;
a.badge-category { a.badge-category {
line-height: 26px !important; line-height: 26px !important;