gaf-mobile/app/styles/modules/pagination.less

GAF mobile Web site

@import (reference) '../themes/variables';

.pagination-bar {
    display: table;
    width: 100%;
    line-height: 0;
    margin: 0 0 16px;
}

.pagination-bar-progress,
.pagination-bar-counter {
    display: table-cell;
    vertical-align: middle;
    padding: 3px 0;
}

.pagination-bar-progress-inner {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 4px;
    text-align: left;
}

.pagination-bar-progress-steps {
    display: block;
    float: left;
    height: 100%;
    background-color: @septenary-color-xlight;
    border-right: 1px solid @body-bg;
    &.has-progressed {
        background-color: @text-color-dark;
    }
}

.pagination-bar-counter {
    width: 20px;
    padding-left: 5px;
    text-align: right;
}

.pagination-bar-counter-current {
    font-size: @type-size-sml;
    line-height: inherit;
    color: @text-color-dark;
}

.pagination-bar-counter-total {
    font-size: @type-size-xsml;
    line-height: inherit;
    color: @septenary-color-xlight;
}

// Step widths

[data-step-count="1"] {
    .pagination-bar-progress-steps { width:100%; }
}

[data-step-count="2"] {
    .pagination-bar-progress-steps { width:50%; }
}

[data-step-count="3"] {
    .pagination-bar-progress-steps { width:33.3%; }
}

[data-step-count="4"] {
    .pagination-bar-progress-steps { width:25%; }
}

[data-step-count="5"] {
    .pagination-bar-progress-steps { width:20%; }
}

[data-step-count="6"] {
    .pagination-bar-progress-steps { width:16.6%; }
}

[data-step-count="7"] {
    .pagination-bar-progress-steps { width:14.2%; }
}

[data-step-count="8"] {
    .pagination-bar-progress-steps { width:12.5%; }
}