added contextual states to progress-linear

src/components/progress/ProgressLinear.vue

@@ -20,34 +20,49 @@
     name: 'progress',
 
     props: {
+      active: {
+        type: Boolean,
+        default: true
+      },
+
       buffer: Boolean,
 
       bufferValue: Number,
 
+      error: Boolean,
+
       height: {
-        type: Number,
+        type: [Number, String],
         default: 7
       },
 
       indeterminate: Boolean,
 
-      active: {
-        type: Boolean,
-        default: true
-      },
+      info: Boolean,
+
+      secondary: Boolean,
+
+      success: Boolean,
 
       query: Boolean,
 
+      warning: Boolean,
+
       value: {
-        type: Number,
+        type: [Number, String],
         default: 0
       }
     },
 
     computed: {
       classes () {
         return {
-          'progress-linear--query': this.query
+          'progress-linear--query': this.query,
+          'progress-linear--secondary': this.secondary,
+          'progress-linear--success': this.success,
+          'progress-linear--info': this.info,
+          'progress-linear--warning': this.warning,
+          'progress-linear--error': this.error
         }
       },
 

src/stylus/components/_progress-linear.styl

@@ -4,23 +4,21 @@
   overflow: hidden
   width: 100%
   position: relative
+  progress-linear($theme.primary)
 
   &__bar
-    background: lighten($theme.accent, 40%)
     width: 100%
     height: inherit
     position: relative
     transition: .3s ease-in
     z-index: 2
 
     &__determinate
-      background: $theme.primary
       height: inherit
       transition: .3s ease-in
 
-    &__indeterminate      
+    &__indeterminate
       &:before, &:after
-        background: $theme.primary
         content: ''
         height: inherit
         position: absolute
@@ -50,7 +48,22 @@
       &:after
         animation: query-short
         animation-duration: 2s
-        animation-iteration-count: infinite
+        animation-iteration-count: infinite  
+
+  &--secondary
+    progress-linear($theme.secondary)
+
+  &--success
+    progress-linear($theme.success)
+
+  &--info
+    progress-linear($theme.info)
+
+  &--warning
+    progress-linear($theme.warning)
+
+  &--error
+    progress-linear($theme.error)
 
   @keyframes indeterminate
     0%

src/stylus/tools/_mixins.styl

@@ -1,3 +1,4 @@
 @import './_alerts'
 @import './_colors'
-@import './_lists'
+@import './_lists'
+@import './_progress-linear'

src/stylus/tools/_progress-linear.styl

@@ -0,0 +1,10 @@
+progress-linear(progress)
+  .progress-linear__bar
+    background: lighten(progress, 50%)
+
+  .progress-linear__bar__determinate
+    background: progress
+
+  .progress-linear__bar__indeterminate
+    &:before, &:after
+      background: progress