@openui5/sap.tnt/src/sap/tnt/themes/base/ToolPage.less

OpenUI5 UI Library sap.tnt

/* ================================= */
/* CSS for control sap.tnt/ToolPage  */
/* Base theme                        */
/* ================================= */

/* ========================================================================== */
/* Variables                                                                  */
/* ========================================================================== */

@_sap_tnt_ToolPage_AnimationDuration : 0.3s;
@_sap_tnt_ToolPage_Background: var(--sapBackgroundColor);
@_sap_tnt_ToolPage_ContentBackgroundStandard: none;
@_sap_tnt_ToolPage_ContentBackgroundSolid: none;
@_sap_tnt_ToolPage_ContentBackgroundTransparent: none;
@_sap_tnt_ToolPage_ContentBackgroundList: none;
@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransform: -100%;
@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransformRtl: 100%;
@_sap_tnt_ToolHeader_Shadow: none;

/* ========================================================================== */
/* Root element                                                               */
/* ========================================================================== */

.sapTntToolPage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: @_sap_tnt_ToolPage_Background;
}

/* ========================================================================== */
/* Header wrapper                                                             */
/* ========================================================================== */

.sapTntToolPageHeaderWrapper {
  z-index: 3;
  box-shadow: @_sap_tnt_ToolHeader_Shadow;
}

/* ========================================================================== */
/* Content wrapper                                                            */
/* ========================================================================== */

.sapTntToolPageContentWrapper {
  display: flex;
  flex: 1;
  min-height: 0; /* fixes flex chrome issue */
  position: relative;
}

/* Aside container
   ========================================================================== */

.sapTntToolPageAside {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
  z-index: 2;
}

.sapTntToolPageAsideContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
  transition: transform @_sap_tnt_ToolPage_AnimationDuration;
}

.sapTntToolPage-LayoutS {
  .sapTntToolPageAside {
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
  }

  .sapTntToolPageAsideCollapsed {
    .sapTntToolPageAside {
      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransform);
    }
  }
}



/* ========================================================================== */
/* Main container                                                             */
/* ========================================================================== */

.sapTntToolPageMain {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* fixes flex chrome issue */
  overflow: hidden;
  will-change: transform;
  background: @_sap_tnt_ToolPage_ContentBackgroundStandard;
}

.sapTntToolPageMain.sapTntToolPageMainBackground-Solid {
  background: @_sap_tnt_ToolPage_ContentBackgroundSolid;
}

.sapTntToolPageMain.sapTntToolPageMainBackground-Transparent {
  background: @_sap_tnt_ToolPage_ContentBackgroundTransparent;
  box-shadow: none;
}

.sapTntToolPageMain.sapTntToolPageMainBackground-List {
  background: @_sap_tnt_ToolPage_ContentBackgroundList;
}

.sapTntToolPageMainContent {
  flex: 1;
  min-height: 0; /* fixes flex chrome issue */
  position: relative;
}

.sapTntToolPageMainContentWrapper {
  width: 100%;
  height: 100%;
}

/* ========================================================================== */
/* Overrides                                                                  */
/* ========================================================================== */

.sapTntToolPage.sapTntToolPageWithSideContent .sapTntToolPageHeader [ui5-shellbar] {
	padding-inline: 0.875rem 1rem;
}

/* ========================================================================== */
/* RTL                                                                        */
/* ========================================================================== */

html[dir=rtl] {
  .sapTntToolPage-LayoutS .sapTntToolPageAsideCollapsed {
    .sapTntToolPageAside {
      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransformRtl);
    }
  }
}

/* ========================================================================== */

.sapTntToolPageAsideCollapsed {

  .sapTntToolPageMain {
    z-index: 1;
  }

  .sapTntToolPageAside {
    z-index: 2;
  }
}

.sapUiLocalBusy > .sapTntToolPage {
  z-index: 0;
}

.sapTntToolPage.sapUiLocalBusy .sapUiLocalBusyIndicator {
  z-index: 3;
}