@keyframes button-jump-up { 0% { margin-bottom: -60px; } 50% { margin-bottom: 10px; } 65% { margin-bottom: 0px; } 77% { margin-bottom: 5px; } 100% { margin-bottom: 0px; } } .progress-back-container { z-index: z("dropdown"); margin-right: 0; animation-duration: 0.5s; animation-name: button-jump-up; width: 145px; text-align: center; position: relative; margin-bottom: 0px; .btn { margin: 0; } } #topic-progress-wrapper { .topic-admin-menu-button-container { position: absolute; bottom: 0px; left: -38px; width: 0px; .widget-button { height: 35px; border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%); } } .topic-admin-popup-menu.right-side { position: relative; right: 50px; left: auto; transform: translateZ( 0 ); // iOS11 Rendering bug https://meta.discourse.org/t/wrench-menu-not-disappearing-on-ios/94297 } } #topic-progress-wrapper.docked { .topic-admin-popup-menu.right-side { bottom: -150px; // Prevents menu from being too high when a topic is very short } } .title-wrapper { display: flex; flex-wrap: wrap; button { margin: 0 0.5em 0 0; } a.topic-featured-link { display: inline-block; } .topic-statuses { line-height: 1.2em; margin-right: 0.15em; .d-icon { color: $primary-medium; } } } h1 { margin: 0 0 4px 0; } a.badge-category { margin-top: 5px; } #topic-title { .title-wrapper { display: flex; flex-wrap: wrap; width: 90%; a.topic-featured-link { display: inline-block; } } h1 { margin: 0 0 4px 0; width: 100%; } a.badge-category { margin-top: 5px; } a.edit-topic .d-icon { font-size: 0.8em; } .edit-topic-title { display: flex; flex-wrap: wrap; box-sizing: border-box; max-width: 758px; #edit-title { flex: 1 1 auto; } .private-message-glyph { margin: 5px 5px 0 0; } .category-chooser, .mini-tag-chooser { flex: 1 1 49%; margin: 0 0 9px 0; @media all and (max-width: 500px) { flex: 1 1 100%; } } .mini-tag-chooser { margin-left: 2%; @media all and (max-width: 500px) { margin-left: 0; } } } } .private-message-glyph { color: dark-light-choose($primary-low-mid, $secondary-high); margin-right: 5px; } .archetype-private_message #topic-title .edit-topic-title .tag-chooser { margin-left: 19px; } .private_message { #topic-title { .edit-topic-title { #edit-title { width: calc(100% - 50px); } } } } .topic-title-outlet { clear: both; } .has-pending-posts { display: flex; justify-content: space-between; padding: 0.5em; background-color: $highlight-medium; margin-top: 1em; max-width: 757px; } .suggested-topics-wrapper.related-messages-wrapper { .suggested-topics:nth-of-type(n + 2) { thead { display: none; } } } // Target the .badge-category text, the bullet icon needs to maintain `display: block` .suggested-topics h3 .badge-wrapper.bullet span.badge-category, .suggested-topics h3 .badge-wrapper.box span, .suggested-topics h3 .badge-wrapper.bar span { display: inline; } .suggested-topics h3 .badge-wrapper.bullet span.badge-category { // Override vertical-align: text-top from `badges.css.scss` vertical-align: baseline; line-height: $line-height-medium; } .suggested-topics h3 .badge-wrapper.bullet, .suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg, .suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg { // Top of bullet aligns with top of line - adjust line height to vertically align bullet. line-height: 0.8; } .suggested-topics .badge-wrapper.bullet span.badge-category, .suggested-topics .badge-wrapper.bar span.badge-category { max-width: 150px; } .suggested-topics .suggested-topics-title { display: flex; align-items: center; } .post-links-container { @include unselectable; clear: both; .post-links { margin-top: 1em; padding-top: 1em; border-top: 1px solid $primary-low; li:last-of-type { margin-bottom: 1em; } } .expand-links { color: dark-light-choose($primary-medium, $secondary-medium); } .track-link { display: flex; align-items: center; span:not(.badge) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } ul { margin: 0; list-style: none; li { margin-bottom: 0.5em; a[href] { color: dark-light-choose($primary-medium, $secondary-medium); } .clicks { margin-left: 0.5em; flex: 0 0 auto; } .d-icon { font-size: $font-down-2; margin: 0 0.5em 0 0; } } } a.reply-new { .d-icon { background: $secondary; border-radius: 20px; transition: all linear 0.15s; } &:hover { color: $tertiary; .d-icon { background: $tertiary-low; } } } } a.topic-featured-link { display: inline-block; text-transform: lowercase; color: dark-light-choose($primary-medium, $secondary-medium); font-size: 0.875rem; .d-icon { margin-right: 3px; } }