// BUTTONS --------------------------------

.modal-buttons.center-y
  a.modal-btn(href="#modal-simple") Modal Simple
  a.modal-btn(href="#modal-simple--offClickClose") Modal Simple<br>(off-modal click to close)
  a.modal-btn(href="#modal-withOverlay") Modal with Overlay
  a.modal-btn(href="#modal-withOverlay--offClickClose") Modal with Overlay<br> (off-modal click to close)
  
// CLOSE ICON 
mixin closeIcon
  svg.icon.iconClose(viewBox="0 0 32 40")
    path(d="M16,0C7.163,0,0,7.163,0,16s7.163,16,16,16s16-7.163,16-16S24.837,0,16,0z M22.717,21.304l-1.414,1.414L16,17.414   l-5.303,5.304l-1.414-1.414L14.586,16l-5.303-5.304l1.414-1.414L16,14.586l5.303-5.304l1.414,1.414L17.414,16L22.717,21.304z")


// MODALS --------------------------------

#modal-simple.modal-target
  .modal.center-x.center-y
    a.modal-close(href="#"): +closeIcon
    .modal-heading Simple Modal
    .modal-body
      p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.

#modal-simple--offClickClose.modal-target
  a.offModal-close(href="#")
  .modal.center-x.center-y
    a.modal-close(href="#"): +closeIcon
    .modal-heading Simple Modal
    .modal-body
      p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.

#modal-withOverlay.modal-target.modal-withOverlay
  .modal.center-x.center-y
    a.modal-close(href="#"): +closeIcon
    .modal-heading Modal with Overlay
    .modal-body
      p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.

#modal-withOverlay--offClickClose.modal-target.modal-withOverlay
  a.offModal-close(href="#")
  .modal.center-x.center-y
    a.modal-close(href="#"): +closeIcon
    .modal-heading Modal with Overlay
    .modal-body
      p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.

// DESCRIPTION --------------------------------

.description.center-y
  p Modals with no JavaScript.
  .h3 How?
  p Via the `:target` css pseudo selector.
  .h3 Why?
  p Simplicity.<br>No need to manually toggle classes and maintain state.
  
View Compiled
$green = #389E5A

/*
Core focus-of-pen Styles
ie: The styles important for understanding this pen
*/

.modal-target, 
.modal
  // effectively "turns off" the modal  
  opacity: 0
  visibility: hidden


// Effectively "turns on" the modal when its target is active.
.modal-target:target
  opacity: 1
  visibility: visible
  .modal
    opacity: 1
    visibility: visible

// For Smooth open/close
.modal
  transition: opacity .3s ease

/* 
Styles that are not 
explicitly related to the learning 
topic of this pen.
*/

.modal
  padding: 15px 30px
  color: white
  max-width: 400px
  width: 100%
  background: $green
  position: fixed
  z-index: 500


// OVERLAY
.modal-withOverlay
  &:before
    content: ''
    width: 100vw
    height: 100vh
    z-index: 400
    background: rgba(black, 0.8)
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
.offModal-close
  z-index: 450
  width: 100%
  height: 100%
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0

.modal-close
  position: absolute
  top: -7px
  right: -10px

.modal-btn
  display: block
  background: $green
  padding: 10px 15px
  margin-bottom: 1rem
  text-align: center
  &:hover 
    background: darken(@background, 7)
    color: inherit    
// button wrapper
.modal-buttons
  max-width: 250px
  width: 100%

/* 
General Page Styles
*/

html
  box-sizing: border-box
  color: white
  background: #009ed8
  font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 500
  
*, *:before, *:after 
  box-sizing: inherit
  color: inherit  

a 
  text-decoration: none
  &:hover 
    color: darken(white, 17)

.description
  font-size: 28px
  width: 70%
  margin-left: 300px
  color: black
    
.iconClose
  width: 30px
  height: @width
  fill: white
  &:hover 
    fill: darken(white, 7)
  
/*  
Immutable Helpers
*/

.center-x  
  left: 0
  right: 0
  margin-left: auto
  margin-right: auto
  position: absolute
.center-y  
  top: 50%
  transform: translateY(-50%)
  position: absolute  
.center-text
  text-align: center
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.