Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Bootstrap
bootstrap
Commits
c2c06bc5
Commit
c2c06bc5
authored
7 years ago
by
Dave
Committed by
Mark Otto
7 years ago
Browse files
Options
Download
Email Patches
Plain Diff
_progress.scss: makes bars 100% height, centers labels horizontally & vertically
parent
0bb9fd20
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
scss/_progress.scss
+10
-5
scss/_progress.scss
with
10 additions
and
5 deletions
+10
-5
scss/_progress.scss
+
10
-
5
View file @
c2c06bc5
// Progress animations
@keyframes
progress-bar-stripes
{
@keyframes
progress-bar-stripes
{
from
{
background-position
:
$progress-height
0
;
}
from
{
background-position
:
$progress-height
0
;
}
to
{
background-position
:
0
0
;
}
to
{
background-position
:
0
0
;
}
}
}
// Basic progress bar
.progress
{
.progress
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
overflow
:
hidden
;
// force rounded corners by cropping it
overflow
:
hidden
;
// force rounded corners by cropping it
font-size
:
$progress-font-size
;
font-size
:
$progress-font-size
;
height
:
$progress-height
;
line-height
:
$progress-height
;
line-height
:
$progress-height
;
text-align
:
center
;
background-color
:
$progress-bg
;
background-color
:
$progress-bg
;
@include
border-radius
(
$progress-border-radius
);
@include
border-radius
(
$progress-border-radius
);
@include
box-shadow
(
$progress-box-shadow
);
}
}
.progress-bar
{
.progress-bar
{
height
:
$progress-height
;
display
:
flex
;
line-height
:
$progress-height
;
justify-content
:
center
;
align-items
:
center
;
height
:
100%
;
color
:
$progress-bar-color
;
color
:
$progress-bar-color
;
background-color
:
$progress-bar-bg
;
background-color
:
$progress-bar-bg
;
@include
transition
(
$progress-bar-transition
);
}
}
// Striped
.progress-bar-striped
{
.progress-bar-striped
{
@include
gradient-striped
();
@include
gradient-striped
();
background-size
:
$progress-height
$progress-height
;
background-size
:
$progress-height
$progress-height
;
}
}
// Animated
.progress-bar-animated
{
.progress-bar-animated
{
animation
:
progress-bar-stripes
$progress-bar-animation-timing
;
animation
:
progress-bar-stripes
$progress-bar-animation-timing
;
}
}
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment