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,