Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
  input(type="checkbox" id="toggle")
  .circle1.circle
    span(class="the-sun")
    span(class="the-moon")
    .cat.cat1
      .head-color
        .head-left
        .head-right
      .face
        .left-eye.eyes
          .pupil
        .right-eye.eyes
          .pupil
        .nose
  .circle2.circle
    span(class="the-sun")
    span(class="the-moon")
    .cat.cat2
      .head-color
        .head-left
        .head-right
      .face
        .left-eye.eyes
          .pupil
        .right-eye.eyes
          .pupil
        .nose
  .circle3.circle
     span(class="the-sun")
     span(class="the-moon")
     .cat.cat3
       .head-color
         .head-left
         .head-right
       .face
         .left-eye.eyes
           .pupil
         .right-eye.eyes
           .pupil
         .nose
  .group
      .day-night-cont
        label(for="toggle")
        span(class="the-sun")
        .the-moon
          span(class="moon-inside")
      .switch
        .button
          .b-inside
              
            
!

CSS

              
                $eye-size: 40px
$eye1-color: #ccf4a6
$eye-color: #FFEE94
$eye3-color: #97bee2
$pupil-color: #FFB399
$pupil1-color: #555555
$pupil3-color: #777777
$nose-color: #FFB399
$body-color: white
$ears-color: #fcaf2a
$heads-color: #fcaf2a
$body2-color: #777777
$ears2-color: #777777
$heads2-color: #777777
$body3-color: #ffffff
$ears3-color: #ffffff
$heads3-color: #ffffff
$circle-background: #5ddfe8
*
  margin: 0px
  padding: 0px
  position: relative
  //border: 1px solid red
body
  background-color: #FFCFBF
  .container
    margin-top: 80px
    text-align: center
    .circle
      display: inline-block
      height: 235px
      width: 235px
      border-radius: 235px
      background-color: $circle-background
      overflow: hidden
      border: 8px solid #FFB399
      box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset
      margin-top: 20px
      margin-left: 20px
      transition: background 1s ease-in-out
      .the-sun
        position: absolute
        top: 18px
        height: 40px
        width: 40px
        background: #FFEE94
        border-radius: 100%
        margin: 0 auto
        box-shadow: 0px 0px 40px #FFEE94
        left: 130px
        transition: top .5s ease-in-out
      .the-moon
        position: absolute
        width: 24px
        height: 24px
        top: 200px
        left: 70px
        background: #EEE
        border-radius: 100%
        box-shadow: 0px 0px 20px #FFF
        transition: top .5s ease-in-out
      .cat
        //display: block
        background-color: $body-color
        height: 140px
        width: 135px
        position: absolute
        bottom: -20px
        margin: 0 50px
        transition: bottom 0.25s ease-in-out
        animation: upAndDown 2s ease-in-out infinite
        .head-color
          overflow: hidden
          height: 100%
          width: 100%
          .head-left
            width: 120px
            height: 120px
            border-radius: 60px
            background-color: $heads-color
            position: absolute
            top: -45px
            left: -70px
          .head-right
            width: 120px
            height: 120px
            border-radius: 60px
            background-color: $heads-color
            position: absolute
            top: -45px
            right: -70px
        .face
          height: 100%
          width: 100%
          position: absolute
          top: 0
          .eyes
            width: $eye-size
            height: $eye-size
            border-radius: $eye-size
            background-color: $eye1-color
            position: absolute
          .left-eye
            left: 12px
            top: 20px
          .right-eye
            right: 12px
            top: 20px
          .pupil
            background-color: $pupil1-color
            width: 5px
            height: 100%
            margin: 0px auto
            position: relative
            display: block
            border-radius: 100%
            //transition: width .5s ease-in-out
          .nose
            height: 8px
            width: 8px
            border-radius: 8px
            background-color: $nose-color
            top: 45px
            left: 63px
            margin: 0px auto
            position: absolute
      .cat:before,.cat:after
        content: ""
        width: 0px
        border-bottom: 20px solid $ears-color
        position: absolute
        top: -20px
        //overflow: visible
        display: block
      .cat:before
        left: 0px
        border-left: 0px solid transparent
        border-right: 30px solid transparent
      .cat:after
        border-left: 30px solid transparent
        border-right: 0px solid transparent
        right: 0px
    .group
      display: inline-block
      height: 50px
      width: 100%
      margin: 0px auto
      margin-top: 15px
      padding-left: 13px
      .day-night-cont 
        //position: absolute
        width: 180px
        height: 40px
        top: 0px
        margin: 0px auto
        //left: 50%
        label
          position: absolute
          //border: 1px solid red
          height: 40px
          width: 100px
          top: 0px
          left: 40px
          z-index: 9999
          cursor: pointer
        .the-sun
          position: absolute
          left: 10px
          top: 10px
          height: 20px
          width: 20px
          border-radius: 100%
          background: #FFEE94
          box-shadow: 0px 0px 40px #FFEE94
        .the-moon 
          position: absolute
          right: 10px
          top: 10px
          height: 20px
          width: 20px
          border-radius: 100%
          background: #EEE
          box-shadow: 0px 0px 20px #EEE
          // .moon-inside
          //   display: block
          //   position: absolute
          //   left: 48px
          //   height: 20px
          //   width: 20px
          //   border-radius: 100%
          //   background: #FFCFBF
      .switch 
        //position: absolute
        border-bottom: 1px solid #FFF
        border-radius: 25px
        background: #FFB399
        box-shadow: inset 0 0 10px #888888
        height: 40px
        width: 100px
        margin: 0px auto
        top: -40px
        //left: 50%
        .button
          position: absolute
          border-top: 1px solid #FFF
          border-bottom: 1px solid #AAA
          border-radius: 100%
          background: #FFCFBF
          height: 32px
          width: 32px
          top: 4px
          left: 4px
          box-shadow: 0 0 2px rgba(0,0,0,0.25)
          transition: left .25s ease-in-out   
  .container
    .circle1
      background-color: $circle-background
      .cat
        background-color: $body-color
        .head-color
          .head-left
            background-color: $heads-color
          .head-right
            background-color: $heads-color
        .face
          .eyes
            width: $eye-size
            height: $eye-size
            border-radius: $eye-size
            background-color: $eye1-color
          .pupil
            background-color: $pupil1-color
          .nose
            background-color: $nose-color
      .cat:before,.cat:after
        border-bottom: 20px solid $ears-color
      .cat:hover .eyes
        height: 8px
        border-radius: 100%
        width: 40px
        top: 30px
      .cat:hover .eyes .pupil
        background-color: $pupil1-color
        width: 5px
        height: 100%
        margin: 0px auto
        position: relative
        display: block
        border-radius: 100%
      .cat:hover
        display: block
        position: absolute
        cursor: pointer
        animation-play-state: paused
    .circle2
      background-color: $circle-background
      .cat
        background-color: $body2-color
        .head-color
          .head-left
            background-color: $heads2-color
          .head-right
            background-color: $heads2-color
        .face
          .eyes
            width: $eye-size
            height: $eye-size
            border-radius: $eye-size
            background-color: $eye-color
          .pupil
            background-color: $pupil-color
          .nose
            background-color: $nose-color
      .cat:before,.cat:after
        border-bottom: 20px solid $ears2-color
      .cat:hover .eyes
        height: 8px
        border-radius: 100%
        width: 40px
        top: 30px
      .cat:hover .eyes .pupil
        background-color: $pupil-color
        width: 5px
        height: 100%
        margin: 0px auto
        position: relative
        display: block
        border-radius: 100%
      .cat:hover
        display: block
        position: absolute
        cursor: pointer
        animation-play-state: paused
    .circle3
      background-color: $circle-background
      .cat
        //display: block
        background-color: $body3-color
        .head-color
          .head-left
            background-color: $heads3-color
          .head-right
            background-color: $heads3-color
        .face
          .eyes
            width: $eye-size
            height: $eye-size
            border-radius: $eye-size
            background-color: $eye3-color
          .pupil
            background-color: $pupil3-color
          .nose
            background-color: $nose-color
      .cat:before,.cat:after
        border-bottom: 20px solid $ears3-color
      .cat:hover .eyes
        height: 8px
        border-radius: 100%
        width: 40px
        top: 30px
      .cat:hover .eyes .pupil
        background-color: $pupil3-color
        width: 5px
        height: 100%
        margin: 0px auto
        position: relative
        display: block
        border-radius: 100%
      .cat:hover
        display: block
        position: absolute
        cursor: pointer
        animation-play-state: paused
        
input[type=checkbox] 
  position: absolute
  top: -9999px
  left: -9999px
input#toggle[type=checkbox]
  display:none

input[type=checkbox]:checked ~ .group .switch .button 
  position: absolute
  left: 64px
/* NIGHT ANIMATION */

input[type=checkbox]:checked ~ .circle
  background: #111
  
input[type=checkbox]:checked ~ .circle .the-sun
  top: 200px

input[type=checkbox]:checked ~ .circle .the-moon
  margin: 0 auto
  top: 40px
  left: 70px

input[type=checkbox]:checked ~ .circle .cat .eyes .pupil
  height: 90%
  width: 34px
  margin: 5% auto
 
input[type=checkbox]:checked ~ .circle .cat:hover .eyes 
  height: 8px
  border-radius: 100%
  width: 40px
  top: 30px

input[type=checkbox]:checked ~ .circle .cat1:hover .eyes .pupil
  background-color: $pupil1-color
  width: 5px
  height: 100%
  margin: 0px auto
  position: relative
  display: block
  border-radius: 100%
  
input[type=checkbox]:checked ~ .circle .cat2:hover .eyes .pupil
  background-color: $pupil-color
  width: 5px
  height: 100%
  margin: 0px auto
  position: relative
  display: block
  border-radius: 100%
  
input[type=checkbox]:checked ~ .circle .cat3:hover .eyes .pupil
  background-color: $pupil3-color
  width: 5px
  height: 100%
  margin: 0px auto
  position: relative
  display: block
  border-radius: 100%
  
@keyframes upAndDown 
  0% 
    bottom: -20px
  50% 
    bottom: -30px
  100% 
    bottom: -20px
  


              
            
!

JS

              
                
              
            
!
999px

Console