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 #3257 from awesomerobot/master 

re-rebuilding the category badge css
This commit is contained in:
Robin Ward 2015-03-06 13:54:51 -05:00
parent 7c25efc095 8932b9afcf
commit 85797ccef9
11 changed files with 130 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;
}
.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;
}
@ -223,10 +201,6 @@ ol.category-breadcrumb {
background-color: $secondary;
z-index: 100;
.cat {
margin-right: 20px;
}
a.badge-category, a.badge-category-parent {
line-height: 19px;
overflow:hidden;

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

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

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

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

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

@ -3,7 +3,6 @@
padding: 3px 8px;
color: $primary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
font-size: $base-font-size * 0.86;
line-height: 19px;
margin: 0;
display: inline-block;
@ -144,7 +143,7 @@ table.badges-listing {
width: 45%;
padding: 0 0 0 4%;
margin-bottom: 20px;
.badge-info {
width: 100px;
display: block;

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

@ -12,164 +12,151 @@
@include border-radius-all(10px);
}
// Category badge
// Category badges
// --------------------------------------------------
.badge-wrapper span {
.badge-wrapper {
font-size: 0.857em;
font-weight: bold;
white-space: nowrap;
display: inline-block;
line-height: 1;
position: relative;
}
.badge-wrapper {
white-space: nowrap;
position: relative;
display: inline-block;
}
.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 {
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;
}
}
}
.user-preferences .autocomplete .badge-wrapper .badge-category {
margin: 2px;
font-weight: normal;
}
.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 {
&.bar { //general bar category style
line-height: 1.25;
span.badge-category {
color: $primary !important;
}
padding: 3px;
vertical-align: text-top;
margin-top: -3px; //vertical alignment fix
display: inline-block;
header .title-wrapper .bar .badge-category {
color: $header-primary !important;
}
.extra-info-wrapper & {
color: $header-primary !important;
}
}
.badge-category-parent-bg, .badge-category-bg {
display: inline-block;
padding: 1px;
.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;
}
}
&:before {
content: "\a0";
}
}
.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;
padding: 0;
width: 100%;
height: 100%;
}
> .badge-category {
width: 100%;
box-sizing: border-box;
padding: 5px 6px 4px 6px;
&.box { //general box category style (apply custom widths to the wrapper, not the children)
line-height: 1.5;
margin-top: 5px;
span {
display: block;
&.badge-category-bg, &.badge-category-parent-bg {
position: absolute;
width: 100%;
height: 100%;
}
&.badge-category-parent-bg { //3 sibling spans
width: calc(100% - 5px);
& + .badge-category-bg {
left: 5px;
width: calc(100% - 5px);
& + .badge-category {
margin-left: 5px;
}
}
}
&.badge-category {
position: relative;
padding: 0 5px;
margin-top: 2px;
}
}
}
span.badge-category {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
.d-dropdown & {
max-width: 100px;
}
}
}
.title-wrapper .badge-wrapper.box .badge-category {
vertical-align: middle;
// Category badge dropdown
// --------------------------------------------------
.list-controls {
.category-breadcrumb {
a.badge-category {
display: inline-block;
padding: 5px 8px;
line-height: 20px;
&.category-dropdown-button {
margin-left: -4px;
padding: 5px;
width: 13px;
.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;
.badge-category {
max-width: 100px;
}
}
&.box {
margin-top: 0;
width: 100%;
line-height: 1;
span.badge-category {
padding: 5px;
}
}
}
}
}
// Notification badge
// --------------------------------------------------

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

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

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

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

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

@ -22,13 +22,6 @@
a.badge-category {
padding: 3px 12px;
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 {
// 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
@ -250,11 +239,6 @@
top: -1px;
}
}
.category .badge-category {
display: inline-block;
margin-top: 1px;
}
}
.topic-list-bottom {
@ -274,8 +258,7 @@
.category-dropdown-menu {
max-height: 350px;
margin-top: 30px;
min-width: 152px;
min-width: 131px;
}
#bulk-select {

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

@ -558,22 +558,6 @@ video {
.topic-statuses {
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 */

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

@ -41,7 +41,6 @@
line-height: 1.2em;
overflow: hidden;
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 {
height: 200px;
margin-top: 31px;
a.badge-category {
line-height: 26px !important;