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

package/css/tile.css

@@ -2,491 +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-tile{
-  --_iui-tile-title-text-color:var(--iui-color-foreground-2);
-  --_iui-tile-body-text-color:var(--iui-color-foreground-4);
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:var(--iui-border-radius-1);
-  --iui-surface-elevation:var(--iui-shadow-1);
-  background-color:var(--iui-surface-background-color);
-  border-radius:var(--iui-surface-border-radius);
-  box-shadow:var(--iui-surface-elevation);
-  color:var(--iui-color-foreground-2);
-  display:inline-flex;
-  flex-direction:column;
-  width:calc(var(--iui-size-3xl) * 3);
-  -webkit-backface-visibility:hidden;
-          backface-visibility:hidden;
-}
-@media (forced-colors: active){
-  .iui-tile{
-    border:1px solid transparent;
-  }
-}
-.iui-tile:where(:not(.iui-folder)) > :where(:first-child){
-  border-top-left-radius:inherit;
-  border-top-right-radius:inherit;
-}
-.iui-tile:where(:not(.iui-folder)) > :where(:last-child){
-  border-bottom-left-radius:inherit;
-  border-bottom-right-radius:inherit;
-}
-.iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
-  -webkit-clip-path:revert;
-          clip-path:revert;
-  overflow:visible;
-  position:static;
-  white-space:normal;
-  height:auto;
-  width:auto;
-  padding:0;
-  margin:0;
-  position:absolute;
-}
-.iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
-  width:calc(100% - var(--iui-size-xl));
-}
-.iui-tile.iui-new{
-  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
-}
-.iui-tile.iui-new .iui-tile-name,
-.iui-tile.iui-new .iui-tile-description{
-  font-weight:var(--iui-font-weight-semibold);
-}
-.iui-tile.iui-selected{
-  --_iui-tile-status-icon-fill:var(--iui-color-foreground-primary);
-  outline:solid 2px var(--iui-color-foreground-primary);
-  background-color:var(--iui-color-background-subtle-primary);
-}
-.iui-tile.iui-selected:focus-visible{
-  outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
-  outline-offset:0;
-}
-@supports not selector(*:focus-visible){
-  .iui-tile.iui-selected:focus{
-    outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
-    outline-offset:0;
-  }
-}
-.iui-tile.iui-actionable{
-  cursor:pointer;
-  transition:box-shadow var(--iui-duration-1) ease-in-out;
-}
-.iui-tile.iui-actionable:focus-visible{
-  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
-  outline-offset:var(--iui-size-3xs);
-}
-@supports not selector(*:focus-visible){
-  .iui-tile.iui-actionable:focus{
-    outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
-    outline-offset:var(--iui-size-3xs);
-  }
-}
-.iui-tile.iui-actionable:hover{
-  box-shadow:var(--iui-shadow-3);
-}
-.iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
-  transform:translateZ(0) scale(1.1);
-}
-.iui-tile.iui-folder{
-  display:inline-flex;
-  flex-direction:row;
-  flex-wrap:nowrap;
-}
-.iui-tile.iui-folder > :where(:first-child){
-  border-top-left-radius:inherit;
-  border-bottom-left-radius:inherit;
-}
-.iui-tile.iui-folder > :where(:last-child){
-  border-top-right-radius:inherit;
-  border-bottom-right-radius:inherit;
-}
-.iui-tile.iui-folder .iui-tile-thumbnail{
-  height:calc(var(--iui-size-s) * 10);
-  flex:1;
-  border-bottom:none;
-  border-right:1px solid var(--iui-color-background-border);
-}
-.iui-tile.iui-folder .iui-tile-content{
-  flex:2;
-}
-.iui-tile.iui-folder .iui-tile-description{
-  height:100%;
-  max-height:calc(var(--iui-size-s) * 4);
-  margin-bottom:0;
-  -webkit-line-clamp:2;
-}
-.iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
-  --_iui-tile-title-text-color:var(--iui-color-foreground-4);
-}
-.iui-tile.iui-loading .iui-thumbnail-icon,
-.iui-tile.iui-loading .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
-.iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
-  filter:grayscale(100%);
-}
-.iui-tile.iui-loading:hover .iui-tile-thumbnail-picture, .iui-tile.iui-loading:focus-within .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
-  transform:none;
-}
-.iui-tile.iui-loading{
-  cursor:progress;
-  font-style:italic;
-}
-.iui-tile[aria-disabled=true]{
-  cursor:not-allowed;
-}
-.iui-tile.iui-positive{
-  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
-  --_iui-tile-title-text-color:var(--iui-color-foreground-positive);
-}
-.iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-tile.iui-positive::selection,
-.iui-tile.iui-positive *::selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-tile.iui-positive .iui-tile-thumbnail{
-  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-positive);
-}
-.iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
-  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-positive);
-}
-
-.iui-tile.iui-warning{
-  --_iui-tile-status-icon-fill:var(--iui-color-foreground-warning);
-  --_iui-tile-title-text-color:var(--iui-color-foreground-warning);
-}
-.iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-tile.iui-warning::selection,
-.iui-tile.iui-warning *::selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-tile.iui-warning .iui-tile-thumbnail{
-  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-warning);
-}
-.iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
-  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-warning);
-}
-
-.iui-tile.iui-negative{
-  --_iui-tile-status-icon-fill:var(--iui-color-foreground-negative);
-  --_iui-tile-title-text-color:var(--iui-color-foreground-negative);
-}
-.iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-tile.iui-negative::selection,
-.iui-tile.iui-negative *::selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-tile.iui-negative .iui-tile-thumbnail{
-  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-negative);
-}
-.iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
-  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
-}
-
-.iui-tile-thumbnail-type-indicator{
-  --_iui-button-text-color:var(--iui-color-foreground-2);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-  --_iui-button-gap:var(--iui-size-xs);
-  --_iui-button-padding-block:var(--iui-size-2xs);
-  --_iui-button-padding-inline:var(--iui-size-m);
-  --_iui-button-min-height:var(--iui-component-height);
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-gap:var(--iui-size-2xs);
-  --_iui-button-padding-block:0;
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-min-height:var(--iui-component-height-small);
-  --_iui-button-padding-inline:var(--iui-size-2xs);
-  position:absolute;
-  border-radius:50%;
-  top:calc(var(--iui-size-s) * 0.5);
-  left:var(--iui-size-xs);
-}
-.iui-tile-thumbnail-type-indicator:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
-  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-tile-thumbnail-type-indicator:where(:focus){
-  outline-offset:-1px;
-  outline-width:1px;
-}
-.iui-tile-thumbnail-type-indicator:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-}
-.iui-tile-thumbnail-type-indicator[data-iui-active=true]{
-  --_iui-button-text-color:var(--iui-color-foreground-primary);
-  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
-  background-color:Hsl(0 0% 0%/var(--iui-opacity-4));
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-}
-@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
-  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
-    background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
-    -webkit-backdrop-filter:blur(5px);
-            backdrop-filter:blur(5px);
-  }
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon{
-  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:active{
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-}
-
-.iui-tile-thumbnail-quick-action{
-  --_iui-button-text-color:var(--iui-color-foreground-2);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-  --_iui-button-gap:var(--iui-size-xs);
-  --_iui-button-padding-block:var(--iui-size-2xs);
-  --_iui-button-padding-inline:var(--iui-size-m);
-  --_iui-button-min-height:var(--iui-component-height);
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-gap:var(--iui-size-2xs);
-  --_iui-button-padding-block:0;
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-min-height:var(--iui-component-height-small);
-  --_iui-button-padding-inline:var(--iui-size-2xs);
-  position:absolute;
-  border-radius:50%;
-  top:calc(var(--iui-size-s) * 0.5);
-  right:var(--iui-size-xs);
-}
-.iui-tile-thumbnail-quick-action:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
-  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-tile-thumbnail-quick-action:where(:focus){
-  outline-offset:-1px;
-  outline-width:1px;
-}
-.iui-tile-thumbnail-quick-action:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-}
-.iui-tile-thumbnail-quick-action[data-iui-active=true]{
-  --_iui-button-text-color:var(--iui-color-foreground-primary);
-  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-  background-color:Hsl(0 0% 0%/var(--iui-opacity-4));
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-}
-@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
-  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-    background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
-    -webkit-backdrop-filter:blur(5px);
-            backdrop-filter:blur(5px);
-  }
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
-  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:active{
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-}
-
-.iui-tile-thumbnail-badge-container{
-  position:absolute;
-  bottom:calc(var(--iui-size-s) * 0.5);
-  width:calc(100% - 2 * var(--iui-size-s));
-  height:auto;
-  right:var(--iui-size-s);
-  display:flex;
-  justify-content:flex-end;
-  overflow:hidden;
-  gap:var(--iui-size-2xs);
-}
-
-.iui-tile-buttons{
-  display:flex;
-  flex-shrink:0;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  white-space:nowrap;
-  overflow:hidden;
-}
-.iui-tile-buttons > .iui-button{
-  font-size:var(--iui-font-size-1);
-  flex:1;
-  height:auto;
-  padding:var(--iui-size-s) var(--iui-size-s);
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  text-align:center;
-  margin:0;
-  border:initial;
-  border-radius:0;
-}
-.iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
-  border-top:1px solid var(--iui-color-background-border);
-  border-color:var(--iui-color-background-border);
-}
-.iui-tile-buttons > button:not(:last-child){
-  border-right:1px solid var(--iui-color-background-border);
-}
-
-.iui-tile-thumbnail{
-  box-sizing:content-box;
-  width:100%;
-  height:calc(var(--iui-size-s) * 13);
-  flex-shrink:0;
-  overflow:hidden;
-  position:relative;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background-color:var(--iui-color-background-1-hover);
-  border-bottom:1px solid var(--iui-color-background-border);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-2xl);
-  height:var(--iui-size-2xl);
-  fill:var(--iui-color-foreground-4);
-}
-@media (forced-colors: active){
-  .iui-tile-thumbnail .iui-thumbnail-icon{
-    fill:CanvasText;
-  }
-}
-
-.iui-tile-thumbnail-picture{
-  width:100%;
-  height:100%;
-  position:absolute;
-  top:0;
-  left:0;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tile-thumbnail-picture{
-    transition:transform var(--iui-duration-2) ease;
-  }
-}
-div.iui-tile-thumbnail-picture{
-  background-position:center;
-  background-size:cover;
-}
-
-.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-  cursor:pointer;
-  transition:fill var(--iui-duration-1) ease;
-  fill:rgba(255, 255, 255, var(--iui-opacity-3));
-  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
-}
-.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
-  fill:rgba(255, 255, 255, var(--iui-opacity-2));
-}
-
-.iui-tile-content{
-  padding:var(--iui-size-s) var(--iui-size-s);
-  position:relative;
-  display:flex;
-  flex-direction:column;
-  flex-grow:2;
-  min-width:0;
-}
-.iui-tile-content .iui-tile-name{
-  display:flex;
-  flex-shrink:0;
-  align-items:center;
-  font-size:var(--iui-font-size-2);
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  margin-bottom:calc(var(--iui-size-s) * 0.5);
-  color:var(--_iui-tile-title-text-color);
-}
-.iui-tile-content .iui-tile-status-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  margin-right:var(--iui-size-xs);
-  fill:var(--_iui-tile-status-icon-fill);
-}
-.iui-tile-content .iui-tile-name-label{
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-}
-.iui-tile-content .iui-tile-description{
-  margin-bottom:var(--iui-size-s);
-  font-size:var(--iui-font-size-1);
-  height:100%;
-  max-height:calc(var(--iui-size-s) * 6);
-  overflow:hidden;
-  text-overflow:ellipsis;
-  display:-webkit-box;
-  -webkit-line-clamp:3;
-  -webkit-box-orient:vertical;
-  color:var(--_iui-tile-body-text-color);
-}
-.iui-tile-content .iui-tile-metadata{
-  font-size:var(--iui-font-size-0);
-  flex-shrink:0;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  height:var(--iui-size-l);
-  width:100%;
-  display:flex;
-  align-items:center;
-  margin-top:auto;
-  color:var(--_iui-tile-body-text-color);
-}
-.iui-tile-content .iui-tile-metadata > svg,
-.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-4);
-  margin-right:var(--iui-size-xs);
-}
-@media (forced-colors: active){
-  .iui-tile-content .iui-tile-metadata > svg,
-.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
-    fill:CanvasText;
-  }
-}
-.iui-tile-content .iui-tile-metadata > *{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-
-.iui-tile-more-options{
-  position:absolute;
-  bottom:calc(var(--iui-size-s) * 0.5);
-  right:var(--iui-size-xs);
-}
-.iui-tile-more-options:not(.iui-visible){
-  -webkit-clip-path:inset(50%);
-          clip-path:inset(50%);
-  overflow:hidden;
-  position:absolute;
-  white-space:nowrap;
-  height:1px;
-  width:1px;
-  padding:0;
-  margin:-1px;
-  border-width:0;
-}
+.iui-tile{--_iui-tile-title-text-color:var(--iui-color-text);--_iui-tile-body-text-color:var(--iui-color-text-muted);vertical-align:baseline;--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:none;border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text);width:calc(var(--iui-size-3xl)*3);-webkit-backface-visibility:hidden;backface-visibility:hidden;flex-direction:column;margin:0;padding:0;display:inline-flex}.iui-tile:where(:not(.iui-folder))>:where(:first-child){border-top-left-radius:inherit;border-top-right-radius:inherit}.iui-tile:where(:not(.iui-folder))>:where(:last-child){border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.iui-tile:hover .iui-tile-more-options,.iui-tile:focus-within .iui-tile-more-options{clip-path:revert;white-space:normal;height:auto;width:auto;margin:0;padding:0;position:absolute;overflow:visible}.iui-tile:hover .iui-tile-metadata:not(:last-child),.iui-tile:focus-within .iui-tile-metadata:not(:last-child){width:calc(100% - var(--iui-size-xl))}.iui-tile.iui-new{--_iui-tile-status-icon-fill:var(--iui-color-icon-positive)}.iui-tile.iui-new .iui-tile-name,.iui-tile.iui-new .iui-tile-description{font-weight:var(--iui-font-weight-semibold)}.iui-tile.iui-selected{--_iui-tile-status-icon-fill:var(--iui-color-icon-accent);outline:solid 2px var(--iui-color-border-accent);background-color:var(--iui-color-background-accent-muted)}.iui-tile.iui-selected:focus-visible{outline:var(--iui-size-2xs)solid var(--iui-color-border-accent);outline-offset:0}@supports not selector(*:focus-visible){.iui-tile.iui-selected:focus{outline:var(--iui-size-2xs)solid var(--iui-color-border-accent);outline-offset:0}}.iui-tile.iui-actionable{cursor:pointer;transition:box-shadow var(--iui-duration-1)ease-in-out}.iui-tile.iui-actionable:focus-visible{outline:var(--iui-size-3xs)solid var(--iui-color-border-accent);outline-offset:var(--iui-size-3xs)}@supports not selector(*:focus-visible){.iui-tile.iui-actionable:focus{outline:var(--iui-size-3xs)solid var(--iui-color-border-accent);outline-offset:var(--iui-size-3xs)}}.iui-tile.iui-actionable:hover{box-shadow:var(--iui-shadow-3)}.iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture,.iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture,.iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{transform:scale(1.1)}.iui-tile.iui-folder{flex-flow:row;display:inline-flex}.iui-tile.iui-folder>:where(:first-child){border-top-left-radius:inherit;border-bottom-left-radius:inherit}.iui-tile.iui-folder>:where(:last-child){border-top-right-radius:inherit;border-bottom-right-radius:inherit}.iui-tile.iui-folder .iui-tile-thumbnail{height:calc(var(--iui-size-s)*10);border-bottom:none;border-right:1px solid var(--iui-color-border);flex:1}.iui-tile.iui-folder .iui-tile-content{flex:2}.iui-tile.iui-folder .iui-tile-description{height:100%;max-height:calc(var(--iui-size-s)*4);-webkit-line-clamp:2;margin-bottom:0}.iui-tile.iui-loading,.iui-tile[aria-disabled=true]{--_iui-tile-title-text-color:var(--iui-color-text-disabled);--_iui-tile-body-text-color:var(--iui-color-text-disabled)}.iui-tile.iui-loading .iui-thumbnail-icon,.iui-tile.iui-loading .iui-tile-thumbnail-picture,.iui-tile[aria-disabled=true] .iui-thumbnail-icon,.iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{filter:grayscale()}.iui-tile.iui-loading .iui-tag-container,.iui-tile.iui-loading .iui-tag-basic,.iui-tile[aria-disabled=true] .iui-tag-container,.iui-tile[aria-disabled=true] .iui-tag-basic{color:inherit}.iui-tile.iui-loading:hover .iui-tile-thumbnail-picture,.iui-tile.iui-loading:focus-within .iui-tile-thumbnail-picture,.iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture,.iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{transform:none}.iui-tile.iui-loading{cursor:progress;font-style:italic}.iui-tile[aria-disabled=true]{cursor:not-allowed}.iui-tile.iui-positive{--_iui-tile-status-icon-fill:var(--iui-color-icon-positive);--_iui-tile-title-text-color:var(--iui-color-text-positive)}.iui-tile.iui-positive::selection,.iui-tile.iui-positive ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-tile.iui-positive .iui-tile-thumbnail{box-shadow:0 var(--iui-size-2xs)0 var(--iui-color-border-positive)}.iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{box-shadow:var(--iui-size-2xs)0 0 var(--iui-color-border-positive)}.iui-tile.iui-warning{--_iui-tile-status-icon-fill:var(--iui-color-icon-warning);--_iui-tile-title-text-color:var(--iui-color-text-warning)}.iui-tile.iui-warning::selection,.iui-tile.iui-warning ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-tile.iui-warning .iui-tile-thumbnail{box-shadow:0 var(--iui-size-2xs)0 var(--iui-color-border-warning)}.iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{box-shadow:var(--iui-size-2xs)0 0 var(--iui-color-border-warning)}.iui-tile.iui-negative{--_iui-tile-status-icon-fill:var(--iui-color-icon-negative);--_iui-tile-title-text-color:var(--iui-color-text-negative)}.iui-tile.iui-negative::selection,.iui-tile.iui-negative ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-tile.iui-negative .iui-tile-thumbnail{box-shadow:0 var(--iui-size-2xs)0 var(--iui-color-border-negative)}.iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{box-shadow:var(--iui-size-2xs)0 0 var(--iui-color-border-negative)}.iui-tile-thumbnail-type-indicator{--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);top:calc(var(--iui-size-s)*.5);left:var(--iui-size-xs);border-radius:50%;position:absolute}.iui-tile-thumbnail-type-indicator:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-tile-thumbnail-type-indicator:where(:focus){outline-offset:-1px;outline-width:1px}.iui-tile-thumbnail-type-indicator:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-tile-thumbnail-type-indicator[data-iui-active=true]{--_iui-button-text-color:var(--iui-color-text-accent);--_iui-button-background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator{background-color:hsl(0 0% 0%/var(--iui-opacity-4));--_iui-button-icon-fill:var(--iui-color-white)}@supports (backdrop-filter: blur(5px)){.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator{background-color:hsl(0 0% 0%/var(--iui-opacity-5));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator>.iui-button-icon{filter:drop-shadow(0 2px 1px rgba(0,0,0,var(--iui-opacity-5)))}.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator:hover,.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled,.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled:hover,.iui-tile-thumbnail-picture~.iui-tile-thumbnail-type-indicator[data-iui-active=true]:active{background-color:rgba(0,0,0,var(--iui-opacity-4))}.iui-tile-thumbnail-quick-action{--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);top:calc(var(--iui-size-s)*.5);right:var(--iui-size-xs);border-radius:50%;position:absolute}.iui-tile-thumbnail-quick-action:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-tile-thumbnail-quick-action:where(:focus){outline-offset:-1px;outline-width:1px}.iui-tile-thumbnail-quick-action:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-tile-thumbnail-quick-action[data-iui-active=true]{--_iui-button-text-color:var(--iui-color-text-accent);--_iui-button-background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action{background-color:hsl(0 0% 0%/var(--iui-opacity-4));--_iui-button-icon-fill:var(--iui-color-white)}@supports (backdrop-filter: blur(5px)){.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action{background-color:hsl(0 0% 0%/var(--iui-opacity-5));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action>.iui-button-icon{filter:drop-shadow(0 2px 1px rgba(0,0,0,var(--iui-opacity-5)))}.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action:hover,.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled,.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled:hover,.iui-tile-thumbnail-picture~.iui-tile-thumbnail-quick-action[data-iui-active=true]:active{background-color:rgba(0,0,0,var(--iui-opacity-4))}.iui-tile-thumbnail-badge-container{bottom:calc(var(--iui-size-s)*.5);width:calc(100% - 2*var(--iui-size-s));height:auto;right:var(--iui-size-s);justify-content:flex-end;gap:var(--iui-size-2xs);display:flex;position:absolute;overflow:hidden}.iui-tile-buttons{-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0;display:flex;overflow:hidden}.iui-tile-buttons>.iui-button{font-size:var(--iui-font-size-1);height:auto;padding:var(--iui-size-s)var(--iui-size-s);white-space:nowrap;text-overflow:ellipsis;text-align:center;border:initial;border-radius:0;flex:1;margin:0;overflow:hidden}.iui-tile-buttons>.iui-button,.iui-tile-buttons>.iui-button:hover{border-top:1px solid var(--iui-color-border);border-color:var(--iui-color-border)}.iui-tile-buttons>button:not(:last-child){border-right:1px solid var(--iui-color-border)}.iui-tile-thumbnail{box-sizing:content-box;width:100%;height:calc(var(--iui-size-s)*13);background-color:var(--iui-color-background-zebra);border-bottom:1px solid var(--iui-color-border);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.iui-tile-thumbnail .iui-thumbnail-icon{width:var(--iui-size-2xl);height:var(--iui-size-2xl);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-tile-thumbnail .iui-thumbnail-icon{fill:CanvasText}}.iui-tile-thumbnail-picture{width:100%;height:100%;position:absolute;top:0;left:0}@media (prefers-reduced-motion:no-preference){.iui-tile-thumbnail-picture{transition:transform var(--iui-duration-2)ease}}div.iui-tile-thumbnail-picture{background-position:50%;background-size:cover}.iui-tile-thumbnail-picture~.iui-thumbnail-icon{cursor:pointer;transition:fill var(--iui-duration-1)ease;fill:rgba(255,255,255,var(--iui-opacity-3));filter:drop-shadow(0 2px 1px rgba(0,1,5,var(--iui-opacity-5)))}.iui-tile-thumbnail-picture~.iui-thumbnail-icon:hover{fill:rgba(255,255,255,var(--iui-opacity-2))}.iui-tile-content{padding:var(--iui-size-s)var(--iui-size-s);min-width:0;flex-direction:column;flex-grow:2;display:flex;position:relative}.iui-tile-content .iui-tile-name{font-size:var(--iui-font-size-2);-webkit-user-select:all;user-select:all;margin-bottom:calc(var(--iui-size-s)*.5);color:var(--_iui-tile-title-text-color);flex-shrink:0;align-items:center;display:flex}.iui-tile-content .iui-tile-status-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-right:var(--iui-size-xs);fill:var(--_iui-tile-status-icon-fill);flex-shrink:0;display:flex}.iui-tile-content .iui-tile-name-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-tile-content .iui-tile-description{margin-bottom:var(--iui-size-s);font-size:var(--iui-font-size-1);height:100%;max-height:calc(var(--iui-size-s)*6);text-overflow:ellipsis;-webkit-line-clamp:3;color:var(--_iui-tile-body-text-color);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.iui-tile-content .iui-tile-metadata{font-size:var(--iui-font-size-0);text-overflow:ellipsis;height:var(--iui-size-l);width:100%;color:var(--_iui-tile-body-text-color);flex-shrink:0;align-items:center;margin-top:auto;display:flex;overflow:hidden}.iui-tile-content .iui-tile-metadata>svg,.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);margin-right:var(--iui-size-xs);flex-shrink:0;display:flex}.iui-tile-content .iui-tile-metadata>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-tile-more-options{bottom:calc(var(--iui-size-s)*.5);right:var(--iui-size-xs);position:absolute}.iui-tile-more-options:not(.iui-visible){clip-path:inset(50%);white-space:nowrap;height:1px;width:1px;border-width:0;margin:-1px;padding:0;position:absolute;overflow:hidden}

package/css/time-picker.css

@@ -2,131 +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-time-picker{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  text-align:center;
-  height:calc(var(--iui-size-s) * 26);
-  display:inline-flex;
-  background-color:var(--iui-color-background-1);
-  border-top-right-radius:var(--iui-border-radius-1);
-  border-bottom-right-radius:var(--iui-border-radius-1);
-}
-.iui-time-picker:not(:first-child){
-  border-left:1px solid var(--iui-color-background-border);
-}
-.iui-time-picker:first-child{
-  box-shadow:var(--iui-shadow-1);
-  border-top-left-radius:var(--iui-border-radius-1);
-  border-bottom-left-radius:var(--iui-border-radius-1);
-}
-
-.iui-time{
-  padding:var(--iui-size-s) var(--iui-size-xs);
-  overflow-y:auto;
-  overflow-y:overlay;
-  scrollbar-width:none;
-}
-.iui-time:not(:first-child){
-  border-left:1px solid var(--iui-color-background-border);
-}
-.iui-time > ol{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  list-style:none;
-}
-.iui-time > ol > li{
-  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
-  border-radius:var(--iui-border-radius-1);
-}
-.iui-time > ol > li:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-time > ol > li:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-.iui-time > ol > li:hover{
-  cursor:pointer;
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-time > ol > li.iui-selected{
-  font-weight:var(--iui-font-weight-semibold);
-  cursor:default;
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
-}
-.iui-time > ol > li.iui-selected:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
-}
-@supports not selector(*:focus-visible){
-  .iui-time > ol > li.iui-selected:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
-    outline-offset:-3px;
-  }
-}
-
-.iui-period{
-  padding:var(--iui-size-s) var(--iui-size-xs);
-  overflow-y:auto;
-  overflow-y:overlay;
-  scrollbar-width:none;
-  display:flex;
-  align-items:center;
-}
-.iui-period:not(:first-child){
-  border-left:1px solid var(--iui-color-background-border);
-}
-.iui-period > ol{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  list-style:none;
-}
-.iui-period > ol > li{
-  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
-  border-radius:var(--iui-border-radius-1);
-}
-.iui-period > ol > li:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-period > ol > li:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-.iui-period > ol > li:hover{
-  cursor:pointer;
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-period > ol > li.iui-selected{
-  font-weight:var(--iui-font-weight-semibold);
-  cursor:default;
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
-}
-.iui-period > ol > li.iui-selected:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
-}
-@supports not selector(*:focus-visible){
-  .iui-period > ol > li.iui-selected:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
-    outline-offset:-3px;
-  }
-}
+.iui-time-picker{vertical-align:baseline;-webkit-user-select:none;user-select:none;text-align:center;height:calc(var(--iui-size-s)*26);background-color:var(--iui-color-background);border-top-right-radius:var(--iui-border-radius-1);border-bottom-right-radius:var(--iui-border-radius-1);border:none;margin:0;padding:0;display:inline-flex}.iui-time-picker:not(:first-child){border-left:1px solid var(--iui-color-border)}.iui-time-picker:first-child{box-shadow:var(--iui-shadow-1);border-top-left-radius:var(--iui-border-radius-1);border-bottom-left-radius:var(--iui-border-radius-1)}.iui-time{padding:var(--iui-size-s)var(--iui-size-xs);overflow-y:auto;overflow-y:overlay;scrollbar-width:none}.iui-time:not(:first-child){border-left:1px solid var(--iui-color-border)}.iui-time>ol{vertical-align:baseline;border:none;margin:0;padding:0;list-style:none}.iui-time>ol>li{padding:calc(var(--iui-size-s)*.5)var(--iui-size-m);border-radius:var(--iui-border-radius-1)}.iui-time>ol>li:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-time>ol>li:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-time>ol>li:hover{cursor:pointer;background-color:var(--iui-color-background-hover)}.iui-time>ol>li.iui-selected{font-weight:var(--iui-font-weight-semibold);cursor:default;background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}.iui-time>ol>li.iui-selected:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){.iui-time>ol>li.iui-selected:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}.iui-period{padding:var(--iui-size-s)var(--iui-size-xs);overflow-y:auto;overflow-y:overlay;scrollbar-width:none;align-items:center;display:flex}.iui-period:not(:first-child){border-left:1px solid var(--iui-color-border)}.iui-period>ol{vertical-align:baseline;border:none;margin:0;padding:0;list-style:none}.iui-period>ol>li{padding:calc(var(--iui-size-s)*.5)var(--iui-size-m);border-radius:var(--iui-border-radius-1)}.iui-period>ol>li:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-period>ol>li:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-period>ol>li:hover{cursor:pointer;background-color:var(--iui-color-background-hover)}.iui-period>ol>li.iui-selected{font-weight:var(--iui-font-weight-semibold);cursor:default;background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}.iui-period>ol>li.iui-selected:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){.iui-period>ol>li.iui-selected:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}