// ==========================================================================
// 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... );
}