vui-design/src/style/components/radio.less

A high quality UI Toolkit based on Vue.js

@vui-radio: ~"@{vui}-radio";

.@{vui-radio} {
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  vertical-align:middle;
  color:@radio-font-color;
  line-height:@radio-line-height;
  white-space:nowrap;

  &-input {
    position:relative;
    display:block;
    border:1px solid @radio-border-color;
    border-radius:@radio-border-radius;
    background-color:@radio-background-color;
    transition:all @transition-duration @transition-timing-function;

    &:before {
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      display:block;
      border-radius:@radio-border-radius;
      background-color:@radio-checkmark-color;
      opacity:0;
      transform:scale(0);
      transition:all @transition-duration @transition-timing-function;
    }

    input[type="radio"] {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      z-index:-1;
      cursor:inherit;
      display:block;
      width:100%;
      height:100%;
      margin:0;
      padding:0;
      opacity:0;
      appearance:none;
    }
  }

  &-label {
    flex:1;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  // size
  &-small {
    font-size:@radio-font-size-sm;
  }
  &-small &-input {
    width:@radio-size-sm;
    height:@radio-size-sm;

    &:before {
      width:@radio-size-sm - 8px;
      height:@radio-size-sm - 8px;
      margin-top:-((@radio-size-sm - 8px) / 2);
      margin-left:-((@radio-size-sm - 8px) / 2);
    }
  }
  &-small &-label {
    padding-left:@radio-size-sm - 8px;
  }

  &-medium {
    font-size:@radio-font-size-md;
  }
  &-medium &-input {
    width:@radio-size-md;
    height:@radio-size-md;

    &:before {
      width:@radio-size-md - 8px;
      height:@radio-size-md - 8px;
      margin-top:-((@radio-size-md - 8px) / 2);
      margin-left:-((@radio-size-md - 8px) / 2);
    }
  }
  &-medium &-label {
    padding-left:@radio-size-md - 8px;
  }

  &-large {
    font-size:@radio-font-size-lg;
  }
  &-large &-input {
    width:@radio-size-lg;
    height:@radio-size-lg;

    &:before {
      width:@radio-size-lg - 8px;
      height:@radio-size-lg - 8px;
      margin-top:-((@radio-size-lg - 8px) / 2);
      margin-left:-((@radio-size-lg - 8px) / 2);
    }
  }
  &-large &-label {
    padding-left:@radio-size-lg - 8px;
  }

  // hovered
  &:hover &-input {
    border-color:@radio-hover-border-color;
  }

  // focused
  &-focused &-input {
    border-color:@radio-hover-border-color;
  }

  // checked
  &-checked &-input,
  &-checked:hover &-input {
    border-color:@radio-checked-border-color;

    &:before {
      opacity:1;
      transform:scale(1);
    }
  }

  // disabled
  &-disabled {
    cursor:not-allowed;
    color:@radio-disabled-font-color;
  }
  &-disabled &-input,
  &-disabled:hover &-input {
    border-color:@radio-disabled-border-color;
    background-color:@radio-disabled-background-color;

    &:before {
      background-color:@radio-disabled-checkmark-color;
    }
  }

  // button
  &-button {
    position:relative;
    cursor:pointer;
    display:inline-block;
    border:@radio-button-border-width solid @radio-button-border-color;
    border-radius:@radio-button-border-radius;
    background-color:@radio-button-background-color;
    margin:0;
    vertical-align:middle;
    color:@radio-button-font-color;
    font-weight:400;
    white-space:nowrap;
    text-align:center;
    transition:all @transition-duration @transition-timing-function;

    &-input {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      z-index:-1;
      display:block;
      width:100%;
      height:100%;
      margin:0;
      padding:0;
      opacity:0;

      input[type="radio"] {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        cursor:inherit;
        display:block;
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        opacity:0;
        appearance:none;
      }
    }

    // size
    &-small {
      height:@radio-button-size-sm;
      padding:0 @radio-button-padding-size-sm;
      font-size:@radio-button-font-size-sm;
      line-height:@radio-button-size-sm - @radio-button-border-width * 2;
    }

    &-medium {
      height:@radio-button-size-md;
      padding:0 @radio-button-padding-size-sm;
      font-size:@radio-button-font-size-md;
      line-height:@radio-button-size-md - @radio-button-border-width * 2;
    }

    &-large {
      height:@radio-button-size-lg;
      padding:0 @radio-button-padding-size-lg;
      font-size:@radio-button-font-size-lg;
      line-height:@radio-button-size-lg - @radio-button-border-width * 2;
    }

    // hovered
    &:hover {
      z-index:1;
      color:@radio-button-hover-font-color;
    }

    // focused
    &-focused {
      z-index:2 !important;
      color:@radio-button-hover-font-color !important;
    }

    // checked
    &-checked {
      z-index:3 !important;
      border-color:@radio-button-checked-border-color;
      color:@radio-button-checked-font-color !important;
    }

    // focused & checked
    &-focused&-checked {
      z-index:4 !important;
    }

    // disabled
    &-disabled {
      z-index:0 !important;
      cursor:not-allowed;
      border-color:@radio-button-disabled-border-color;
      background-color:@radio-button-disabled-background-color;
      color:@radio-button-disabled-font-color !important;
    }

    // checked & disabled
    &-checked&-disabled {
      background-color:shade(@radio-button-disabled-background-color, 5%);
    }
  }
}