File: resources/sass/field.scss

// Nova Tool CSS
.dot_off {
  height: 20px;
  width: 20px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
.dot_on {
  height: 20px;
  width: 20px;
  background-color: #58AC04;
  border-radius: 50%;
  display: inline-block;
}

input.green {
  position: relative;
  appearance: none; outline: none;
  width: 50px; height: 30px;
  background-color: #ffffff; border: 1px solid #D9DADC;
  border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff;
  transition-duration: 200ms;
}
input.green:after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 26px; height: 26px;
  background-color: transparent;
  border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
input.green:checked {
  border-color: #4ED164;
  box-shadow: inset 20px 0 0 0 #4ED164;
}
input.green:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input.blue {
  position: relative;
  appearance: none; outline: none;
  width: 50px; height: 30px;
  background-color: #ffffff; border: 1px solid #D9DADC;
  border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff;
  transition-duration: 200ms;
}
input.blue:after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 26px; height: 26px;
  background-color: transparent;
  border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
input.blue:checked {
  border-color: #2C9FFF;
  box-shadow: inset 20px 0 0 0 #2C9FFF;
}
input.blue:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input.orange {
  position: relative;
  appearance: none; outline: none;
  width: 50px; height: 30px;
  background-color: #ffffff; border: 1px solid #D9DADC;
  border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff;
  transition-duration: 200ms;
}
input.orange:after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 26px; height: 26px;
  background-color: transparent;
  border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
input.orange:checked {
  border-color: #FF5B2E;
  box-shadow: inset 20px 0 0 0 #FF5B2E;
}
input.orange:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input.cyan {
  position: relative;
  appearance: none; outline: none;
  width: 50px; height: 30px;
  background-color: #ffffff; border: 1px solid #D9DADC;
  border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff;
  transition-duration: 200ms;
}
input.cyan:after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 26px; height: 26px;
  background-color: transparent;
  border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
input.cyan:checked {
  border-color: #52b7d7;
  box-shadow: inset 20px 0 0 0 #52b7d7;
}
input.cyan:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input.red {
  position: relative;
  appearance: none; outline: none;
  width: 50px; height: 30px;
  background-color: #ffffff; border: 1px solid #D9DADC;
  border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff;
  transition-duration: 200ms;
}
input.red:after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 26px; height: 26px;
  background-color: transparent;
  border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
input.red:checked {
  border-color: #CE4646;
  box-shadow: inset 20px 0 0 0 #CE4646;
}
input.red:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input.custom-color {
  position: relative;
  appearance: none; outline: none;
  width: 50px; height: 30px;
  background-color: #ffffff; border: 1px solid #D9DADC;
  border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff;
  transition-duration: 200ms;
}
input.custom-color:after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 26px; height: 26px;
  background-color: transparent;
  border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
input.custom-color:checked {
  box-shadow: inset 20px 0 0 0;
}
input.custom-color:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}