banhaten 0.1.0

package/registry/components/expanded/steps.css

@@ -0,0 +1,329 @@
+.ds-steps,
+.ds-horizontal-step-item,
+.ds-vertical-step-item {
+  --steps-bg-inverse: var(--bh-bg-inverse);
+  --steps-bg-slot: var(--bh-bg-accent-purple-subtle);
+  --steps-border-default: var(--bh-border-default);
+  --steps-border-purple: var(--bh-border-accent-purple-strong);
+  --steps-content-default: var(--bh-content-default);
+  --steps-content-inverse: var(--bh-content-inverse);
+  --steps-content-on-brand: var(--bh-content-on-brand);
+  --steps-content-subtle: var(--bh-content-subtle);
+  --steps-interactive-brand: var(--bh-interactive-brand-default);
+  --steps-interactive-secondary: var(--bh-interactive-secondary-default);
+  --steps-radius-control: var(--bh-control-default);
+  --steps-radius-full: var(--bh-radius-full);
+  --steps-radius-sm: var(--bh-radius-sm-4);
+  --steps-space-xs: var(--bh-space-xs-4);
+  --steps-space-md: var(--bh-space-md-8);
+  --steps-space-xl: var(--bh-space-xl-12);
+  --steps-space-5xl: var(--bh-space-5xl-24);
+
+  box-sizing: border-box;
+  color: var(--steps-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.ds-steps *,
+.ds-steps *::before,
+.ds-steps *::after,
+.ds-horizontal-step-item,
+.ds-horizontal-step-item *,
+.ds-horizontal-step-item *::before,
+.ds-horizontal-step-item *::after,
+.ds-vertical-step-item,
+.ds-vertical-step-item *,
+.ds-vertical-step-item *::before,
+.ds-vertical-step-item *::after {
+  box-sizing: border-box;
+}
+
+.ds-steps--horizontal {
+  display: flex;
+  align-items: center;
+  width: min(var(--bh-steps-horizontal-width), 100%);
+  min-width: 0;
+}
+
+.ds-steps--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: min(var(--bh-steps-indicator-panel-width), 100%);
+  min-width: 0;
+}
+
+.ds-steps--horizontal > .ds-horizontal-step-item {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.ds-horizontal-step-item {
+  --steps-item-align: start;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--steps-space-xl);
+  width: var(--bh-steps-vertical-width);
+  min-width: 0;
+  color: var(--steps-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.ds-horizontal-step-item--middle {
+  --steps-item-align: center;
+}
+
+.ds-horizontal-step-item--trailing.ds-horizontal-step-item--ltr,
+.ds-horizontal-step-item--leading.ds-horizontal-step-item--rtl {
+  --steps-item-align: end;
+}
+
+.ds-horizontal-step-item__track {
+  display: flex;
+  align-items: center;
+  gap: var(--steps-space-xs);
+  width: 100%;
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+}
+
+.ds-horizontal-step-item__text {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--steps-space-xs);
+  width: 100%;
+  min-width: 0;
+  text-align: var(--steps-item-align);
+}
+
+.ds-horizontal-step-item__label {
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  color: var(--steps-content-default);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-horizontal-step-item__caption {
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-step-line {
+  display: block;
+  background: var(--steps-border-default);
+}
+
+.ds-step-line--horizontal {
+  flex: 1 0 0;
+  height: var(--bh-space-xxxs-1);
+  min-width: var(--bh-space-xxxs-1);
+}
+
+.ds-step-line--vertical {
+  flex: 1 0 0;
+  width: var(--bh-space-xxxs-1);
+  min-height: var(--bh-space-xxxs-1);
+}
+
+.ds-step-marker {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+  border-radius: var(--steps-radius-full);
+  color: var(--steps-content-inverse);
+  background: var(--steps-bg-inverse);
+}
+
+.ds-step-marker--number span {
+  display: block;
+  width: 100%;
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  line-height: var(--bh-text-body-md-line-height);
+  text-align: center;
+}
+
+.ds-step-marker--icon svg {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  fill: currentColor;
+}
+
+.ds-vertical-step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--steps-space-5xl);
+  width: min(var(--bh-steps-indicator-panel-width), 100%);
+  min-width: 0;
+  padding-bottom: var(--bh-space-xs-4);
+  color: var(--steps-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.ds-steps--vertical > .ds-vertical-step-item {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.ds-vertical-step-item__rail {
+  display: flex;
+  flex: 0 0 auto;
+  align-self: stretch;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--steps-space-xs);
+  min-height: 100%;
+}
+
+.ds-vertical-step-item__content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--steps-space-xl);
+  min-width: 0;
+}
+
+.ds-vertical-step-item--rtl .ds-vertical-step-item__content {
+  align-items: flex-end;
+}
+
+.ds-vertical-step-item__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--steps-space-xs);
+  width: 100%;
+  min-width: 0;
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+  text-align: start;
+}
+
+.ds-vertical-step-item--rtl .ds-vertical-step-item__copy {
+  text-align: right;
+}
+
+.ds-vertical-step-item__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-vertical-step-item--rtl .ds-vertical-step-item__header {
+  direction: ltr;
+}
+
+.ds-vertical-step-item__label {
+  flex: 1 0 0;
+  min-width: 0;
+  color: var(--steps-content-default);
+  font-size: var(--bh-text-body-lg-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-lg-medium-line-height);
+}
+
+.ds-vertical-step-item__support {
+  flex: 0 0 auto;
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+  white-space: nowrap;
+}
+
+.ds-vertical-step-item--rtl .ds-vertical-step-item__label,
+.ds-vertical-step-item--rtl .ds-vertical-step-item__support {
+  direction: rtl;
+}
+
+.ds-vertical-step-item__caption {
+  width: 100%;
+  color: var(--steps-content-subtle);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-step-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) dashed var(--steps-border-purple);
+  border-radius: var(--steps-radius-sm);
+  color: var(--steps-content-subtle);
+  background: var(--steps-bg-slot);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-vertical-step-item__actions {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--steps-space-md);
+}
+
+.ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
+  align-self: flex-end;
+}
+
+.ds-step-button {
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  margin: 0;
+  padding: var(--steps-space-md) var(--steps-space-xl);
+  border-radius: var(--steps-radius-control);
+  font: inherit;
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: var(--shadow-button-raised);
+}
+
+.ds-step-button--primary {
+  border: 0;
+  color: var(--steps-content-on-brand);
+  background: var(--steps-interactive-brand);
+}
+
+.ds-step-button--secondary {
+  border: var(--bh-space-xxxs-1) solid var(--steps-border-default);
+  color: var(--steps-content-default);
+  background: var(--steps-interactive-secondary);
+}
+
+.ds-step-button:focus-visible {
+  outline: var(--bh-space-xxs-2) solid var(--steps-interactive-brand);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-vertical-step-item__bottom-padding {
+  width: 100%;
+  height: var(--bh-space-5xl-24);
+  flex: 0 0 auto;
+}