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-color: #ffffff;
  34   border-color: #759dc0;
  35 }
  36 .claro .dijitProgressBarTile {
  37   /* inner container for finished portion when in 'tile' (image) mode */
  38
  39   background-color: #abd6ff;
  40   background-image: url("images/progressBarFull.png");
  41   background-repeat: repeat-x;
  42   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  43   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  44   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  45   background-image: linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
  46   background-attachment: scroll;
  47 }
  48 .dj_ie6 .claro .dijitProgressBarTile {
  49   background-image: none;
  50 }
  51 .claro .dijitProgressBarFull {
  52   border-right: 1px solid #759dc0;
  53   -webkit-transition-property: width;
  54   -moz-transition-property: width;
  55   transition-property: width;
  56   -webkit-transition-duration: 0.25s;
  57   -moz-transition-duration: 0.25s;
  58   transition-duration: 0.25s;
  59 }
  60 .claro .dijitProgressBarLabel {
  61   /* Set to a color that contrasts with both the "Empty" and "Full" parts. */
  62
  63   color: #000000;
  64 }
  65 .claro .dijitProgressBarIndeterminate .dijitProgressBarTile {
  66   /* use an animated gif for the progress bar in 'indeterminate' mode;
  67                 background-color won't appear unless user has turned off background images */
  68
  69   background: #efefef url("images/progressBarAnim.gif") repeat-x top;
  70 }