less/patternfly/progress-bars.less

   1 //
   2 // Progress Bar
   3 // --------------------------------------------------
   4
   5 // WebKit
   6 @-webkit-keyframes progress-bar-stripes {
   7   from  { background-position: 0 0; }
   8   to    { background-position: 40px 0; }
   9 }
  10
  11 // Spec and IE10+
  12 @keyframes progress-bar-stripes {
  13   from  { background-position: 0 0; }
  14   to    { background-position: 40px 0; }
  15 }
  16
  17 .progress {
  18   .box-shadow(inset 0 0 1px rgba(0, 0, 0, 0.25));
  19   &.progress-label-left, &.progress-label-top-right {
  20     overflow: visible;
  21     position: relative;
  22   }
  23   &.progress-label-left {
  24     margin-left: 40px;
  25   }
  26   &.progress-sm {
  27     height: @progress-sm;
  28     margin-bottom: @progress-sm;
  29   }
  30   &.progress-xs {
  31     height: @progress-xs;
  32     margin-bottom: @progress-xs;
  33   }
  34   td > &:first-child:last-child {
  35     margin-bottom: 0;
  36     margin-top: 3px;
  37   }
  38 }
  39
  40 .progress-bar {
  41   box-shadow: none;
  42   .progress-label-left & span, .progress-label-top-right & span {
  43     color: @text-color;
  44     font-size: @font-size-large;
  45     position: absolute;
  46     text-align: right;
  47   }
  48   .progress-label-left & span {
  49     left: -40px;
  50     top: 0;
  51     width: 35px;
  52   }
  53   .progress-label-top-right & span {
  54     max-width: 25%;
  55     overflow: hidden;
  56     right: 0;
  57     text-overflow: ellipsis;
  58     top: -(@line-height-computed*1.5+1);
  59     white-space: nowrap;
  60   }
  61   .progress-label-left.progress-sm & span, .progress-label-top-right.progress-sm & span  {
  62     font-size: @font-size-base;
  63   }
  64   .progress-sm & {
  65     line-height: @progress-sm;
  66   }
  67   .progress-xs & {
  68     line-height: @progress-xs;
  69   }
  70 }
  71
  72 .progress-description {
  73   margin-bottom: @line-height-computed/2;
  74   max-width: 74%;
  75   overflow: hidden;
  76   text-overflow: ellipsis;
  77   white-space: nowrap;
  78   .count {
  79     font-size: @font-size-base*1.667;
  80     font-weight: 300;
  81     line-height: 1;
  82     margin-right: 5px;
  83   }
  84   .fa, .pficon {
  85     font-size: 14px;
  86     margin-right: 3px;
  87   }
  88   .tooltip {
  89     white-space: normal;
  90   }
  91 }