diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index e54693bbcec..ad27956a56b 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -75,22 +75,45 @@ li.category-link { float: left; background-color: transparent; - width: 45%; - margin: 5px 5px 0 8px; - .box {margin-top: 0;} + display: inline-flex; + margin: 0.25em 0.5em; + width: 44%; .badge-notification { color: dark-light-choose($primary-medium, $secondary-medium); background-color: transparent; display: inline; padding: 0; + font-size: $font-down-1; + line-height: $line-height-large; + } + .badge-wrapper { + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + max-width: 80%; + &.bar, &.bullet { + color: $primary; + } + &.box { + color: $secondary; + + a.badge.badge-notification { + padding-top: 2px; + } + span { + z-index: z("base") * -1; + } + } } } - + // note these topic counts only appear for anons in the category hamburger drop down b.topics-count { color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; - font-size: $font-down-2; + font-size: $font-down-1; + } + .box + b.topics-count { + padding-top: 2px; } span.badge-category { diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index d87997dc277..adeb978f991 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -44,7 +44,8 @@ } .topic-category { - margin-top: 5px; + display: flex; + flex-wrap: wrap; .topic-header-extra { display: inline-block; @@ -55,17 +56,14 @@ margin-top: 0; &.bullet .badge-category { - vertical-align: middle; } &.box, &.bullet { - vertical-align: middle; } &.box + .topic-header-extra, &.bullet + .topic-header-extra, &.bar + .topic-header-extra { - vertical-align: middle; } } } @@ -133,7 +131,6 @@ $tag-color: $primary-medium; .d-header .topic-header-extra { .discourse-tags { - display: inline-block; font-size: $font-down-1; } .topic-featured-link { margin-left: 8px; } @@ -176,9 +173,12 @@ $tag-color: $primary-medium; } .mobile-view .topic-list-item .discourse-tags { - display: inline-block; + display: inline-flex; font-size: $font-down-1; margin-top: 0; + .discourse-tag { + margin-right: .2em; + } .discourse-tag.box { position:relative; top: 0; diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index f23249d1227..0230fd49dd7 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -45,20 +45,42 @@ } } +.title-wrapper { + display: flex; + flex-wrap: wrap; + width: 90%; + + .btn-small { + margin: 0 6px 0 0; + } + + a.topic-featured-link { + display: inline-block; + } +} + +h1 { + margin: 0 0 4px 0; + width: 90%; +} + +a.badge-category { + margin-top: 5px; +} + + + #topic-title { .title-wrapper { - float: left; + display: flex; + flex-wrap: wrap; width: 90%; .btn-small { margin: 0 6px 0 0; } - .badge-wrapper { - margin-right: 12px; - } - a.topic-featured-link { display: inline-block; } @@ -66,6 +88,7 @@ h1 { margin: 0 0 4px 0; + width: 90%; } a.badge-category { diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss index 940351824eb..e4b9cdc1d24 100644 --- a/app/assets/stylesheets/common/components/badges.scss +++ b/app/assets/stylesheets/common/components/badges.scss @@ -20,104 +20,49 @@ font-weight: bold; white-space: nowrap; position: relative; - display: inline-flex; - align-items: center; - + .badge-category { .d-icon { margin-right: 3px; } } - &.bar { //bar category style - line-height: $line-height-medium; - margin-right: 5px; + // ----- Bullet - span.badge-category { - color: $primary; - padding: 3px; - overflow: hidden; - text-overflow: ellipsis; - display: inline-flex; - align-items: center; - justify-content: space-between; - - .extra-info-wrapper & { - color: $header-primary; - } - } - - .badge-category-parent-bg, .badge-category-bg { - display: inline-block; - padding: 1px; - - &:before { - content: "\a0"; - } - } - } - - &.none { // no category style - color: $primary; - margin-right: 5px; - } - - &.bullet { //bullet category style - display: inline-flex; - align-items: center; + &.bullet { margin-right: 12px; - - .extra-info-wrapper & { - margin-top: .25em; - } - span.badge-category { color: $primary; overflow: hidden; text-overflow: ellipsis; - line-height: $line-height-medium; - - #search-dropdown & { - margin-top: -2px; - } - .extra-info-wrapper & { color: $header-primary; } } - .badge-category-parent-bg, .badge-category-bg { - width: 10px; - height: 10px; + width: 9px; + height: 9px; margin-right: 5px; display: inline-block; - line-height: $line-height-small; - - &:before { - content: "\a0"; } - } - - span { - &.badge-category-parent-bg { //subcategory style + .badge-category-parent-bg { // Subcategories + width: 5px; + margin-right: 0; + +.badge-category-bg { width: 5px; - margin-right: 0; - & + .badge-category-bg { - width: 5px; - } } } } + // ----- Box - &.box { //box category style (apply custom widths to the wrapper, not the children) - line-height: $line-height-large; + &.box { margin-right: 5px; - + padding: 2px 4px 1px 4px; + display: inline-flex; span { overflow: hidden; text-overflow: ellipsis; - &.badge-category-bg, &.badge-category-parent-bg { position: absolute; top: 0; @@ -126,7 +71,7 @@ left: 0; } - &.badge-category-parent-bg { //subcategory style + &.badge-category-parent-bg { // Subcategories width: calc(100% - 5px); & + .badge-category-bg { left: 5px; @@ -139,23 +84,52 @@ &.badge-category { position: relative; - padding: 0 5px; - margin: 2px 0; + } + } + + .topic-header-extra { + padding: 2px 4px 1px 4px; + } + } + + // ----- Bar + + &.bar { + margin-right: 5px; + + span.badge-category { + color: $primary; + padding: 3px; + overflow: hidden; + text-overflow: ellipsis; + + .extra-info-wrapper & { + color: $header-primary; + } + } + + .badge-category-parent-bg, .badge-category-bg { // Subcategories + display: inline-block; + padding: 0 1px; + + &:before { + content: "\a0"; } } } + + // ----- No category style + + &.none { + color: $primary; + margin-right: 5px; + } + } -.autocomplete, td.category { - .badge-wrapper { - max-width: 230px; - } -} // Category badge dropdown // -------------------------------------------------- - .list-controls { .category-breadcrumb { a.badge-category { diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss index 6fe2e3595ac..1fdb3dbdb23 100644 --- a/app/assets/stylesheets/common/select-kit/category-drop.scss +++ b/app/assets/stylesheets/common/select-kit/category-drop.scss @@ -17,23 +17,24 @@ } } - .category-drop-header { - padding: 6px 10px; - } - &.bar.has-selection .category-drop-header { - padding: 1.5px 10px; + padding: 4.5px 10px; } &.bullet.has-selection .category-drop-header { - padding: 3.5px 10px; + padding: 6px 10px; span.badge-category { - line-height: $line-height-large; + line-height: $line-height-medium; + } + .selected-name { + .bullet { + line-height: $line-height-medium; + } } } &.box.has-selection .category-drop-header { - padding: 4.5px 10px; + padding: 3px 10px; } &.none.has-selection .category-drop-header { @@ -49,10 +50,6 @@ line-height: $line-height-medium; transition: none; - .badge-category { - display: flex; - align-items: center; - } .badge-wrapper { margin-right: 0; @@ -132,19 +129,9 @@ .badge-wrapper { margin: 0; - display: flex; - flex: 1 1 auto; } } - .select-kit-row .badge-wrapper.box { - padding: 2.5px 0; - } - - .select-kit-row .badge-wrapper.bullet, .select-kit-row .badge-wrapper.none { - margin: 2.5px; - } - &.is-expanded .select-kit-wrapper, .select-kit-wrapper { display: none; } diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 347988a5580..11bd7c3df15 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -82,9 +82,6 @@ padding-left: 5px; } } - td.category { - line-height: $line-height-small; - } .posters { // we know there are up to 5 avatars of fixed size