@charset "utf-8";
/**
 * Progress
 * --------------------------------------------------
 */

/*progress {
  display: block;
  margin: $progress-margin;
  width: $progress-width;
}*/

.progress {
  overflow: hidden;
  height: $padding-base;
  background-color: $progress-bg;
  border-radius: $border-radius-base*1.5;
  //@include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}

.progress-outline{
  @extend .progress;
  border: 1px solid $primary;
}

.progress-outline.progress-secondary{
  border: 1px solid $secondary;
  & .progress-bar{
    background-color: $secondary;
  }
}

.progress-small{
  @extend .progress;
  height: $padding-base/2;
}

.progress-xsmall{
  @extend .progress;
  height: floor($padding-base/3);
}

// Bar of progress
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: $font-size-small;
  line-height: $line-height-computed;
  color: $progress-bar-color;
  text-align: center;
  background-color: $primary;
  border-top-right-radius: $border-radius-base*1.5;
  border-bottom-right-radius: $border-radius-base*1.5;
  //@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  @include transition(width .6s ease);
  .progress.progress-primary &{
    background-color: $primary;
  }
  .progress.progress-secondary &{
    background-color: $secondary;
  }
  .progress.progress-green &{
    background-color: $green;
  }
}


// Call animation for the active one
.progress.active .progress-bar {
  @include animation(progress-bar-stripes 2s linear infinite);
}

// Account for lower percentages
.progress-bar {
  &[aria-valuenow="1"],
  &[aria-valuenow="2"] {
    min-width: 30px;
  }

  &[aria-valuenow="0"] {
    color: $base-background-color;
    min-width: 30px;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }
}



// 圆形进度条
.progress-round{
  width: $progress-round-width;
  height: $progress-round-width;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px $line-color;

  .left-round{
    position: absolute;
    width: $progress-round-width;
    height: $progress-round-width;
    clip: rect(0,$progress-round-width/2,$progress-round-width,0);

    i{
      position: absolute;
      width: $progress-round-width;
      height: $progress-round-width;
      transform: rotate(180deg);
      clip: rect(0,$progress-round-width/2,$progress-round-width,0);/*左半圆*/
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      box-shadow: inset 0 0 0 3px $primary;
    }
  }


  .right-round{
    position: absolute;
    clip: rect(0,$progress-round-width,$progress-round-width,$progress-round-width/2);
    width: $progress-round-width;
    height: $progress-round-width;

    i{
      position: absolute;
      clip: rect(0,$progress-round-width,$progress-round-width,$progress-round-width/2);/*右半圆*/
      width: $progress-round-width;
      height: $progress-round-width;
      transform: rotate(180deg);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      box-shadow: inset 0 0 0 3px $primary;
    }
  }
}

.progress-secondary .progress-round{
  .left-round i,.right-round i{
    box-shadow: inset 0 0 0 3px $secondary;
  }
}
.progress-disable .progress-round{
  .left-round i,.right-round i{
    box-shadow: inset 0 0 0 3px $disable;
  }
}

// 小圆
.progress-round-small .progress-round{
  width: $progress-round-width-small;
  height: $progress-round-width-small;
  box-shadow: inset 0 0 0 2px $line-color;

  .left-round{
    position: absolute;
    width: $progress-round-width-small;
    height: $progress-round-width-small;
    clip: rect(0,$progress-round-width-small/2,$progress-round-width-small,0);

    i{
      width: $progress-round-width-small;
      height: $progress-round-width-small;
      clip: rect(0,$progress-round-width-small/2,$progress-round-width-small,0);/*左半圆*/
      box-shadow: inset 0 0 0 2px $primary;
    }
  }


  .right-round{
    clip: rect(0,$progress-round-width-small,$progress-round-width-small,$progress-round-width-small/2);
    width: $progress-round-width-small;
    height: $progress-round-width-small;

    i{
      clip: rect(0,$progress-round-width-small,$progress-round-width-small,$progress-round-width-small/2);/*右半圆*/
      width: $progress-round-width-small;
      height: $progress-round-width-small;
      box-shadow: inset 0 0 0 2px $primary;
    }
  }
}