blob: d2695ec3e41a71d37c7d841e178a8a7c05c0d0e3 [file] [log] [blame]
:host {
width: 100%;
display: block;
}
.td-steps-header,
.td-steps-header-list {
// layout
box-sizing: border-box;
display: flex;
// layout="row"
flex-direction: row;
}
.td-steps-header-container {
display: flex;
flex-grow: 1;
overflow: hidden;
z-index: 1;
}
.td-steps-header-list {
flex-grow: 1;
position: relative;
transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
align-items: center;
align-content: center;
max-width: 100%;
justify-content: flex-start;
}
.td-step-header-pagination {
position: relative;
display: none;
justify-content: center;
align-items: center;
min-width: 32px;
cursor: pointer;
z-index: 2;
}
:host.td-step-header-pagination-controls-enabled .td-step-header-pagination {
display: flex;
}
// The pagination control that is displayed on the left side of the tab header.
.td-step-header-pagination-before, :host.td-step-header-rtl .td-step-header-pagination-after {
padding-left: 4px;
.td-step-header-pagination-chevron {
transform: rotate(-135deg);
}
}
// The pagination control that is displayed on the right side of the tab header.
:host.td-step-header-rtl .td-step-header-pagination-before, .td-step-header-pagination-after {
padding-right: 4px;
.td-step-header-pagination-chevron {
transform: rotate(45deg);
}
}
.td-step-header-pagination-chevron {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
height: 8px;
width: 8px;
}
.td-step-header-pagination-disabled {
box-shadow: none;
cursor: default;
}
.td-horizontal-line {
border-bottom-width: 1px;
border-bottom-style: solid;
height: 1px;
min-width: 20px;
// flex
flex: 1;
box-sizing: border-box;
}