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

A Mithril.js UI library based from construct-ui

.cui-switch {
  padding-left: 40px; }
  .cui-switch .cui-control-indicator {
    height: 16px;
    width: 32px; }
    .cui-switch .cui-control-indicator:after {
      height: 16px;
      width: 16px; }
  .cui-switch input:checked ~ .cui-control-indicator:after {
    left: 16px; }
  .cui-switch .cui-control-indicator {
    background: #eceff1; }
  .cui-switch:hover .cui-control-indicator {
    border: none;
    background: #d4d7d9; }
  .cui-switch input:checked ~ .cui-control-indicator {
    background: #5c6bc0; }
  .cui-switch .cui-control-indicator {
    border: none;
    border-radius: 40px; }
    .cui-switch .cui-control-indicator:after {
      position: relative;
      display: block;
      top: 0;
      left: 0;
      content: '';
      border-radius: 40px;
      background: white;
      border: solid 1px #c5cdd1;
      transition: left 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }
  .cui-switch:hover .cui-control-indicator {
    border: none; }
  .cui-switch.cui-xs {
    padding-left: 30px; }
    .cui-switch.cui-xs .cui-control-indicator {
      height: 12px;
      width: 24px; }
      .cui-switch.cui-xs .cui-control-indicator:after {
        height: 12px;
        width: 12px; }
    .cui-switch.cui-xs input:checked ~ .cui-control-indicator:after {
      left: 12px; }
  .cui-switch.cui-sm {
    padding-left: 35px; }
    .cui-switch.cui-sm .cui-control-indicator {
      height: 14px;
      width: 28px; }
      .cui-switch.cui-sm .cui-control-indicator:after {
        height: 14px;
        width: 14px; }
    .cui-switch.cui-sm input:checked ~ .cui-control-indicator:after {
      left: 14px; }
  .cui-switch.cui-lg {
    padding-left: 45px; }
    .cui-switch.cui-lg .cui-control-indicator {
      height: 18px;
      width: 36px; }
      .cui-switch.cui-lg .cui-control-indicator:after {
        height: 18px;
        width: 18px; }
    .cui-switch.cui-lg input:checked ~ .cui-control-indicator:after {
      left: 18px; }
  .cui-switch.cui-xl {
    padding-left: 50px; }
    .cui-switch.cui-xl .cui-control-indicator {
      height: 20px;
      width: 40px; }
      .cui-switch.cui-xl .cui-control-indicator:after {
        height: 20px;
        width: 20px; }
    .cui-switch.cui-xl input:checked ~ .cui-control-indicator:after {
      left: 20px; }
  .cui-switch.cui-primary .cui-control-indicator {
    background: #aeb5e0; }
  .cui-switch.cui-primary:hover .cui-control-indicator {
    border: none;
    background: #8d97d3; }
  .cui-switch.cui-primary input:checked ~ .cui-control-indicator {
    background: #5c6bc0; }
  .cui-switch.cui-positive .cui-control-indicator {
    background: #a6d7a8; }
  .cui-switch.cui-positive:hover .cui-control-indicator {
    border: none;
    background: #82c785; }
  .cui-switch.cui-positive input:checked ~ .cui-control-indicator {
    background: #4caf50; }
  .cui-switch.cui-negative .cui-control-indicator {
    background: #faa19b; }
  .cui-switch.cui-negative:hover .cui-control-indicator {
    border: none;
    background: #f77b72; }
  .cui-switch.cui-negative input:checked ~ .cui-control-indicator {
    background: #f44336; }
  .cui-switch.cui-warning .cui-control-indicator {
    background: #fabe80; }
  .cui-switch.cui-warning:hover .cui-control-indicator {
    border: none;
    background: #f8a34d; }
  .cui-switch.cui-warning input:checked ~ .cui-control-indicator {
    background: #f57c00; }