Good Fast Cheap

good-fast-cheap.markdown

Good Fast Cheap

A Pen by Xpazeman on CodePen.

License.

index.html

<div>
  <span class="label">Good</span><br />
  <span class="checkbox">
            <input type="checkbox" id="good">
            <label data-on="YES" data-off="NO"></label>
        </span>
</div>
<div>
  <span class="label">Cheap</span><br />
  <span class="checkbox">
            <input type="checkbox" id="cheap">
            <label data-on="YES" data-off="NO"></label>
        </span>
</div>
<div>
  <span class="label">Fast</span><br />
  <span class="checkbox">
            <input type="checkbox" id="fast">
            <label data-on="YES" data-off="NO"></label>
        </span>
</div>

script.js

$(document).ready(function() {
  var good = false,
    cheap = false,
    fast = false;
  $("#good").on("click", function() {

    if (!$("#good").is(":checked")) {
      good = false;
    } else {
      good = true;
      if (fast && cheap) {
        fast = false;
        $("#fast").prop('checked', false);
      }
    }
  });

  $("#cheap").on("click", function() {
    if (!$("#cheap").is(":checked")) {
      cheap = false;
    } else {
      cheap = true;
      if (fast && good) {
        good = false;
        $("#good").prop('checked', false);
      }
    }
  });

  $("#fast").on("click", function() {
    if (!$("#fast").is(":checked")) {
      fast = false;
    } else {
      fast = true;
      if (cheap && good) {
        cheap = false;
        $("#cheap").prop('checked', false);
      }
    }
  });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body {
  background: #bdbdc7;
  margin: 0 0;
  padding: 70px 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
}

.checkbox {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 60px;
  height: 30px;
  background-color: #484850;
  overflow: hidden;
  box-shadow: inset 0 10px 25px rgba(0, 0, 0, .5), 0px 1px 2px #fff;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin: 10px;
}

.checkbox input {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: 2;
}

.checkbox label {
  background-color: #151b29;
  background-image: -webkit-linear-gradient(-40deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(-40deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(-40deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(-40deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(-40deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.7);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  display: inline-block;
  width: 30px;
  text-align: center;
  font: bold 10px/28px Arial, Sans-Serif;
  color: #999;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-transition: margin-left 0.2s ease-in-out;
  -moz-transition: margin-left 0.2s ease-in-out;
  -ms-transition: margin-left 0.2s ease-in-out;
  -o-transition: margin-left 0.2s ease-in-out;
  transition: margin-left 0.2s ease-in-out;
  margin: 1px;
}

.checkbox label:before {
  content: attr(data-off);
}

.checkbox input:checked + label {
  margin-left: 29px;
  /* green when 'on' 
          background-color: #429f21;
          */
  /* blue when 'on' */
  background-color: #0088cc;
  color: white;
}

.checkbox input:checked + label:before {
  content: attr(data-on);
}