-
.oj-train-stretch
-
Optional class that may be added to the train div which will stretch the train to cover the full width of the container specified.
Example
<oj-train selected-step="{{currentStepValue}}" steps="{{stepArray}}" class="oj-train-stretch"> </oj-train> -
CSS Variables
-
Default
-
Visited
-
Hovered
-
Active
-
Selected
-
Disabled
See JET CSS Variables for additional details.
| Name | Type | Description |
|---|---|---|
--oj-train-step-width |
<length> | Train step width |
--oj-train-step-border-radius |
<length> | <percentage> | Train step border radius |
--oj-train-padding |
<length> | Train padding |
--oj-train-label-font-size |
<length> | Train label font size |
--oj-train-label-font-weight |
<font_weight> | Train label font weight |
--oj-train-label-padding-top |
<length> | Train label padding top |
--oj-train-button-diameter |
<length> | Train button diameter |
--oj-train-button-font-size |
<length> | Train button font size |
--oj-train-connector-height |
<length> | Train connector height |
--oj-train-connector-padding |
<length> | Train connector padding |
| Name | Type | Description |
|---|---|---|
--oj-train-button-bg-color |
<color> | Default train button background color |
--oj-train-button-border-color |
<color> | Default train button border color |
--oj-train-button-text-color |
<color> | Default train button text color |
--oj-train-label-color |
<color> | Default label color |
--oj-train-connector-color |
<color> | Default train connector color |
| Name | Type | Description |
|---|---|---|
--oj-train-button-bg-color-visited |
<color> | Train button background color when visited |
--oj-train-button-border-color-visited |
<color> | Train button border color when visited |
--oj-train-button-text-color-visited |
<color> | Train button text color when visited |
--oj-train-label-color-visited |
<color> | Train label color when visited |
| Name | Type | Description |
|---|---|---|
--oj-train-button-bg-color-hover |
<color> | Train button background color when hovered |
--oj-train-button-border-color-hover |
<color> | Train button border color when hovered |
--oj-train-button-text-color-hover |
<color> | Train button text color when hovered |
--oj-train-step-bg-color-hover |
<color> | Train step background color when hovered |
| Name | Type | Description |
|---|---|---|
--oj-train-button-bg-color-active |
<color> | Train button background color when active |
--oj-train-button-border-color-active |
<color> | Train button border color when active |
--oj-train-button-text-color-active |
<color> | Train button text color when active |
--oj-train-label-font-weight-active |
<font_weight> | Train label font weight when active |
--oj-train-step-bg-color-active |
<color> | Train step background color when active |
| Name | Type | Description |
|---|---|---|
--oj-train-button-bg-color-selected |
<color> | Train button background color when selected |
--oj-train-button-border-color-selected |
<color> | Train button border color when selected |
--oj-train-button-text-color-selected |
<color> | Train button text color when selected |
--oj-train-label-font-weight-selected |
<font_weight> | Train label font weight when selected |
--oj-train-label-color-selected |
<color> | Train label color when selected |
--oj-train-connector-color-selected |
<color> | Train connector color when selected |
--oj-train-connector-padding-selected |
<length> | Train connector padding when selected |
| Name | Type | Description |
|---|---|---|
--oj-train-button-bg-color-disabled |
<color> | Train button background color when disabled |
--oj-train-button-border-color-disabled |
<color> | Train button border color when disabled |
--oj-train-button-text-color-disabled |
<color> | Train button text color when disabled |
--oj-train-button-opacity-disabled |
<number> | <percentage> | Train button opacity when disabled |
--oj-train-label-color-disabled |
<color> | Train label color when disabled |