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

              
                <div class="modal">
        <!--
        --    Modal trigger & modal overlay
        --    You don't have to change these guys, but they're
        --    required for the modal to work. Specially the
        --    modal-trigger should be placed at very top.
        -->
        <input type="checkbox" class="modal-trigger" id="modal">
        <label class="modal-overlay" for="modal"></label>

        <!--
        --      Button
        --      This is the button which will trigger the modal
        --      to open. It has to be a label tag but you can
        --      specify a class to style it as you wish.
        -->
        <label class="button" for="modal">
            Click to open
        </label>

        <!--
        --      Modal window
        --      This is where your content goes and will appear
        --      once the modal state is changed. Add your
        --      content inside the modal-container tag.
        -->
        <div class="modal-container">
          
            <!-- Start content -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        Lorem ipsum dolor sit amet
                    </h3>
                </div>
                <div class="card-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Accusantium, blanditiis commodi exercitationem, explicabo
                  fugit in, ipsum iure laborum molestiae nemo nisi
                  praesentium quia quidem recusandae sequi
                  soluta veniam vitae voluptatibus!
                </div>
                <div class="card-footer">
                    <label for="modal" class="item action">
                      Close
                    </label>
                </div>
            </div>
            <!-- End content -->
          
        </div>
    </div>
              
            
!

CSS

              
                /**
*   Modal window
*   Css only clever modal window.
*
*   @class     .modal
*   @children  .modal-trigger, .modal-overlay, .modal-container
*   @states    :checked
*/
.modal {

  /**
  *   Overlay color
  *   Sets the color of the overlay layer
  *
  *   @var    $overlay-color
  */
  $overlay-color = #000000;

  /**
  *   Transition
  *   Sets a simple fade-in transition between
  *   the modal's active and inactive
  *   states.
  *
  *   @var    $transition
  */
  $transition = opacity .3s;

  /**
  *   Modal wrapper
  *   This styles the tag which will wrap the
  *   collection of tags related to the
  *   modal window.
  *
  *   @selector  .modal
  */
  & {
    display inline-block
  }

  /**
  *   Modal trigger
  *   This is a hidden checkbox which is used to
  *   tell the browser whether the modal is
  *   active or not.
  *
  *   @selector  .modal > .modal-trigger
  */
  & > .modal-trigger {
    display none
  }

  /**
  *   Modal overlay
  *   This is the overlay layer which is used
  *   to shade the content and give focus
  *   to the modal content.
  *
  *   @selector  .modal > .modal-trigger ~ .modal-overlay
  */
  & > .modal-trigger ~ .modal-overlay {
    top 0
    left 0
    opacity 0
    width 100%
    height 100%
    z-index 100
    position fixed
    visibility hidden
    transition $transition
    background-color rgba($overlay-color, .50)
  }

  /**
  *   Modal container
  *   This is the container which will hold the modal
  *   content. It will appear centered on the
  *   screen.
  *
  *   @selector  .modal > .modal-trigger ~ .modal-container
  */
  & > .modal-trigger ~ .modal-container {
    top 50%
    left 50%
    opacity 0
    z-index 110
    position fixed
    visibility hidden
    transition $transition
    transform translate(-50%, -50%)
  }

  /**
  *   Active modal
  *   This styles the active state of the modal window,
  *   making both the overlay and the modal content
  *   visible to the user.
  *
  *   @state      :checked
  *   @selector   .modal > .modal-trigger:checked
  *   @sibling    .modal-overlay, .modal-container
  */
  & > .modal-trigger:checked {
    & ~ .modal-overlay, & ~ .modal-container {
      opacity 1
      visibility visible
    }
  }

}

/** END OF MODAL **/

/**
*    Stuff you don't need
*    This is not necessary. Just something to make the modal
*    content and button look less bad.
*/
html, body {
  height 100%
  display flex
  align-items center
  justify-content center
}

.button {
  color white
  cursor pointer
  line-height 3rem
  border-radius 4px  
  padding 1rem 3rem
  background-color #311b92
  
  &:hover {
    background-color #7c4dff
  }
}

.card {
  overflow hidden
  border-radius 4px
  background-color white
  
  & .card-header, & .card-body {
    padding 1rem 2rem
  }
  
  & .card-footer {
    display flex
    align-items center
    justify-content center
    
    & .item {
      flex 1
      padding 1rem
      text-align center
      
      &.action {
        cursor pointer
        &:hover {
          background-color darken(white, 20%)
        }
      }
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console