From 231863dea4d3bb7481cfc3adbc99423d73e20a12 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 17 Aug 2017 11:30:47 -0400 Subject: [PATCH] Rework progress bars --- docs/progress-bars.html | 38 +++++-- source/css/progress-bars.css | 195 +++++++++++++++++++++-------------- source/docs/progress-bars.md | 38 +++++-- 3 files changed, 169 insertions(+), 102 deletions(-) diff --git a/docs/progress-bars.html b/docs/progress-bars.html index e1730ab54..963cf96cc 100644 --- a/docs/progress-bars.html +++ b/docs/progress-bars.html @@ -49,30 +49,46 @@

Progress Bars

HTML5 introduced the <progress> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.

-

Create a progress bar with the following markup. Use the progress-small and progress-big modifiers to change the size. To set the state, use a sizing utility or set the width explicitly on the progress-bar element.

+

Create a progress bar with the following markup. Use the progress-[xs|sm|lg|xl] modifiers to change the size. To set the state, use a sizing utility or set the width explicitly on the progress-bar element.

An optional text label can be included inside the progress-bar element.

-
<div class="progress progress-small">
-  <div class="progress-bar w-25">25%</div>
+
<div class="progress progress-xs">
+  <div class="progress-bar w-20">20%</div>
+</div>
+
+<div class="progress progress-sm">
+  <div class="progress-bar w-40">40%</div>
 </div>
 
 <div class="progress">
-  <div class="progress-bar w-50">50%</div>
+  <div class="progress-bar w-60">60%</div>
 </div>
 
-<div class="progress progress-big">
-  <div class="progress-bar w-75">75%</div>
+<div class="progress progress-lg">
+  <div class="progress-bar w-70">80%</div>
+</div>
+
+<div class="progress progress-xl">
+  <div class="progress-bar w-100">100%</div>
 </div>
 

-

-  
25%

+

+  
20%

+

+
+

+  
40%

 

 
 

-  
50%

+  
60%

 

 
-

-  
75%

+

+  
80%

+

+
+

+  
100%

 

 
 
When progress can’t be determined, use the progress-indeterminate modifier to set an indeterminate state.

diff --git a/source/css/progress-bars.css b/source/css/progress-bars.css
index ea92ee6a0..9bf892364 100644
--- a/source/css/progress-bars.css
+++ b/source/css/progress-bars.css
@@ -1,28 +1,22 @@
 /*! Progress Bars */
 :root {
-  --progress-font-size: var(--input-font-size);
-  --progress-font-size-small: var(--input-font-size-small);
-  --progress-font-size-big: var(--input-font-size-big);
   --progress-height: var(--input-height);
-  --progress-height-small: var(--input-height-small);
-  --progress-height-big: var(--input-height-big);
+  --progress-height-xs: var(--input-height-xs);
+  --progress-height-sm: var(--input-height-sm);
+  --progress-height-lg: var(--input-height-lg);
+  --progress-height-xl: var(--input-height-xl);
+  --progress-font-size: var(--input-font-size);
+  --progress-font-size-xs: var(--input-font-size-xs);
+  --progress-font-size-sm: var(--input-font-size-sm);
+  --progress-font-size-lg: var(--input-font-size-lg);
+  --progress-font-size-xl: var(--input-font-size-xl);
   --progress-color: var(--color-white);
   --progress-bg-color: var(--component-bg-color);
-  --progress-bar-bg-color: var(--state-primary);
+  --progress-bar-color: var(--state-primary);
   --progress-border-radius: var(--component-border-radius);
   --progress-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-  --progress-speed-change: .2s;
-  --progress-speed-indeterminate: 1.5s;
-}
-
-@keyframes progress-indeterminate {
-  0% {
-    left: -50%;
-  }
-
-  100% {
-    left: 100%;
-  }
+  --progress-speed: .2s;
+  --progress-speed-indeterminate: 3s;
 }
 
 .progress {
@@ -37,70 +31,111 @@
   overflow: hidden;
   margin-bottom: 1rem;
   box-shadow: var(--progress-box-shadow);
+
+  & .progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    text-align: center;
+    color: var(--progress-color);
+    background-color: var(--progress-bar-color);
+    transition: var(--progress-speed) width;
+    user-select: none;
+    cursor: default;
+  }
+
+  &.progress-indeterminate .progress-bar {
+    width: 75% !important;
+    animation: progress-indeterminate ease-in-out var(--progress-speed-indeterminate) infinite;
+  }
+
+  /* Sizes */
+  &.progress-xs {
+    font-size: var(--progress-font-size-xs);
+    height: var(--progress-height-xs);
+    line-height: var(--progress-height-xs);
+  }
+
+  &.progress-sm {
+    font-size: var(--progress-font-size-sm);
+    height: var(--progress-height-sm);
+    line-height: var(--progress-height-sm);
+  }
+
+  &.progress-lg {
+    font-size: var(--progress-font-size-lg);
+    height: var(--progress-height-lg);
+    line-height: var(--progress-height-lg);
+  }
+
+  &.progress-xl {
+    font-size: var(--progress-font-size-xl);
+    height: var(--progress-height-xl);
+    line-height: var(--progress-height-xl);
+  }
+
+  /* Variations */
+  &.progress-secondary {
+    & .progress-bar {
+      background-color: var(--state-secondary);
+    }
+  }
+
+  &.progress-success {
+    & .progress-bar {
+      background-color: var(--state-success);
+    }
+  }
+
+  &.progress-info {
+    & .progress-bar {
+      background-color: var(--state-info);
+    }
+  }
+
+  &.progress-warning {
+    & .progress-bar {
+      background-color: var(--state-warning);
+    }
+  }
+
+  &.progress-danger {
+    & .progress-bar {
+      background-color: var(--state-danger);
+    }
+  }
+
+  &.progress-light {
+    background-color: var(--state-dark);
+
+    & .progress-bar {
+      color: var(--state-dark);
+      background-color: var(--state-light);
+    }
+  }
+
+  &.progress-dark {
+    background-color: var(--state-light);
+
+    & .progress-bar {
+      color: var(--state-light);
+      background-color: var(--state-dark);
+    }
+  }
 }
 
-.progress-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  text-align: center;
-  color: var(--progress-color);
-  background-color: var(--progress-bar-bg-color);
-  transition: var(--progress-speed-change) width;
-  user-select: none;
-  cursor: default;
-}
+@keyframes progress-indeterminate {
+  0% {
+    left: -65%;
+  }
 
-.progress-small {
-  font-size: var(--progress-font-size-small);
-  height: var(--progress-height-small);
-  line-height: var(--progress-height-small);
-}
+  50% {
+    left: 90%;
+  }
 
-.progress-big {
-  font-size: var(--progress-font-size-big);
-  height: var(--progress-height-big);
-  line-height: var(--progress-height-big);
-}
-
-.progress-indeterminate .progress-bar {
-  width: 50% !important;
-  animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite;
-}
-
-/* Variations */
-.progress-secondary .progress-bar {
-  background-color: var(--state-secondary);
-}
-
-.progress-success .progress-bar {
-  background-color: var(--state-success);
-}
-
-.progress-info .progress-bar {
-  background-color: var(--state-info);
-}
-
-.progress-warning .progress-bar {
-  background-color: var(--state-warning);
-}
-
-.progress-danger .progress-bar {
-  background-color: var(--state-danger);
-}
-
-.progress-light {
-  background-color: var(--state-dark);
-}
-
-.progress-light .progress-bar {
-  color: var(--state-dark);
-  background-color: var(--state-light);
-}
-
-.progress-dark .progress-bar {
-  color: var(--state-light);
-  background-color: var(--state-dark);
+  100% {
+    left: -65%;
+  }
 }
diff --git a/source/docs/progress-bars.md b/source/docs/progress-bars.md
index 5ae3c26dd..795dd9dc9 100644
--- a/source/docs/progress-bars.md
+++ b/source/docs/progress-bars.md
@@ -8,34 +8,50 @@ description: These progress bars are easy to create and render consistently in a
 
 HTML5 introduced the `` element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.
 
-Create a progress bar with the following markup. Use the `progress-small` and `progress-big` modifiers to change the size. To set the state, use a [sizing utility](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element.
+Create a progress bar with the following markup. Use the `progress-[xs|sm|lg|xl]` modifiers to change the size. To set the state, use a [sizing utility](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element.
 
 An optional text label can be included inside the `progress-bar` element.
 
 ```html
-

-  
25%

+

+  
20%

+

+
+

+  
40%

 

 
 

-  
50%

+  
60%

 

 
-

-  
75%

+

+  
80%

+

+
+

+  
100%

 

 ```
 
-

-  
25%

+

+  
20%

+

+
+

+  
40%

 

 
 

-  
50%

+  
60%

 

 
-

-  
75%

+

+  
80%

+

+
+

+  
100%

 

 
 When progress can’t be determined, use the `progress-indeterminate` modifier to set an indeterminate state.