bin-ui/src/styles/components/radio.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-radio-wrapper {
  font-size: $base-font-size;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  line-height: $base-line-height;
  margin-right: 8px;
  cursor: pointer;
  &-disabled {
    cursor: not-allowed;
  }
}

.bin-radio {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  cursor: pointer;
  &-inner {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: $border-base;
    border-radius: 50%;
    transition: all $animation-duration-base ease-in-out;
    &:after {
      position: absolute;
      width: 10px;
      height: 10px;
      left: 2px;
      top: 2px;
      border-radius: 6px;
      display: table;
      border-top: 0;
      border-left: 0;
      content: " ";
      background-color: $color-primary;
      opacity: 0;
      transition: all $animation-duration-base ease-in-out;
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }
  &-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
  }

  &-checked:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid $color-primary;
    border-radius: 50%;
    animation: radioEffect $animation-duration-slow ease-in-out;
    animation-fill-mode: both;
    content: '';
  }
  &-checked &-inner {
    border-color: $color-primary
  }

  &-checked &-inner:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all $animation-duration-base ease-in-out;
  }
  &-focus {
    box-shadow: 0 0 0 3px $color-effect-shadow;
  }
  &:hover {
    .bin-radio-inner {
      border-color: $color-primary-light1;
    }
  }
}
.bin-radio + span, .bin-radio-wrapper + span {
  padding: 0 8px;
  vertical-align: middle;
}
.bin-radio-disabled, .bin-radio-disabled .bin-radio-input {
  cursor: not-allowed;
}
.bin-radio-disabled .bin-radio-inner {
  border-color: #dcdee2;
  background-color: #f3f3f3;
}

.bin-radio-disabled .bin-radio-inner:after {
  background-color: #ccc;
}

.bin-radio-group .bin-radio-checked .bin-radio-focus {
  box-shadow: 0 0 0 3px $color-effect-shadow;
  transition: all $animation-duration-base ease-in-out;
}


.bin-radio-group-button {
  font-size: 0;
  .bin-radio-wrapper {
    position: relative;
    margin: 0;
    padding: 0 15px;
    color: #515a6e;
    transition: all $animation-duration-base ease-in-out;
    border: 1px solid #dcdee2;
    background: #fff;
    height: $default-height;
    line-height: $default-height - 2;
    &:hover {
      color: $color-primary;
      border-color: $color-primary;
      z-index: 1;
    }
    > span {
      margin-left: 0;
      padding: 0;
      vertical-align: baseline;
    }
    .bin-radio {
      display: none;
      width: 0;
      margin-right: 0;
      &-checked:after {
        content: unset;
      }
    }
    .bin-radio-inner, input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    &:first-child {
      border-radius: $border-base-radius 0 0 $border-base-radius;
    }
    &:last-child {
      border-radius: 0 $border-base-radius $border-base-radius 0;
    }
    + .bin-radio-wrapper {
      margin-left: -1px;
    }
  }
  &.bin-radio-group-large .bin-radio-wrapper {
    height: $large-height;
    line-height: $large-height - 2;
    padding: 0 16px;
  }
  &.bin-radio-group-small .bin-radio-wrapper {
    height: $small-height;
    line-height: $small-height - 2;
    padding: 0 12px;
  }
  &.bin-radio-group-mini .bin-radio-wrapper {
    height: $mini-height;
    line-height: $mini-height - 2;
    padding: 0 8px;
  }
  .bin-radio-wrapper-checked {
    background: $color-primary;
    border-color: $color-primary;
    color: #fff;
    z-index: 1;
    &:hover {
      color: #fff;
      border-color: $color-primary;
      z-index: 1;
    }
  }
  .bin-radio-wrapper-disabled {
    cursor: not-allowed;
    border-color: #dcdee2;
    background-color: #f7f7f7;
    color: #ccc;
    &:first-child, &:hover {
      border-color: #dcdee2;
      background-color: #f7f7f7;
      color: #ccc;
    }
    &.bin-radio-wrapper-checked {
      color: #fff;
      background-color: #e6e6e6;
      border-color: #dcdee2;
    }
  }
}
@keyframes radioEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}