UNPKG

@finastra/stepper

Version:

Stepper Web Component

8 lines 4.29 kB
/** * @license * Copyright 2021 Google LLC * SPDX-LIcense-Identifier: Apache-2.0 */ import { css } from 'lit'; export const styles = css `:host{display:block;--fds-icon-size: 18px}.circle{color:var(--fds-on-background, rgba(0, 0, 0, 0.75));font:var(--fds-subtitle-3, normal normal var(--fds-subtitle-3-font-weight, 500) var(--fds-subtitle-3-font-size, 0.75rem)/var(--fds-subtitle-3-line-height, 1.125rem) var(--fds-subtitle-3-font-family, Roboto));letter-spacing:0.1px;display:flex;justify-content:center;align-items:center;border-radius:50%;width:var(--fds-spacing-4, 24px);height:var(--fds-spacing-4, 24px);border:1px solid;border-color:var(--fds-outline, rgba(0, 0, 0, 0.12))}.step-item{cursor:pointer}.step-item .line.start-line.current.error{background:var(--fds-error, #d60040)}.disabled.step-item,.readonly.step-item{pointer-events:none}.step-item-label{color:var(--fds-on-background, rgba(0, 0, 0, 0.75))}.step-item-description{color:var(--fds-on-surface-medium, rgba(0, 0, 0, 0.54))}.done .circle{border-color:var(--fds-success, #008744);background:var(--fds-success, #008744);color:var(--fds-on-success, #ffffff)}.done .line{background:var(--fds-success, #008744)}.disabled.done .circle{border-color:var(--fds-success, #008744);background:var(--fds-success, #008744);color:var(--fds-on-success, #ffffff)}.disabled .circle{background:var(--fds-surface-disabled, rgba(0, 0, 0, 0.12));color:var(--fds-on-surface-disabled, rgba(0, 0, 0, 0.29));pointer-events:none}.disabled .step-item-label,.disabled .step-item-description{color:var(--fds-on-surface-disabled, rgba(0, 0, 0, 0.29))}.current .circle{border-color:var(--fds-primary, #694ed6);background:var(--fds-primary, #694ed6);color:var(--fds-on-primary, #ffffff)}.current .line.start-line{background:var(--fds-success, #008744)}.current .line.end-line{background:var(--fds-primary, #694ed6)}.current .step-item-label{font:var(--fds-subtitle-3, normal normal var(--fds-subtitle-3-font-weight, 500) var(--fds-subtitle-3-font-size, 0.75rem)/var(--fds-subtitle-3-line-height, 1.125rem) var(--fds-subtitle-3-font-family, Roboto));letter-spacing:0.1px}.line.start-line.current{background:var(--fds-primary, #694ed6)}:host([secondary]) .current .circle{border-color:var(--fds-secondary, #c137a2);background:var(--fds-secondary, #c137a2);color:var(--fds-on-secondary, #ffffff)}:host([secondary]) .current .line.start-line{background:var(--fds-success, #008744)}:host([secondary]) .current .line.end-line{background:var(--fds-secondary, #c137a2)}:host([secondary]) .line.start-line.current{background:var(--fds-secondary, #c137a2)}.line{background:var(--fds-outline, rgba(0, 0, 0, 0.12))}.line.hidden{visibility:hidden}.step-item.current.error .circle.step-item-icon,.step-item.done.error .circle.step-item-icon{border-color:var(--fds-error, #d60040);background:var(--fds-error, #d60040);color:var(--fds-on-error, #ffffff)}.step-item.current.error .line.end-line,.step-item.done.error .line.end-line{background:var(--fds-error, #d60040)}.step-item.current .line.start-line.error,.step-item.done .line.start-line.error{background:var(--fds-error, #d60040)}.container{display:flex;flex-wrap:nowrap;justify-content:stretch;width:100%}.step-item{display:grid;grid-template-rows:var(--fds-spacing-4, 24px) 1fr;grid-template-columns:1fr var(--fds-spacing-4, 24px) 1fr;flex:1}.step-item-label{font:var(--fds-body-3, normal normal var(--fds-body-3-font-weight, 300) var(--fds-body-3-font-size, 0.75rem)/var(--fds-body-3-line-height, 1.125rem) var(--fds-body-3-font-family, Roboto));letter-spacing:0.25px;padding:var(--fds-spacing-3, 16px);text-align:center;justify-self:center;align-self:start;grid-row:2/3;grid-column:-1/1}.line.start-line{grid-row:1/2;grid-column:1/2;align-self:center;margin-right:var(--fds-stepper-line-space, 8px)}.line.end-line{grid-row:1/2;grid-column:3/4;align-self:center;margin-left:var(--fds-stepper-line-space, 8px)}.circle{grid-row:1/2;grid-column:2/3;align-self:center}.step-item-description{font:var(--fds-body-3, normal normal var(--fds-body-3-font-weight, 300) var(--fds-body-3-font-size, 0.75rem)/var(--fds-body-3-line-height, 1.125rem) var(--fds-body-3-font-family, Roboto));letter-spacing:0.25px;display:none}.line{height:2px;flex:1}.text-wrapper{display:contents}`; //# sourceMappingURL=h-styles.css.js.map