diff options
author | Mark Otto <markd.otto@gmail.com> | 2017-01-21 23:32:38 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-01-21 23:32:38 +0300 |
commit | eb361fa6c120f5f817a70d3f6acbc197aee3844b (patch) | |
tree | 5d9e650c8deaae4923c15e0b15a4223bf34b3338 /scss/_progress.scss | |
parent | 12b22ebad65c10fb22b5dc55b785a70158005199 (diff) |
Progress line height (#21805)
* remove obvi comments
* proper fix for #21801
- ensures .progress-bar text is vertically centered should the height of the .progress-bar change by matching the line-height and height values
- we can't use flexbox here because the inner text of an element doesn't count as a flex item
Diffstat (limited to 'scss/_progress.scss')
-rw-r--r-- | scss/_progress.scss | 6 |
1 files changed, 2 insertions, 4 deletions
diff --git a/scss/_progress.scss b/scss/_progress.scss index 02e4c3bd2d..ccca51e8de 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,10 +1,8 @@ -// Progress animations @keyframes progress-bar-stripes { from { background-position: $progress-height 0; } to { background-position: 0 0; } } -// Basic progress bar .progress { display: flex; overflow: hidden; // force rounded corners by cropping it @@ -14,19 +12,19 @@ background-color: $progress-bg; @include border-radius($progress-border-radius); } + .progress-bar { height: $progress-height; + line-height: $progress-height; color: $progress-bar-color; background-color: $progress-bar-bg; } -// Striped .progress-bar-striped { @include gradient-striped(); background-size: $progress-height $progress-height; } -// Animated .progress-bar-animated { animation: progress-bar-stripes $progress-bar-animation-timing; } |