angular-docs-cn/modules/angular2_material/src/components/checkbox/checkbox.scss

@import "../../core/style/variables";
@import "../../core/style/shadows";

// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";

$checkbox-width: 18px !default;
$checkbox-height: $checkbox-width !default;

md-checkbox {
  box-sizing: border-box;
  display: block;
  margin: 15px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  user-select: none;

  *, *:after {
    box-sizing: border-box;
  }

  &[aria-checked="true"] .md-checkbox-icon {
    border: none;
  }

  // Checkbox is disabled.
  &[disabled] {
    cursor: no-drop;
  }

  // Checkbox is focused.
  &:focus .md-checkbox-label:not(:empty) {
    border-color: black;
  }

  // Checkbox is checked.
  &[aria-checked="true"] .md-checkbox-icon:after {
    transform: rotate(45deg);
    position: absolute;
    left: 6px;
    top: 2px;
    display: table;
    width: 6px;
    height: 12px;
    border: 2px solid;
    border-top: 0;
    border-left: 0;
    content: ' ';
  }
}

.md-checkbox-container {
  position: relative;
  top: 4px;
  display: inline-block;
  width: $checkbox-width;
  height: $checkbox-height;

  &:after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
  }

  .md-ripple-container {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: -15px;
    top: -15px;
    right: -15px;
    bottom: -15px;
  }
}

// Checkbox is not checked.
.md-checkbox-icon {
  transition: 240ms;
  position: absolute;
  top: 0;
  left: 0;
  width: $checkbox-width;
  height: $checkbox-height;
  border: 2px solid;
  border-radius: 2px;
}

.md-checkbox-label {
  border: 1px dotted transparent;
  position: relative;
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  white-space: normal;
  pointer-events: none;
  user-select: text;
}

// THEME
// TODO(jelbourn): ripple

md-checkbox {

  .md-ripple {
    color: md-color($md-accent, 600);
  }
  &[aria-checked="true"] .md-ripple {
    color: md-color($md-background, 600);
  }

  .md-checkbox-icon {
    border-color: md-color($md-foreground, icon);
  }
  &[aria-checked="true"] .md-checkbox-icon {
    background-color: md-color($md-accent, 0.87);
  }

  &[aria-checked="true"] .md-checkbox-icon:after {
    border-color: md-color($md-background, 200);
  }

  &:not([disabled]) {
    &.md-primary {
      .md-ripple {
        color: md-color($md-primary, 600);
      }
      &[aria-checked="true"] .md-ripple {
        color: md-color($md-background, 600);
      }

      .md-checkbox-icon {
        border-color: md-color($md-foreground, icon);
      }
      &[aria-checked="true"] .md-checkbox-icon {
        background-color: md-color($md-primary, 0.87);
      }

      &[aria-checked="true"] .md-checkbox-icon:after {
        border-color: md-color($md-background, 200);
      }
    }

    &.md-warn {
      .md-ripple {
        color: md-color($md-warn, 600);
      }

      .md-checkbox-icon {
        border-color: md-color($md-foreground, icon);
      }
      &[aria-checked="true"] .md-checkbox-icon {
        background-color: md-color($md-warn, 0.87);
      }

      &[aria-checked="true"] .md-checkbox-icon:after {
        border-color: md-color($md-background, 200);
      }
    }
  }

  &[disabled] {
    .md-checkbox-icon {
      border-color: md-color($md-foreground, disabled);
    }

    &[aria-checked="true"] .md-checkbox-icon {
      background-color: md-color($md-foreground, disabled);
    }
  }

}