@itwin/itwinui-css/css/workflow-diagram.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-workflow-diagram{vertical-align:baseline;border:none;justify-content:space-around;align-items:center;inline-size:100%;margin:0;padding:0;display:flex}.iui-workflow-diagram-step{--_iui-workflow-diagram-circle-background-color:var(--iui-color-background-positive);--_iui-workflow-diagram-circle-border-color:var(--iui-color-background-positive);--_iui-workflow-diagram-circle-border-radius:var(--iui-border-radius-1);--_iui-workflow-diagram-circle-text-color:var(--iui-color-white);--_iui-workflow-diagram-track-before-color:var(--iui-color-border-positive);--_iui-workflow-diagram-track-after-color:var(--iui-color-border-positive);vertical-align:baseline;font-size:var(--iui-font-size-0);font-weight:var(--iui-font-weight-normal);color:var(--_iui-workflow-diagram-circle-text-color);border:none;flex:1;align-items:center;margin:0;padding:0;display:flex}.iui-workflow-diagram-step:first-of-type,.iui-workflow-diagram-step:last-of-type{--_iui-workflow-diagram-circle-background-color:var(--iui-color-background);--_iui-workflow-diagram-circle-border-color:var(--iui-color-border-positive);--_iui-workflow-diagram-circle-border-radius:var(--iui-size-s);--_iui-workflow-diagram-circle-text-color:var(--iui-color-text-positive)}.iui-workflow-diagram-step:before,.iui-workflow-diagram-step:after{content:"";block-size:var(--iui-size-3xs);flex:1 2 auto}.iui-workflow-diagram-step:before{background-color:var(--_iui-workflow-diagram-track-before-color)}.iui-workflow-diagram-step:after{background-color:var(--_iui-workflow-diagram-track-after-color)}.iui-workflow-diagram-step:first-of-type{--_iui-workflow-diagram-track-before-color:transparent}.iui-workflow-diagram-step:last-of-type{--_iui-workflow-diagram-track-after-color:transparent}.iui-workflow-diagram-content{padding-block:var(--iui-size-3xs);padding-inline:var(--iui-size-m);font-weight:var(--iui-font-weight-normal);text-align:center;background-color:var(--_iui-workflow-diagram-circle-background-color);border:1px solid var(--_iui-workflow-diagram-circle-border-color);border-radius:var(--_iui-workflow-diagram-circle-border-radius)}