lib/dijit/themes/claro/ProgressBar.css

   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 .claro .dijitProgressBar {
  28   margin: 2px 0 2px 0;
  29 }
  30 .claro .dijitProgressBarEmpty {
  31   /* outer container and background of the bar that's not finished yet*/
  32
  33   background: #ffffff url("images/progressBarEmpty.png") no-repeat left;
  34   border-color: #759dc0;
  35 }
  36 .claro .dijitProgressBarTile {
  37   /* inner container for finished portion when in 'tile' (image) mode */
  38
  39   background: #abd6ff url("images/progressBarFull.png") repeat-x top;
  40 }
  41 .dj_ie6 .claro .dijitProgressBarTile {
  42   background-image: none;
  43 }
  44 .claro .dijitProgressBarFull {
  45   border-right: 1px solid #759dc0;
  46   -webkit-transition-property: width;
  47   -moz-transition-property: width;
  48   transition-property: width;
  49   -webkit-transition-duration: 0.25s;
  50   -moz-transition-duration: 0.25s;
  51   transition-duration: 0.25s;
  52 }
  53 .claro .dijitProgressBarLabel {
  54   /* Set to a color that contrasts with both the "Empty" and "Full" parts. */
  55
  56   color: #000000;
  57 }
  58 .claro .dijitProgressBarIndeterminate .dijitProgressBarTile {
  59   /* use an animated gif for the progress bar in 'indeterminate' mode;
  60                 background-color won't appear unless user has turned off background images */
  61
  62   background: #efefef url("images/progressBarAnim.gif") repeat-x top;
  63 }