mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
71 lines
1.9 KiB
SCSS
Executable File
71 lines
1.9 KiB
SCSS
Executable File
//
|
|
// Progress Bar Variables
|
|
//
|
|
$include-html-media-classes: $include-html-classes !default;
|
|
|
|
// We use this to se the prog bar height
|
|
$progress-bar-height: em-calc(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: em-calc(2) !default;
|
|
$progress-bar-margin-bottom: em-calc(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); }
|
|
}
|
|
|
|
}
|
|
|
|
} |