Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #16394
Closed
Open
Issue created Apr 29, 2015 by Administrator@rootContributor

Feature: different heights for progress-bars

Created by: niconoe-

Hello all! I would like to propose you to define two new classes "progress-small" and "progress-large". These classes, placed at the same element than the class "progress" is placed, will display a thinner progress-bar for class "progress-small" and a thicker progress-bar for class "progress-large"

Here is an example of HTML code used for a thinner bar:

<div class="progress progress-small">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60%</span>
    </div>
</div>

And the same example but with a thicker bar:

<div class="progress progress-small">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60%</span>
    </div>
</div>

To define these two classes, here is the LESS snippet I propose to you to place in progress-bars.less:

.progress {
  &.progress-small {
    height: @line-height-small-computed;
    margin-bottom: @line-height-small-computed;

    > .progress-bar {
      font-size: ceil((@font-size-small * 0.85));
      line-height: @line-height-small-computed;
    }
  }
  &.progress-large {
    height: @line-height-large-computed;
    margin-bottom: @line-height-large-computed;

    > .progress-bar {
      font-size: @font-size-base;
      line-height: @line-height-large-computed;
    }
  }
}

And here is the definition of the missing variables "@line-height-small-computed" and "@line-height-large-computed":

//== Typography (Extends)
//** Computed "line-height-small" (`font-size-small` * `line-height`) for use with progress-bars
@line-height-small-computed: floor((@font-size-small * @line-height-small)); // ~15px
//** Computed "line-height-large" (`font-size-large` * `line-height`) for use with progress-bars
@line-height-large-computed: floor((@font-size-large * @line-height-large)); // ~27px

I tested this also with text written into the progress-bar and both font-size and line-height seems correct to me.

Is this feature can be integrated on Bootstrap?

Thanks a lot, Best regards,

Assignee
Assign to
Time tracking