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

UX: Implementing a z-index system (#5507)

This commit is contained in:
Kris 2018-01-16 19:05:12 -05:00 committed by GitHub
parent 2d2602edf0
commit 0c01e0b2fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 125 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -195,7 +195,7 @@ $mobile-breakpoint: 700px;
position: absolute; position: absolute;
width: 460px; width: 460px;
right: 0px; right: 0px;
z-index: 990; z-index: z("dropdown");
box-shadow: 0 2px 6px rgba(0,0,0, .8); box-shadow: 0 2px 6px rgba(0,0,0, .8);
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $secondary;
@ -403,7 +403,7 @@ $mobile-breakpoint: 700px;
// The admin-nav becomes a slide-out menu at the mobile-nav breakpoint // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
position: absolute; position: absolute;
z-index: 0; z-index: z("base") - 1;
width: 50%; width: 50%;
} }
} }
@ -411,7 +411,7 @@ $mobile-breakpoint: 700px;
.admin-detail { .admin-detail {
width: 76.5765%; width: 76.5765%;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
z-index: 10; z-index: z("base");
width: 100%; width: 100%;
} }
background-color: $secondary; background-color: $secondary;

2
app/assets/stylesheets/common/admin/customize.scss
View File

@ -61,7 +61,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 100000; z-index: z("fullscreen");
background-color: white; background-color: white;
width: 100%; width: 100%;
padding: 0; padding: 0;

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

@ -1,6 +1,6 @@
.show-more { .show-more {
width: 100%; width: 100%;
z-index: 1; z-index: z("base");
&.has-topics { &.has-topics {
position: absolute; position: absolute;
top: 7px; top: 7px;
@ -259,7 +259,7 @@ ol.category-breadcrumb {
position: absolute; position: absolute;
border: 1px solid $primary-low; border: 1px solid $primary-low;
background-color: $secondary; background-color: $secondary;
z-index: 100; z-index: z("dropdown");
a.badge-category, a.badge-category-parent { a.badge-category, a.badge-category-parent {
line-height: $line-height-large; line-height: $line-height-large;

4
app/assets/stylesheets/common/base/compose.scss
View File

@ -16,7 +16,7 @@
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
min-width: 0; min-width: 0;
} }
z-index: 999; z-index: z("composer","content");
transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease; transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease;
background-color: $secondary; background-color: $secondary;
box-shadow: 0 -1px 40px rgba(0,0,0, .12); box-shadow: 0 -1px 40px rgba(0,0,0, .12);
@ -271,7 +271,7 @@
} }
.autocomplete { .autocomplete {
z-index: 999999; z-index: z("dropdown");
position: absolute; position: absolute;
width: 240px; width: 240px;
background-color: $secondary; background-color: $secondary;

2
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -3,7 +3,7 @@ body.crawler {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 1001; z-index: z("max");
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);

2
app/assets/stylesheets/common/base/discourse.scss
View File

@ -353,7 +353,7 @@ select {
top: -18px !important; top: -18px !important;
right: -18px !important; right: -18px !important;
box-shadow: 0 0 0 9999px rgba($primary, 0.85); box-shadow: 0 0 0 9999px rgba($primary, 0.85);
z-index: 1040; z-index: z("modal","overlay");
} }
.ring-first-notification { .ring-first-notification {

4
app/assets/stylesheets/common/base/emoji.scss
View File

@ -7,7 +7,7 @@ img.emoji {
.emoji-picker { .emoji-picker {
box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background-clip: padding-box; background-clip: padding-box;
z-index: 10000; z-index: z("modal","content");
position: fixed; position: fixed;
display: none; display: none;
flex-direction: row; flex-direction: row;
@ -177,7 +177,7 @@ img.emoji {
} }
.emoji-picker-modal.fadeIn { .emoji-picker-modal.fadeIn {
z-index: 9999; z-index: z("modal","overlay");
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;

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

@ -2,7 +2,7 @@
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 1001; z-index: z("header");
background-color: $header_background; background-color: $header_background;
box-shadow: 0 2px 4px -1px rgba(0,0,0, .25); box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
@ -110,7 +110,7 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
z-index: 1101; z-index: z("header") + 1; // Higher than .menu-panel
width: 100%; width: 100%;
height: 0; height: 0;
content: ""; content: "";
@ -135,7 +135,7 @@
.ring { .ring {
position: absolute; position: absolute;
top: -9px; top: -9px;
z-index: 1; z-index: z("base");
margin-left: 0; margin-left: 0;
} }
.header-dropdown-toggle { .header-dropdown-toggle {
@ -143,7 +143,7 @@
} }
.badge-notification { .badge-notification {
position: absolute; position: absolute;
z-index: 1; z-index: z("base");
left: 0; left: 0;
top: -4px; top: -4px;
min-width: 6px; min-width: 6px;

2
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -21,7 +21,7 @@
border: 1px solid $primary-low; border: 1px solid $primary-low;
box-shadow: 0 2px 2px rgba(0,0,0, .25); box-shadow: 0 2px 2px rgba(0,0,0, .25);
background-color: $secondary; background-color: $secondary;
z-index: 1100; z-index: z("header");
padding: 0.5em; padding: 0.5em;
width: 300px; width: 300px;

12
app/assets/stylesheets/common/base/modal.scss
View File

@ -1,12 +1,12 @@
.modal-open { .modal-open {
.dropdown-menu { .dropdown-menu {
z-index: 2050; z-index: z("modal","dropdown");
} }
.popover { .popover {
z-index: 2060; z-index: z("modal","popover");
} }
.tooltip { .tooltip {
z-index: 2070; z-index: z("modal","tooltip");
} }
} }
@ -26,7 +26,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: z("modal","overlay");
background-color: #111; background-color: #111;
&.fade { &.fade {
opacity: 0; opacity: 0;
@ -98,7 +98,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1050; z-index: z("modal","content");
overflow: auto; overflow: auto;
} }
.modal-form { .modal-form {
@ -169,7 +169,7 @@
position: relative; position: relative;
} }
.jsfu-shade { .jsfu-shade {
z-index: 1; z-index: z("base");
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

2
app/assets/stylesheets/common/base/onebox.scss
View File

@ -376,7 +376,7 @@ aside.onebox.twitterstatus .onebox-body {
.onebox.imgur-album { .onebox.imgur-album {
.outer-box { .outer-box {
position: absolute; position: absolute;
z-index: 935; z-index: z("base");
overflow: hidden; overflow: hidden;
font-size: $font-down-1; font-size: $font-down-1;
color: #fff; color: #fff;

2
app/assets/stylesheets/common/base/share_link.scss
View File

@ -3,7 +3,7 @@
#share-link { #share-link {
position: absolute; position: absolute;
left: 20px; left: 20px;
z-index: 1200; z-index: z("dropdown");
box-shadow: 0 1px 5px rgba(0,0,0, .4); box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-color: $secondary; background-color: $secondary;
padding: 6px 10px 10px 10px; padding: 6px 10px 10px 10px;

4
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -4,7 +4,7 @@
position: fixed; position: fixed;
top: 120px; top: 120px;
right: 10px; right: 10px;
z-index: 999; z-index: z("dropdown");
height: 35px; height: 35px;
} }
@ -13,7 +13,7 @@
width: 205px; width: 205px;
padding: 10px; padding: 10px;
border: 1px solid $primary-low; border: 1px solid $primary-low;
z-index: 999; z-index: z("dropdown");
ul { ul {
list-style: none; list-style: none;

2
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -174,7 +174,7 @@ aside.quote {
background-color: blend-primary-secondary(50%); background-color: blend-primary-secondary(50%);
color: dark-light-choose($secondary, $primary); color: dark-light-choose($secondary, $primary);
padding: 10px; padding: 10px;
z-index: 401; z-index: z("dropdown");
opacity: 0.9; opacity: 0.9;
.d-icon { .d-icon {

2
app/assets/stylesheets/common/base/topic.scss
View File

@ -9,7 +9,7 @@
.progress-back-container { .progress-back-container {
position: fixed; position: fixed;
bottom: 40px; bottom: 40px;
z-index: 950; z-index: z("dropdown");
margin-right: 0px; margin-right: 0px;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-name: button-jump-up; animation-name: button-jump-up;

2
app/assets/stylesheets/common/components/banner.scss
View File

@ -7,7 +7,7 @@
background: $tertiary-low; background: $tertiary-low;
box-shadow: 0 2px 4px -1px rgba(0,0,0, .25); box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
color: $primary; color: $primary;
z-index: 1001; z-index: z("base") + 1;
overflow: auto; overflow: auto;
&.overlay { &.overlay {

4
app/assets/stylesheets/common/d-editor.scss
View File

@ -8,12 +8,12 @@
position: absolute; position: absolute;
background-color: black; background-color: black;
opacity: 0.8; opacity: 0.8;
z-index: 1000; z-index: z("modal","overlay");
} }
.d-editor-modals { .d-editor-modals {
position: absolute; position: absolute;
z-index: 1001; z-index: z("modal","content");
} }
.d-editor { .d-editor {

50
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -53,6 +53,56 @@ $line-height-large: 1.4; // Normal or small text
@import "plugins_variables"; @import "plugins_variables";
@import "common/foundation/math"; @import "common/foundation/math";
// Z-index
// --------------------------------------------------
$z-layers: (
"max": 9999,
"fullscreen": 1700,
"modal": (
"tooltip": 1600,
"popover": 1500,
"dropdown": 1400,
"content": 1300,
"overlay": 1200,
),
"mobile-composer": 1100,
"header": 1000,
"tooltip": 600,
"composer": (
"popover": 500,
"content": 400,
),
"dropdown": 300,
"usercard": 200,
"timeline": 100,
"base": 1
);
@function map-has-nested-keys($map, $keys...) {
@each $key in $keys {
@if not map-has-key($map, $key) {
@return false;
}
$map: map-get($map, $key);
}
@return true;
}
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function z($layers...) {
@if not map-has-nested-keys($z-layers, $layers...) {
@warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
}
@return map-deep-get($z-layers, $layers...);
}
// Color utilities // Color utilities
// -------------------------------------------------- // --------------------------------------------------

2
app/assets/stylesheets/common/input_tip.scss
View File

@ -5,7 +5,7 @@
position: absolute; position: absolute;
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
z-index: 101; z-index: z("tooltip");
&.bad { &.bad {
background: $danger-medium; background: $danger-medium;
color: white; color: white;

4
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -1,5 +1,5 @@
.mobile-view .select-kit.is-expanded { .mobile-view .select-kit.is-expanded {
z-index: 1000; z-index: z("dropdown");
} }
.select-box-kit, .select-kit { .select-box-kit, .select-kit {
@ -30,7 +30,7 @@
} }
&.is-expanded { &.is-expanded {
z-index: 999; z-index: z("dropdown");
.select-kit-body { .select-kit-body {
display: -webkit-box; display: -webkit-box;

2
app/assets/stylesheets/common/topic-entrance.scss
View File

@ -4,7 +4,7 @@
padding: 5px; padding: 5px;
background: $secondary; background: $secondary;
box-shadow: 0 0px 2px rgba(0,0,0, .2); box-shadow: 0 0px 2px rgba(0,0,0, .2);
z-index: 100; z-index: z("dropdown");
position: absolute; position: absolute;
width: 133px; width: 133px;

8
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -4,7 +4,7 @@
.timeline-container { .timeline-container {
box-sizing: border-box; box-sizing: border-box;
z-index: 499; z-index: z("timeline");
margin-left: 757px; margin-left: 757px;
@media all and (min-width: 1140px) { @media all and (min-width: 1140px) {
@ -51,7 +51,7 @@
border-top: 1px solid dark-light-choose($primary-low, $secondary-low); border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25); box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25);
padding-top: 20px; padding-top: 20px;
z-index: 100000; z-index: z("fullscreen");
.back-button { .back-button {
display: none; display: none;
} }
@ -225,7 +225,7 @@
background-color: dark-light-choose($tertiary-low, $tertiary-high); background-color: dark-light-choose($tertiary-low, $tertiary-high);
height: 100%; height: 100%;
float: left; float: left;
z-index: 501; z-index: z("base") + 1;
} }
.timeline-scroller-content { .timeline-scroller-content {
@ -261,7 +261,7 @@
color: $tertiary; color: $tertiary;
margin-right: 1em; margin-right: 1em;
} }
z-index: 502; z-index: z("base") + 2; // above timeline-handle
} }
.back-button { .back-button {

2
app/assets/stylesheets/desktop/compose.scss
View File

@ -73,7 +73,7 @@
bottom: 10px; bottom: 10px;
left: 51%; left: 51%;
overflow-y: auto; overflow-y: auto;
z-index: 110; z-index: z("composer","popover");
padding: 10px 10px 35px 10px; padding: 10px 10px 35px 10px;
box-shadow: 3px 3px 3px rgba(0,0,0, 0.34); box-shadow: 3px 3px 3px rgba(0,0,0, 0.34);
background: $highlight-medium; background: $highlight-medium;

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

@ -140,7 +140,7 @@ input {
vertical-align: middle; vertical-align: middle;
&:focus { &:focus {
z-index: 2; z-index: z("base") + 1;
} }
} }

2
app/assets/stylesheets/desktop/modal.scss
View File

@ -10,7 +10,7 @@
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 1050; z-index: z("modal","content");
overflow: auto; overflow: auto;
width: 610px; width: 610px;
height: auto; height: auto;

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

@ -268,7 +268,7 @@
top: 130px; top: 130px;
padding: 5px; padding: 5px;
background-color: $secondary; background-color: $secondary;
z-index: 99999; z-index: z("dropdown");
} }
button.dismiss-read { button.dismiss-read {

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

@ -27,7 +27,7 @@ h1 .topic-statuses .topic-status i {
} }
.reply-to-tab { .reply-to-tab {
z-index: 400; z-index: z("base") + 1;
float: right; float: right;
margin: -2px 25px 0 0; margin: -2px 25px 0 0;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
@ -177,7 +177,7 @@ nav.post-controls {
text-align: left; text-align: left;
bottom: -2px; bottom: -2px;
right: 15px; right: 15px;
z-index: 1000; z-index: z("dropdown");
h3 { h3 {
margin-top: 0; margin-top: 0;
@ -256,7 +256,7 @@ nav.post-controls {
} }
.topic-meta-data h5 { .topic-meta-data h5 {
position: absolute; position: absolute;
z-index: 1; z-index: z("base");
font-size: $font-down-1; font-size: $font-down-1;
a { a {
font-weight: bold; font-weight: bold;
@ -613,7 +613,7 @@ $topic-avatar-width: 45px;
width: $topic-body-width; width: $topic-body-width;
float: left; float: left;
position: relative; position: relative;
z-index: 2; z-index: z("base");
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
padding: 12px $topic-body-width-padding 15px $topic-body-width-padding; padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
} }
@ -623,7 +623,7 @@ $topic-avatar-width: 45px;
padding-top: 15px; padding-top: 15px;
width: $topic-avatar-width; width: $topic-avatar-width;
float: left; float: left;
z-index: 3; z-index: z("base");
} }
.gap { .gap {
@ -659,7 +659,7 @@ $topic-avatar-width: 45px;
position: absolute; position: absolute;
bottom: 115%; bottom: 115%;
left: 0; left: 0;
z-index: 999; z-index: z("dropdown");
display: none; display: none;
float: left; float: left;
width: 550px; width: 550px;
@ -724,7 +724,7 @@ $topic-avatar-width: 45px;
.selected-posts { .selected-posts {
width: 200px; width: 200px;
position: fixed; position: fixed;
z-index: 1000; z-index: z("dropdown");
background-color: $tertiary-low; background-color: $tertiary-low;
border: 1px solid $tertiary; border: 1px solid $tertiary;
padding: 5px; padding: 5px;
@ -815,7 +815,7 @@ $topic-avatar-width: 45px;
.select-posts { .select-posts {
position: absolute; position: absolute;
right: 0; right: 0;
z-index: 490; z-index: z("base") + 1;
top: 3em; top: 3em;
height: 100px; height: 100px;
@ -847,7 +847,7 @@ a.attachment:before {
color: rgba($primary-low, .8); color: rgba($primary-low, .8);
font: 6.429em/1 FontAwesome; font: 6.429em/1 FontAwesome;
content: "\f014"; content: "\f014";
z-index: -5; z-index: z("base");
} }
.topic-meta-data { .topic-meta-data {

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

@ -17,7 +17,7 @@
.edits {margin-right: 5px;} .edits {margin-right: 5px;}
#topic-title { #topic-title {
z-index: 1000; z-index: z("base");
padding-top: 14px; padding-top: 14px;
margin-bottom: 10px; margin-bottom: 10px;
@ -81,7 +81,7 @@
right: 50%; right: 50%;
width: 0; width: 0;
bottom: 0; bottom: 0;
z-index: 500; z-index: z("timeline");
&.docked { &.docked {
position: absolute; position: absolute;
bottom: -70px; bottom: -70px;
@ -155,13 +155,13 @@
top: 9px; top: 9px;
width: 100%; width: 100%;
text-align: center; text-align: center;
z-index: 1; z-index: z("base");
} }
.d-icon { .d-icon {
position: absolute; position: absolute;
right: 8px; right: 8px;
bottom: 9px; bottom: 9px;
z-index: 1; z-index: z("base");
} }
h4 { h4 {
display: inline; display: inline;
@ -195,7 +195,7 @@
position: fixed; position: fixed;
width: 100%; width: 100%;
font-size: $font-0; font-size: $font-0;
z-index: 495 z-index: z("dropdown");
} }
@media all @media all

2
app/assets/stylesheets/desktop/user-card.scss
View File

@ -9,7 +9,7 @@ $user_card_background: $secondary;
width: 500px; width: 500px;
left: -9999px; left: -9999px;
top: -9999px; top: -9999px;
z-index: 990; z-index: z("usercard");
box-shadow: 1px 2px 6px rgba(0,0,0, .25); box-shadow: 1px 2px 6px rgba(0,0,0, .25);
margin-top: -2px; margin-top: -2px;
color: $user_card_primary; color: $user_card_primary;

6
app/assets/stylesheets/mobile/compose.scss
View File

@ -7,7 +7,7 @@
} }
#reply-control { #reply-control {
z-index: 1002; //d-header is 1001 z-index: z("mobile-composer");
.reply-area { .reply-area {
padding: 0 10px; padding: 0 10px;
@media screen and (max-width: 374px) { @media screen and (max-width: 374px) {
@ -81,7 +81,7 @@
&.show-preview { &.show-preview {
.d-editor-preview-wrapper { .d-editor-preview-wrapper {
position: fixed; position: fixed;
z-index: 1000000; z-index: z("base") + 1;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -99,7 +99,7 @@
position: fixed; position: fixed;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
z-index: 1000001; z-index: z("base") + 2;
} }
} }

2
app/assets/stylesheets/mobile/discourse.scss
View File

@ -112,7 +112,7 @@ blockquote {
left: 0; left: 0;
display: block; display: block;
position: absolute; position: absolute;
z-index: 10000000; z-index: z("dropdown");
background-color: $secondary; background-color: $secondary;
width: 100%; width: 100%;
list-style: none; list-style: none;

2
app/assets/stylesheets/mobile/modal.scss
View File

@ -12,7 +12,7 @@
.bootbox.modal { .bootbox.modal {
position: fixed; position: fixed;
top: 10%; top: 10%;
z-index: 1050; z-index: z("modal","content");
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: auto; height: auto;

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

@ -28,7 +28,7 @@
.nav-pills .drop { .nav-pills .drop {
border: 1px solid $primary-low; border: 1px solid $primary-low;
position: absolute; position: absolute;
z-index: 1000; z-index: z("dropdown");
background-color: $secondary; background-color: $secondary;
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
width: 150px; width: 150px;
@ -342,7 +342,7 @@ tr.category-topic-link {
position: relative; position: relative;
top: 100%; top: 100%;
left: 0; left: 0;
z-index: 1000; z-index: z("dropdown");
display: none; display: none;
float: left; float: left;
width: 280px; width: 280px;

12
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -79,7 +79,7 @@ span.badge-posts {
text-align: left; text-align: left;
bottom: 0; bottom: 0;
left: 135px; left: 135px;
z-index: 1000; z-index: z("dropdown");
h3 { h3 {
margin-top: 0; margin-top: 0;
@ -125,7 +125,7 @@ span.badge-posts {
} }
a.reply-to-tab { a.reply-to-tab {
z-index: 400; z-index: z("base") + 1;
right: 80px; right: 80px;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
margin: -3px 10px 0 0; margin: -3px 10px 0 0;
@ -311,7 +311,7 @@ span.post-count {
} }
#topic-title { #topic-title {
z-index: 1000; z-index: z("base") + 1;
margin: 0 0 0 0 !important; margin: 0 0 0 0 !important;
padding: 15px 0; padding: 15px 0;
} }
@ -329,7 +329,7 @@ span.post-count {
.quote-button.visible { .quote-button.visible {
display: block; display: block;
z-index: 936; z-index: z("tooltip");
} }
iframe { iframe {
@ -397,7 +397,7 @@ iframe {
button.select-post { button.select-post {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
z-index: 401; // 400 is the reply-to tab z-index: z("base") + 1;
left: 200px; left: 200px;
background-color: srgb-scale($tertiary, $secondary, 60%); background-color: srgb-scale($tertiary, $secondary, 60%);
color: $secondary; color: $secondary;
@ -443,7 +443,7 @@ span.highlighted {
.topic-avatar { .topic-avatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
z-index:999; /* must render on top of topic-body + topic-meta-data, otherwise not tappable */ z-index: z("base") + 1; /* must render on top of topic-body + topic-meta-data, otherwise not tappable */
} }
.topic-meta-data { .topic-meta-data {

6
app/assets/stylesheets/mobile/topic.scss
View File

@ -61,7 +61,7 @@
width: 0; width: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 950; z-index: z("timeline");
margin-right: 148px; margin-right: 148px;
} }
@ -126,7 +126,7 @@
top: 9px; top: 9px;
width: 100%; width: 100%;
text-align: center; text-align: center;
z-index: 1; z-index: z("base");
} }
h4 { h4 {
display: inline; display: inline;
@ -137,7 +137,7 @@
position: absolute; position: absolute;
right: 8px; right: 8px;
bottom: 9px; bottom: 9px;
z-index: 1; z-index: z("base");
} }
.bg { .bg {
position: absolute; position: absolute;