// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "global";

//
// @variables
//

// We use this to set the progress bar height
$progress-height: rem-calc(25) !default;
$progress-background: #eee !default;

// We use these to control the margin & padding
$progress-margin-bottom: rem-calc(16) !default;

// We use these to set the meter colors
$progress-meter-background: $primary-color !default;

// @mixins
//
// We use this to set up the progress bar container
@mixin progress-container {
  background-color: $progress-background;
  height: $progress-height;
  margin-bottom: $progress-margin-bottom;
}

// @mixins
//
// $bg - Default: $progress-meter-background || $primary-color
@mixin progress-meter($background: $progress-meter-background) {
  display: block;
  width: 0%;
  height: 100%;
  float: left;
  background-color: $background;
}

@mixin foundation-progress-bar {
  // Progress bar
  .progress {
    @include progress-container;

    @each $name, $color in $foundation-colors {
      &.#{$name} {
        .progress-meter {
          background-color: $color;
        }
      }
    }

    // Meter
    .progress-meter {
      @include progress-meter;

      @each $name, $color in $foundation-colors {
        &.#{$name} {
          background-color: $color;
        }
      }
    }
  }
}

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

/// Height of a progress bar.
/// @type Number
$progress-height: rem-calc(25) !default;

/// Background color of a progress bar.
/// @type Color
$progress-background: #eee !default;

/// Bottom margin of a progress bar.
/// @type Number
$progress-margin-bottom: rem-calc(16) !default;

/// Default color of a progress bar's meter.
$progress-meter-background: $primary-color !default;

/// Adds styles for a progress bar container.
@mixin progress-container {
  background-color: $progress-background;
  height: $progress-height;
  margin-bottom: $progress-margin-bottom;
}

/// Adds styles for the inner meter of a progress bar.
@mixin progress-meter {
  display: block;
  width: 0%;
  height: 100%;
  float: left;
  background-color: $progress-meter-background;
}

@mixin foundation-progress-bar {
  // Progress bar
  .progress {
    @include progress-container;

    @each $name, $color in $foundation-colors {
      &.#{$name} {
        .progress-meter {
          background-color: $color;
        }
      }
    }

    // Progress bar meter
    .progress-meter {
      @include progress-meter;

      @each $name, $color in $foundation-colors {
        &.#{$name} {
          background-color: $color;
        }
      }
    }
  }
}

Add documentation to progress bar Sass
Add documentation to progress bar Sass
