hy-checkbox/lib/Progress/progress.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:06:03 
 */ 

@import "../../app/variables.less";

.@{ult-prefix}-progress {
  width: 100%;
  background-color: #f5f5f5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 3px;
  height: 16px;
  margin-bottom: 15px;
  &-round {
    border-radius: 8px;
  }
  &-large {
    height: 24px;
    &.@{ult-prefix}-progress-round {
      border-radius: 12px;
    }
  }
  &-small {
    height: 8px;
    &.@{ult-prefix}-progress-round {
      border-radius: 4px;
    }
  }
  &-bar {
    float: left;
    height: 100%;
    width: 30%;
    background-color: @primary;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    transition: all .6s ease;
    // border-radius: 3px;
  }
  &-bar-primary {
    background-color: @primary;
  }
  &-bar-info {
    background-color: #00a0c1;
  }
  &-bar-success {
    background-color: @success;
  }
  &-bar-warning {
    background-color: @warning;
  }
  &-bar-danger {
    background-color: @danger;
  }
  .sr-only {
    position: absolute;
    visibility: hidden;
  }
  
  &-striped .@{ult-prefix}-progress-bar {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 40px 40px;
  }
  &.active  .@{ult-prefix}-progress-bar {
    animation: progress-bar-stripes 2s linear infinite;
  }
}
// Bar animations
// -------------------------

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

// Spec and IE10+
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}