From 8932b9afcfe86b6021ae3338787b967ea6a6fa02 Mon Sep 17 00:00:00 2001 From: Kris Aubuchon Date: Wed, 4 Mar 2015 22:15:21 -0500 Subject: [PATCH] rebuilding the category badge css --- .../stylesheets/common/base/_topic-list.scss | 26 -- .../stylesheets/common/base/combobox.scss | 1 - .../stylesheets/common/base/header.scss | 10 +- .../stylesheets/common/base/user-badges.scss | 3 +- .../common/components/badges.css.scss | 261 +++++++++--------- app/assets/stylesheets/desktop/discourse.scss | 1 - app/assets/stylesheets/desktop/header.scss | 4 - .../stylesheets/desktop/topic-list.scss | 19 +- .../stylesheets/desktop/topic-post.scss | 16 -- app/assets/stylesheets/desktop/topic.scss | 1 - app/assets/stylesheets/mobile/topic-list.scss | 1 - 11 files changed, 130 insertions(+), 213 deletions(-) diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index b86750dbdaa..e9b1645da41 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -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; diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss index 5c743b34e07..82c982ffbe2 100644 --- a/app/assets/stylesheets/common/base/combobox.scss +++ b/app/assets/stylesheets/common/base/combobox.scss @@ -13,7 +13,6 @@ } .category-desc { color: $primary; - margin: 6px 0 0 3px; font-size: 0.857em; line-height: 16px; } diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 8549fabc482..c13b1bebe29 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -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; } } diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss index 3c8405def39..0ce5a3b128a 100644 --- a/app/assets/stylesheets/common/base/user-badges.scss +++ b/app/assets/stylesheets/common/base/user-badges.scss @@ -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; diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss index 8506cb89171..05e4b26057b 100644 --- a/app/assets/stylesheets/common/components/badges.css.scss +++ b/app/assets/stylesheets/common/components/badges.css.scss @@ -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 // -------------------------------------------------- diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 6b96e29599b..97231859588 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -90,7 +90,6 @@ body { .topic-statuses { float: left; - margin: 0 3px 0 0; padding: 0; .topic-status { padding: 0 2px 0 0; diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss index 7d2a411f4e3..b5c775d4c8a 100644 --- a/app/assets/stylesheets/desktop/header.scss +++ b/app/assets/stylesheets/desktop/header.scss @@ -40,10 +40,6 @@ and (max-width : 570px) { // Categories - .category { - line-height: 20px; - } - .btn { padding: 2px 8px; margin-bottom: 2px; diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 089863a1c66..9ffee610add 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -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 { diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 6451a4e9b2d..230e28b1490 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -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 */ diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index e17e9fa2e3f..06ac6b7f919 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -41,7 +41,6 @@ line-height: 1.2em; overflow: hidden; a {color: $primary;} - margin-bottom: 5px; } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 22ea3fc3b73..e924161bf4b 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -263,7 +263,6 @@ ol.category-breadcrumb { .category-dropdown-menu { height: 200px; - margin-top: 31px; a.badge-category { line-height: 26px !important;