Contents

//
// Progress Bar Variables
//
$include-html-media-classes: $include-html-classes !default;

// We use this to se the prog bar height
$progress-bar-height: emCalc(25) !default;
$progress-bar-color: transparent !default;

// We use these to control the border styles
$progress-bar-border-color: darken(#fff, 20%) !default;
$progress-bar-border-size: 1px !default;
$progress-bar-border-style: solid !default;
$progress-bar-border-radius: $global-radius !default;

// We use these to control the margin & padding
$progress-bar-pad: emCalc(2) !default;
$progress-bar-margin-bottom: emCalc(10) !default;

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


//
// Progress Bar Mixins
//

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

@mixin progress-meter($bg:$progress-meter-color) {
  background: $bg;
  height: 100%;
  display: block;
}


@if $include-html-media-classes != false {

  /* Progress Bar */
  .progress {
    @include progress-container;

    // Meter
    .meter {
      @include progress-meter;
    }
    &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
    &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
    &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }

    &.radius { @include radius($global-radius);
      .meter { @include radius($global-radius - 1); }
    }

    &.round { @include radius(1000px);
      .meter { @include radius(999px); }
    }

  }

}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
zurb-foundation-4.3.1	scss/foundation/components/_progress-bars.scss
zurb-foundation-4.3.0	scss/foundation/components/_progress-bars.scss