OwlCyberSecurity - MANAGER

Edit File: vc_progress_bar.less

@stop_standalone_compiling: @vc_grey;
/* Progress bar
---------------------------------------------------------- */
.vc_progress_bar {
 .vc_single_bar {
    background: @vc_progress_bar_bg;
    position: relative;
    margin-bottom: @vc_margin_bottom_third;
    .box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
    .border-radius(3px);
    
    &:last-child {
      margin-bottom: 0;
    }
    .vc_label {
      display: block;
      padding: 0.5em 1em;
      position: relative;
      z-index: 1;
    }
    &.bar_blue {
      .vc_bar {
        background-color: #0074CC;
      }
      .vc_label {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
    }
    &.bar_turquoise {
      .vc_bar {
        background-color: #49afcd;
      }
      .vc_label {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
    }
    &.bar_green {
      .vc_bar {
        background-color: #5bb75b;
      }
      .vc_label {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
    }
    &.bar_orange {
      .vc_bar {
        background-color: #faa732;
      }
      .vc_label {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
    }
    &.bar_red {
      .vc_bar {
        background-color: #da4f49;
      }
      .vc_label {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
    }
    &.bar_black {
      .vc_bar {
        background-color: #414141;
      }
      .vc_label {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }
    }
      
    .vc_bar {
      display: block;
      position: absolute;
      height: 100%;
      background-color: #e0e0e0;
      width: 0%;
      top: 0;
      left: 0;
      .border-radius(3px);
      .wpb_transition(width, 1s, linear);
      
      &.striped {
        background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        -webkit-background-size: 40px 40px;
           -moz-background-size: 40px 40px;
             -o-background-size: 40px 40px;
                background-size: 40px 40px;
      }
      &.animated {
        -webkit-animation: progress-bar-stripes 2s linear infinite;
           -moz-animation: progress-bar-stripes 2s linear infinite;
            -ms-animation: progress-bar-stripes 2s linear infinite;
             -o-animation: progress-bar-stripes 2s linear infinite;
                animation: progress-bar-stripes 2s linear infinite;
      }
    }
  } 
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}