rc-switch/assets/index.css

switch ui component for react

[bg-color="red"] {
  background-color: #f44336;
}
[bg-color="red 100"] {
  background-color: #fcc7c3;
}
[bg-color="red 200"] {
  background-color: #faa29b;
}
[bg-color="red 300"] {
  background-color: #f87c73;
}
[bg-color="red 400"] {
  background-color: #f55f54;
}
[bg-color="red 500"] {
  background-color: #f44336;
}
[bg-color="red 600"] {
  background-color: #dc3c31;
}
[bg-color="red 700"] {
  background-color: #c3362b;
}
[bg-color="red 800"] {
  background-color: #ab2f26;
}
[bg-color="red 900"] {
  background-color: #922820;
}
[bg-color="red 1000"] {
  background-color: #7a221b;
}
[bg-color="pink"] {
  background-color: #e91e63;
}
[bg-color="pink 100"] {
  background-color: #f9bcd1;
}
[bg-color="pink 200"] {
  background-color: #f58fb2;
}
[bg-color="pink 300"] {
  background-color: #f06292;
}
[bg-color="pink 400"] {
  background-color: #ec407a;
}
[bg-color="pink 500"] {
  background-color: #e91e63;
}
[bg-color="pink 600"] {
  background-color: #d21b59;
}
[bg-color="pink 700"] {
  background-color: #ba184f;
}
[bg-color="pink 800"] {
  background-color: #a31545;
}
[bg-color="pink 900"] {
  background-color: #8c123b;
}
[bg-color="pink 1000"] {
  background-color: #750f32;
}
[bg-color="orange"] {
  background-color: #ff9800;
}
[bg-color="orange 100"] {
  background-color: #ffe1b3;
}
[bg-color="orange 200"] {
  background-color: #ffcc80;
}
[bg-color="orange 300"] {
  background-color: #ffb74d;
}
[bg-color="orange 400"] {
  background-color: #ffa726;
}
[bg-color="orange 500"] {
  background-color: #ff9800;
}
[bg-color="orange 600"] {
  background-color: #e68900;
}
[bg-color="orange 700"] {
  background-color: #cc7a00;
}
[bg-color="orange 800"] {
  background-color: #b36a00;
}
[bg-color="orange 900"] {
  background-color: #995b00;
}
[bg-color="orange 1000"] {
  background-color: #804c00;
}
[bg-color="yellow"] {
  background-color: #ffeb3b;
}
[bg-color="yellow 100"] {
  background-color: #fffac5;
}
[bg-color="yellow 200"] {
  background-color: #fff69e;
}
[bg-color="yellow 300"] {
  background-color: #fff276;
}
[bg-color="yellow 400"] {
  background-color: #ffee58;
}
[bg-color="yellow 500"] {
  background-color: #ffeb3b;
}
[bg-color="yellow 600"] {
  background-color: #e6d435;
}
[bg-color="yellow 700"] {
  background-color: #ccbc2f;
}
[bg-color="yellow 800"] {
  background-color: #b3a529;
}
[bg-color="yellow 900"] {
  background-color: #998d23;
}
[bg-color="yellow 1000"] {
  background-color: #80761e;
}
[bg-color="green"] {
  background-color: #4caf50;
}
[bg-color="green 100"] {
  background-color: #cae8cb;
}
[bg-color="green 200"] {
  background-color: #a6d8a8;
}
[bg-color="green 300"] {
  background-color: #82c785;
}
[bg-color="green 400"] {
  background-color: #67bb6a;
}
[bg-color="green 500"] {
  background-color: #4caf50;
}
[bg-color="green 600"] {
  background-color: #449e48;
}
[bg-color="green 700"] {
  background-color: #3d8c40;
}
[bg-color="green 800"] {
  background-color: #357a38;
}
[bg-color="green 900"] {
  background-color: #2e6930;
}
[bg-color="green 1000"] {
  background-color: #265828;
}
[bg-color="cyan"] {
  background-color: #00bcd4;
}
[bg-color="cyan 100"] {
  background-color: #b3ebf3;
}
[bg-color="cyan 200"] {
  background-color: #80deea;
}
[bg-color="cyan 300"] {
  background-color: #4dd1e1;
}
[bg-color="cyan 400"] {
  background-color: #26c6da;
}
[bg-color="cyan 500"] {
  background-color: #00bcd4;
}
[bg-color="cyan 600"] {
  background-color: #00a9bf;
}
[bg-color="cyan 700"] {
  background-color: #0096aa;
}
[bg-color="cyan 800"] {
  background-color: #008494;
}
[bg-color="cyan 900"] {
  background-color: #00717f;
}
[bg-color="cyan 1000"] {
  background-color: #005e6a;
}
[bg-color="blue"] {
  background-color: #2196f3;
}
[bg-color="blue 100"] {
  background-color: #bde0fc;
}
[bg-color="blue 200"] {
  background-color: #91cbfa;
}
[bg-color="blue 300"] {
  background-color: #64b6f7;
}
[bg-color="blue 400"] {
  background-color: #42a6f5;
}
[bg-color="blue 500"] {
  background-color: #2196f3;
}
[bg-color="blue 600"] {
  background-color: #1e87db;
}
[bg-color="blue 700"] {
  background-color: #1a78c2;
}
[bg-color="blue 800"] {
  background-color: #1769aa;
}
[bg-color="blue 900"] {
  background-color: #145a92;
}
[bg-color="blue 1000"] {
  background-color: #114b7a;
}
[bg-color="indigo"] {
  background-color: #3f51b5;
}
[bg-color="indigo 100"] {
  background-color: #c6cbe9;
}
[bg-color="indigo 200"] {
  background-color: #a0a9db;
}
[bg-color="indigo 300"] {
  background-color: #7986cc;
}
[bg-color="indigo 400"] {
  background-color: #5c6bc0;
}
[bg-color="indigo 500"] {
  background-color: #3f51b5;
}
[bg-color="indigo 600"] {
  background-color: #3949a3;
}
[bg-color="indigo 700"] {
  background-color: #324191;
}
[bg-color="indigo 800"] {
  background-color: #2c397f;
}
[bg-color="indigo 900"] {
  background-color: #26316d;
}
[bg-color="indigo 1000"] {
  background-color: #20295b;
}
[bg-color="purple"] {
  background-color: #9c27b0;
}
[bg-color="purple 100"] {
  background-color: #e2bfe8;
}
[bg-color="purple 200"] {
  background-color: #ce94d8;
}
[bg-color="purple 300"] {
  background-color: #ba68c8;
}
[bg-color="purple 400"] {
  background-color: #ab47bc;
}
[bg-color="purple 500"] {
  background-color: #9c27b0;
}
[bg-color="purple 600"] {
  background-color: #8c239e;
}
[bg-color="purple 700"] {
  background-color: #7d1f8d;
}
[bg-color="purple 800"] {
  background-color: #6d1b7b;
}
[bg-color="purple 900"] {
  background-color: #5e176a;
}
[bg-color="purple 1000"] {
  background-color: #4e1458;
}
[bg-color="brown"] {
  background-color: #795548;
}
[bg-color="brown 100"] {
  background-color: #d7cdc9;
}
[bg-color="brown 200"] {
  background-color: #bdaba4;
}
[bg-color="brown 300"] {
  background-color: #a2887f;
}
[bg-color="brown 400"] {
  background-color: #8d6e63;
}
[bg-color="brown 500"] {
  background-color: #795548;
}
[bg-color="brown 600"] {
  background-color: #6d4d41;
}
[bg-color="brown 700"] {
  background-color: #61443a;
}
[bg-color="brown 800"] {
  background-color: #553b32;
}
[bg-color="brown 900"] {
  background-color: #49332b;
}
[bg-color="brown 1000"] {
  background-color: #3d2b24;
}
[bg-color="grey"] {
  background-color: #9e9e9e;
}
[bg-color="grey 100"] {
  background-color: #e2e2e2;
}
[bg-color="grey 200"] {
  background-color: #cfcfcf;
}
[bg-color="grey 300"] {
  background-color: #bcbcbc;
}
[bg-color="grey 400"] {
  background-color: #acacac;
}
[bg-color="grey 500"] {
  background-color: #9e9e9e;
}
[bg-color="grey 600"] {
  background-color: #8e8e8e;
}
[bg-color="grey 700"] {
  background-color: #7e7e7e;
}
[bg-color="grey 800"] {
  background-color: #6f6f6f;
}
[bg-color="grey 900"] {
  background-color: #5f5f5f;
}
[bg-color="grey 1000"] {
  background-color: #4f4f4f;
}
[bg-color="blue-grey"] {
  background-color: #607d8b;
}
[bg-color="blue-grey 100"] {
  background-color: #d0d9dd;
}
[bg-color="blue-grey 200"] {
  background-color: #b0bfc6;
}
[bg-color="blue-grey 300"] {
  background-color: #90a5ae;
}
[bg-color="blue-grey 400"] {
  background-color: #78909c;
}
[bg-color="blue-grey 500"] {
  background-color: #607d8b;
}
[bg-color="blue-grey 600"] {
  background-color: #56717d;
}
[bg-color="blue-grey 700"] {
  background-color: #4d646f;
}
[bg-color="blue-grey 800"] {
  background-color: #435861;
}
[bg-color="blue-grey 900"] {
  background-color: #3a4b53;
}
[bg-color="blue-grey 1000"] {
  background-color: #303f46;
}
[bg-color="dark"] {
  background-color: #404040;
}
[bg-color="dark 100"] {
  background-color: #707070;
}
[bg-color="dark 200"] {
  background-color: #666666;
}
[bg-color="dark 300"] {
  background-color: #5c5c5c;
}
[bg-color="dark 400"] {
  background-color: #4a4a4a;
}
[bg-color="dark 500"] {
  background-color: #404040;
}
[bg-color="dark 600"] {
  background-color: #3a3a3a;
}
[bg-color="dark 700"] {
  background-color: #303030;
}
[bg-color="dark 800"] {
  background-color: #202020;
}
[bg-color="dark 900"] {
  background-color: #161616;
}
[bg-color="dark 1000"] {
  background-color: #0d0d0d;
}
/* ------ Base & Require ------ */
.rc-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  border-radius: 20px 20px;
  border: 1px solid #bcbcbc;
  background-color: #bcbcbc;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
.rc-switch:after {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50% 50%;
  background-color: #ffffff;
  content: " ";
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
  -webkit-transform: scale(1);
  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
          animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-name: amSwitchOff;
  animation-name: amSwitchOff;
}
.rc-switch:hover:after {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
      transform: scale(1.1);
  -webkit-animation-name: amSwitchOn;
  animation-name: amSwitchOn;
}
.rc-switch-checked {
  border: 1px solid #64b6f7;
  background-color: #64b6f7;
}
.rc-switch-checked:after {
  left: 18px;
}
.rc-switch-disabled {
  cursor: no-drop;
}
.rc-switch-disabled:after {
  background: #9e9e9e;
  -webkit-animation-name: none;
  animation-name: none;
  cursor: no-drop;
}
.rc-switch-disabled:hover:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
      transform: scale(1);
  -webkit-animation-name: none;
  animation-name: none;
}
.rc-switch-label {
  display: inline-block;
  line-height: 20px;
  font-size: 14px;
  padding-left: 10px;
  vertical-align: middle;
  white-space: normal;
  pointer-events: none;
  -webkit-user-select: text;
  -moz-user-select: text;
   -ms-user-select: text;
       user-select: text;
}
@-webkit-keyframes amSwitchOn {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.25);
  }
  100% {
    -webkit-transform: scale(1.1);
  }
}
@keyframes amSwitchOn {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@-webkit-keyframes amSwitchOff {
  0% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes amSwitchOff {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}