wix-style-react/dist/es/src/Page/Page.st.css

wix-style-react

/* st-namespace-reference="../../../../src/Page/Page.st.css" */
:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10, D60, D70;
}

:import {
  -st-from: "../Foundation/stylable/z-index.st.css";
  -st-named: zIndex_PAGE;
}

:import {
  -st-from: "../Foundation/stylable/mixins/calc.js";
  -st-default: calc;
}

:import {
  -st-from: "../Foundation/stylable/mixins/calc_rgba.js";
  -st-default: calc_rgba;
}

:vars {
  pageSidePadding: 48px;
  headerBottomPadding: 24px;
  imageContainerOffset: 30px;
  pageBottomPadding: 48px;
  minimizedHeaderWrapperMinHeight: 30px;
  minimizedHeaderWrapperTopPadding: 18px;
  minimizedHeaderWrapperBottomPadding: 18px;
  minimizedHeaderWrapperWithTailBottomPadding: 12px;

  minimizedHeaderWrapperHeightPx: 66;
  minimizedHeaderWrapperWithTailHeightPx: 60;
  backgroundCoverContentPx: 36;

  /**********************
  *      Z-Indexs
  **********************/
  zIndexLayerStep: 100;
  /* z-index is needed so that non-sticky content with 'position: relative' would not overlay above the sticky content.
   * Need to be height than any component that may fit into a sticky page content.
   * Currently:
   * - InputSuffix's content uses 10000 (Likely to appear in a sticky TableToolbar)
   * - Tooltip uses 2000
   * - ToggleButton uses 1000
   */
  stickyZIndex: 1100;
  minimizedHeaderContainerZIndex: calc(value(stickyZIndex) + value(zIndexLayerStep));
  fixedFooterZIndex: 2000;

  mainContainerMinWidth: 864px;
  mainContainerMaxWidth: 1248px;
}

@keyframes entrance {
  0% {
    opacity: 0;
    bottom: -20px;
  }

  100% {
    opacity: 1;
    bottom: 0;
  }
}

.root {
  overflow-x: auto;
  height: 100%;
  z-index: value(zIndex_PAGE);
}

.page {
  position: relative;
  background-color: value(D70);
  min-width: value(mainContainerMinWidth);
  height: 100%;
  transform: scale(1);
}

.scrollableContainer {
  overflow-y: auto;
  width: 100%;
  position: relative;
  height: 100%;
}

.pageHeaderContainer {
  --minimizationTop: 0;
  -st-states: minimized, hasTail;
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  top: var(--minimizationTop);
}

.headerWrapper {
  -st-states: minimized , reducedSpacingAndImprovedLayout;
}

.pageHeaderContainer .headerWrapper:reducedSpacingAndImprovedLayout {
  padding-top: 24px;
}

.pageHeaderContainer .headerWrapper {
  padding-top: 30px;
  padding-bottom: value(headerBottomPadding);
}

.pageHeaderContainer .headerWrapper:minimized {
  box-sizing: content;
  min-height: value(minimizedHeaderWrapperMinHeight);
  padding-top: value(minimizedHeaderWrapperTopPadding);
  padding-bottom: value(minimizedHeaderWrapperBottomPadding);
  position: relative;
  animation: entrance 0.2s;
}

.pageHeaderContainer:hasTail .headerWrapper:minimized {
  padding-bottom: value(minimizedHeaderWrapperWithTailBottomPadding);
}

.pageHeaderContainer .tail {
  background-color: value(D70);
}

.pageHeaderContainer:minimized {
  position: -webkit-sticky;
  position: sticky;
  z-index: value(minimizedHeaderContainerZIndex);
  background-color: value(D70);
  border-bottom: 1px solid value(D60);
}

.scrollableContainer {
  -st-states: hasTail;
}

.scrollableContainer .contentContainer {
  position: relative;
}

.scrollableContainer:hasTail .contentContainer {
  margin-top: value(headerBottomPadding);
}

.imageBackgroundContainer {
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
}

.imageBackgroundContainer::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: calc_rgba(value(D10), 0.42);
}

.imageBackgroundContainer .imageBackground {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: calc(-1 * value(imageContainerOffset));
  bottom: calc(-1 * value(imageContainerOffset));
  left: calc(-1 * value(imageContainerOffset));
  right: calc(-1 * value(imageContainerOffset));
  filter: blur(12px);
}

.gradientBackground {
  position: absolute;
  top: 0;
  width: 100%;
}

.contentHorizontalLayout {
  -st-states: contentFullWidth, horizontalScroll;
  padding: 0 value(pageSidePadding);
  margin: 0 auto;
}

.contentHorizontalLayout:contentFullWidth {
  padding-left: 0;
  padding-right: 0;
}

.contentHorizontalLayout:horizontalScroll {
  overflow-x: auto;
  /* keep the padding effect when there is horizontal scroll */
  padding-right: 0;
}

/* Needed in order to be above the background image which has position absolute */
.contentFloating {
  position: relative;
  display: flex;
  flex-direction: column;
}

.horizontalScroll .contentFloating {
  display: inline-block;
  margin-right: value(pageSidePadding);
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: value(stickyZIndex);
  background-color: value(D70);
  /* This fixes non-sticky content from being shown behind sticky content with rounded-corners */
}

.stretchVertically {
  height: 100%;
}

.fixedFooter {
  z-index: value(fixedFooterZIndex);
  background: linear-gradient(90deg, transparent 40px, value(D70) 40px, value(D70) calc(100% - 40px), transparent calc(100% - 40px));
  position: fixed;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: available;
  width: -moz-available;
  width: -webkit-fill-available;
  padding: 0 48px 48px 48px;
}