/* * * merchantcommon.css * Copyright (c) 2017 Paytronix Systems, Inc. - All Rights Reserved * */ /* - Imports */ @import url("fonts.css"); /* - EDS-style AJAX loading indicator. * Replaces the legacy ajax-loader.gif used by the shared Lift layouts. The * element is a full-viewport, fixed overlay with a very subtle dim to signal * "something's happening", and a centered rotating ring (::after) in EDS colors * matching the migrated EDS Spinner (to_serve/src/main/react/components/Spinner.css). * pointer-events:none keeps it non-blocking so minor AJAX updates don't feel * modal. Being fixed, it overlays the page instead of sitting in normal flow * above the header (which used to push the whole page content down). The element * keeps id="ajax-indicator" and its inline display:none so Lift's * ajaxOnStart/ajaxOnEnd toggling still works. */ #ajax-indicator { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .4); pointer-events: none; z-index: 9999; } #ajax-indicator::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border: 4px solid #D0D0CE; border-left-color: #425CC7; border-radius: 50%; box-sizing: border-box; animation: ajax-indicator-spin 1.1s linear infinite; } @keyframes ajax-indicator-spin { to { transform: rotate(360deg); } } /* - The

the merchant shells render from duplicates * the page name shown on mobile by the left-nav header bar (see * leftnav/.../MobileHeaderBar.js), so hide it there. * * The shells that mount the nav (and so get the bar) carry * `px-mobile-nav-shell` on . That class is part of the server-rendered * markup rather than something the nav sets once it has mounted, so the heading * is never painted and then pulled out from under the content. MobileHeaderBar * falls back to this heading's text, so pages the nav model has no entry for * (detail / sub-pages) still get their name in the bar. * * The [id~=] form matches react-merchant-grid.html, whose container id is * "lift-content-container pxs-nav", while skipping the old-nav * "lift-content-container-nostyle" shell (it has no mobile header bar). * * 997px is the shell's mobile layout switch (the 'mobile_nav' entry in * to_serve/src/main/react/style/responsive.scss); this file is plain CSS and * cannot import it. */ @media (max-width: 997px) { .px-mobile-nav-shell [id~="lift-content-container"] > .row > .col-1-1 > h1 { display: none; } }