UNPKG

foundation

Version:

You may also want to checkout:

83 lines (66 loc) 1.84 kB
// // Progress Bar Variables // $include-html-media-classes ?= $include-html-classes; // We use this to se the prog bar height $progress-bar-height ?= emCalc(25px); $progress-bar-color ?= transparent; // We use these to control the border styles $progress-bar-border-color ?= darken(#fff, 20%); $progress-bar-border-size ?= 1px; $progress-bar-border-style ?= solid; $progress-bar-border-radius ?= $global-radius; // We use these to control the margin & padding $progress-bar-pad ?= emCalc(2px); $progress-bar-margin-bottom ?= emCalc(10px); // We use these to set the meter colors $progress-meter-color ?= $primary-color; $progress-meter-secondary-color ?= $secondary-color; $progress-meter-success-color ?= $success-color; $progress-meter-alert-color ?= $alert-color; // // Progress Bar Mixins // // We use this to set up the progress bar container 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; } progress-meter($bg=$progress-meter-color) { background: $bg; height: 100%; display: block; } if $include-html-media-classes != false { /* Progress Bar */ .progress { progress-container(); // Meter .meter { progress-meter(); } &.secondary .meter { progress-meter($bg:$progress-meter-secondary-color); } &.success .meter { progress-meter($bg:$progress-meter-success-color); } &.alert .meter { progress-meter($bg:$progress-meter-alert-color); } &.radius { radius($global-radius); .meter { radius($global-radius - 1); } } &.round { radius(1000px); .meter { radius(999px); } } } }