title: Pure CSS Modal in SASS
body: <p>I'm trying to recreate this pure CSS modal in SASS for my Rails app:</p>
  
  <p><a href="http://codepen.io/maccadb7/pen/nbHEg" rel="nofollow noreferrer">http://codepen.io/maccadb7/pen/nbHEg</a></p>
  
  <p>Here is my SASS</p>
  
  <pre><code>//
  // Variables
  // ----------------------
  
  $gray: #333
  $gray-light: #aaa
  $gray-lighter: #eee
  $space: 40px
  $blue: #428bca
  $blue-dark: darken($blue, 5%)
  
  // Mixin for transition/transform
  =translate($x, $y) 
    -webkit-transform: translate($x, $y)
    -ms-transform: translate($x, $y)
    transform: translate($x, $y)
  
  =transition($transition) 
    -webkit-transition: $transition
    transition: $transition
  
  =transition-transform($transition) 
    -webkit-transition: -webkit-transform $transition
    -moz-transition: -moz-transform $transition
    -o-transition: -o-transform $transition
    transition: transform $transition
  
  
  
  //
  // Btn 
  // ----------------------
  
  .mbtn
    background: $blue
    border: $blue-dark solid 1px
    border-radius: 3px
    color: #fff
    display: inline-block
    font-size: 14px
    padding: 8px 15px
    text-decoration: none
    text-align: center
    min-width: 60px
    position: relative
    transition: color .1s ease
    margin-bottom: 10px
    /* top: 40em;*/
  
    &amp;:hover
      background: $blue-dark
  
  
    &amp;.mbtn-big
      font-size: 18px
      padding: 15px 20px
      min-width: 100px
  
  
  
  .mbtn-close
    color: $gray-light
    font-size: 30px
    text-decoration: none
    position: absolute 
    right: 5px 
    top: 0
  
    &amp;:hover
      color: darken($gray-light, 10%)
  
  
  
  
  //
  // Modal
  // ----------------------
  
  .modal
  
  
    // This is modal bg
    &amp;:before
      content: ""
      display: none
      background: rgba(0,0,0,.6)
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 10
  
  
    &amp;:target
  
      // Active animate in modal
      &amp;:before
        display: block
  
      .modal-dialog
        +translate(0, 0)
        top: 20%
  
  // Modal Dialog
  // ----------------------
  
  .modal-dialog
    background: #fefefe
    //border: $gray solid 1px
    border-radius: 5px
    margin-left: -200px
    position: fixed
    left: 50%
    top: -100%  
    z-index: 11 
    width: 360px
    +translate(0, -500%)
    +transition-transform("3s, ease-out")
  
  
  .modal-body
    padding: $space/2
  
  
  .modal-header,
  .modal-footer
    padding: $space/4 $space/2
  
  
  .modal-header
    //border-bottom: $gray-lighter solid 1px
  
    h2
      font-size: 20px
  
  .modal-footer
    //border-top: $gray-lighter solid 1px
    text-align: right
  
  
  /*ADDED TO STOP SCROLLING TO TOP*/
  #close 
    display: none
  </code></pre>
  
  <p>Here is my HAML:</p>
  
  <pre><code>        %a.mbtn.mbtn-big{:href =&gt; "#modal-one"} Modal!
          #modal-one.modal{"aria-hidden" =&gt; "true"}
              .modal-dialog
              .modal-header
                  %h2 Modal in CSS?
                  %a.mbtn-close{"aria-hidden" =&gt; "true", :href =&gt; "#close"} ×
                  / CHANGED TO "#close"
              .modal-body
                  %p One modal example here! :D
              .modal-footer
                  %a.mbtn{:href =&gt; "#close"} Nice!
                  / CHANGED TO "#close"
  </code></pre>
  
  <p>For some reason <code>"aria-hidden" =&gt; "true"</code> is not being honored and the modal is visible in addition to button when the page loads. I have included an image below:</p>
  
  <p><img src="https://i.stack.imgur.com/gVLAk.png" alt="enter image description here"></p>
  
  <p>When I click the modal button the page darkens and I am unable to click any elements on the page. All help is appreciated, I'm not sure where I went wrong here. Thanks!</p>