Kitty Toggle

index.html

<section class="demo-container">
  <h1>Fish Toggle:</h1>

  <div class="fish-switch">
    <input type="checkbox" id="toggle" tabindex="1">
    <div class="fish"></div>
    <label for="toggle" class="well"></label>
    <span class="prompt">Should I evolve?</span>

    <div class="visible">      
      <div>
        <p>Nice choice, Moby D!</p>
        <p>Whales are super-better than fish. We live longer and have larger brains. Also, we can eat you -- but many of us don't, as our favorite food is microscopic shrimp. WHALE BOO-YAH FISHIES.</p>
        <p class="muted">a little play on the @nalayathree kitty-switch, who recommends you go to <a href="http://sassconf.com/">SassConf!</a> or, support me by tweeting your love to @a_fox_box</p>
      </div>
    </div>
  </div>

</section>

Kitty Toggle.markdown

Kitty Toggle

A simple checkbox toggle improved by being made into a cat.

Forked from Natalya's Pen Kitty Toggle.

A Pen by Fox Peterson on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,700);

$primary:  darken(lightblue, 29%);
$muted: lighten(gray, 33%);
$background: lighten(#3680e5, 2%);
$shadow: darken($background, 11%);

body {
  background-color: $background;
  font-family: "adonis-web",serif;
  font-style: normal;
  font-weight: 400;
  color: $primary;
}

section.demo-container {
  background-color: lighten(#36e5bd, 30%);
  display:block;
  margin: 100px auto;
  min-width: 300px;
  max-width: 500px;
  padding: 20px;
  -webkit-box-shadow: 1px 10px 20px 0px $shadow;
  -moz-box-shadow: 1px 10px 20px 0px $shadow;
  box-shadow: 1px 6px 10px 0px $shadow;
}

h1 {
  border-bottom: 1px solid lighten(blue, 11%);
  padding-bottom: 17px;
}

.muted, .muted a {
  color: $muted;
}

.visible {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 30px;
}

.fish-switch {
    width: auto;
    display: block;
    position: relative;
    margin: 30px 0px 20px 0px;
  
  .prompt {
    display: inline-block;
    margin-top: 10px;
  }

    .well {
        background: white;
        height: 20px;
        width: 65px;
        position: absolute;
        right: 50px; 
        top: 7px;
        border-radius: 10px;
        box-shadow: inset 0 2px 0 rgba(0,0,0,.1);
        border: 1px solid lighten($primary, 21%);
        cursor: pointer;
    }

    #toggle {
      opacity: 0;
      border: none;
      border-radius: 0;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        height: 29px;
        width: 140px;
        background: transparent;
        position: absolute;
        right: 0px;
        top: 3px;
        cursor: pointer;
        z-index: 100; 
        color: tranparent;

        &:after {
            content: '';
            background-color: transparent;
            height: 40px;
            width: 80px;
            position: absolute;
            left: 30px;
            top: -5px;
        }
      
      ~div.fish:before {
          content: "\01F420";
          position: absolute;
          right: 80px;
          top: -10px;
          font-size: 45px;
          z-index: 1;
         
          -moz-transition: all 0.25s ease-out;
          -webkit-transition: all 0.25s ease-out;
          -o-transition: all 0.25s ease-out;
          transition: all 0.25s ease-out;
      }

        &:checked {
            right: 0px;

            &:after {
                left: -80px;
            }
          
          ~div.fish:before {
            content: '\01F433';
            top: -10px;
            right: 41px;
          }

            ~div.visible {
                opacity: 1;
                max-height: 900px;
                overflow: visible;
            }
        }

        ~label {
            &:before {
                content: "No";
                position: absolute;
                color: $primary;
                left: -30px;
                top: 0px;
                font-size: 16px;
            }

            &:after {
                content: "Yes";
                position: absolute;
                color: $muted;
                left: 83px;
                top: 0px;
                font-size: 16px;
            }
        }

        &:checked~label {
            &:before {
                color: $muted;
            }
            &:after {
                color: $primary;
            }
        }
    }
}