vui-design/src/style/components/choice-group.less

A high quality UI Toolkit based on Vue.js

@vui-choice-group: ~"@{vui}-choice-group";

.@{vui-choice-group} {
  display:inline-block;
  box-sizing:border-box;
  vertical-align:middle;
  font-size:0;
  white-space:nowrap;
  
  &-horizontal {
    .@{vui}-radio + .@{vui}-radio,
    .@{vui}-radio + .@{vui}-checkbox {
      margin-left:@margin-md;
    }

    .@{vui}-radio-button {
      border-radius:0;

      &:first-child {
        border-top-left-radius:@radio-button-border-radius;
        border-bottom-left-radius:@radio-button-border-radius;
      }
      &:last-child {
        border-top-right-radius:@radio-button-border-radius;
        border-bottom-right-radius:@radio-button-border-radius;
      }
    }
    .@{vui}-radio-button + .@{vui}-radio-button,
    .@{vui}-radio-button + .@{vui}-checkbox-button {
      margin-left:-1px;
    }
  }

  &-vertical {
    .@{vui}-radio {
      display:flex;
    }
    .@{vui}-radio + .@{vui}-radio,
    .@{vui}-radio + .@{vui}-checkbox {
      margin-top:@margin-md;
    }

    .@{vui}-radio-button {
      display:block;
      border-radius:0;

      &:first-child {
        border-top-left-radius:@radio-button-border-radius;
        border-top-right-radius:@radio-button-border-radius;
      }
      &:last-child {
        border-bottom-left-radius:@radio-button-border-radius;
        border-bottom-right-radius:@radio-button-border-radius;
      }
    }
    .@{vui}-radio-button + .@{vui}-radio-button,
    .@{vui}-radio-button + .@{vui}-checkbox-button {
      margin-top:-1px;
    }
  }

  &-horizontal {
    .@{vui}-checkbox + .@{vui}-radio,
    .@{vui}-checkbox + .@{vui}-checkbox {
      margin-left:@margin-md;
    }

    .@{vui}-checkbox-button {
      border-radius:0;

      &:first-child {
        border-top-left-radius:@checkbox-button-border-radius;
        border-bottom-left-radius:@checkbox-button-border-radius;
      }
      &:last-child {
        border-top-right-radius:@checkbox-button-border-radius;
        border-bottom-right-radius:@checkbox-button-border-radius;
      }
    }
    .@{vui}-checkbox-button + .@{vui}-radio-button,
    .@{vui}-checkbox-button + .@{vui}-checkbox-button {
      margin-left:-1px;
    }
  }

  &-vertical {
    .@{vui}-checkbox {
      display:flex;
    }
    .@{vui}-checkbox + .@{vui}-radio,
    .@{vui}-checkbox + .@{vui}-checkbox {
      margin-top:@margin-md;
    }

    .@{vui}-checkbox-button {
      display:block;
      border-radius:0;

      &:first-child {
        border-top-left-radius:@checkbox-button-border-radius;
        border-top-right-radius:@checkbox-button-border-radius;
      }
      &:last-child {
        border-bottom-left-radius:@checkbox-button-border-radius;
        border-bottom-right-radius:@checkbox-button-border-radius;
      }
    }
    .@{vui}-checkbox-button + .@{vui}-radio-button,
    .@{vui}-checkbox-button + .@{vui}-checkbox-button {
      margin-top:-1px;
    }
  }
}