@fishtank/fishtank-vue/dist/styles/input-switch.css

Fish Tank VueJS Component Module

body.user-is-tabbing input:focus + .ft-input-checkbox-wrap {
  box-shadow: 0 0 0 2px #0D9DDB; }

.ft-switch .ft-input-checkbox-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  position: relative;
  font-family: open sans, arial, sans-serif;
  display: block; }

.ft-switch {
  width: 100%;
  position: relative;
  padding: 6px 0; }

.ft-switch input {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0;
  margin: 0px;
  top: 0;
  left: 0;
  display: block; }

.ft-switch > label {
  top: 0px;
  color: #505558; }

.ft-switch:hover > label {
  color: #292E31;
  cursor: pointer; }

.ft-switch .ft-input-checkbox-wrap {
  width: 33px;
  height: 18px;
  background-color: #9EA3A6;
  border-radius: 10px;
  border: 1px solid #777C7F;
  float: right; }

.ft-switch input:disabled ~ .label-content {
  color: #C5CACD;
  cursor: default; }

.ft-switch input:disabled + .ft-input-checkbox-wrap {
  background-color: #EDF2F5;
  border: 1px solid #C5CACD; }

.ft-switch .ft-input-checkbox-target {
  background-color: #EDF2F5;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #C5CACD;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  top: -1px;
  left: -2px; }

.ft-switch input:disabled + .ft-input-checkbox-wrap .ft-input-checkbox-target {
  background-color: #EDF2F5;
  border: 1px solid #C5CACD;
  box-shadow: none; }

.ft-switch .ft-input-checkbox-target:after {
  display: block;
  content: ' ';
  position: relative;
  width: 6px;
  height: 6px;
  background-color: #0D9DDB;
  border-radius: 50%;
  top: 6px;
  left: 6px; }

.ft-switch .ft-input-checkbox-label:after {
  display: block;
  clear: both;
  content: ''; }

.ft-switch input:disabled + .ft-input-checkbox-wrap .ft-input-checkbox-target:after {
  background-color: #C5CACD; }

.ft-switch input:disabled:checked + .ft-input-checkbox-wrap {
  background-color: #EDF2F5;
  border: 1px solid #C5CACD; }

.ft-switch input:checked + .ft-input-checkbox-wrap {
  background-color: #0D9DDB;
  border: 1px solid #0A7DAF; }

.ft-switch input + .ft-input-checkbox-wrap .ft-input-checkbox-target {
  transform: translateX(0px);
  transition: all 0.3s ease; }

.ft-switch input:checked + .ft-input-checkbox-wrap .ft-input-checkbox-target {
  transform: translateX(17px);
  transition: all 0.3s ease; }