ProgressBar.less 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /* ProgressBar
  2. *
  3. * Styling of the ProgressBar consists of the following:
  4. *
  5. * 1. the base progress bar
  6. * .dijitProgressBar - sets margins for the progress bar
  7. *
  8. * 2. the empty bar
  9. * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet
  10. * Also sets border color for whole bar
  11. *
  12. * 3. tile mode
  13. * .dijitProgressBarTile
  14. * inner container for finished portion when in 'tile' (image) mode
  15. *
  16. * 4. full bar mode
  17. * .dijitProgressBarFull
  18. * adds border to right side of the filled portion of bar
  19. *
  20. * 5. text for label of bar
  21. * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts.
  22. *
  23. * 6. indeterminate mode
  24. * .dijitProgressBarIndeterminate .dijitProgressBarTile
  25. * sets animated gif for the progress bar in 'indeterminate' mode
  26. */
  27. @import "variables";
  28. .claro .dijitProgressBar {
  29. margin:2px 0 2px 0;
  30. }
  31. .claro .dijitProgressBarEmpty {
  32. /* outer container and background of the bar that's not finished yet*/
  33. background-color: @progressbar-empty-background-color;
  34. border-color: @progressbar-border-color;
  35. }
  36. .claro .dijitProgressBarTile {
  37. /* inner container for finished portion when in 'tile' (image) mode */
  38. background-color: @progressbar-full-background-color;
  39. // gradient background using CSS gradient, with fallback to image for IE
  40. background-image: url("images/progressBarFull.png");
  41. background-repeat: repeat-x;
  42. .alpha-white-gradient(0.93,0px, 0.41,1px, 0.7,2px, 0,100%);
  43. background-attachment: scroll; // override strange "fixed" setting from dijit.css
  44. }
  45. .dj_ie6 .claro .dijitProgressBarTile {
  46. background-image: none;
  47. }
  48. .claro .dijitProgressBarFull {
  49. border-right:1px solid @progressbar-border-color;
  50. .transition-property(width);
  51. .transition-duration(.25s);
  52. }
  53. .claro .dijitProgressBarLabel {
  54. /* Set to a color that contrasts with both the "Empty" and "Full" parts. */
  55. color: @progressbar-text-color;
  56. }
  57. .claro .dijitProgressBarIndeterminate .dijitProgressBarTile {
  58. /* use an animated gif for the progress bar in 'indeterminate' mode;
  59. background-color won't appear unless user has turned off background images */
  60. background: @bar-background-color url(@image-progressbar-anim) repeat-x top;
  61. }