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

A high quality UI Toolkit based on Vue.js

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

.@{vui-checkbox-group} {
  display:inline-block;
  vertical-align:middle;
  font-size:0;
  white-space:nowrap;

  &-horizontal {
    .@{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}-checkbox-button {
      margin-left:-1px;
    }
  }

  &-vertical {
    .@{vui}-checkbox {
      display:flex;
    }
    .@{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}-checkbox-button {
      margin-top:-1px;
    }
  }
}