vaadin-framework/WebContent/VAADIN/themes/valo/components/_checkbox.scss

/**
 * Outputs the selectors and properties for the CheckBox component.
 *
 * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group checkbox
 */
@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {

  .#{$primary-stylename} {
    @include valo-checkbox-style;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-small {
      @include valo-checkbox-style($unit-size: $v-unit-size--small);
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-checkbox-style($unit-size: $v-unit-size--large);
      font-size: $v-font-size--large;
    }
  }

}


/**
 * Outputs the font icon to indicate the checked state.
 * 
 * @group checkbox
 */
@mixin valo-checkbox-icon-style {
  content: "\f00c";
  font-family: ThemeIcons;
}


/**
 * Outputs the styles for a checkbox variant.
 * 
 * @param {color} $background-color ($v-background-color) - The background color of the checkbox
 * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2.
 * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon 
 * 
 * @group checkbox
 */
@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {

  // So that we can use the same 'unit-size' for all component sizes
  $size: $unit-size/2;

  position: relative;
  line-height: round($size);
  white-space: nowrap;

  &.v-has-width label {
    white-space: normal;
  }

  :root & {
    padding-left: round($size*1.33);

    label {
      @include valo-tappable;
      display: inline-block;
    }
  }

  :root & > input {
    position: absolute;
    clip: rect(0,0,0,0);
    left: .2em;
    top: .2em;
    z-index: 0;
    margin: 0;

    &:focus ~ label:before {
      @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
      @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true));
    }

    & ~ label:before,
    & ~ label:after {
      content: "";
      display: inline-block;
      @include box-sizing(border-box);
      width: round($size);
      height: round($size);
      position: absolute;
      top: 0;
      left: 0;
      border-radius: min(round($size/3), $v-border-radius);
      font-size: round($v-font-size * 0.8 * ($size*2/$v-unit-size));
      text-align: center;
    }

    & ~ label:before {
      @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius), $states: normal);
      padding: 0;
      height: round($size);
    }

    & ~ label:after {
      @include valo-checkbox-icon-style;
      color: transparent;
      @if $v-animations-enabled {
        @include transition(color 100ms);
      }
    }

    &:active ~ label:after {
      @include valo-button-active-style($background-color: $background-color);
    }

    &:checked ~ label:after {
      color: $selection-color;
    }
  }

  & > .v-icon,
  & > label .v-icon  {
    margin: 0 round($size/3) 0 round($size/6);
    min-width: 1em;
    cursor: pointer;
  }

  &.v-disabled {
    > label,
    > .v-icon {
      cursor: default;
      @include opacity($v-disabled-opacity);
    }

    > label > .v-icon {
      cursor: default;
    }

    :root & > input:active ~ label:after {
      background: transparent;
    }
  }

  &.v-readonly {
    > label,
    > .v-icon {
      cursor: default;
    }

    > label > .v-icon {
      cursor: default;
    }

    :root & > input:active ~ label:after {
      background: transparent;
    }

    :root & > input ~ label:after {
      @include opacity($v-disabled-opacity);
    }
  }


}