hy-checkbox/lib/Slider/slider.less

checkbox & radio ui components for react

@import "../../app/variables.less";
.@{ult-prefix}-slider-contain{ width:100%;
    .@{ult-prefix}-slider{
        width:92%;
        float:left;
    }
    .@{ult-prefix}-slider-input{
        width:6%;
        float: right;
        position: relative;
        .@{ult-prefix}-slider-unit{
          position: absolute; right: 5px; top:5px; font-style: italic; font-size: 12px; color: @text-caption;
        }
    }
}

.@{ult-prefix}-slider{
  position: relative;
  height: 14px;
  padding: 5px 0;
  width: 100%;
  border-radius: @border-radius;
 // touch-action: none;
 // .borderBox();

  &-rail {
    position: absolute;
    width: 100%;
    background-color: #e9e9e9;
    height: 8px;
    border-radius: @border-radius;
  }

  &-track {
    position: absolute;
    left: 0;
    height:8px;
    border-radius: @border-radius;
    background-color: #1976d2 ;
  }

  &-handle {
    position: absolute;
    margin-left: -7px;
    margin-top: -5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: grab;
    border-radius: 50%;
    border: solid 2px #1976d2 ;
    background-color: #fff;
    touch-action: pan-x;

    &:hover {
      border-color:#1976d2;
    }
    &:active {
      border-color: #1976d2;
      box-shadow: 0 0 5px fade(@primary, 20%);
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }
  }

  &-mark {
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    font-size: 12px;
  }

  &-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: #999;

    &-active {
      color: #666;
    }
  }

  &-step {
    position: absolute;
    width: 100%;
    height: 8px;
    background: transparent;
  }

  &-dot {
    position: absolute;
    bottom: -8px;
    margin-left: 0;
    width: 1px;
    height: 5px;
    border: none;
    background-color: #ccc;
    vertical-align: middle;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-left: -4px;
    }
    &-active {
      border-color: tint(@primary, 50%);
    }
  }

  &-disabled {
    background-color: #e9e9e9;

    .@{ult-prefix}-slider-track {
      background-color: @main-grey;
    }

    .@{ult-prefix}-slider-handle, .@{ult-prefix}-slider-dot {
      border-color: @main-grey;
      box-shadow: none;
      background-color: #fff;
      cursor: not-allowed;
    }

    .@{ult-prefix}-slider-mark-text, .@{ult-prefix}-slider-dot {
      cursor: not-allowed!important;
    }
  }
}

.@{ult-prefix}-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;

  .@{ult-prefix}{
    &-rail {
      height: 100%;
      width: 4px;
    }

    &-track {
      left: 5px;
      bottom: 0;
      width: 4px;
    }

    &-handle {
      margin-left: -5px;
      margin-bottom: -7px;
      touch-action: pan-y;
    }

    &-mark {
      top: 0;
      left: 18px;
      height: 100%;
    }

    &-step {
      height: 100%;
      width: 4px;
    }

    &-dot {
      left: 2px;
      margin-bottom: -4px;
      &:first-child {
        margin-bottom: -4px;
      }
      &:last-child {
        margin-bottom: -4px;
      }
    }
  }
}

.motion-common() {
  animation-duration: .3s;
  animation-fill-mode: both;
  display: block !important;
}

.make-motion(@className, @keyframeName) {
  .@{className}-enter, .@{className}-appear {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~"@{keyframeName}Out";
    animation-play-state: running;
  }
}
// .zoom-motion(@className, @keyframeName) {
//   .make-motion(@className, @keyframeName);
//   .@{className}-enter, .@{className}-appear {
//     transform: scale(0, 0); // need this by yiminghe
//     animation-timing-function: @ease-out-quint;
//   }
//   .@{className}-leave {
//     animation-timing-function: @ease-in-quint;
//   }
// }
//.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}

// .@{ult-prefix}-tooltip {
//   position: absolute;
//   left: -9999px;
//   top: -9999px;
//   visibility: visible;

//   //.borderBox();

//   &-hidden {
//     display: none;
//   }

//   &-placement-top {
//     padding:@base-space 0 @base-space*2 0;
//   }

//   &-inner {
//     padding: 6px 2px;
//     min-width: 24px;
//     height: 24px;
//     font-size: 12px;
//     line-height: 1;
//     color: @primary;
//     text-align: center;
//     text-decoration: none;
//     background-color: @main-bg-color;
//     border-radius: @border-radius;
//     box-shadow: 0 0 4px #d9d9d9;
//   }

//   &-arrow {
//     position: absolute;
//     width: 0;
//     height: 0;
//     border-color: transparent;
//     border-style: solid;
//   }

//   &-placement-top &-arrow {
//     bottom: @base-space - @base-space*2;
//     left: 50%;
//     margin-left: -@base-space*2;
//     border-width: @base-space @base-space 0;
//     border-top-color: @primary;
//   }
// }