teagles / VS-America.com

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

////
/// @group progress-bar
////

/// Height of a progress bar.
/// @type Number
$progress-height: 1rem !default;

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

/// Bottom margin of a progress bar.
/// @type Number
$progress-margin-bottom: $global-margin !default;

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

/// Default radius of a progress bar.
/// @type Number
$progress-radius: $global-radius !default;

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

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

/// Adds styles for text in the progress meter.
@mixin progress-meter-text {
  position: absolute;
  top: 50%;
  #{$global-left}: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: $white;
  white-space: nowrap;
}

@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;

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