diff --git a/src/scss/_custom-variables.scss b/src/scss/_custom-variables.scss index 34691c047..3ce265102 100644 --- a/src/scss/_custom-variables.scss +++ b/src/scss/_custom-variables.scss @@ -149,10 +149,9 @@ $card-nav-link-padding-sm-y: .4rem !default; $card-nav-link-padding-sm-x: .8rem !default; $card-img-size: $img-size-sm !default; -// Tables +// PROGRESS BARS // -------------------------------------------------------- -$table-cell-padding-y-lg: .75rem !default; -$table-cell-padding-x-lg: .75rem !default; +$progress-bar-border-radius: 1px !default; // Z-INDEX // -------------------------------------------------------- diff --git a/src/scss/_progress-bars.scss b/src/scss/_progress-bars.scss new file mode 100644 index 000000000..d019d0a4c --- /dev/null +++ b/src/scss/_progress-bars.scss @@ -0,0 +1,66 @@ +// +// Component: Progress Bar +// + +//General CSS +.progress { + @include box-shadow(null); + @include border-radius($progress-bar-border-radius); + + // Vertical bars + &.vertical { + display: inline-block; + height: 200px; + margin-right: 10px; + position: relative; + width: 30px; + + > .progress-bar { + bottom: 0; + position: absolute; + width: 100%; + } + + //Sizes + &.sm, + &.progress-sm { + width: 20px; + } + + &.xs, + &.progress-xs { + width: 10px; + } + + &.xxs, + &.progress-xxs { + width: 3px; + } + } +} + +.progress-group { + margin-bottom: map-get($spacers, 2); +} + +// size variation +.progress-sm { + height: 10px; +} + +.progress-xs { + height: 7px; +} + +.progress-xxs { + height: 3px; +} + +// Remove margins from progress bars when put in a table +.table { + tr > td { + .progress { + margin: 0; + } + } +} diff --git a/src/scss/parts/_components.scss b/src/scss/parts/_components.scss index ff91a700f..ec223fd9a 100644 --- a/src/scss/parts/_components.scss +++ b/src/scss/parts/_components.scss @@ -2,5 +2,6 @@ // Part: Components // +@import "../progress-bars"; @import "../cards"; @import "../table";