From 62e5c7a362aae9f0c0a365f67f24b916a4c8d4a5 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 10:48:57 -0700 Subject: [PATCH 1/6] _progress.scss: makes bars 100% height, centers labels horizontally & vertically --- scss/_progress.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/scss/_progress.scss b/scss/_progress.scss index f7491a64b291..1be34c439766 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,32 +1,37 @@ +// Progress animations @keyframes progress-bar-stripes { from { background-position: $progress-height 0; } to { background-position: 0 0; } } +// Basic progress bar .progress { display: flex; + align-items: center; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; + height: $progress-height; line-height: $progress-height; - text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); } .progress-bar { - height: $progress-height; - line-height: $progress-height; + display: flex; + justify-content: center; + align-items: center; + height: 100%; color: $progress-bar-color; background-color: $progress-bar-bg; - @include transition($progress-bar-transition); } +// 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; } From bbdf54c8cfcedcd002df595f1c2e94f229c2a8a5 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 10:52:15 -0700 Subject: [PATCH 2/6] Update progress.md to reflect setting height on .progress --- docs/components/progress.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/progress.md b/docs/components/progress.md index 802a42a295bc..5d9cea6fa8b2 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -65,14 +65,14 @@ Add labels to your progress bars by placing text within the `.progress-bar`. ### Height -We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. +We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly. {% example html %} -
-
+
+
-
-
+
+
{% endexample %} From 24565ae34abfd99c0ed4864c93031441a7d05312 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 11:11:10 -0700 Subject: [PATCH 3/6] Fixes hound code style/standards --- scss/_progress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_progress.scss b/scss/_progress.scss index 1be34c439766..4faa890e425c 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -18,8 +18,8 @@ .progress-bar { display: flex; - justify-content: center; align-items: center; + justify-content: center; height: 100%; color: $progress-bar-color; background-color: $progress-bar-bg; From b69c8141d6ede8c558fe5f4d47200900ca12dd8d Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 11:21:02 -0700 Subject: [PATCH 4/6] Fixes PropertySortOrder errors --- scss/_progress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_progress.scss b/scss/_progress.scss index 4faa890e425c..cd52ed38602f 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -8,9 +8,9 @@ .progress { display: flex; align-items: center; + height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; - height: $progress-height; line-height: $progress-height; background-color: $progress-bg; @include border-radius($progress-border-radius); From 6bf769b7e541377ee47eac74119c0eb090e5435b Mon Sep 17 00:00:00 2001 From: Dave Poole Date: Fri, 26 May 2017 12:47:09 -0700 Subject: [PATCH 5/6] remove comments, align-items, and unnecessary height --- scss/_progress.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/scss/_progress.scss b/scss/_progress.scss index cd52ed38602f..d2a0c820d81c 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,13 +1,10 @@ -// Progress animations @keyframes progress-bar-stripes { from { background-position: $progress-height 0; } to { background-position: 0 0; } } -// Basic progress bar .progress { display: flex; - align-items: center; height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; @@ -20,18 +17,15 @@ display: flex; align-items: center; justify-content: center; - height: 100%; 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; } From 13cd716c6ef691dfcd82cecdcf1826988dd0bf62 Mon Sep 17 00:00:00 2001 From: Dave Poole Date: Fri, 26 May 2017 13:06:47 -0700 Subject: [PATCH 6/6] remove unnecessary line-height --- scss/_progress.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/_progress.scss b/scss/_progress.scss index d2a0c820d81c..efbb4403407d 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -8,7 +8,6 @@ height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; - line-height: $progress-height; background-color: $progress-bg; @include border-radius($progress-border-radius); }