zarm-web/lib/slider/style/index.css

基于 React 的桌面端UI库

/* border */
/* box shadow */
/* btn */
.ui-slider-wraper {
  margin: 10px 0;
}
.ui-slider-wraper.round .ui-slider-horizontal {
  border-radius: 6px;
}
.ui-slider-wraper.solid .ui-slider-horizontal {
  background-color: #eee;
}
.ui-slider-wraper.round .ui-slider-back {
  border-radius: 6px;
}
.ui-slider-wraper * {
  box-sizing: border-box;
}

.ui-slider-horizontal {
  width: 200px;
  height: 10px;
  border: 1px solid #c3c3d6;
  position: relative;
  overflow: visible;
  cursor: pointer;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -3px;
  margin-left: -9px;
}
.ui-slider-horizontal .ui-slider-back {
  overflow: hidden;
  height: 100%;
  position: absolute;
  background-color: #eee;
  width: 0%;
}

.ui-slider-horizontal:hover .ui-slider-tip {
  display: block;
}

.ui-slider-handle {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  background-image: linear-gradient(to bottom, #fff 0, #e4e4e4 100%);
  background-repeat: repeat-x;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  height: 15px;
  width: 15px;
  z-index: 99;
}
.ui-slider-handle:hover {
  border: 1px solid #c3c3d6;
  background-color: #e6e6e6;
  background-position: 0 -5px;
  transition: background-position 0.1s linear;
}
.ui-slider-handle .ui-slider-tip {
  display: none;
  position: absolute;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  font-style: normal;
  transform: translate(-50%, -140%);
  left: 50%;
  border-radius: 4px;
}
.ui-slider-handle .ui-slider-tip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 8px;
  border-top-color: rgba(0, 0, 0, 0.8);
  bottom: -14px;
  transform: translateX(-50%);
  left: 50%;
}
.ui-slider-handle .ui-slider-tip.ui-slider-tip-show {
  display: block;
}

.theme-default .ui-slider-horizontal {
  border: 1px solid #e6e6e6;
}
.theme-default .ui-slider-horizontal .ui-slider-back {
  background-color: #e6e6e6;
}
.theme-default .ui-slider-horizontal .ui-slider-handle {
  background-image: linear-gradient(to bottom, white 0, #e4e4e4 100%);
  border: 1px solid #c3c3d6;
}
.theme-default .ui-slider-horizontal .ui-slider-handle:hover {
  border: 1px solid #b4b4cc;
  background-color: #e4e4e4;
}
.theme-default .ui-slider-horizontal .ui-slider-handle .ui-slider-tip {
  background-color: rgba(0, 0, 0, 0.8);
}
.theme-default .ui-slider-horizontal .ui-slider-handle .ui-slider-tip::after {
  border-top-color: rgba(0, 0, 0, 0.8);
}
.theme-default.ui-slider-wraper.solid .ui-slider-horizontal {
  background-color: rgba(230, 230, 230, 0.3);
}

.theme-info .ui-slider-horizontal {
  border: 1px solid #12c287;
}
.theme-info .ui-slider-horizontal .ui-slider-back {
  background-color: #12c287;
}
.theme-info .ui-slider-horizontal .ui-slider-handle {
  background-image: linear-gradient(to bottom, white 0, #e4e4e4 100%);
  border: 1px solid #c3c3d6;
}
.theme-info .ui-slider-horizontal .ui-slider-handle:hover {
  border: 1px solid #b4b4cc;
  background-color: #e4e4e4;
}
.theme-info .ui-slider-horizontal .ui-slider-handle .ui-slider-tip {
  background-color: #12c287;
}
.theme-info .ui-slider-horizontal .ui-slider-handle .ui-slider-tip::after {
  border-top-color: #12c287;
}
.theme-info.ui-slider-wraper.solid .ui-slider-horizontal {
  background-color: rgba(18, 194, 135, 0.2);
}

.theme-success .ui-slider-horizontal {
  border: 1px solid #69c964;
}
.theme-success .ui-slider-horizontal .ui-slider-back {
  background-color: #69c964;
}
.theme-success .ui-slider-horizontal .ui-slider-handle {
  background-image: linear-gradient(to bottom, white 0, #e4e4e4 100%);
  border: 1px solid #c3c3d6;
}
.theme-success .ui-slider-horizontal .ui-slider-handle:hover {
  border: 1px solid #b4b4cc;
  background-color: #e4e4e4;
}
.theme-success .ui-slider-horizontal .ui-slider-handle .ui-slider-tip {
  background-color: #69c964;
}
.theme-success .ui-slider-horizontal .ui-slider-handle .ui-slider-tip::after {
  border-top-color: #69c964;
}
.theme-success.ui-slider-wraper.solid .ui-slider-horizontal {
  background-color: rgba(105, 201, 100, 0.2);
}

.theme-warning .ui-slider-horizontal {
  border: 1px solid #eca632;
}
.theme-warning .ui-slider-horizontal .ui-slider-back {
  background-color: #eca632;
}
.theme-warning .ui-slider-horizontal .ui-slider-handle {
  background-image: linear-gradient(to bottom, white 0, #e4e4e4 100%);
  border: 1px solid #c3c3d6;
}
.theme-warning .ui-slider-horizontal .ui-slider-handle:hover {
  border: 1px solid #b4b4cc;
  background-color: #e4e4e4;
}
.theme-warning .ui-slider-horizontal .ui-slider-handle .ui-slider-tip {
  background-color: #eca632;
}
.theme-warning .ui-slider-horizontal .ui-slider-handle .ui-slider-tip::after {
  border-top-color: #eca632;
}
.theme-warning.ui-slider-wraper.solid .ui-slider-horizontal {
  background-color: rgba(236, 166, 50, 0.2);
}

.theme-error .ui-slider-horizontal {
  border: 1px solid #e55546;
}
.theme-error .ui-slider-horizontal .ui-slider-back {
  background-color: #e55546;
}
.theme-error .ui-slider-horizontal .ui-slider-handle {
  background-image: linear-gradient(to bottom, white 0, #e4e4e4 100%);
  border: 1px solid #c3c3d6;
}
.theme-error .ui-slider-horizontal .ui-slider-handle:hover {
  border: 1px solid #b4b4cc;
  background-color: #e4e4e4;
}
.theme-error .ui-slider-horizontal .ui-slider-handle .ui-slider-tip {
  background-color: #e55546;
}
.theme-error .ui-slider-horizontal .ui-slider-handle .ui-slider-tip::after {
  border-top-color: #e55546;
}
.theme-error.ui-slider-wraper.solid .ui-slider-horizontal {
  background-color: rgba(229, 85, 70, 0.2);
}