bootstrap-progressbar-3.2.0.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. $progressbarVerticalWidth: $line-height-computed;
  2. $progressbarFontSize: $font-size-small;
  3. // bootstrap-progressbar global styles
  4. // -----------------------------------
  5. .progress {
  6. position: relative;
  7. }
  8. .progress .progress-bar {
  9. position: absolute;
  10. overflow: hidden;
  11. line-height: $line-height-computed;
  12. }
  13. .progress .progressbar-back-text {
  14. position: absolute;
  15. width: 100%;
  16. height: 100%;
  17. font-size: $progressbarFontSize;
  18. line-height: $line-height-computed;
  19. text-align: center;
  20. }
  21. .progress .progressbar-front-text {
  22. display: block;
  23. width: 100%;
  24. font-size: $progressbarFontSize;
  25. line-height: $line-height-computed;
  26. text-align: center;
  27. }
  28. // bootstrap-progressbar horizontal styles
  29. // ---------------------------------------
  30. .progress.right .progress-bar {
  31. right: 0;
  32. }
  33. .progress.right .progressbar-front-text {
  34. position: absolute;
  35. right: 0;
  36. }
  37. // bootstrap-progressbar vertical styles
  38. // -------------------------------------
  39. .progress.vertical {
  40. width: $progressbarVerticalWidth;
  41. height: 100%;
  42. float: left;
  43. margin-right: $progressbarVerticalWidth;
  44. }
  45. .progress.vertical.bottom {
  46. position: relative;
  47. }
  48. .progress.vertical.bottom .progressbar-front-text {
  49. position: absolute;
  50. bottom: 0;
  51. }
  52. .progress.vertical .progress-bar {
  53. width: 100%;
  54. height: 0;
  55. @include transition(height .6s ease);
  56. }
  57. .progress.vertical.bottom .progress-bar {
  58. position: absolute;
  59. bottom: 0;
  60. }
  61. // bootstrap-progressbar reverted low percentages styles
  62. // -----------------------------------------------------
  63. .progress-bar {
  64. &[aria-valuenow="1"],
  65. &[aria-valuenow="2"] {
  66. min-width: 0;
  67. }
  68. &[aria-valuenow="0"] {
  69. color: $progress-bar-color;
  70. min-width: 0;
  71. background-color: $progress-bar-bg;
  72. @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  73. &.progress-bar-success {
  74. @include progress-bar-variant($progress-bar-success-bg);
  75. }
  76. &.progress-bar-info {
  77. @include progress-bar-variant($progress-bar-info-bg);
  78. }
  79. &.progress-bar-warning {
  80. @include progress-bar-variant($progress-bar-warning-bg);
  81. }
  82. &.progress-bar-danger {
  83. @include progress-bar-variant($progress-bar-danger-bg);
  84. }
  85. }
  86. }