lib/dijit/themes/claro/ProgressBar.less

   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
  28  @import "variables";
  29
  30 .claro .dijitProgressBar {
  31         margin:2px 0 2px 0;
  32 }
  33 .claro .dijitProgressBarEmpty {
  34         /* outer container and background of the bar that's not finished yet*/
  35         background-color: @progressbar-empty-background-color;
  36         border-color: @progressbar-border-color;
  37 }
  38 .claro .dijitProgressBarTile {
  39         /* inner container for finished portion when in 'tile' (image) mode */
  40         background-color: @progressbar-full-background-color;
  41
  42         // gradient background using CSS gradient, with fallback to image for IE
  43         background-image: url("images/progressBarFull.png");
  44         background-repeat: repeat-x;
  45         .alpha-white-gradient(0.93,0px, 0.41,1px, 0.7,2px, 0,100%);
  46         background-attachment: scroll;  // override strange "fixed" setting from dijit.css
  47 }
  48 .dj_ie6 .claro .dijitProgressBarTile {
  49         background-image: none;
  50 }
  51 .claro .dijitProgressBarFull {
  52         border: 0px solid @progressbar-border-color;
  53         border-right-width: 1px;
  54         .transition-property(width);
  55         .transition-duration(.25s);
  56 }
  57 .claro .dijitProgressBarLabel {
  58         /* Set to a color that contrasts with both the "Empty" and "Full" parts. */
  59         color: @progressbar-text-color;
  60 }
  61 .claro .dijitProgressBarIndeterminate .dijitProgressBarTile {
  62         /* use an animated gif for the progress bar in 'indeterminate' mode;
  63                 background-color won't appear unless user has turned off background images */
  64         background: @bar-background-color url(@image-progressbar-anim) repeat-x top;
  65 }