jiro-ui/lib/components/checkbox/index.css

A Mithril.js UI library based from construct-ui

.cui-checkbox input:checked ~ .cui-control-indicator:after {
  width: 5px;
  height: 8px;
  margin-top: -1px; }

.cui-checkbox input:indeterminate ~ .cui-control-indicator:after {
  width: 10px;
  height: 2px; }

.cui-checkbox .cui-control-indicator {
  border: solid 1px #c5cdd1; }

.cui-checkbox input:checked ~ .cui-control-indicator,
.cui-checkbox input:indeterminate ~ .cui-control-indicator {
  background: #5c6bc0;
  border: solid 1px #404b86; }

.cui-checkbox input:checked ~ .cui-control-indicator {
  color: white; }
  .cui-checkbox input:checked ~ .cui-control-indicator:after {
    content: '\00a0';
    position: absolute;
    top: 50%;
    left: 50%;
    backface-visibility: hidden;
    transform: translate(-50%, -50%) rotate(45deg);
    border: solid white;
    border-width: 0 2px 2px 0; }

.cui-checkbox input:indeterminate ~ .cui-control-indicator {
  color: white; }
  .cui-checkbox input:indeterminate ~ .cui-control-indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    backface-visibility: hidden;
    transform: translate(-50%, -50%);
    background: white; }

.cui-checkbox.cui-xs input:checked ~ .cui-control-indicator:after {
  width: 4px;
  height: 6px;
  margin-top: -1px; }

.cui-checkbox.cui-xs input:indeterminate ~ .cui-control-indicator:after {
  width: 10px;
  height: 2px; }

.cui-checkbox.cui-sm input:checked ~ .cui-control-indicator:after {
  width: 4px;
  height: 7px;
  margin-top: -1px; }

.cui-checkbox.cui-sm input:indeterminate ~ .cui-control-indicator:after {
  width: 10px;
  height: 2px; }

.cui-checkbox.cui-lg input:checked ~ .cui-control-indicator:after {
  width: 6px;
  height: 9px;
  margin-top: -1px; }

.cui-checkbox.cui-lg input:indeterminate ~ .cui-control-indicator:after {
  width: 10px;
  height: 2px; }

.cui-checkbox.cui-xl input:checked ~ .cui-control-indicator:after {
  width: 6px;
  height: 10px;
  margin-top: -1px; }

.cui-checkbox.cui-xl input:indeterminate ~ .cui-control-indicator:after {
  width: 10px;
  height: 2px; }

.cui-checkbox.cui-primary .cui-control-indicator {
  border: solid 1px #5360ad; }

.cui-checkbox.cui-primary input:checked ~ .cui-control-indicator,
.cui-checkbox.cui-primary input:indeterminate ~ .cui-control-indicator {
  background: #5c6bc0;
  border: solid 1px #404b86; }

.cui-checkbox.cui-positive .cui-control-indicator {
  border: solid 1px #3d8c40; }

.cui-checkbox.cui-positive input:checked ~ .cui-control-indicator,
.cui-checkbox.cui-positive input:indeterminate ~ .cui-control-indicator {
  background: #4caf50;
  border: solid 1px #357b38; }

.cui-checkbox.cui-negative .cui-control-indicator {
  border: solid 1px #dc3c31; }

.cui-checkbox.cui-negative input:checked ~ .cui-control-indicator,
.cui-checkbox.cui-negative input:indeterminate ~ .cui-control-indicator {
  background: #f44336;
  border: solid 1px #ab2f26; }

.cui-checkbox.cui-warning .cui-control-indicator {
  border: solid 1px #dd7000; }

.cui-checkbox.cui-warning input:checked ~ .cui-control-indicator,
.cui-checkbox.cui-warning input:indeterminate ~ .cui-control-indicator {
  background: #f57c00;
  border: solid 1px #ac5700; }