Edit file File name : z-index.scss Content :// ========================================================================== // A nested map of all of our z-index values. // // Please add new values relative to their parent stacking context. For // example the values of 'root' are elements with a stacking context that have no // parents with a stacking context, other than the default html root. // // A Stacking Context is created when: // 1. It's the root element (HTML) // 2. Has a position other than static, with a z-index value // 3. position:fixed // 4. Has one of the following css properties: (transform, opacity<1, mix-blend-mode, filter) // 5. isolation:isolate // 6: -webkit-overflow-scrolling: touch // // So before adding a new z-index: // 1. You'll want to make sure the element actually creates a stacking context // 2. Look up what its parent stacking context is // You can run this handy gist: https://gist.github.com/gwwar/2f661deec7b99a1a418b in the console to find both. // // For readability please sort values from lowest to highest. // // Usage: // .environment-badge { // z-index: z-index( 'root' '.environment-badge' ); // } // // For a refresher on stacking contexts see: // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context // ========================================================================== $z-layers: ( 'root': ( '.translator-invitation:before': -1, '.NuxWelcome:before': -1, '.infinite-scroll-end:before': -1, '.is-group-editor::before': -1, '.site-icon.is-blank .gridicon': 0, '.dops-chart__bar-section.is-spacer': 0, '.gear-dropdown:after': 0, '.plan-compare-card__ribbon': 1, '.reader__featured-post-title': 1, '.reader-list-gap__button': 1, '.post-trends__title': 1, '.plugin-item__label': 1, '.wp-editor-tools': 1, '.plan .gridicons-checkmark-circle': 1, '.plan-discount-message': 1, '.editor__switch-mode': 1, '.auth__form .form-fieldset input': 1, '.dops-chart__empty': 1, '.dops-chart__bar-marker': 1, '.dops-chart__bar-section.is-ghost::after': 1, '.billing-history-page .filter-popover-content': 1, '.module-content-table::after': 1, '.stats-popular__empty': 1, '.menus__menu-item.is-lander': 1, '.people-list-item__label': 1, '.is-actionable .theme__active-focus': 1, '.dops-accessible-focus .current-theme__button:focus': 1, '.signup-processing-screen__processing-step.is-processing:before': 1, '.dops-accessible-focus .theme__more-button button:focus': 1, '.reader-update-notice': 2, '.people-list-item .card__link-indicator': 2, '.updated-confirmation': 2, '.auth__form .form-fieldset input:focus': 2, '.toolbar-bulk': 2, '.menus__menu-item': 2, '.menus__menu-item-open:before': 2, '.dops-chart__bar-section': 2, '.module-content-table tbody th:first-child': 2, 'ul.module-header-actions .module-header-action-link': 2, '.stats-module.is-loading .module-header-title::after': 2, 'ul.module-content-list-item-action-submenu': 2, 'ul.module-content-list-item-actions': 2, '.site-indicator__button': 3, 'ul.module-content-list-item-actions.collapsed': 3, '.auth__input-wrapper .gridicon': 3, '.auth__self-hosted-instructions': 4, '.auth__form .form-password-input__toggle-visibility': 4, '.site-selector': 10, '.editor-featured-image__preview.is-transient::after': 10, '.wp-secondary .site-selector': 10, '.range__label': 10, '.sticky-panel.is-sticky .sticky-panel__content': 20, '.editor-featured-image .editor-drawer-well__remove': 20, '.main': 20, //TODO: this doesn't always have a stacking context //'tinymce-toolbar': 20, client/components/tinymce/index.jsx '.dops-search': 22, '#translator-launcher': 99, '.author-selector__popover.popover': 100, '.dops-search.is-pinned': 170, '.dops-select-dropdown.is-open .dops-select-dropdown__container': 170, '.dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container': 170, '.sites-dropdown.is-open .sites-dropdown__wrapper' : 170, '.popover.editor-visibility__popover': 179, '.feature-example__gradient': 179, '.global-notices': 179, '.notices-list.is-pinned': 180, '.notices-list.is-pinned .notice': 180, '.masterbar': 180, '.detail-page__backdrop': 190, '.layout__loader': 200, '.offline-status': 200, '.reader-post-images__full-list': 200, '.environment-badge': 999, '.customizer-loading-panel__muse-status': 999, '.customizer-loading-panel__placeholder-change-theme': 999, '.module-overlay': 1000, '.drop-zone': 1000, '.dops-popover': 1000, '.sharing-buttons-preview-buttons__more': 1000, '.sortable-list__item.is-draggable.is-active': 1000, '.dops-chart__tooltip': 1000, '.drop-zone__content': 1010, '.wp-overlay': 9999, '.dropdown-menu': 9999, '.main.customize.is-iframe': 9999, '.fullscreen-overlay': 100005, '#wp_editbtns': 100020, '#wp-fullscreen-body': 100010, '.wp-fullscreen-wrap': 100015, '#wp-fullscreen-statusbar': 100020, '#fullscreen-topbar': 100020, '.wp-fullscreen-active #TB_overlay': 100050, '.wp-fullscreen-active #TB_window': 100051, 'div.mce-inline-toolbar-grp': 100100, '.dialog__backdrop': 100200, '.wplink__dialog.dialog.card': 100200, '.web-preview': 100200, '.category-selector__add-category-info': 100201, '.dops-popover.is-dialog-visible': 100300, 'body .webui-popover': 100300, '.fullscreen-fader': 200000, '.guided-tours__overlay': 200050, '.guided-tours__step': 201000, '#habla_window_div.habla_window_div_base': 99999999 //olark ), '.plan-compare-card__ribbon': ( '.plan-compare-card__ribbon-title::before': -1, '.plan-compare-card__ribbon-title::after': -1 ), '.environment-badge': ( '.environment-badge .environment::before': -1, '.environment-badge .bug-report': 1000 ), '.masterbar': ( '.masterbar__notifications-bubble': 99999 ), '.detail-page__backdrop': ( '.detail-page__action-buttons': 200 ), '.toolbar-bulk': ( '.toolbar-bulk__check-all': 1, '.toolbar-bulk__selection-options': 1, '.toolbar-bulk__more-actions': 1, '.plugins .toolbar-bulk__toggle': 21, '.toolbar-bulk__toggle': 30 ), '.dops-popover': ( '.input-chrono__container .gridicons-calendar': 0, 'input.input-chrono': 1, '.dops-popover .dops-popover__arrow': 1, '.post-schedule__header': 1 ), '.dops-search': ( '.dops-search__input': 10, '.dops-search.is-searching .dops-spinner': 20, '.dops-search .dops-search__open-icon': 20, '.dops-search .dops-search__close-icon': 20 ), '.profile-gravatar__edit-label-wrap': ( '.profile-gravatar__edit-label-wrap:after': 0, '.profile-gravatar__edit-label': 1000 ), '.media-library__list-item': ( '.media-library__list-item.is-selected::after': 10, '.media-library__list-item.is-transient .media-library__list-item-figure::after': 10, '.media-library__list-item-selected-icon .gridicon': 20, '.media-library__list-item-spinner': 20, '.media-library__list-item-edit': 20 ), '.dialog__backdrop': ( '.editor-media-modal .section-nav': 10, '.editor-media-modal .notice': 10, '.editor-media-modal-gallery__preview-toggle': 100, '.editor-contact-form-modal .section-nav': 10 ), '.following-edit': ( //aka 'main' '.following-edit__subscribe-form .gridicons-add-outline': 23, '.following-edit__subscribe-form .card.is-search-result': 35 ), // The following may be inserted into different areas. // The parent stacking context may be root, or something else depending on where it is inserted. 'icon-parent': ( '.sidebar__menu .gridicon.gridicons-external': 1, '.sidebar__menu .noticon-external': 1 ), 'screen-reader-text-parent': ( '.screen-reader-text:focus': 100000 ), 'button-group-parent': ( '.button-group .button:focus': 1 ), 'progress-indicator-parent': ( '.progress-indicator__cancel.noticon:before': 1, '.progress-indicator .is-success': 2 ), 'dops-section-nav-tabs__dropdown-parent': ( '.dops-section-nav-tabs__dropdown': 3, '.dops-section-nav-tabs__dropdown.is-open': 4 ), 'reader-card-follow-button-parent': ( '.reader__card.card .follow-button': 1 ) ); // allows us to do a nested fetch @function map-deep-get( $map, $keys... ) { @each $key in $keys { @if not map-has-key( $map, $key) { @warn "No layer found for `#{$key}` of `[#{ $keys }]` in $z-layers map. Property omitted."; @return map-get( $map, $key ); } $map: map-get( $map, $key ); } @return $map; } @function z-index( $keys... ) { @return map-deep-get( $z-layers, $keys... ); } Save