bootstrap-progressbar-3.0.0-3.1.x.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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. }