@itwin/itwinui-css 1.0.0-dev.8 → 1.0.0

package/css/header.css

@@ -2,435 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-page-header{
-  --_iui-header-brand-label-font-size:var(--iui-font-size-2);
-  --_iui-header-height:calc(var(--iui-size-s) * 5);
-  --_iui-header-icon-scale:none;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:flex;
-  justify-content:space-between;
-  width:100%;
-  height:var(--_iui-header-height);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  background-color:var(--iui-color-background-1);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-background-border);
-  color:var(--iui-color-foreground-2);
-  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header{
-    transition:height var(--iui-duration-1) ease-out;
-  }
-}
-.iui-page-header[data-iui-size=slim]{
-  --_iui-header-brand-label-font-size:var(--iui-font-size-1);
-  --_iui-header-height:calc(var(--iui-size-s) * 3);
-  --_iui-header-icon-scale:scale(0.66666);
-}
-
-.iui-page-header-left,
-.iui-page-header-center,
-.iui-page-header-right{
-  display:flex;
-  align-items:center;
-}
-
-.iui-page-header-right .iui-button{
-  height:100%;
-  border-radius:0;
-  flex-shrink:0;
-}
-@media (forced-colors: active){
-  .iui-page-header-right .iui-button{
-    border-top-width:0;
-    border-bottom-width:0;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-page-header-right .iui-avatar,
-.iui-page-header-right .iui-avatar *{
-    transition:width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, font-size var(--iui-duration-1) ease-out;
-  }
-}
-
-.iui-page-header-divider{
-  height:calc(var(--iui-size-s) * 2);
-  border-left:1px solid var(--iui-color-background-border);
-}
-@media (forced-colors: active){
-  .iui-page-header-divider{
-    display:none;
-  }
-}
-
-.iui-header-breadcrumbs{
-  --_iui-breadcrumbs-height:100%;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:flex;
-  align-items:center;
-  height:var(--_iui-breadcrumbs-height);
-}
-
-.iui-header-brand{
-  height:100%;
-  display:inline-flex;
-  align-items:center;
-  flex-shrink:0;
-  white-space:nowrap;
-  background-color:transparent;
-  box-sizing:border-box;
-}
-a.iui-header-brand,
-button.iui-header-brand, .iui-header-brand[role=button]{
-  cursor:pointer;
-  -webkit-tap-highlight-color:transparent;
-  transition:background-color var(--iui-duration-1) ease-out;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-family:inherit;
-  background-color:unset;
-  color:unset;
-}
-a.iui-header-brand:focus-visible,
-button.iui-header-brand:focus-visible, .iui-header-brand[role=button]:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  a.iui-header-brand:focus,
-button.iui-header-brand:focus, .iui-header-brand[role=button]:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-@media (forced-colors: active){
-  a.iui-header-brand,
-button.iui-header-brand, .iui-header-brand[role=button]{
-    border:1px solid CanvasText;
-    border-top-width:0;
-    border-bottom-width:0;
-  }
-}
-a.iui-header-brand:hover,
-button.iui-header-brand:hover, .iui-header-brand[role=button]:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-
-a.iui-header-brand{
-  text-decoration:none;
-}
-
-.iui-header-brand-icon{
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-  margin:0 calc(1.5 * var(--iui-size-m));
-  fill:var(--iui-color-foreground-2);
-  will-change:transform;
-  transform:var(--_iui-header-icon-scale);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-header-brand-icon{
-    transition:transform var(--iui-duration-1) ease-out;
-  }
-}
-
-.iui-header-brand-label{
-  margin-right:var(--iui-size-s);
-  font-size:var(--_iui-header-brand-label-font-size);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-header-brand-label{
-    transition:font-size var(--iui-duration-1) ease-out;
-  }
-}
-@media (max-width: 991px){
-  .iui-header-brand-label{
-    display:none;
-  }
-}
-
-.iui-header-breadcrumbs-list{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:flex;
-  align-items:center;
-  list-style-type:none;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  height:100%;
-}
-
-.iui-page-header-left,
-.iui-header-breadcrumbs,
-.iui-header-breadcrumbs-list{
-  overflow:hidden;
-  box-sizing:content-box;
-  margin-bottom:calc(0px - var(--iui-size-2xs));
-  padding-bottom:var(--iui-size-2xs);
-}
-
-.iui-header-breadcrumb-button{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-flex;
-  align-items:center;
-  vertical-align:middle;
-  justify-content:center;
-  height:100%;
-  border-radius:0;
-  max-width:25vw;
-  overflow:hidden;
-  padding-left:var(--iui-size-s);
-  padding-right:var(--iui-size-s);
-  box-sizing:border-box;
-  font-family:inherit;
-  -webkit-tap-highlight-color:transparent;
-  transition:background-color var(--iui-duration-1) ease-out;
-  color:inherit;
-  gap:var(--iui-size-s);
-  cursor:pointer;
-}
-.iui-header-breadcrumb-button:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-header-breadcrumb-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-@media (forced-colors: active){
-  .iui-header-breadcrumb-button{
-    border:1px solid;
-    border-top-width:0;
-    border-bottom-width:0;
-  }
-  .iui-header-breadcrumb-button:not(:last-child){
-    border-right-width:0;
-  }
-}
-.iui-header-breadcrumb-button, .iui-header-breadcrumb-button:hover{
-  background-color:transparent;
-}
-.iui-header-breadcrumb-button:disabled, .iui-header-breadcrumb-button[aria-disabled=true]{
-  cursor:not-allowed;
-}
-
-.iui-header-breadcrumb-button-split{
-  padding:0 var(--iui-size-xs);
-  margin-left:calc(0px - var(--iui-size-xs));
-  flex-shrink:0;
-}
-.iui-header-breadcrumb-button-split:hover{
-  background-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-6));
-}
-[aria-current] .iui-header-breadcrumb-button-split:hover{
-  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
-}
-
-.iui-header-breadcrumb-button-split:disabled, .iui-header-breadcrumb-button-split[aria-disabled=true]{
-  cursor:not-allowed;
-}
-.iui-header-breadcrumb-button-split:disabled:hover, .iui-header-breadcrumb-button-split[aria-disabled=true]:hover{
-  background-color:transparent;
-}
-
-.iui-header-breadcrumb-item{
-  max-width:25vw;
-  transition:background-color var(--iui-duration-1) ease-out;
-  height:100%;
-  display:flex;
-  overflow:hidden;
-  position:relative;
-  color:var(--iui-color-foreground-2);
-  box-sizing:border-box;
-}
-@media (forced-colors: active){
-  .iui-header-breadcrumb-item{
-    color:LinkText;
-    border:none;
-  }
-}
-.iui-header-breadcrumb-item:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-header-breadcrumb-item[aria-current]{
-  background-color:var(--iui-color-background-subtle-primary);
-  box-shadow:0 var(--iui-size-3xs) 0 0 currentColor;
-  color:var(--iui-color-foreground-primary);
-}
-@media (forced-colors: active){
-  .iui-header-breadcrumb-item[aria-current]{
-    color:LinkText;
-    border-bottom:3px solid LinkText;
-  }
-}
-.iui-header-breadcrumb-item[aria-disabled=true]{
-  cursor:not-allowed;
-  background-color:transparent;
-  color:var(--iui-color-foreground-5);
-}
-.iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
-  box-shadow:none;
-  background-color:var(--iui-color-background-2);
-}
-@media (forced-colors: active){
-  .iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
-    border-bottom:3px solid GrayText;
-  }
-}
-
-.iui-header-breadcrumb-button-wrapper{
-  width:100%;
-  overflow:hidden;
-  display:flex;
-}
-
-.iui-header-breadcrumb-button-icon{
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-  background-color:var(--iui-color-background-3);
-  border-radius:var(--iui-border-radius-1);
-  display:inline-flex;
-  flex-shrink:0;
-  box-sizing:border-box;
-  padding:var(--iui-size-2xs);
-  fill:var(--iui-color-foreground-4);
-  will-change:transform;
-  transform:var(--_iui-header-icon-scale);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-header-breadcrumb-button-icon{
-    transition:transform var(--iui-duration-1) ease-out;
-  }
-}
-@media (forced-colors: active){
-  .iui-header-breadcrumb-button-icon{
-    fill:LinkText;
-  }
-}
-img.iui-header-breadcrumb-button-icon,
-div.iui-header-breadcrumb-button-icon{
-  padding:0;
-  transition:filter var(--iui-duration-1) ease-out;
-}
-@media (prefers-reduced-motion: no-preference){
-  img.iui-header-breadcrumb-button-icon,
-div.iui-header-breadcrumb-button-icon{
-    transition:filter var(--iui-duration-1) ease-out, transform var(--iui-duration-1) ease-out;
-  }
-}
-
-img.iui-header-breadcrumb-button-icon{
-  -o-object-fit:cover;
-     object-fit:cover;
-}
-
-div.iui-header-breadcrumb-button-icon{
-  background-position:center;
-  background-repeat:no-repeat;
-  background-size:cover;
-}
-
-.iui-active .iui-header-breadcrumb-button-icon, [aria-current] .iui-header-breadcrumb-button-icon{
-  background-color:var(--iui-color-background-1);
-  fill:currentColor;
-}
-
-:disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
-  background-color:var(--iui-color-background-2);
-  fill:var(--iui-color-foreground-5);
-}
-@media (forced-colors: active){
-  :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
-    fill:GrayText;
-  }
-}
-
-:disabled img.iui-header-breadcrumb-button-icon,
-:disabled div.iui-header-breadcrumb-button-icon,
-[aria-disabled=true] img.iui-header-breadcrumb-button-icon,
-[aria-disabled=true] div.iui-header-breadcrumb-button-icon{
-  filter:grayscale(1) opacity(0.7);
-}
-
-@media (max-width: 768px){
-  .iui-header-breadcrumb-button-icon{
-    display:none;
-  }
-}
-
-.iui-header-breadcrumb-button-dropdown-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  fill:currentColor;
-  flex-shrink:0;
-  margin-right:calc(0px - var(--iui-size-2xs));
-}
-.iui-header-breadcrumb-button-split .iui-header-breadcrumb-button-dropdown-icon{
-  margin-right:0;
-}
-
-@media (forced-colors: active){
-  :disabled .iui-header-breadcrumb-button-dropdown-icon, [aria-disabled=true] .iui-header-breadcrumb-button-dropdown-icon{
-    fill:GrayText;
-  }
-}
-
-.iui-header-breadcrumb-button-text{
-  display:flex;
-  flex-direction:column;
-  justify-content:center;
-  font-size:var(--iui-font-size-1);
-  text-align:left;
-  overflow:hidden;
-  transition:color var(--iui-duration-1) ease-out;
-}
-.iui-header-breadcrumb-button-text-label, .iui-header-breadcrumb-button-text-sublabel{
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-}
-.iui-header-breadcrumb-button-text-sublabel{
-  font-size:var(--iui-font-size-0);
-  opacity:var(--iui-opacity-3);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-header-breadcrumb-button-text-sublabel{
-    transition:visibility 0s linear 0s, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
-  }
-}
-.iui-active .iui-header-breadcrumb-button-text-sublabel, [aria-current] .iui-header-breadcrumb-button-text-sublabel{
-  opacity:var(--iui-opacity-1);
-}
-
-[data-iui-size=slim] .iui-header-breadcrumb-button-text-sublabel{
-  visibility:hidden;
-  opacity:0;
-  height:0;
-  width:0;
-}
+.iui-page-header{--_iui-header-brand-label-font-size:var(--iui-font-size-2);--_iui-header-height:calc(var(--iui-size-s)*5);--_iui-header-icon-scale:none;vertical-align:baseline;width:100%;height:var(--_iui-header-height);-webkit-user-select:none;user-select:none;background-color:var(--iui-color-background);border:none;border-bottom:2px solid var(--iui-color-border);color:var(--iui-color-text);padding:0;padding:env(safe-area-inset-top)env(safe-area-inset-right)0 env(safe-area-inset-left);justify-content:space-between;margin:0;display:flex}@media (prefers-reduced-motion:no-preference){.iui-page-header{transition:height var(--iui-duration-1)ease-out}}.iui-page-header[data-iui-size=slim]{--_iui-header-brand-label-font-size:var(--iui-font-size-1);--_iui-header-height:calc(var(--iui-size-s)*3);--_iui-header-icon-scale:scale(.66666)}.iui-page-header-left,.iui-page-header-center,.iui-page-header-right{align-items:center;display:flex}.iui-page-header-right .iui-button{height:100%;border-radius:0;flex-shrink:0}@media (forced-colors:active){.iui-page-header-right .iui-button{border-top-width:0;border-bottom-width:0}}.iui-page-header-right .iui-button:hover{background-color:var(--iui-color-background-hover)}@media (prefers-reduced-motion:no-preference){.iui-page-header-right .iui-avatar,.iui-page-header-right .iui-avatar *{transition:width var(--iui-duration-1)ease-out,height var(--iui-duration-1)ease-out,font-size var(--iui-duration-1)ease-out}}.iui-page-header-divider{height:calc(var(--iui-size-s)*2);border-left:2px solid var(--iui-color-border)}@media (forced-colors:active){.iui-page-header-divider{display:none}}.iui-header-breadcrumbs{--_iui-breadcrumbs-height:100%;vertical-align:baseline;height:var(--_iui-breadcrumbs-height);border:none;align-items:center;margin:0;padding:0;display:flex}.iui-header-brand{height:100%;white-space:nowrap;box-sizing:border-box;background-color:#0000;flex-shrink:0;align-items:center;display:inline-flex}a.iui-header-brand,button.iui-header-brand,.iui-header-brand[role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--iui-duration-1)ease-out;vertical-align:baseline;background-color:unset;color:unset;border:none;margin:0;padding:0;font-family:inherit}a.iui-header-brand:focus-visible,button.iui-header-brand:focus-visible,.iui-header-brand[role=button]:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){a.iui-header-brand:focus,button.iui-header-brand:focus,.iui-header-brand[role=button]:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}@media (forced-colors:active){a.iui-header-brand,button.iui-header-brand,.iui-header-brand[role=button]{border:1px solid CanvasText;border-top-width:0;border-bottom-width:0}}a.iui-header-brand:hover,button.iui-header-brand:hover,.iui-header-brand[role=button]:hover{background-color:var(--iui-color-background-hover)}a.iui-header-brand{text-decoration:none}.iui-header-brand-icon{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));margin:0 calc(1.5*var(--iui-size-m));fill:var(--iui-color-icon);will-change:transform;transform:var(--_iui-header-icon-scale);flex-shrink:0;display:flex}@media (prefers-reduced-motion:no-preference){.iui-header-brand-icon{transition:transform var(--iui-duration-1)ease-out}}.iui-header-brand-label{margin-right:var(--iui-size-s);font-size:var(--_iui-header-brand-label-font-size)}@media (prefers-reduced-motion:no-preference){.iui-header-brand-label{transition:font-size var(--iui-duration-1)ease-out}}@media (max-width:991px){.iui-header-brand-label{display:none}}.iui-header-breadcrumbs-list{vertical-align:baseline;-webkit-user-select:none;user-select:none;height:100%;border:none;align-items:center;margin:0;padding:0;list-style-type:none;display:flex}.iui-page-header-left,.iui-header-breadcrumbs,.iui-header-breadcrumbs-list{box-sizing:content-box;margin-bottom:calc(0px - var(--iui-size-2xs));padding-bottom:var(--iui-size-2xs);overflow:hidden}.iui-header-breadcrumb-button{vertical-align:baseline;vertical-align:middle;height:100%;max-width:25vw;padding:0;padding-left:var(--iui-size-s);padding-right:var(--iui-size-s);box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background-color var(--iui-duration-1)ease-out;color:inherit;justify-content:center;align-items:center;gap:var(--iui-size-s);cursor:pointer;border:none;border-radius:0;margin:0;font-family:inherit;display:inline-flex;overflow:hidden}.iui-header-breadcrumb-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-header-breadcrumb-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}@media (forced-colors:active){.iui-header-breadcrumb-button{border:0 solid;border-width:0 1px}.iui-header-breadcrumb-button:not(:last-child){border-right-width:0}}.iui-header-breadcrumb-button,.iui-header-breadcrumb-button:hover{background-color:#0000}.iui-header-breadcrumb-button:disabled,.iui-header-breadcrumb-button[aria-disabled=true]{cursor:not-allowed}.iui-header-breadcrumb-button-split{padding:0 var(--iui-size-xs);margin-left:calc(0px - var(--iui-size-xs));flex-shrink:0}.iui-header-breadcrumb-button-split:hover{background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6))}[aria-current] .iui-header-breadcrumb-button-split:hover{background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-header-breadcrumb-button-split:disabled,.iui-header-breadcrumb-button-split[aria-disabled=true]{cursor:not-allowed}.iui-header-breadcrumb-button-split:disabled:hover,.iui-header-breadcrumb-button-split[aria-disabled=true]:hover{background-color:#0000}.iui-header-breadcrumb-item{max-width:25vw;transition:background-color var(--iui-duration-1)ease-out;height:100%;color:var(--iui-color-text);box-sizing:border-box;display:flex;position:relative;overflow:hidden}@media (forced-colors:active){.iui-header-breadcrumb-item{color:LinkText;border:none}}.iui-header-breadcrumb-item:hover{background-color:var(--iui-color-background-hover)}.iui-header-breadcrumb-item[aria-current]{background-color:var(--iui-color-background-accent-muted);box-shadow:0 2px 0 0 var(--iui-color-border-accent);color:var(--iui-color-text-accent)}@media (forced-colors:active){.iui-header-breadcrumb-item[aria-current]{color:LinkText;border-bottom:3px solid LinkText}}.iui-header-breadcrumb-item[aria-disabled=true]{cursor:not-allowed;color:var(--iui-color-text-disabled);background-color:#0000}.iui-header-breadcrumb-item[aria-disabled=true][aria-current]{box-shadow:none;background-color:var(--iui-color-background-backdrop)}@media (forced-colors:active){.iui-header-breadcrumb-item[aria-disabled=true][aria-current]{border-bottom:3px solid GrayText}}.iui-header-breadcrumb-button-wrapper{width:100%;display:flex;overflow:hidden}.iui-header-breadcrumb-button-icon{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));background-color:var(--iui-color-background-backdrop);border-radius:var(--iui-border-radius-1);box-sizing:border-box;padding:var(--iui-size-2xs);fill:var(--iui-color-icon-muted);will-change:transform;transform:var(--_iui-header-icon-scale);flex-shrink:0;display:inline-flex}@media (prefers-reduced-motion:no-preference){.iui-header-breadcrumb-button-icon{transition:transform var(--iui-duration-1)ease-out}}@media (forced-colors:active){.iui-header-breadcrumb-button-icon{fill:LinkText}}img.iui-header-breadcrumb-button-icon,div.iui-header-breadcrumb-button-icon{outline:2px solid hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));outline-offset:-2px;transition:filter var(--iui-duration-1)ease-out;padding:0}@media (prefers-reduced-motion:no-preference){img.iui-header-breadcrumb-button-icon,div.iui-header-breadcrumb-button-icon{transition:filter var(--iui-duration-1)ease-out,transform var(--iui-duration-1)ease-out}}img.iui-header-breadcrumb-button-icon{object-fit:cover}div.iui-header-breadcrumb-button-icon{background-position:50%;background-repeat:no-repeat;background-size:cover}.iui-active .iui-header-breadcrumb-button-icon,[aria-current] .iui-header-breadcrumb-button-icon{background-color:var(--iui-color-background);fill:currentColor}:disabled .iui-header-breadcrumb-button-icon,[aria-disabled=true] .iui-header-breadcrumb-button-icon{background-color:var(--iui-color-background-backdrop);fill:var(--iui-color-icon-disabled)}@media (forced-colors:active){:disabled .iui-header-breadcrumb-button-icon,[aria-disabled=true] .iui-header-breadcrumb-button-icon{fill:GrayText}}:disabled img.iui-header-breadcrumb-button-icon,:disabled div.iui-header-breadcrumb-button-icon,[aria-disabled=true] img.iui-header-breadcrumb-button-icon,[aria-disabled=true] div.iui-header-breadcrumb-button-icon{filter:grayscale()opacity(.7)}@media (max-width:768px){.iui-header-breadcrumb-button-icon{display:none}}.iui-header-breadcrumb-button-dropdown-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:currentColor;margin-right:calc(0px - var(--iui-size-2xs));flex-shrink:0;display:flex}.iui-header-breadcrumb-button-split .iui-header-breadcrumb-button-dropdown-icon{margin-right:0}@media (forced-colors:active){:disabled .iui-header-breadcrumb-button-dropdown-icon,[aria-disabled=true] .iui-header-breadcrumb-button-dropdown-icon{fill:GrayText}}.iui-header-breadcrumb-button-text{font-size:var(--iui-font-size-1);text-align:left;transition:color var(--iui-duration-1)ease-out;flex-direction:column;justify-content:center;display:flex;overflow:hidden}.iui-header-breadcrumb-button-text-label,.iui-header-breadcrumb-button-text-sublabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-header-breadcrumb-button-text-sublabel{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted)}@media (prefers-reduced-motion:no-preference){.iui-header-breadcrumb-button-text-sublabel{transition:visibility 0s linear 0s,width var(--iui-duration-1)ease-out,height var(--iui-duration-1)ease-out,opacity var(--iui-duration-1)ease-out}}.iui-active .iui-header-breadcrumb-button-text-sublabel,[aria-current] .iui-header-breadcrumb-button-text-sublabel,[aria-disabled=true] .iui-header-breadcrumb-button-text-sublabel{color:inherit}[data-iui-size=slim] .iui-header-breadcrumb-button-text-sublabel{visibility:hidden;opacity:0;height:0;width:0}

package/css/information-panel.css

@@ -2,192 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-information-panel-wrapper{
-  position:relative;
-  overflow:hidden;
-  border-radius:var(--iui-border-radius-1);
-}
-
-.iui-information-panel{
-  position:absolute;
-  opacity:0;
-  visibility:hidden;
-  display:flex;
-  flex-direction:column;
-  max-width:100%;
-  max-height:100%;
-  background-color:var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-information-panel{
-    transition:visibility var(--iui-duration-0) var(--iui-duration-1) ease-in, transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
-  }
-}
-.iui-information-panel > .iui-resizer{
-  display:none;
-  position:absolute;
-  touch-action:none;
-}
-.iui-information-panel > .iui-resizer > .iui-resizer-bar{
-  background-color:var(--iui-color-background-border);
-}
-.iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
-  background-color:var(--iui-color-foreground-primary);
-}
-.iui-information-panel .iui-information-header,
-.iui-information-panel .iui-information-body{
-  padding-left:var(--iui-size-s);
-  padding-right:var(--iui-size-s);
-}
-.iui-information-panel .iui-information-header{
-  height:calc(var(--iui-size-s) * 5);
-  flex-shrink:0;
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  background-color:var(--iui-color-background-3);
-}
-.iui-information-panel .iui-information-header .iui-information-header-label{
-  display:flex;
-  align-items:center;
-  overflow:hidden;
-}
-.iui-information-panel .iui-information-header .iui-information-header-label > *{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-}
-.iui-information-panel .iui-information-header .iui-information-header-label svg{
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-  fill:var(--iui-color-foreground-4);
-  margin-right:var(--iui-size-xs);
-}
-@media (forced-colors: active){
-  .iui-information-panel .iui-information-header .iui-information-header-label svg{
-    fill:CanvasText;
-  }
-}
-.iui-information-panel .iui-information-header .iui-information-header-actions{
-  flex-shrink:0;
-  margin-left:var(--iui-size-xs);
-}
-.iui-information-panel .iui-information-body{
-  padding-top:var(--iui-size-s);
-  padding-bottom:var(--iui-size-s);
-  height:100%;
-  overflow-x:hidden;
-  overflow-y:auto;
-  overflow-y:overlay;
-}
-.iui-information-panel .iui-information-body > hr{
-  border-color:var(--iui-color-background-border);
-}
-.iui-information-panel.iui-right{
-  top:0;
-  right:0;
-  width:calc(var(--iui-size-3xl) * 4);
-  min-width:calc(var(--iui-size-3xl) * 2);
-  height:100%;
-  transform:translateX(100%);
-  box-shadow:-1px 0 10px var(--iui-shadow-color);
-  -webkit-clip-path:inset(0 0 0 -15px);
-          clip-path:inset(0 0 0 -15px);
-}
-.iui-information-panel.iui-right > .iui-resizer{
-  height:100%;
-  width:var(--iui-size-m);
-  top:0;
-  cursor:ew-resize;
-  justify-content:center;
-}
-.iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
-  height:100%;
-  width:1px;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
-    transition:background-color var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out;
-  }
-}
-.iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
-  width:var(--iui-size-2xs);
-}
-.iui-information-panel.iui-right > .iui-resizer{
-  left:calc(var(--iui-size-m) * -0.5);
-}
-.iui-information-panel.iui-bottom{
-  left:0;
-  bottom:0;
-  height:calc(var(--iui-size-3xl) * 4);
-  min-height:calc(var(--iui-size-3xl) * 2);
-  width:100%;
-  transform:translateY(100%);
-  box-shadow:0 -1px 10px var(--iui-shadow-color);
-  -webkit-clip-path:inset(-15px 0 0 0);
-          clip-path:inset(-15px 0 0 0);
-}
-.iui-information-panel.iui-bottom > .iui-resizer{
-  width:100%;
-  height:var(--iui-size-m);
-  left:0;
-  cursor:ns-resize;
-  align-items:center;
-}
-.iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
-  width:100%;
-  height:1px;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
-    transition:background-color var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
-  }
-}
-.iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
-  height:var(--iui-size-2xs);
-}
-.iui-information-panel.iui-bottom > .iui-resizer{
-  top:calc(var(--iui-size-m) * -0.5);
-}
-.iui-information-panel.iui-visible{
-  opacity:1;
-  visibility:visible;
-  transform:translate(0);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-information-panel.iui-visible{
-    transition:transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
-  }
-}
-.iui-information-panel.iui-visible > .iui-resizer{
-  display:flex;
-}
-
-.iui-information-body-content{
-  display:grid;
-}
-.iui-information-body-content .iui-input-label{
-  font-weight:var(--iui-font-weight-normal);
-  color:var(--iui-color-foreground-4);
-}
-.iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
-  margin-bottom:var(--iui-size-s);
-}
-.iui-information-body-content.iui-inline{
-  row-gap:var(--iui-size-s);
-  grid-template-columns:auto 1fr;
-  align-items:center;
-}
-.iui-information-body-content.iui-inline .iui-input-label{
-  margin:0 var(--iui-size-m) 0 0;
-  justify-self:end;
-  text-align:end;
-}
-.iui-information-body-content.iui-inline .iui-input-label.iui-required{
-  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
-}
+.iui-information-panel-wrapper{border-radius:var(--iui-border-radius-1);position:relative;overflow:hidden}.iui-information-panel{opacity:0;visibility:hidden;max-width:100%;max-height:100%;background-color:var(--iui-color-background);flex-direction:column;display:flex;position:absolute}@media (prefers-reduced-motion:no-preference){.iui-information-panel{transition:visibility var(--iui-duration-0)var(--iui-duration-1)ease-in,transform var(--iui-duration-1)ease-out,opacity var(--iui-duration-1)ease}}.iui-information-panel>.iui-resizer{touch-action:none;display:none;position:absolute}.iui-information-panel>.iui-resizer>.iui-resizer-bar{background-color:var(--iui-color-border)}.iui-information-panel>.iui-resizer:hover>.iui-resizer-bar{background-color:var(--iui-color-border-accent)}.iui-information-panel .iui-information-header,.iui-information-panel .iui-information-body{padding-left:var(--iui-size-s);padding-right:var(--iui-size-s)}.iui-information-panel .iui-information-header{height:calc(var(--iui-size-s)*5);background-color:var(--iui-color-background);border-bottom:1px solid var(--iui-color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.iui-information-panel .iui-information-header .iui-information-header-label{align-items:center;display:flex;overflow:hidden}.iui-information-panel .iui-information-header .iui-information-header-label>*{white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:all;user-select:all;overflow:hidden}.iui-information-panel .iui-information-header .iui-information-header-label svg{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));fill:var(--iui-color-icon-muted);margin-right:var(--iui-size-xs);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-information-panel .iui-information-header .iui-information-header-label svg{fill:CanvasText}}.iui-information-panel .iui-information-header .iui-information-header-actions{margin-left:var(--iui-size-xs);flex-shrink:0}.iui-information-panel .iui-information-body{padding-top:var(--iui-size-s);padding-bottom:var(--iui-size-s);height:100%;overflow-x:hidden;overflow-y:auto;overflow-y:overlay}.iui-information-panel .iui-information-body>hr{border-color:var(--iui-color-border)}.iui-information-panel.iui-right{width:calc(var(--iui-size-3xl)*4);min-width:calc(var(--iui-size-3xl)*2);height:100%;box-shadow:-1px 0 10px var(--iui-shadow-color);clip-path:inset(0 0 0 -15px);top:0;right:0;transform:translate(100%)}.iui-information-panel.iui-right>.iui-resizer{height:100%;width:var(--iui-size-m);cursor:ew-resize;justify-content:center;top:0}.iui-information-panel.iui-right>.iui-resizer>.iui-resizer-bar{height:100%;width:1px}@media (prefers-reduced-motion:no-preference){.iui-information-panel.iui-right>.iui-resizer>.iui-resizer-bar{transition:background-color var(--iui-duration-1)ease-out,width var(--iui-duration-1)ease-out}}.iui-information-panel.iui-right>.iui-resizer:hover>.iui-resizer-bar{width:var(--iui-size-2xs)}.iui-information-panel.iui-right>.iui-resizer{left:calc(var(--iui-size-m)*-.5)}.iui-information-panel.iui-bottom{height:calc(var(--iui-size-3xl)*4);min-height:calc(var(--iui-size-3xl)*2);width:100%;box-shadow:0 -1px 10px var(--iui-shadow-color);clip-path:inset(-15px 0 0);bottom:0;left:0;transform:translateY(100%)}.iui-information-panel.iui-bottom>.iui-resizer{width:100%;height:var(--iui-size-m);cursor:ns-resize;align-items:center;left:0}.iui-information-panel.iui-bottom>.iui-resizer>.iui-resizer-bar{width:100%;height:1px}@media (prefers-reduced-motion:no-preference){.iui-information-panel.iui-bottom>.iui-resizer>.iui-resizer-bar{transition:background-color var(--iui-duration-1)ease-out,height var(--iui-duration-1)ease-out}}.iui-information-panel.iui-bottom>.iui-resizer:hover>.iui-resizer-bar{height:var(--iui-size-2xs)}.iui-information-panel.iui-bottom>.iui-resizer{top:calc(var(--iui-size-m)*-.5)}.iui-information-panel.iui-visible{opacity:1;visibility:visible;transform:translate(0)}@media (prefers-reduced-motion:no-preference){.iui-information-panel.iui-visible{transition:transform var(--iui-duration-1)ease-out,opacity var(--iui-duration-1)ease}}.iui-information-panel.iui-visible>.iui-resizer{display:flex}.iui-information-body-content{display:grid}.iui-information-body-content .iui-input-label{font-weight:var(--iui-font-weight-normal);color:var(--iui-color-text-muted)}.iui-information-body-content:not(.iui-inline)>:nth-child(2n):not(:last-child){margin-bottom:var(--iui-size-s)}.iui-information-body-content.iui-inline{row-gap:var(--iui-size-s);grid-template-columns:auto 1fr;align-items:center}.iui-information-body-content.iui-inline .iui-input-label{margin:0 var(--iui-size-m)0 0;text-align:end;justify-self:end}.iui-information-body-content.iui-inline .iui-input-label.iui-required{margin-right:calc(var(--iui-size-2xs)*1.5 - 1px)}