blob: f45404cc202610a7da929341973898db5b105569 [file] [log] [blame]
//
// Progress Bar
// --------------------------------------------------
@keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
.progress {
.box-shadow(inset 0 0 1px fade(@color-pf-black, 25%));
&.progress-label-left,
&.progress-label-top-right {
overflow: visible;
position: relative;
}
&.progress-label-left {
margin-left: 40px;
}
&.progress-sm {
height: @progress-sm;
margin-bottom: @progress-sm;
}
&.progress-xs {
height: @progress-xs;
margin-bottom: @progress-xs;
}
td > &:first-child:last-child {
margin-bottom: 0;
margin-top: 3px;
}
}
.progress-bar {
box-shadow: none;
.progress-label-left & span,
.progress-label-right & span,
.progress-label-top-right & span {
color: @text-color;
position: absolute;
text-align: right;
}
.progress-label-left & span {
font-size: @font-size-large;
left: -40px;
top: 0;
width: 35px;
}
.progress-label-right & span,
.progress-label-top-right & span {
font-size: @font-size-small;
overflow: hidden;
right: 0;
text-overflow: ellipsis;
white-space: nowrap;
strong {
font-weight: 600;
}
}
.progress-label-right & span {
max-width: @progress-description-label-width;
top: 0;
}
.progress-label-top-right & span {
max-width: 47%;
top: (-(@line-height-computed * 1.5)); // -30px
}
.progress-label-left.progress-sm & span,
.progress-label-top-right.progress-sm & span {
font-size: @font-size-base;
}
.progress-sm & {
line-height: @progress-sm;
}
.progress-xs & {
line-height: @progress-xs;
}
}
.progress-bar-remaining {
background: transparent;
}
.progress-container {
position: relative;
&.progress-description-left {
padding-left :(@progress-description-label-width + 5);
}
&.progress-label-right {
padding-right :(@progress-description-label-width + 5);
}
}
.progress-description {
margin-bottom: (@line-height-computed / 2); // 10px
max-width: 52%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.count {
font-size: (@font-size-base * 1.667); // 20px
font-weight: 300;
line-height: 1;
margin-right: 5px;
}
.fa,
.pficon {
font-size: 14px;
margin-right: 3px;
}
.progress-description-left & {
left: 0;
margin-bottom: 0;
max-width: @progress-description-label-width;
position: absolute;
top: 0;
}
.tooltip {
white-space: normal;
}
}