@itwin/itwinui-layouts-css/dist/styles.css

iTwinUI CSS package that provides classes for most common layouts

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-layouts-page{
  height:100vh;
  display:grid;
  grid-template:"header header" auto "sidenav content" 1fr "sidenav bottom-bar" auto/auto 1fr;
}
.iui-layouts-page-header{
  -ms-grid-row:1;
  -ms-grid-column:1;
  -ms-grid-column-span:2;
  grid-area:header;
}
.iui-layouts-page-sidenav{
  -ms-grid-row:2;
  -ms-grid-row-span:2;
  -ms-grid-column:1;
  grid-area:sidenav;
}
@media (max-width: 93.75rem){
  .iui-layouts-page-sidenav ~ .iui-layouts-page-content-padded{
    padding-left:calc(var(--iui-size-l) * 2);
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-page-sidenav ~ .iui-layouts-page-content-padded{
    padding-left:var(--iui-size-xl);
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-page-sidenav ~ .iui-layouts-page-content-padded{
    padding-left:var(--iui-size-l);
  }
}
.iui-layouts-page-content{
  -ms-grid-row:2;
  -ms-grid-column:2;
  grid-area:content;
  overflow:overlay;
  background-color:var(--iui-color-background-backdrop);
}
.iui-layouts-page-content-padded{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--iui-size-xl) max(var(--iui-size-2xl), env(safe-area-inset-right)) var(--iui-size-xl) max(var(--iui-size-2xl), env(safe-area-inset-left));
}
@media (max-width: 93.75rem){
  .iui-layouts-page-content-padded{
    padding:var(--iui-size-l) max(calc(var(--iui-size-l) * 2), env(safe-area-inset-right)) var(--iui-size-l) max(calc(var(--iui-size-l) * 2), env(safe-area-inset-left));
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-page-content-padded{
    padding:var(--iui-size-m) max(var(--iui-size-xl), env(safe-area-inset-right)) var(--iui-size-m) max(var(--iui-size-xl), env(safe-area-inset-left));
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-page-content-padded{
    padding:var(--iui-size-xs) max(var(--iui-size-l), env(safe-area-inset-right)) var(--iui-size-xs) max(var(--iui-size-l), env(safe-area-inset-left));
  }
}
.iui-layouts-page-content-centered{
  max-width:1440px;
  width:100%;
}
.iui-layouts-page-content-title-area{
  display:flex;
  flex-direction:column;
  margin-bottom:calc(var(--iui-size-s) * 3);
}
.iui-layouts-page-content-tools{
  display:flex;
  flex-direction:row;
  margin-bottom:calc(var(--iui-size-s) * 2);
  justify-content:space-between;
}
.iui-layouts-page-content-tools-left, .iui-layouts-page-content-tools-right{
  display:flex;
  justify-content:flex-start;
  flex-direction:row;
  gap:var(--iui-size-xs);
  align-items:center;
  min-width:0;
  flex-basis:50%;
}
.iui-layouts-page-content-tools-right{
  justify-content:flex-end;
}
.iui-layouts-page-bottom-bar{
  -ms-grid-row:3;
  -ms-grid-column:2;
  grid-area:bottom-bar;
  height:calc(var(--iui-size-s) * 5 + var(--iui-size-l));
}
@media (max-width: 31.25rem){
  .iui-layouts-page-bottom-bar{
    height:-moz-fit-content;
    height:fit-content;
  }
}
.iui-layouts-page-action-bar{
  background-color:var(--iui-color-background);
  border-top:2px solid var(--iui-color-border);
  margin-inline:auto;
  padding-inline:max(calc(var(--iui-size-xl) * 2), env(safe-area-inset-right)) max(calc(var(--iui-size-xl) * 2), env(safe-area-inset-left));
  height:inherit;
  display:grid;
  gap:var(--iui-size-xs);
  grid-template-columns:repeat(3, 1fr);
  grid-template-areas:"left center right";
}
@media (max-width: 93.75rem){
  .iui-layouts-page-action-bar{
    padding-inline:max(calc(var(--iui-size-l) * 2), env(safe-area-inset-right)) max(calc(var(--iui-size-l) * 2), env(safe-area-inset-left));
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-page-action-bar{
    padding-inline:max(var(--iui-size-xl), env(safe-area-inset-right)) max(var(--iui-size-xl), env(safe-area-inset-left));
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-page-action-bar{
    padding:max(var(--iui-size-s), env(safe-area-inset-right)) max(var(--iui-size-s), env(safe-area-inset-left));
    grid-template-columns:1fr;
    grid-template-areas:"left" "center" "right";
    justify-items:flex-start;
  }
}
.iui-layouts-page-action-bar-left, .iui-layouts-page-action-bar-center, .iui-layouts-page-action-bar-right{
  display:flex;
  align-items:center;
}
.iui-layouts-page-action-bar-left{
  -ms-grid-row:1;
  -ms-grid-column:1;
  grid-area:left;
  justify-content:flex-start;
}
.iui-layouts-page-action-bar-center{
  -ms-grid-row:1;
  -ms-grid-column:3;
  grid-area:center;
  justify-content:center;
}
.iui-layouts-page-action-bar-right{
  -ms-grid-row:1;
  -ms-grid-column:5;
  grid-area:right;
  justify-content:flex-end;
}
@media (max-width: 31.25rem){
  .iui-layouts-page-action-bar-left{
    -ms-grid-row:1;
    -ms-grid-column:1;
  }
  .iui-layouts-page-action-bar-center{
    -ms-grid-row:2;
    -ms-grid-column:1;
  }
  .iui-layouts-page-action-bar-right{
    -ms-grid-row:3;
    -ms-grid-column:1;
  }
}

.iui-layouts-fluid-grid{
  --_iui-grid-item-min-width:256px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--_iui-grid-item-min-width)), 1fr));
  gap:var(--iui-size-l);
}
.iui-layouts-fluid-grid.iui-layouts-fluid-grid > *{
  width:100%;
}

.iui-layouts-grid{
  --_iui-grid-column-count-mobile:12;
  --_iui-grid-column-count-tablet:12;
  --_iui-grid-column-count-small-monitor:12;
  --_iui-grid-column-count-monitor:12;
  display:grid;
  grid-template-columns:repeat(var(--_iui-grid-column-count-monitor), 1fr);
  grid-gap:var(--iui-size-l);
}
@media (max-width: 93.75rem){
  .iui-layouts-grid{
    grid-template-columns:repeat(var(--_iui-grid-column-count-small-monitor), 1fr);
    grid-gap:var(--iui-size-l);
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-grid{
    grid-template-columns:repeat(var(--_iui-grid-column-count-tablet), 1fr);
    grid-gap:var(--iui-size-m);
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-grid{
    grid-template-columns:repeat(var(--_iui-grid-column-count-mobile), 1fr);
    grid-gap:var(--iui-size-m);
  }
}

.iui-layouts-grid-item{
  --_iui-grid-item-column-span-mobile:span 1;
  --_iui-grid-item-column-span-tablet:span 1;
  --_iui-grid-item-column-span-small-monitor:span 1;
  --_iui-grid-item-column-span-monitor:span 1;
  --_iui-grid-item-column-start-mobile:auto;
  --_iui-grid-item-column-start-tablet:auto;
  --_iui-grid-item-column-start-small-monitor:auto;
  --_iui-grid-item-column-start-monitor:auto;
  max-width:100%;
  grid-column:var(--_iui-grid-item-column-start-monitor)/var(--_iui-grid-item-column-span-monitor);
}
@media (max-width: 93.75rem){
  .iui-layouts-grid-item{
    grid-column:var(--_iui-grid-item-column-start-small-monitor)/var(--_iui-grid-item-column-span-small-monitor);
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-grid-item{
    grid-column:var(--_iui-grid-item-column-start-tablet)/var(--_iui-grid-item-column-span-tablet);
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-grid-item{
    grid-column:var(--_iui-grid-item-column-start-mobile)/var(--_iui-grid-item-column-span-mobile);
  }
}